Op site rechtermenu erbij maken

Ed Stoop · 26 okt 2008

Ik heb een site met een header/main en een linkermenu en een footer en wil daar een rechtermenu bij hebben.

Heb in onderstaande css "rechts" erbij gemaakt, maar menu blijft onder de content staan:

Code:

#container
{
    BORDER-RIGHT: gray 1px solid;
    PADDING-RIGHT: 3px;
    BORDER-TOP: gray 1px solid;
    PADDING-LEFT: 3px;
    PADDING-BOTTOM: 3px;
    MARGIN: 5px auto;
    BORDER-LEFT: gray 1px solid;
    WIDTH: 975px;
    PADDING-TOP: 3px;
    BORDER-BOTTOM: gray 1px solid;
    BACKGROUND-COLOR: #ffffff
}
#header
{
    PADDING-RIGHT: 10px;
    PADDING-LEFT: 10px;
    MARGIN-BOTTOM: 0px;
    PADDING-BOTTOM: 10px;
    PADDING-TOP: 10px;
    BACKGROUND-COLOR: #99CCFF;
    TEXT-ALIGN: center
}
#content
{
    PADDING-RIGHT: 20px;
    DISPLAY: inline;
    PADDING-LEFT: 20px;
    FLOAT: left;
    PADDING-BOTTOM: 20px;
    MARGIN: 0px 0px 10px;
    OVERFLOW: auto;
    WIDTH: 555px;
    PADDING-TOP: 20px;
    POSITION: relative;
    BACKGROUND-COLOR: white
}
#menu
{
    PADDING-RIGHT: 10px;
    PADDING-LEFT: 10px;
    FLOAT: left;
    PADDING-BOTTOM: 10px;
    MARGIN: 0px 5px 0px 0px;
    WIDTH: 150px;
    PADDING-TOP: 10px;
    BACKGROUND-COLOR: white
}
#rechts
{
    PADDING-RIGHT: 10px;
    PADDING-LEFT: 10px;
    FLOAT: left;
    PADDING-BOTTOM: 10px;
    MARGIN: 0px 5px 0px 0px;
    WIDTH: 150px;
    PADDING-TOP: 10px;
    BACKGROUND-COLOR: white
}
#footer
{
    CLEAR: both;
    PADDING-RIGHT: 5px;
    MARGIN-TOP: 5px;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 5px;
    PADDING-TOP: 5px;
    BACKGROUND-COLOR: white;
    TEXT-ALIGN: center
}

Ik heb rechts opgeroepen in de template na de main/content en volgens mij zou hij door de float rechts moeten komen te staan. Nou, hij staat dus onder de content en ik ben het spoor even kwijt.

Mijn template:

PHP:

</HEAD>
<body <?php if ($autosubmit == 1) { echo "onload=\"document.autosubmit.submit()\""; } ?>>
<div id="container">
	<div id="header">
	     <?php include("header.php"); ?><br />
		 <?php include("slogan.php"); ?><br />
		 <div id="navcontainer2"><?php include("topmenu.php"); ?></div>
	</div>
	<div id="menu">
     <div id="navcontainer">	
		 <?php include("menu_cart.php"); ?><br />
		 <?php include("menu_products.php"); ?><br />
		 <?php include("menu_products2.php"); ?><br />
         <?php include("menu_extra.php"); ?>
		 <?php include("menu_general.php"); ?><br />
		 		 	 
			 </div>	 
			</br></br>
  		</br>
</div>
	
	<div id="content">
		 <?php 
		       include("loadmain.php"); 
		 ?>
	 
	 <div id="navcontainer">
	<div id="rechts">
     <?php include("menu_cart.php"); ?><br />	</div>
	
		<div id="footer">
		 <?php 
		       include("footer.php"); 
		 ?>
	</div>

Heeft iemand een idee wat ik allemaal fout doe?

grEd

peter vazed · 26 okt 2008

Aangepast:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

	<head>
		<title>
			(Type a title for your page here)
		</title>
		<!--Pagina gemaakt op Sunday, October 26, 2008 22:39:55 -->
		<meta name="GENERATOR" content="Arachnophilia 4.0" />
		<meta name="FORMATTER" content="Arachnophilia 4.0" />
		<meta name="description"  content="korte beschrijving van de pagina" />
		<meta name="keywords"  content="trefwoorden, die, slaan, op, de, pagina" />
		<meta name="publisher" content="Jan Jansen" />
		<meta name="Author" content="Peter Vazed" />
		<meta name="robots" content="index, follow" />
		<meta name="revisit" content="7 days" />
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		

		
<style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
text-align: left;
color: #000;
background: #ffffcc;
}


#container
{
border-right: gray 1px solid;
padding-right: 3px;
border-top: gray 1px solid;
padding-left: 3px;
padding-bottom: 3px;
margin: 5px auto;
border-left: gray 1px solid;
width: 975px;
padding-top: 3px;
border-bottom: gray 1px solid;
background-color: #ffffff
}
#header
{
padding-right: 10px;
padding-left: 10px;
margin-bottom: 0px;
padding-bottom: 10px;
padding-top: 10px;
background-color: #99ccff;
text-align: center;
border:solid #dd0000 1px;}
#content
{
padding-right: 20px;
display: inline;
padding-left: 20px;
float: left;
padding-bottom: 20px;
margin: 0px 0px 10px;
overflow: auto;
width: 555px;
padding-top: 20px;
position: relative;
background-color: white;
border:solid #dd0000 1px;
}
#menu
{
padding-right: 10px;
padding-left: 10px;
float: left;
padding-bottom: 10px;
margin: 0px 5px 0px 0px;
width: 150px;
padding-top: 10px;
background-color: white;
border:solid #dd0000 1px;
}
#rechts
{
padding-right: 10px;
padding-left: 10px;
float: left;
padding-bottom: 10px;
margin: 0px 5px 0px 0px;
width: 150px;
padding-top: 10px;
background-color: white;
border:solid #dd0000 1px;
}
#footer
{
clear: both;
padding-right: 5px;
margin-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
background-color: white;
text-align: center;
}
</style>
	</head>
	<body <?php if ($autosubmit == 1) { echo "onload=\"document.autosubmit.submit()\""; } ?> >
		
		
		<div id="container">
			<div id="header">
				<?php include("header.php"); ?>
				<br />
				<?php include("slogan.php"); ?>
				<br />
				
				<div id="navcontainer2">
					navcontainer2
					<?php include("topmenu.php"); ?>
				</div>
				
			</div>
			
			<div id="menu">
				menu
				<div id="navcontainer">
					navcontainer
					<?php include("menu_cart.php"); ?>
					<br />
					<?php include("menu_products.php"); ?>
					<br />
					<?php include("menu_products2.php"); ?>
					<br />
					<?php include("menu_extra.php"); ?>
					<?php include("menu_general.php"); ?>
					<br />
					
				</div>
				<br />
				<br />
				<br />
			</div>
			
			
			<div id="content">
				content
				<br />
				<br />
				
				Ik heb rechts opgeroepen in de template na de main/content en volgens mij zou
				hij door de float rechts moeten komen te staan. Nou, hij staat dus onder de
				content en ik ben het spoor even kwijt.
				
				Mijn template:
				<?php
				include("loadmain.php");
				?>
				<!-- toegevoegd -->
			</div>
			
			<div id="navcontainer3">
				<div id="rechts">
					navcontainer
					<br />
					rechts
					<?php include("menu_cart.php"); ?>
					<br />
					 
				</div>
				<!-- toegevoegd -->
			</div>
			
			<div id="footer">
				footer footer footer footer
				<?php
				include("footer.php");
				?>
			</div>
			<!-- toegevoegd -->
		</div>
	</body>
	
</html>

Werk met kleine letters in je pagina, ook in je css.
Paar divs toegevoegd,
waren niet gepaard.

Ed Stoop · 26 okt 2008

!

Ik ga weer verder knutselen. Dankjewel!!

Ed Stoop · 27 okt 2008

.

Het menu staat er!! Klasse dankjewel. Ga nu beginnen aan die parende div-jes, wat dat ook mag zijn maar dat ga ik nu opzoeken.

Overigens laat ie in IE 6 het menu aan de onderzijde zien en niet rechts.

grEd

peter vazed · 27 okt 2008

Ed Stoop zei:
Het menu staat er!! Klasse dankjewel. Ga nu beginnen aan die parende div-jes, wat dat ook mag zijn maar dat ga ik nu opzoeken.

Overigens laat ie in IE 6 het menu aan de onderzijde zien en niet rechts.

grEd

Parende divjes had ik al gefixt, staat ook in de code.

In IE, kan, dan de witdh een beetje smaller maken.
Of de container iets breder.

Ed Stoop · 27 okt 2008

.

Ok. Dan ga ik kop-plakken. Servercentrum ligt alleen plat dus nu nog even niet. Is het handig om al eerder genoemde CSS oplossing voor IE 6 in te voegen?

"<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />

"

Op site rechtermenu erbij maken

Ed Stoop

Gebruiker

peter vazed

Meubilair

Ed Stoop

Gebruiker

Ed Stoop

Gebruiker

peter vazed

Meubilair

Ed Stoop

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy