Volledige breedte CSS vraagjes

Status
Niet open voor verdere reacties.

gast0445

Gebruiker
Lid geworden
22 apr 2007
Berichten
97
Hallo,

Ik ben momenteel bezig met een modern ontworpen webpage, en ik heb een paar CSS vragen over m'n projectje.

Het eerste element van elk gedeelte is een horizontale strook over de gehele breedte, met een achtergrond kleur of img. De hoogte is niet gespecifiseerd, gezien hij automatisch de hoogte van het child-element aan moet nemen. Dit achtergrond element heeft een top en bottom padding van (in dit voorbeeld) 20px.

HTML:
<div class="background">
</div>

Het child-element van dit achtergrond element is een container met een vaste breedte van (in dit voorbeeld) 1000px. De L en R margin's van dit element staat op 'auto', dus word automatisch gecentreerd.
HTML:
<div class="background"
    <div class="container">
    </div>
</div>

Mijn vragen zijn:

1. Hoe maak ik de hoogte van DIV:container net zo groot dat de inhoud van het child-element?
- En dus ook de hoogte van DIV:background meeneemt.

2. Hoe plaats ik het beste elementen in de container?
- Zoals een logo uitgelijnd aan de linker bovenhoek, of een menu uitgelijnd aan de rechter onderkant, of plaatsen per pixel afstand, etc.

3. Nog tips om de toegankelijkheid voor mobiele of tablet gebruikers te verbeteren?
 

Bijlagen

  • Website container placing.png
    Website container placing.png
    29 KB · Weergaven: 42
1. Als het niet anders kan kun je clearb (na de laatste child) of clearfix (parent) gebruiken.
Code:
html body .clearb {
  background: none; border: 0; clear: both; display: block; float: none; margin: 0; padding: 0;
  font-size: 0; position: static; overflow: hidden; visibility: hidden; width: 0; height: 0;
}
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}

<div class=".....  clearfix">
   ...
</div>
<div>
   ...
   <div class="clearb"></div>
</div>
2. De parent om de positie en grootte te bepalen. De child om de opmaak te geven.
Ik zelf heb de voorkeur om floats links tegen elkaar aan te laten leunen (in plaats van linker en rechter float)
Ik gebruik steeds vaker een percentage in de breedte en px/em in de hogte.

3. Vanaf het begin phone/tablet in je ontwerp meenemen. Zo maar wat gedachten
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan