Beste Leden,

Gister me eerste base/slice gedaan. De CSS en HTML is volgens mij aardig correct.
Ik zie alleen met 1 probleem. Het blok na de 'teller' lijnt achter de teller uit, maar moet op een nieuwe regel.

http://alturl.com/2adk3

Graag ontvang ik ook eventuele tips over de codering.

Achter <div id="tellerbox"></div>

Dit neerzetten.

<div style="clear:both;"></div>

Dan zal die eronder schieten als ik het zo goed heb.

bij mij (in Firefox) staat het helemaal scheef en door elkaar. Klopt toch nog niet helemaal.

Tnx Dennis.

Ik heb ook even een 'container' om de onderste 3 blokken gemaakt is dit correct? zodat ik niet 3 divjes hoefte te voorzien van een margin-top.

@ Tim, hier in IE9 staat hij nu goed, afgezien van de tekst.
Heb hem ook even in FF en Chrome bekijken, hier word hij niet goed weergeven.

Wellicht iemand tips hiervoor?

rightblock "float:left" meegeven. die lege div met clear both verwijderen en die eigenschap meegeven aan de div "opening".

Er zijn nog wel wat meer fouten in de css aanwezig.

#rightblock heeft momenteel geen float (hij staat dus momenteel bij mij onder "leftblock")
Je bovenste 3 blokken hebben ook allemaal een vaste hoogte. Hierdoor kan je niet alle tekst lezen in de eerste blok. Je kan dit aanpassen door de hoogte te verwijderen, of een verticale scrollbar toe te voegen (overflow-y:scroll;)

Onderaan loopt de achtergrondkleur (oranje) niet door over heel de blok. Background-repeat op repeat of repeat-y zetten.

Daarna zal je nog met een probleempje van de afbeelding (tot de opening) en de teller zelf zitten. Ik zou je aanraden om een algemene wrapper te gebruiken (div class="wrapper") rond heel je site en deze een vaste breedte meegeven. Dan kan je alle div's in deze wrapper een float meegeven en zal het gemakkelijker zijn om het probleem met de afbeelding en de teller op te lossen.

Als je nog meer vragen hebt, dan laat je het maar weten.

Thomas

@Thomas, bedankt voor de post.

Ik heb alle punten aangepakt. Ik zie dat hij in Ie en chrome nu hetzelfde is dat is dus mooi.
- teksten pak ik later even aan, als de layout goed staat.
- blokken zijn nu correct
- zit idd nog even met de afbeelding en de teller.
- wrapper aangemaakt en deze 980px meegegeven. Zie dat hij niet helemaal tegen het bovenstuk aan zit even als in het midden, hier in de wrapper padding-top:0px?

Hartelijk bedankt alvast. Leer er veel van.

Elke webbrowser heeft ook zijn eigen standaardwaardes voor bepaalde margins/paddings. Bij chrome is het bv. 8px margin op de body. Voeg dus in je css margin:0; toe op je body.

Dan ga je nog steeds plaats zien bovenaan.
Omdat alle blokken ongeveer een float hebben, sluiten deze mooi bij elkaar aan. Maar de #opening heeft geen float. Hierdoor ziet je browsers dit "bovenaan" staan. Als je de margin-top weghaalt of een float meegeeft op #opening zal je het verschil zien.

Als je je volledige site dan ook nog eens horizontaal wilt centreren, moet je op je wrapper de volgende margin meegeven. margin:0 auto; Dit wilt zeggen dat je boven en onder geen margin meegeeft en links en rechts automatisch zodat hij zal centreren op de pagina.

Thomas

haha, je maakt mijn ochtend weer goed.

<div class="clear:both;"> Gaat uiteraard niet werken. Maak er dan tenminste style van of nog beter:

CSS:

Code:

.cleardiv {clear: both;}

HTML:

Code:

<div class="cleardiv">

@ Arno, haha daar ben ik blij om.
Was inderdaad een slorig foutje.

Volgens mij klopt alles zo wel, alleen zit ik nog een beetje met de tekst.
In het 'ontwerp' staan blok 1, 2 en 3 gelijk. Er is volgens mij iets dat de Div zich automatisch mee trekt met de tekst. Wat gebeurt er dan met de rest van de blokken?

Alle posters hartelijk bedankt! Ben er voor de eerste keer basen iig erg pleased mee.

bij basing is het de bedoeling dat je zo weinig mogelijk plaatjes gebruikt om de page-speed optimaal te houden. Nu gebruik je voor al die blokken een achtergrondplaatje. Verander die plaatjes in een achtergrondkleur, scheelt je weer wat kb's om te laden ;)

Daarnaast blijft de inhoudt van zo'n blok dan ook gewoon netjes binnen het blok. Als je bijvoorbeeld naar het block #leftblockfooter kijkt zie je dat de tekst er aan de onderkant uit steekt..

En nog een puntje, ik zou die clear div gewoon weg laten. Voeg gewoon een clear:both; toe aan het element wat normaal onder die clear div hangt, dan bereik je hetzelfde en heb je weer minder html :)

Bedankt voor de tip. Dat ga ik toepassen.

Omdat ik meer wil toepassingen in CSS heb ik juist gekozen om er wel een gifje van te maken en die te repeaten. Bij deze layout word het niet gebruikt maar veel layouts hebben wel een gradient, vandaar.

Zoek dus nog het antwoord over hoe ik het automatisch kan meetrekken.

in css3 is dat wel mogelijk (meerekken van de gradient) als ik het goed heb.

Wil je dit browserbreed doen dan maak je gewoon het gradient plaatje dat je wilt die repeat je horizontaal. als reguliere achtergrondkleur geef je de betreffende div de kleur waarmee je gradient onder eindigt (mits de gradient verticaal is en niet diagonaal oid dan moet je het anders oplossen)

Als je even hoge kolommen wilt maken met achtergrondkleuren, zal je een beetje moeten valsspelen. Dit kan op enkele manieren.

Hieronder is er 1 van.

<div class="total">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>

.a,.b,.c{float:left; width:100px; margin-bottom:-600px;padding-bottom:600px;}
.a{background:blue;}
.b{background:red;}
.c{background:orange;}
.total{overflow:hidden;}

Door de extra padding en omgekeerde margin lijken alle kolommen al langer.
Als je dan op de container rond de divs een overflow hidden opzet, zie je alleen maar de hoogtee van de langste kolom.

Het is aardig gelukt. Mijn aller laatste vraag voor vandaag.

In IE pakt hij de hoogte van de bg goed. Maar in Chrome stopt hij het blok als de tekst is afgelopen.
Hoe los je dit op?