Container over de hele pagina heen. Op elke resolutie?

[JeroenHulshof]

Hallo,

Ik wil dat mijn container over de hele pagina is. Zodat, alles wat ik in de container zet, op elke resolutie het zelfde lijkt.
Echter heb ik geen idee hoe ik dit moet doen. Ik zit de heletijd te *****n met margin, width en height. Als het lukt, en ik plaats wat in de container, bijvoorbeeld een balk van 500px, dan is het op mijn eigen scherm precies goed, maar op een scherm van 17 inch, veel kleiner.

Weten jullie hoe ik dit moet doen?


jeroen hulshof.

 

[bron]

Je kunt met percentages werken.

<div id="container">
  <div id="links">
    Linker tekst
  </div>
  <div id="rechts">
    Rechter tekst
  </div>
</div>

#container {
  width:100%; height:100%; font: normal 14px arial;
}
#links {
  float:left; width:50%; background:#f0f;
}
#rechts {
  float:left; width:50%; background:#ff0;
}

 

[JeroenHulshof]

Hallo Bron, kan ik dan nog wel gewoon margin left, top, right, bottom en padding gebruiken? En moet in de container geen margin: 0px auto; ?

 

[bron]

margin en padding dan wel in percentages. Dit werkt trouwens erg goed op schermen met verschillende resolutie.
En je moet width en height aanpassen aan margin/padding.

margin: 0px auto; heeft weinig zin omdat de container 100% is.
Als de container kleiner is (bijvoorbeeld 80%), dan wordt hij met margin: 0px auto; horizontaal gecentreerd.

 

[JeroenHulshof]

Het werkt, ik heb een balkje aangemaakt, en op beide schermen (13' en 17') zijn ze het zelfde. Alleen nu zit ik met het volgende probleem, Als ik de balk wat groter wil hebben, dan kan dat niet, ookal doe ik height: 20%.

Ik neem aan dat pixels nu niet meer werken?

Live voorbeeld op http://www.endercraft.nl/ec.

 

[bron]

Maak het jezelf makkelijk met .nav class voor ieder menu.
Wijzig in je html het volgende : <ul class="nav">

/* universele nav class. niet wijzigen! cross-browser. */
.nav, .nav ul, .nav li {margin:0;padding:0;list-style-type:none;}
.nav {position:relative;z-index:597;float:left;}
.nav li {float:left;line-height:1em;vertical-align:middle;}
.nav li:hover {position:relative;z-index:599;cursor:default;}
.nav a, .nav span {display:block;text-decoration:none;}
.nav ul {visibility:hidden;position:absolute;top:100%;left:0;z-index:598;margin-top:0;}
.nav ul li {float:none;}
.nav ul ul {top:1px;left:99%;}
.nav li:hover > ul {visibility:visible;}

body {
  background-color: #fff;
}
#container {
  width:auto; /* resize en zoom werken hierdoor beter */
  height:100%;
  font: normal 14px arial;
}
#navigation {
  width: 100%;
  background: #2b68b6;
}
#navigation .nav a {
  padding: 5px 10px 8px 10px; /* hier afmeting bepalen + tekst centreren */
  font: normal 15px georgia, "roboto", sans-serif;
  color: #000;
}
#navigation .nav a:hover {
  color: #fff;
}

 

[JeroenHulshof]

Hartelijk dank Bron! Ik ga het vanmiddag even bekijken, je hoort van me zodra ik het is gelukt!