[css] onnauwkeurig layout

Status
Niet open voor verdere reacties.
T

timboiscool

Gebruiker
Lid geworden
27 nov 2008
Berichten
205
Hoi lezers!

Ik ben slecht met css maar ik heb toch wel een layout nodig voor mijn site!
Dus ik heb snel wat tutorials gekeken en dit gemaakt dit bij elke pagina verschilt de pixels(denk ik) want bijv. bij pagina 1 staat alles perfect en dan bij pagina 2 staat wat tekst en het staat meteen weer verkeerd!

ik weet niet of dit kan maar je screen width pakken en dan met procenten en alles zorgen dat het goed blijft staan?

hier is de source:

Code: 
#container {

width: 1000px;

}

#information{

margin: left;
height: 749px;
width: 900px;
background-color: blue;
border: 2px solid #000000;

}

#user {

float: right;
text-align: center;
width: 200px;
height: 750px;
background-color: orange;
border: 2px solid #000000;
border-bottom: 1px solid #000000;

}

#footer{

margin: auto;
width: 996px;
height: 20px;
background-color: blue;
border: 2px solid #000000;
clear: both;
}


EDIT:

Zo hoort 't er uit te zien en zo wil ik 't ook: (snelle ff gemaakt :p)

FTnPw.png
 
Laatst bewerkt:
ik zal nie met px werken maar met % als iemand een andere resolutie heeft blijft het er net uitzien.
 
ik zal nie met px werken maar met % als iemand een andere resolutie heeft blijft het er net uitzien.
Klik om te vergroten...
Mmm, als je pas begint met css, zou ik niet meteen een "liquid layout" gaan maken, die zich altijd aan de schermbreedte aanpast. Dat kan wel eens pittig ingewikkeld worden. Zie bv. http://home.tiscali.nl/developerscorner/gigastyle/gigastyle-index.html en wat daar aan stylesheet bij hoort.

Code: 
#container   { width: 1000px; }
#information { width:  900px; }
#user        { width:  200px; }
Nauwkeurigheid: de breedte van de content plus die van de sidebar mag niet groter zijn dan de breedte van de pagina. :p
Beter iets langzamer en goed, dan ff snel en fout. :)

Ik zou eens beginnen met een vaste breedte van 990px, en die gecentreerd op het scherm zetten. Dat ziet er ook goed uit op alle resoluties.
En de blokjes correct neerzetten.
HTML: 
...
</head>
<body>
   <div id="content">
      <p>Dit is het content-blok</p>
   </div>
   <div id="sidebar">
      <p>Dit is de sidebar</p>
   </div>
   <div class="clearB"><!-- dit is om de #footer eronder te krijgen --></div>
   <div id="footer">
      <p>Ik ben de footer</p>
   </div>
</body>
</html>
Met als css:
Code: 
html {
   height: 100%;
   padding-bottom: 1px; /* scrollbar-ruimte voor Firefox en Chrome */
   }
body {
   width: 990px;
   margin: 10px auto;
   border: 1px dotted fuchsia;
   }
#content {
   float: left;
   width: 750px;
   height: 450px; /* tijdelijk! moet er later uit */
   border: 1px solid red;
   }
#sidebar {
   float: right;
   width: 220px;
   height: 300px; /* tijdelijk! moet er later uit */
   border: 1px solid blue;
   }
#footer {
   border: 1px solid green;
   }
.clearB {
   clear: both;
   }
p {
   margin: 0;
   padding: 0;
   }
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan