1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

layour problem

Discussion in 'HTML & Website Design' started by mintdanny, Feb 25, 2007.

0
  1. #1
    Hey,

    i run into a little problem when helping my mum make her website for her villa, so here it is;

    www.surfblind.com/eden

    here is the css
    /* CSS Document */
body {
	background:#ffffff;
	margin: 10;
	padding: 0;
	font: 0.9em "Arial", Helvetica, Sans-Serif;
	
}

#wrapper {

	width:850px;
	height:auto;
	margin: 0 auto;
	padding: 0px;
	border:solid 2px #631607;
	background-color:#FBE8A4;
}

/*header*/

#header {
		border: solid; color:#631607;
		width: 800px;
		height:200px;
		margin-left:25px;
		margin-right:25px;
		margin-top:10px;
		margin-bottom:25px;
	
}	
	
/* header over*/

/*links*/
	a { 
	color: #631607;
	background-color: inherit;

	}
	
	a:hover {
	color: #000000;
	background-color: inherit;
	
	}
	
	a:visited  {
	color: #631607;
	background-color: inherit;

	}
	
/*links over*/

#inner {

	width:800px;
	margin:auto;
	margin-top:25px;

	
}

/*MENU*/

#menu{
width: 150px;
margin-bottom:25px;
margin-left:25px;
padding: 0;
font-size: 0.9em;
float:left;
}

#menu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}	

#menu li {
margin-bottom: 4px;
}

#menu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #FBE8A4;
display: block;
padding: 6px 0 0 10px;
background: #814337;
border-left: 4px solid #631607;
border-right: 4px solid #631607;
}	
	
#menu li a:hover {
background: #631607;
color: #FBE8A4;
border-left: 4px solid #814337;
border-right: 4px solid #814337;
}

/* MENU OVER*/

#content {	
	width:600px;
	border:solid #631607;
	margin-right:25px;
	margin-bottom:25px;
	float:right;

}

#footer {

	border-top:solid 8px #631607;
	background-color: #79332E;
	width:800px;
	margin-top:25px;
	margin-bottom:25px;
	margin:auto;
	
}
    PHP:
    as you can see the #wrapper tag seems to stop before it should, i want it so it contains the menu and the content box, any help is appreciated.

    Thanks

    Danny
     
    mintdanny, Feb 25, 2007 IP
  2. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #2
    Here's a quick fix for your code 
    <!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>Villa Eden - Terra Verde Resort, Florida</title>
	<link rel="stylesheet" href="style/style.css" media="screen" />	
</head>

<body>
<div id="wrapper">
<div id="header">
<img src="images/head.gif" alt="rtghrtg"/>
</div>




<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Resort</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">Booking</a></li>
<li><a href="#">Car Hire</a></li>

<li><a href="#">Tickets</a></li>
<li><a href="#">Golf</a></li>
<li><a href="#">Guest Book</a></li>
<li><a href="#">Contact Us</a></li>
</ul>


</div>

<div id="content">
  <p>&nbsp;</p>
  <p>&nbsp;</p>

  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>

  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div><br clear="all" />


</div>
</body>
</html>
    Code (markup):
     
    Clive, Feb 25, 2007 IP
  3. mintdanny

    mintdanny Peon

    Messages:
    587
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey,

    thanks, problem sorted.

    Danny
     
    mintdanny, Feb 25, 2007 IP
  4. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #4
    Cool. Your problem is quite common,
    and mine was an easy fix, really :)
     
    Clive, Feb 25, 2007 IP
    mintdanny likes this.
  5. ddkoh92

    ddkoh92 Peon

    Messages:
    564
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #5
    i once had this problem.....and it drove me completely crazy. The other way is to create a blank div, and set the css style for that div to "clear:both"
     
    ddkoh92, Feb 26, 2007 IP
  6. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #6
    This might also drive one crazy as it proves not fully working all the time, depending on how complex your layout is.
    So I just use the <br /> tag and the "clear" attribute. This one has always worked fine.
     
    Clive, Feb 26, 2007 IP