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

Div links, in het midden en rechts

Door Timo Kleinhout op 31-12-2009 15:05
1.079 views
Hallo,

Ik zit met een probleem! Ik ben een beginnende webdesigner en zit met een probleem. Ik wil een site maken waarin de content links, in het midden en rechts staat met behulp van

<div id=right> Tekst dat rechts hoor te staan</div>
<div id=left> Tekst dat links hoor te staan</div>
<div id=center> Tekst dat in het midden hoor te staan</div>

Alleen ik weet niet hoe het moet in de css en html, en kan op google niets vinden. Het zou wel niet zo moeilijk zijn en daarom kom ik bij jullie vragen! de layout van m'n site heb ik al hieronder een link van hoe het moet worden (globaal geschets!).

http://img51.imageshack.us/img51/5056/voorbeeld.png

b.v.d

Timo Kleinhout
M
Milo
31-12-2009 15:24
Dit hoort bij webdesign ;)

Maar goed er zijn geen mods meer dusja..

Zoals je wel al begrepen had moet dit met divs en css.
Google eens op float en clear, als je hier wat mee kan doen kan je jou hele opstelling vrij snel maken ;)
T
Timo Kleinhout
31-12-2009 16:05
zoiets??

CSS:

div#content #left{
float: left;
width: 100px;
}
div#content #right{
float: right;
width: 100px;
}


HTML:

<div id="left">
TEKST
</div>

<div id="left">
TEKST
</div>


dit werkt niet gaat gewoon onder elkaar staan
Gerben Jacobs
31-12-2009 16:25
Je kunt ze ook allemaal float: left; geven en dan zorgen dat je met procenten werkt en 100% in 3 stukken verdeeld.

Als je dan in je div's een nieuw div doet kan je daar bijvoorbeeld padding opzetten.
Joris van Rijn
31-12-2009 16:29
Wat jij eerder zijn, timo, kan wel maar je moet er een container om zetten, met een gespecificeerde breedte.

Anders werkt het niet.

Wat gerben zegt kan volgens mij ook zonder die container.
Joris van Rijn
31-12-2009 16:45
Heb je die ook een width gegeven?
M
Milo
31-12-2009 17:34
Zoiets:


Nieuwe code paar posts lager.
T
Timo Kleinhout
31-12-2009 17:35
Ik ben al iets verder maar nog niet goed ;(

Mijn css:


#container {
width: 815px;
margin: 10px auto 10px auto;
}

body { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }


#total {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}

#header {
display: block;
width: 815px;
height: 143px;
background: url(http://www.habspace.nl/test/logo.bmp) no-repeat;
}

#content {
display: block;
padding: 8px 8px 8px 8px;
width: 815px;
background: url(http://www.habspace.nl/test/content.bmp) repeat-y;
}

div#content #left{
float: left;
width: 100px;
}

div#content #right{
float: right;
width: 100px;
}


#balk {
display: block;
width: 815px;
height: 25px;
background: url(http://www.habspace.nl/test/balk.bmp) no-repeat;
}


------------------------------------------------

index.php:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">;
<html>
<head>
<title>
Titel
</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">

<div id="header">
</div>

<div id="balk">
</div>

<div id="content">
HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!
</div>

<div id="balk">
</div>

<div id="content">

<div id="left">
test<br>
grgfre<br>
gfrds<br>
</div>

<div>
test
</div>

<div id="right">
test
</div>

</div>
</body>
</html>



voor mijn site: http://www.habspace.nl/test
Kumkwat Trender
31-12-2009 17:39
timo gebruik is een clear:both na je header divje..

Reageren

Inloggen om te reageren