[CSS] Height van een div instellen met top en bottom - Softwareontwikkeling

zaterdag 18 maart 2006 21:51

Acties:

Verwijderd

Topicstarter

Hallo,

Ik heb een probleem in IE (wat had je gedacht) met de hieght van een DIV. Hij moet de hoogte hebben van z'n container, maar dan aan boven en onderkant telkens 25px minder.

Ik heb het zo opgelost:

code:

<style type="text/css"> 
<!-- 
#main{ 
   width: 764px; 
   position: absolute; 
   top: 0px; 
   left: 0px; 
   border: 1px solid #000000; 
   background-color: #CCCCCC; 
   z-index: 1; 
   padding-left: 228px; 
   padding-top: 128px; 
   padding-right: 8px; 
   padding-bottom: 128px; 
} 
#seperator-vertical-left{ 
   clear: both; 
   width: 3px; 
   position: absolute; 
   top: 25px; 
   left: 100px; 
   bottom: 25px; 
} 

--> 
</style> 
<div id="main"> 
<div id="seperator-vertical-left" class="seperator"></div> 
</div>

Werkt perfect in FF, maar niet in IE. Iemand een idee? Commentaar op de rest van de CSS lay-out is ook welom.

Bedankt

Full code:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS lay-out</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
<!-- 
#main{ 
   width: 764px; 
   position: absolute; 
   top: 0px; 
   left: 0px; 
   border: 1px solid #000000; 
   background-color: #CCCCCC; 
   z-index: 1; 
   padding-left: 228px; 
   padding-top: 128px; 
   padding-right: 8px; 
   padding-bottom: 128px; 
} 
#menu{ 
   width: 120px; 
   height: 484px; 
   position: absolute; 
   top: 93px; 
   left: 103px; 
   background-color: #BBCCEE; 
   z-index: 2; 
} 
.seperator { 
   background-color: #FF6600; 
   z-index: 3; 
   overflow: hidden; 
} 
#seperator-vertical-left{ 
   clear: both; 
   width: 3px; 
   position: absolute; 
   top: 25px; 
   left: 100px; 
   bottom: 25px; 
} 
#seperator-horizontal-top{ 
   width: 925px; 
   height: 3px; 
   position: absolute; 
   top: 120px; 
   left: 25px; 
   margin-right: 50px; 
} 
#seperator-horizontal-bottom{ 
   width: 925px; 
   height: 3px; 
   position: absolute; 
   bottom: 120px; 
   left: 25px; 
   margin-right: 50px; 
} 
--> 
</style> 
</head> 

<body> 
    <div id="main"> 
      Text 
        <div id="menu"> 
              Menu 
        </div> 
          <div id="seperator-vertical-left" class="seperator"></div> 
          <div id="seperator-horizontal-top" class="seperator"></div> 
          <div id="seperator-horizontal-bottom" class="seperator"></div> 
</div> 
</body> 
</html>

zaterdag 18 maart 2006 21:56

Acties:

TweakBoy

---

zo uit het blote hoofd.. moet je zelf maar checken:

code:

#seperator-vertical-left{ 
   clear: both; 
   width: 3px; 
   position: absolute; 
   left: 100px; 
height: 100%;
margin-top: 25px;
margin-bottom: 25px;
}

[ Voor 4% gewijzigd door TweakBoy op 18-03-2006 21:57 ]

---

zaterdag 18 maart 2006 22:02

Acties:

Verwijderd

Topicstarter

Bedankt TweakBoy voor je snelle reply. Maar op die manier werkt het zelfs niet meer in FF.

zaterdag 18 maart 2006 22:23

Acties:

Rowanov

Kop eens wat anders...

Wat wil je met deze constructie bereiken? Ik krijg sterk het idee dat het makkelijker kan. Heb je een online testcase?

zaterdag 18 maart 2006 22:46

Acties:

Verwijderd

Topicstarter

Rowanov, ik heb nog geen online testcase. Maar als je de 'full code' in een htm bestand plakt krijg je een goed idee (best de 'tekst' wel vervangen door iets langer).

Het is de bedoeling om een simpel oogende layout te maken met boven, onder en links van de content een oranje strepen. Deze strepen moeten elkaar kruisen, maar mogen niet doorlopen tot aan de rand.

zondag 19 maart 2006 00:59

Acties:

Vinzzz243

wat snap ik hier niet, als ik je startpost lees, denk ik "margins"
snapte t idd niet, srry

[ Voor 27% gewijzigd door Vinzzz243 op 19-03-2006 01:02 ]

zondag 19 maart 2006 01:29

Acties:

Fuzzillogic

Cool

Ik weet het niet zeker, maar de hoogte bepalen d.m.v. top en bottom gelijktijdig te gebruiken kan best een CSS2-feature zijn en dus werkt het niet in IE6.

Maar hoe dan ook, het werkt niet in IE6. Wellicht dat jet met Dean Edwards IE7 script de boel kunt repareren.

zondag 19 maart 2006 08:37

Acties:

cyberstalker

Eersteklas beunhaas

En als je het idee van TweakBoy gebruikt, maar dan met padding ipv margins? Volgens mij zou dat wel moeten werken.

Ik ontken het bestaan van IE.

zondag 19 maart 2006 09:20

Acties:

JHS

Splitting the thaum.

Zo: http://jaap.deviousness.c.../containerpartheight.html

.

DM!

zondag 19 maart 2006 10:29

Acties:

Vinzzz243

JHS schreef op zondag 19 maart 2006 @ 09:20:
Zo: http://jaap.deviousness.c.../containerpartheight.html .

en nu zonder een fixed height op de container

zondag 19 maart 2006 11:12

Acties:

JHS

Splitting the thaum.

Vinzzz schreef op zondag 19 maart 2006 @ 10:29:
[...] en nu zonder een fixed height op de container

Oh, dan zo

:

Cascading Stylesheet:

div.container {
    min-height: 1px; /* was height: 500px; */
    _height: 1px; /* conditional comment */
    padding-top: 25px;
    padding-bottom: 25px;
}

div.test {
    height: 100%;
    background-color: lime;
}

DM!

maandag 20 maart 2006 10:21

Acties:

JvdBosch

Probeer het eens met een dergelijk stukje in je CSS (naast de gewone code voor FF):

code:

...
normale CSS code voor FF/IE
....
[if IE]>
<style type="text/css" media="screen">
#frameblabla // De eerste div pakt IE niet, vandaar deze spookdiv
    {
    background:none;
    }
#windowdiv
    {
    width: expression(document.body.clientWidth +"px");
    height: expression(document.body.clientHeight +"px");
    }
#fotodiv
    {
    width: expression(document.body.clientWidth - 55 +"px");
    height: expression(document.body.clientHeight - 55 +"px");
    }
</style>
<![endif]

In mijn site heb ik het zo opgelost. IE deed ook allemaal rare dingen met top en bottom marges....
Ik weet niet of het ook werkt met een Div in een Div, maar misschien zet het je op het goede spoor.

e-Niro Runway Red met Smokey Grey interieur