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

positioneren met div

Door johnny vandeputte op 15-08-2006 12:39
532 views
hallo, ik had graag een pagina gemaakt met langs boven scrollende foto's, langs de zijkant een menu, en rechts de content. Het geheel moet een vaste breedte hebben en gecentreerd staan.
De website bestaat al in html op www.chiroharo.be

ik gebruik div tags en in die div tag staat er een include naar het onderdeel.
nu heb ik ondervonden dat wanneer je een include gebruikt, hij precies niets meer aantrekt van je box die gedimensioneerd is in je div tag.

ook ziet het er niet uit in firefox

style.css

body{   
	scrollbar-face-color: darkgray;
        scrollbar-highlight-color: white;
        scrollbar-shadow-color: white;
        scrollbar-3dlight-color: white;
        scrollbar-arrow-color: white;
        scrollbar-track-color: white;
        scrollbar-darkshadow-color: white;
/*eerst alles laten centreren*/

margin: 0;
text-align: center;

}
/*nu een hoofdkader maken, die automatisch gecentreed zal zijn (zie hierboven),in deze box staat alles wel weer links*/
div#main_container{
margin: 0 auto 0 auto;
width: 850px;
text-align: left;
}
div#scrollingmenu{
background-color:#0066FF;
width: 850px;
height: 40px;
}
div#menu{
float:left;
width: 10px;
height: 10px;
}

div#content{
background-color:yellow;
float:left; 
width: 50px;
height: 10px;
}



test.php

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>

<div id="main_container">
	<div id="scrollingmenu">sdf
 	 </div>
	<div id="menu"><?php include("menu.html"); ?>
	</div>
	<div id="content"><?PHP include("/var/www/html/cutenews/show_news.php"); ?>
	</div
></div> 

</body>

</html>
j
johnny vandeputte
15-08-2006 21:32
na wat ge-experimenteer ben ik op het volgende ge-eindigd.
in IE ziet het er bijna goed uit. behalve het feit dat de het menudeel eig automatisch zou moeten de hoogte krijgen van het rechterdeel.
Maar in firefox blijkt mijn float precies niet te werken.

Willen jullie er even naar kijken?
op www.chiroharo.be/test2.php
Het zal voor jullie PRO's vast wel een fluitje van een cent zijn.

/* CSS Document */
 
    margin: 0; 
    padding: 0; 
} 

body 
{ 
  
} 

#container 
{ 
    margin: 0 auto;
	background-image:url("images/backlinetest.png");
	background-repeat:repeat-y; !important;
	background-color: none !important;
	width: 795px;  
} 
#top 
{ 
    height: 50px; 
    background: #666666; 
    width: 795px; 
} 
#left 
{ 
    float: left; 
    width: 316px; 
    height:400px; 
} 

#right 
{ 
width: 470px; 
background:#3366CC;
}




<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<link rel="stylesheet" type="text/css" href="style2.css" />
<body>
<div id="container">
    <div id="top"></div> 
    <div id="left"><?php include("menu.html"); ?></div> 
    <div id="right"><?PHP include("//var/www/html/cutenews/show_news.php"); ?></div> 
</div>
</body>

</html>

Reageren

Inloggen om te reageren