Layers nesten

Status
Niet open voor verdere reacties.
K

Kevin We

Gebruiker
Lid geworden
8 sep 2005
Berichten
119
Hallow allemaal

Ik ben aan een ontwerpje bezig voor een nieuwe website. Nu was ik met layers aan het werken en kwam ik tot een nogal rare opmerking:

Klik hier

De 3 getekende layers staan nu op allerlei verschillende hoogtes, terwijl dit de bedoeling was om ze allemaal op één hoogte te hebben staan. Namelijk 2% van de grijze rand.

Ik heb mijn opmaak volledig gemaakt met CSS. Hieronder kunnen jullie hem even bekijken.


Is er iemand die mij een handje kan toesteken om deze layers op dezelfde hoogte te krijgen? :D thx alvast!


edit: dit is de "slechte versie"
dit is een tekening van wat ik zou willen bekomen


PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#CenterLayer {
	position:absolute;
	width:90%;
	z-index:1;
	background-color: #EEF2c2;
	margin-top: 30px;
	margin-right: 5%;
	margin-left: 5%;
}
body {
	background-color: #444444;
}
#CenterLayer .Sponsers {
	background-color: #ebf29d;
	width: 20%;
	margin-top: 2%;
	margin-left: 2%;
	border: 1px solid #000000;
	height: 200px;
}
#CenterLayer .Welkom {
	background-color: #ebf29d;
	margin-top: 2%;
	margin-left: 24%;
	border: 1px solid #000000;
	height: 250px;
	width: 45%;
}
#CenterLayer .Competitie {
	background-color: #ebf29d;
	width: 27%;
	margin-top: 2%;
	margin-left: 71%;
	border: 1px solid #000000;
	height: 300px;
}


-->
</style>
</head>

<body>
    <div id="CenterLayer">
	  <div class="Welkom">Content for  class "Welkom" Goes Here</div>
      <div class="Sponsers">Content for  class "Sponsers" Goes Here</div>
	  
      <div class="Competitie">Content for  class "Competitie" Goes Here</div>
    </div>
  </div>
</div>
</body>
</html>
 
Laatst bewerkt:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#CenterLayer {
    position:absolute;
    width:90%;
    z-index:1;
    background-color: #EEF2c2;
    margin-top: 30px;
    margin-right: 5%;
    margin-left: 5%;
}
body {
    background-color: #444444;
}

.welkom 
{
     background-color: #ebf29d;
    border: 1px solid #000000;
    width: 200px;
    height: 200px;
    float:left;
   }
   
.sponsers
 {
    background-color: #ebf29d;
    border: 1px solid #000000;
    width: 200px;
    height: 200px;
    float:left;
}

.competitie 
{
    background-color: #ebf29d;
    border: 1px solid #000000;
    width: 270px;
     height: 200px;
    float:left;
    }

-->
</style>
</head>

<body>
    <div id="CenterLayer">
      <div class="welkom">Content for  class "Welkom" Goes Here</div>
      <div class="sponsers">Content for  class "Sponsers" Goes Here</div>
      <div class="competitie">Content for  class "Competitie" Goes Here</div>
    </div>
  
</body>
</html>

... met float right of left zet je layers op één rij.
... daarnaast is er nog de clear funktie.... even googelen....

:cool:
 
edit: blijkbaar werkt het dus wel!

ik nog een vraagje ivm dezelfde zaak: stel dat ik ipv die 3 divs naast elkaar bv 1 div links, 1 div rechts en 3 divs in het midden van mijn pagina wil hebben?

gaat dit ook werken?

edit2: probleempje opgelost door de divs die onder elkaar staan in één layer te zetten


Nog één probleempje waar ik mee blijf sukkelen, de pagina wordt goed weer gegeven maar door IE 6 en lager geeft hij problemen met het rechtergedeelte? :s
MvG
 
Laatst bewerkt:
Nog één probleempje waar ik mee blijf sukkelen, de pagina wordt goed weer gegeven maar door IE 6 en lager geeft hij problemen met het rechtergedeelte?
Klik om te vergroten...

Kan IE en FF werken iets anders.
Borders en margin en padding
worden bij de een BINNEN en bij de ander BUITEN het object gehouden.
Dus tel je bv de breedte in pixels op, dan kom je met IE breeder uit.
Hier zijn hacks voor: googeldoos.

De optie important is in deze ook belangrijk.
http://www.google.nl/search?hl=de&rlz=1B3GGGL_nlNL238NL238&q=css+important&btnG=Suche
Daarnaast heb je nog min-width:
http://www.google.nl/search?q=css+min-width&sourceid=navclient-ff&ie=UTF-8&rlz=1B3GGGL_nlNL238NL238
Wordt gewoon wat proberen en googelen op de kernwoorden.

:cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan