positionering kopjes in divs

Status
Niet open voor verdere reacties.

gebruiker45

Gebruiker
Lid geworden
21 sep 2006
Berichten
88
Hallo,
Ik heb een website met drie kolommen en wil daarin kopjes maken met <h1>. Ik krijg ze echter niet netjes over de breedte van de kolom. De kopjes bovenaan de kolom gaan goed, maar die middenin niet.
Ik heb al van alles geprobeerd met clear.
Heb ik iets over het hoofd gezien, of doe ik gewoon iets helemaal fout?
alle suggesties zijn heel welkom.

Alvast dank.
Marie
PHP:
body
{
background-color: #660066;
}

#vlag a:link, #navlist a:visited
{
color: white;
text-decoration: none;
}

#container
{
width: 100%;
margin: 0 auto;
padding-bottom: 15px; 
background-image: url(images/bgbarbie.jpg);
color: #333;
border: 1px solid gray;
line-height: 130%;
font-family: Times New Roman;
font-weight: 650;
}



h1
{
font-family: Times New Roman;
font-size: 20px;
margin: 15px 15px 15px 15px;
padding-top: 10px;
text-align: left;
line-height: 125%;
border: 1px dotted black;
clear: top;}

a:link{color:#660066;
}
a:visited{color:#660066;
}

#top
{
margin-left: 79px;
height: 80 px;
padding-top: 15px;
text-align: center;
font-size: 30;
}

#logo
{
float: left;
width: 80 px;
height: 80 px;
margin: 0 0;
background-image: url(images/logobij.gif);
}

#logo2
{
float: right;
width: 80 px;
height: 80 px;
margin: 0 0;
background-image: url(images/logobij.gif);
}

#navigatie {
text-align: center;
}
#navigatie ul{
background-color: none;
border: 1px solid grey;
width: 100%;
padding: 0;
margin: 0 0 15px 0;
white-space: no-wrap;
}
#navigatie ul li{
display: inline;
}
#navigatie ul li a{
padding-left: 1em;
padding-right: 1em;
font-size: 20px;
font-family: Times New Roman;
text-decoration: none;
color: purple;
}
#navigatie ul li a:hover{
color: #800080;
}

#box1{
width: 30%;
padding-right: 5px;
border-right: 1px dotted black;
float: left;
}

#box2{
width: 30%;
padding-right: 5px;
border-right: 1px dotted black;
float: left;
}

#box3{
width: 30%;
float: left;
}



.pe{
margin: 30px 15px 10px 5px; 
float: left; 
font-family: Times New Roman;
font-size: 15px;
clear: both;}


.image
{
height: 200px;
margin: 0px 15px 10px 10px; 
border: 1px solid purple;
padding-right: 15px;
float: left;
clear: both;
clear: bottum;

}

#footer
{
float: right;
height: 125 px;
padding: 15px 20px 15px 20px;
background-image: url(images/bgbarbie.jpg);
text-align: right;
font-size: 25;
}
HTML:
<body>
<div id="container">
	<div id="logo">
	</div>
	<div id="logo2">
	</div>
	<div id="top">
	Bijtje Bezig Winkel, Kleertjes en Sieraden voor Barbiepoppen

	</div>
	
<div id="navigatie">
<ul>
<li><a href="index.html" id="current">Bijtje Bezig</a></li>
<li><a href="setjes.html">Setjes</a></li>

  
</ul>
</div>
<A NAME="Top"></A>

<div id="box1">
<h1>Jurkjes</h1>
<pe class="pe"><a href="Pics/set29.jpg" target="_blank"><IMG class="image" SRC="Pics/set29.jpg" alt="Zwart-wit jurkje met legging"></a>
Set 29<br><br>Zwart-wit geruit doorknoopjurkje met witte legging en rode ketting met armband. 
Er hoort een rode tas bij met zwart-wit kralenversiersel<br><br>Euro 8,75
<pe class="pe"><a href="Pics/set20.jpg" target="_blank"><IMG class="image" SRC="Pics/set20.jpg" alt="Geel gebloemd jurkje met bloementas"></a>
Set 20<br><br>Zachtgeel gebloemd jurkje met donkerrode bandjes met bijpassende boodschappentas. <br><br>Euro 6,50

<pe class="pe"><a href="Pics/set07.jpg" target="_blank"><IMG class="image" SRC="Pics/set07.jpg" alt="Gestreepte jurk met gebreid vestje"></a>
Set 07<br><br>Roze en wit gestreepte mouwloze jurk, met bijpassend gebreid vestje (Stickatillbarbie).<br><br>VERKOCHT</p>

<h1>Broeken en topjes</h1>
<pe class="pe"><a href="Pics/set14.jpg" target="_blank"><IMG class="image" SRC="Pics/set14.jpg" alt="Spijkercapri en topje"></a>
Set 14<br><br>Capri van spijkerstof met bijpassend zalmroze topje, afgezet met bloemrandje.<br><br>Euro 3,75
<pe class="pe"><a href="Pics/set15.jpg" target="_blank"><IMG class="image" SRC="Pics/set15.jpg" alt="Gele short met bloementopje"></a>
Set 15<br><br>Gele short met gebloemd topje<br><br>VERKOCHT
<pe class="pe"><a href="Pics/set23.jpg" target="_blank"><IMG class="image" SRC="Pics/set23.jpg" alt="Geruite korte broek met groen t-shirt"></a>
Set 23<br><br>Geruite korte broek met zakje aan de achterkant en zachtgroen t-shirt. T-shirt sluit met drukkertjes aan de achterkant <br><br>Euro 4,00
<pe class="pe"><a href="Pics/set22.jpg" target="_blank"><IMG class="image" SRC="Pics/set22.jpg" alt="Broek, blouse en cape"></a>
Set 22<br><br>Lange bruine broek met cr&ecirc;mekleurige blouse en cape en rose ketting. De broek heeft splitjes aan de onderkant. De blouse sluit met twee drukknoopjes en heeft een werkje<br><br>Euro 7,50
<pe class="pe"> <a href="Pics/set35.jpg" target="_blank"><IMG class="image" SRC="Pics/set35.jpg" alt="Gebloemde trui met capribroek en tas"></a>
Set 35<br><br>Gebloemde trui op spijkercapribroek en leren tas. De trui sluit met drukkertjes aan de achterkant.
<br><br>Euro 7,00</div>

<div id="box2">
<pe class="pe"><a href="Pics/set24.jpg" target="_blank"><IMG class="image" SRC="Pics/set24.jpg" alt="Witte capribroek, gebloemd topje en blousejasje"></a>
Set 24<br><br>Witte capribroek met donkergroen topje met rose roosjes en ketting. Eroverheen draagt ze een rose blousejasje.<br><br>Euro 7,50
<pe class="pe"><a href="Pics/set25.jpg" target="_blank"><IMG class="image" SRC="Pics/set25.jpg" alt="Camouflagebroek met bodywarmer"></a>
Set 25<br><br>Camouflagebroek met wit topje en groene bodywarmer. De broek heeft een zak aan de zijkant.<br><br>Euro 7,50
<pe class="pe"><a href="Pics/set01.jpg" target="_blank"><IMG class="image" SRC="Pics/set01.jpg" alt="Korte broek, truitje en tasje"></a>
Set 01<br><br>Wit t-shirtje van tricotstof, sluit met drukkertjes aan de achterkant. Rode korte broek en tasje met klepsluiting.<br><br>Euro 4,50

<h1>Avond- en feestkleding</h1>
<pe class="pe"><a href="Pics/set31.jpg" target="_blank"><IMG class="image" SRC="Pics/set31.jpg" alt="Groene feestjurk"></a>
Set 31<br><br>Groene feestjurk met losse lange rok met bijpassende ketting, oorbellen en armband.<br><br>Euro 9,75
<pe class="pe"> <a href="Pics/set19.jpg" target="_blank"><IMG class="image" SRC="Pics/set19.jpg" alt="Avondjurk met kant"></a>
Set 19<br><br>Lange avondjurk okergeel met zwart kant, met bijpassende ketting en oorhangers<br><br>Euro 9,50
<pe class="pe"><a href="Pics/set28.jpg" target="_blank"><IMG class="image" SRC="Pics/set28.jpg" alt="Rode baljurk met sieraden"></a>
Set 28<br><br>Wijnrode baljurk, versierd met zachtroze kraaltjes. De bijbehorende ketting, oorbellen en 
			armband zijn gemaakt van dezelfe kraaltjes<br><br>Euro 10,50

<pe class="pe"><a href="Pics/set08.jpg" target="_blank"><IMG class="image" SRC="Pics/set08.jpg" alt="Gebreide blauwe cocktailjurk met ketting en oorhangers"></a>
Set 08<br><br>Gebreide kobaltblauwe cocktailjurk (Stickatillbarbie) met bijpassende halsketting en oorbellen<br><br>Euro 5,50

<pe class="pe"><a href="Pics/set09.jpg" target="_blank"><IMG class="image" SRC="Pics/set09.jpg" alt="Gebreid topje met capribroek"></a>
Set 09<br><br>Gebreid blauw/wit gem&ecirc;leerd topje op witte capribroek. De broek heeft splitjes aan de zijkant.<br><br>Euro 3,75
<pe class="pe"><a href="Pics/set10.jpg" target="_blank"><IMG class="image" SRC="Pics/set10.jpg" alt="Gebreide avondjurk met sieraden"></a>
Set 10<br><br>Gebreide jurk (Stickatillbarbie) met bijpassende halsketting en oorbellen.<br><br>Euro 5,50
</div>

<div id="box3">
<h1>Rokjes met topjes</h1>
<pe class="pe"><a href="Pics/set06.jpg" target="_blank"><IMG class="image" SRC="Pics/set06.jpg" alt="Gebreid truitje met rokje"></a>
Set 06<br><br>Gebreid oranje truitje met raglanmouwen. Gebloemd rokje met elastiek in de taille en bijpassende halsketting.<br><br>Euro 3,75
<pe class="pe"><a href="Pics/set03.jpg" target="_blank"><IMG class="image" SRC="Pics/set03.jpg" alt="Gebreid truitje met rok en ketting"></a>
Set 03<br><br>Gebreid, turquoise truitje met halflange mouw (Stickatillbarbie), gebloemd rokje en bijpassende ketting<br><br>VERKOCHT
<pe class="pe"><a href="Pics/set12.jpg" target="_blank"><IMG class="image" SRC="Pics/set12.jpg" alt="Gebreid truitje met rok en tasje"></a>
Set 12<br><br>Rood gebreid truitje met korte raglanmouwen op bijpassend rood-witte rok en tasje <br><br>Euro 4,50

<pe class="pe"><a href="Pics/set18.jpg" target="_blank"><IMG class="image" SRC="Pics/set18.jpg" alt="Zwart-wit gebloemd rokje met sjaal en topje"></a>
Set 18<br><br>Zwart-wit gebloemd strokenrokje met bijpassende sjaal en wit tricottopje.<br><br>Euro 3,75
<pe class="pe"> <a href="Pics/set26.jpg" target="_blank"><IMG class="image" SRC="Pics/set26.jpg" alt="Overslagtruitje met rokje"></a>
Set 26<br><br>Lila overslagtruitje met gebloemd kort rokje, tas en haarstrik. Het truitje sluit met een satijnlintje. Het rokje
en haarstrikje sluiten met een drukkertje resp. aan zijkant en achterkant.<br><br>Euro 4,50
<pe class="pe"><a href="Pics/set33.jpg" target="_blank"><IMG class="image" SRC="Pics/set33.jpg" alt="Roodbruin truitje met strookrok"></a>
Set 33<br><br>Roodbruin gebreid truitje (gebaseerd op model van Stickatilbarbie) op rok met schuine strook. Bijpassende ketting en armband.
<br><br>Euro 6,00

<pe class="pe"><a href="Pics/set34.jpg" target="_blank"><IMG class="image" SRC="Pics/set34.jpg" alt="Paars truitje met rokje"></a>
Set 34<br><br>Paars gebreid truitje met kort pofmouwtje op paars doorknooprokje.
<br><br>Euro 3,00
<pe class="pe"><a href="Pics/set36.jpg" target="_blank"><IMG class="image" SRC="Pics/set36.jpg" alt="Trui met kort doorknooprokje"></a>
Set 36<br><br>Trui zwart met kleurtjes op roze doorknooprokje met zwarte kousen. De trui sluit met drukkertjes aan de achterkant.
<br><br>Euro 6,00
</div>
</div>
 
Laatst bewerkt door een moderator:
HTML:
h1
{
font-family: Times New Roman;
font-size: 20px;
margin: 15px 15px 15px 15px;
padding-top: 10px;
text-align: left;
line-height: 125%;
border: 10px dotted #ff0000;
text-align:center;
}

text-align:center;
zou het moeten doen
Dit
border: 10px dotted #ff0000;
heb ik erin gezet voor visualisatie tijdens ontwerp.

:cool:
 
De eerste oplossing (clear: all) werkt prima.

Ik heb de tweede ook nog geprobeerd, maar daarmee veranderd er niets.

Dank voor jullie hulp.

Marie:thumb:
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan