CSS/Div vraag

Door kitty N op 27-03-2009 15:25

3.371 views

Hallo,

Ik ben momenteel bezig met een site, waarbij ik gebruik maak van div. Ik heb de volgende div's:
- Kop
- Voet
- Menu (zit in navigatie)
- Content (hierin heb ik nog een iframe zitten met de naam tekst, die dus over de gehele content te zien moet zijn).

de css ziet er als volgt uit:


@charset "utf-8";
/* CSS Document */
html {
height: 100%;
}

body {
margin: 0;
padding: 0;
font-family: Georgia, Times, "Times New Roman", serif;
color: black;
height: 100%;
/* width: 100%; */
}

#kop {
background-color: #666;
color: white;
text-align:center;
font-family: Georgia, Times, "Times New Roman", serif;
height:70px;
font-size: 19px;
border: 1px solid #333;
}

#navigatie {
float: left;
width: 160px;
/*
height:410px; 
*/
height: 100%;
margin-left: 0px;
background-color:#CCCCCC;
border-color:red;
padding-top: 0.5em;
border-right: 1px solid black;
border-left: 1px solid black;
}

#inhoud {
/* margin: 0 2em 0 160px; */
margin: 0 0 0 0px; 
text-align:center;
font-size:13px;
height: 100%;
padding-top: 0.5em;
/* border: 1px solid #333; */
}

#footer {
clear: both;
background-color: #ccc;
text-align:center;
font-size:11px;
padding-bottom: 1em;
border: 1px solid #333;
padding-left: 50px;
height:25px;
widht: 100%;
}

.menulines{
font-family: Georgia, Times, "Times New Roman", serif;
border:2.5px solid #F0F0F0;
}

.menulines a{
font-family: Georgia, Times, "Times New Roman", serif;
text-decoration:none;
color:#666666;
}

#menu {
margin-left: 6px;
}

.h1 {
font-size:16px;
}

De div's:


<div id="kop"></div>
<div id="navigatie">
     <div id="menu">       
     </div>
</div>
<div id="inhoud"><iframe frameborder="1" marginheight="0" marginwidth="0" src="tekst.php" name="tekst"></iframe></div>
<div id="footer"></div>

Ik heb nu dat de kop over de breedte is, navigatie en inhoud naast elkaar, footer over de breedte, alleen de hoogte staat nu op 100% van navigatie en inhoud, waardoor hij het scherm hoogte als 100% neemt, ik krijg dus een scroll balk omdat de kop en footer nog bovenop die 100% komen.

In firefox staat de inhoud niet naast de navigatie, maar onder de pagina (dwars door de footer heen).

Ik hoop dat mijn probleem een beetje duidelijk is uitgelegt.

Mitchell

27-03-2009 16:59

Gewoon geen height: 100% gebruiken?

Een online voorbeeldje zou ook gewaardeerd worden, maakt het wat makkelijker.

Overigens, why the hell een iframe voor je content?

kitty N

27-03-2009 17:32

Ik zal hem zo online zetten, was op een plek waar ik dat niet kon doen.
Ik heb een iframe zodat alleen het ifram opnieuw geladen wordt en niet de rest, zo is het menu dus maar 1x gemaakt.

Zie http://testsilvia.silty.nl/ voor voorbeeld.

Zie zonder 100% height in menu, content en body

Rene Sn

27-03-2009 18:58

@kitty,

Ik heb 't effe getest en werkt prima :)

Hoewel ik niet zou kiezen voor een <iframe>

Zet in je silvia.css onder #inhoud


#inhoud {
margin: 0 0 0 0px; 
text-align:center;
font-size:13px;
height:  99%;
padding: 0.1em;
overflow:hidden; 
}

grts,
René

Pieter van Linschoten

27-03-2009 20:49

width 100% in combinatie met padding geeft in sommige browser problemen. padding wordt namelijk opgeteld bij de width, wat resulteert dat je div breder is dan eigenlijk kan.

Rene Sn

27-03-2009 21:19

Lapidi schreef op 27.03.2009 20:49
width 100% in combinatie met padding geeft in sommige browser problemen. padding wordt namelijk opgeteld bij de width, wat resulteert dat je div breder is dan eigenlijk kan.

i know, maar ja zo zag 't er weer wat beter uit kan ze weer verder :D.
Div's in FF is meestal een CRIME :D

kitty N

27-03-2009 22:51

Zie er in FF een stuk beter uit, thQ!

Kan ik nu gaan puzzelen met het menu, zodat deze helemaal doorloopt naar onder tot aan de footer.

Ik wil eigenlijk ook proberen om het op het gehele scherm te zien dat je dus niet moet scrollen voor de footer. Helaas werkt dat niet met height 100% navigatie staat nu op height 100%

pim Willems

28-03-2009 18:38

Ipv iFrame zou je trouwens beter een php include kunnen gebruiken, werkt makkelijker mooier en sneller.

kitty N

30-03-2009 13:13

@Pim,

Dat had ik misschien beter kunnen doen, maar dat lost mijn probleem nog niet op.

Weet iemand misschien hoe ik het volgende kan doen:
Is er een mogelijkheid om te kijken hoeveel pixels de hoogte van het scherm is, want stel je hebt een kop die geef je 50px mee als hoogte en je voet geef je 20px mee als hoogte. Dat je dan berekent hoeveel pixels er zijn, zodat ik dan het aantal pixels - kop - voet = pixels over

Zodat ik dan het aantal pixels over kan invullen bij de content als hoogte.

Waarom wil ik dit doen?
Omdat ieder scherm kwa grootte verschillend is. De ene heeft een 19 inch scherm en de ander maar een 15 inch.

Mitchell

30-03-2009 13:45

Javascript, maar stel dat je dan vervolgens je browser verkleint/vergroot. Dan past hij zich niet aan en tenzij je dan niet min-height: gebruikt, kan het zijn dat je content niet verder kan vanwege dat je div niet groot genoeg is. (min-height werkt niet in IE)

En stel dat javascript niet aanstaat dan ziet iemand de site totaal anders. Ik raad je aan om gewoon te stoppen met dit idee van je (een layout totaal liquid in height) of je zult hacks zoals negatieve margins/paddings moeten gaan gebruiken.

Edit: Je zou ook met positions kunnen gaan werken, maar dan moet je daar natuurlijk wel mee moeten kunnen omgaan..

kitty N

30-03-2009 14:03

@ Mitchell,

Bedankt voor je antwoord, met position heb ik ook wat geprobeerd. Heb altijd gebruik gemaakt van frames, maar wil daar graag vanaf stappen. Ben daarom dus met div's aan het werk, wat dus erg nieuw voor mij is en weet dus ook niets tot niet veel van position af helaas. Heb ook al de site van w3school erbij gepakt.

Reageren

Inloggen om te reageren