PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
C

Positioning Horror

Door Ceesietopc op 14-01-2007 11:30
1.316 views
Ik ben bezig met een website, compleet in XHTML PHP en CSS. Opzich heb ik geen problemen met het maken ervan, behalve met 1 ding: het positioneren van de div's. De site bestaat uit 5 divs:

Header => De header. Een banner eigenlijk. Een vaste breedte en hoogte dus.
Menu => Menu
Content => De content
Footer => Helemaal onderaan de pagina een gecentreerd regeltje.
Container => Alle bovenstaande divs zitten in een container, zodat ik ze kan centreren. (margin-left: auto; margin-right: auto;)

De layout wil ik zo:
[limg]http://i5.photobucket.com/albums/y180/ceesietopc/full2.jpg[/limg]
Maar wat is nou het probleem: Ik wil dat de site op alle resoluties er goed uit ziet. Ik hou wel gewoon een vaste breedte aan, anders wordt het me iets te veel. In de hoogte moet ik echter wel scale-able zijn. Dus, als iemand zn venster verkleint in de hoogte, wil ik dat er dit uit komt:
[limg]http://i5.photobucket.com/albums/y180/ceesietopc/half.jpg[/limg]

Ik heb al verschillende dingen geprobeerd, maar ik kom er niet uit.
Kan iemand mij helpen?
D
Dion
14-01-2007 11:48
misschien zo??

.divheader {
height:hoehoogisjebanner?;
}
.divmenu {
float:left;
width:150;
}
.divinhoud {
}

maar in igg als je geen hoogte en breedte opgeeft bij divs zijn zijn ze scale-able maar dat is best lastig bij het menu, dus daar moet je wel een width opgeven;)
het is ook handig om een kleinere header te maken dan de div groot is, dan zit daar ook nog wat speling in.
C
Ceesietopc
14-01-2007 18:25
@Newb
Das javascript.. dat is mn laatste redmiddel, maar liever CSS.
Ik zal even een voorbeeldje maken wat ik nou eigenlijk wil, want volgensmij snappen jullie het niet .

@Dion
Zo heb je niets or ?? :S je stelt nergens een hoogte in ofzo.
J
Jan geen
14-01-2007 19:51
#container {
margin: 0 auto;
width: 800px;
}

zo krijg je um mooi in het midden en de menu div float: left en inhoud float: right, footer: clear:both. ik heb zelf ook dit probleem gehad, je kan de menu div niet automatisch laten meegroeien wanneer de inhoud groter wordt wat je moet doen is de container dezelfde achtergrond geven als het menu links zodat het lijkt alsof hij groter wordt. ik heb hier al is een topic over gestart Hier daar staat het in beschreven
C
Ceesietopc
17-01-2007 20:03
Thnx.. maar ik kom er niet helemaal uit...

Dit is mn bedoeling, maar dan in het midden twee stukken:

index.html

<html>
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>


style.css

div.container {
margin-left: auto;
margin-right: auto;
width: 800px;
}
div.header {
width: 800px;
height: 100px;
position: absolute;
top: 5px;
border: thin solid black;
}
div.content {
width: 800px;
position: absolute;
top: 110px;
bottom: 30px;
border: thin solid black;
}
div.footer {
width: 800px;
position: absolute;
bottom: 0px;
height: 25px;
border: thin solid black;
}


Ik hoop dat jullie hier iets aan hebben..
J
Jan geen
17-01-2007 20:14
de 2 divs die naast elkaar moeten komen moeten float: left & right; meekrijgen
- -
17-01-2007 20:28
de top-div: min-height: 100%;
C
Ceesietopc
17-01-2007 20:32
top div? welke bedoel je? de header?

@rik
Hmm. dat alleen is iig niet voldoende.

@Klaasjan
Daar kan ik mijn probleem niet vinden.

Reageren

Inloggen om te reageren