Divjes positioneren

NewDesigner · **Joined:** Mon Jul 26, 2010 10:16 am **Posts:** 1

Hallo allemaal,

Ik heb een vraag over hoe ik mijn divjes die ik in mijn body heb staan kan positioneren door middel van CSS. De code's die ik tot nu toe heb zijn:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photography - Welkom</title>
( externe style sheet zet ik hier ff neer maar hij staat bij mij op extern:
#container {
position: absolute;
margin: 0 auto;
width: 897px;
height: 500px;
top: 50%;
left: 50%;
margin-left: -450px;
margin-top: -250px;
}

#logo{
background-image:url(../../afbeeldingen/Template/images/logo.png);
width: 196px;
height: 71px;
}
.box{
background-color:#e70373;
width:240px;
height:250px;
position:absolute;
float:left;
margin:0px;
top:50%;
margin-top:-125px;
}

.box .tl{
background-image:url(../../afbeeldingen/Template/Photography/box_tl.png);
width:13px;
height:13px;
position:absolute;
top:0px;
left:0px;
float:left;
}

.box .bl{
background-image:url(../../afbeeldingen/Template/Photography/box_bl.png);
width:13px;
height:13px;
position:absolute;
bottom:0px;
left:0px;
float:left;
}

a{ color:#FFF; text-decoration:none;}

.menu1{
top:30px;
position:relative;
background-image:url(../../afbeeldingen/Template/images/hoofdmenubutton.png);
background-repeat:no-repeat;
width: 209px;
height: 40px;
margin-left:15px;
padding-left:10px;
padding-top:26px;
color:#FFF;
font-size:14px;
font-family:"Arial Rounded MT Bold", "Arial Black";
float:left;
}

.menu2{
top:30px;
position:relative;
background-image:url(../../afbeeldingen/Template/images/hoofdmenubutton.png);
background-repeat:no-repeat;
width: 209px;
height: 40px;
margin-left:15px;
padding-left:10px;
padding-top:26px;
color:#FFF;
font-size:14px;
font-family:"Arial Rounded MT Bold", "Arial Black";
float:left;
}

.menu3{
top:30px;
position:relative;
background-image:url(../../afbeeldingen/Template/images/hoofdmenubutton.png);
background-repeat:no-repeat;
width: 209px;
height: 40px;
margin-left:15px;
padding-left:10px;
padding-top:26px;
color:#FFF;
font-size:14px;
font-family:"Arial Rounded MT Bold", "Arial Black";
float:left;
}

.content{
background-image:url(../../afbeeldingen/Template/Photography/tekst_vak.png);
width:657px;
height:205px;
position:absolute;
float:right;
margin:0px;
top:50%;
margin-top:-102px;
}

.content .top{
background-image:url(../../afbeeldingen/Template/Photography/tekst_kop.png);
width:657px;
height:66px;
top:0px;
float:right;
margin:0px;
top:50%;
margin-top:-33px;
}

.content .bottom{
background-image:url(../../afbeeldingen/Template/Photography/tekst_bottom.png);
width:657px;
height:66px;
float:right;
margin:0px;
top:50%;
}

.content .tekst{
padding-left:25px;
padding-right:15px;
font-size:12px;
font-family:"Arial Rounded MT Bold", "Arial Black";
color:#FFF;
}

#menu{
background-color:#3C6;
width:657px;
height:24px;
float:right;
}

</head>

<body bgcolor="#999999">
<div id="container">
<div id="distance">

<div id="logo"></div>

<div id="menu">Welkom</div>

<div class="content">
<div class="top"></div>
<p class="tekst">Wij helpen onze opdrachtgevers hun organisatie en medewerkers te ontwikkelen en te versterken. Wij leveren aantoonbare bijdragen aan succes. Wij onderscheiden ons inonze werkwijzen door nieuwe en beproefde methoden en technieken tot innovatieve aanpakken te combineren.
Wij zijn sterk in de begeleiding van veranderingsprocessen. Wij gebruiken hierbij o.m. Large Group Interventions die het mogelijk maken velen, zo niet alle belanghebbenden bij het proceste betrekken. Door onze manier van werken krijgen we mensen gemotiveerd in beweging rond een veelheid van organisatie vraagstukken. Vraagstukken waarop het antwoord niet altijd pijnloos is, maar dat wel draagvlak heeft. Omdat het is geformuleerd met gebruik van de kennis, ervaring en het perspectief van iedere belanghebbende medewerker. Met behulp van een transparant proces.</p>
<div class="bottom"></div>

</div>

<div class="box">
<div class="menu1">Photographics</div>
<div class="menu2">Graphics</div>
<div class="menu3">Special futhers</div>
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
</div>

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

Nu is het probleem dat mijn content ( top en de bottom ook ) niet naar rechts gaan en niet luisteren naar float right.

Hoe is dit mogelijk?

Robbert · **Posted:** Fri Aug 27, 2010 9:54 am

Kan je een link geven naar de daadwerkelijke pagina? Zo is het bijna niet voor je op te lossen.

Design-web.nl forum

Divjes positioneren

Who is online