IPB

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Help!
RossM
post Oct 12 2009, 11:52 AM
Post #1


Newbie
*

Group: Members
Posts: 4
Joined: 29-September 09
Member No.: 34,153
Hi all, looking for some help on this issue.

Basically i have a layout. Pictured below.

Layout image

As you can see, the text goes underneath the navigation, which i don't want it to... And was wondering whether there was a way to stop it doing this?

Here is the code...
CODE
<html>
<head>
<title>My CSS Website</title>
<meta name="Keywords" content="html/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

body {
background-color: #FFFFFF;
background-image: url('background.gif');
background-repeat:repeat-x;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 0px;
margin: 0px;
text-align: center;
border-bottom: thin solid #000000
}
div#nav {
width: 25%;
padding: 1px;
margin-bottom: 0px;
margin-top: -1px;
margin-left: -0x;
float: left;
border-right: thin solid #000000;
border-left:;
border-bottom: thin solid #000000;
}
div#main {
margin-left: 10%;
margin-top: -10px;
padding: 5px;
}
div#footer {
padding: 15px;
margin: 0px;
border-bottom: thin solid #000000;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Ross's Homepage</h1>
</div>
<div id="nav">
<h2>Navigation</h2>
Home
<br>
Contact
<br>
About
<br>
</div>
<div id="main"></div>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus at tellus interdum euismod. Pellentesque id dui enim, sit amet rhoncus justo. Ut dignissim, nibh et faucibus consequat, ante risus feugiat tellus, at sodales eros leo non tortor. Etiam interdum dictum lobortis. Nullam elementum mauris vitae magna malesuada euismod. Donec vehicula eros vitae metus consequat sed tristique velit egestas. Donec faucibus scelerisque mi, sed molestie ipsum dictum et. Sed facilisis suscipit neque, id volutpat erat volutpat ut. Donec faucibus diam et quam dictum lobortis. Duis lacus purus, faucibus a mollis sit amet, congue at eros. Morbi mauris nunc, blandit faucibus tincidunt et, volutpat non erat.

Pellentesque at magna dignissim nulla varius consectetur eu quis neque. Nunc quam risus, pretium at iaculis ac, congue non arcu. Nunc quis magna et felis congue dapibus nec vitae magna. Fusce in nulla eget lacus accumsan vulputate sed sed tellus. Phasellus at sagittis mauris. Praesent vitae dolor sem. Aenean luctus venenatis ligula, vitae interdum tellus scelerisque ut. Vestibulum luctus nibh in ipsum dignissim aliquam. Nulla scelerisque, odio eu ornare consectetur, ligula mauris vulputate lacus, in faucibus dui eros non nisi. Morbi cursus, odio non aliquet porttitor, lectus felis eleifend tellus, et pulvinar eros nisi sed dui. Praesent vulputate mollis tortor et sodales. Sed elementum nulla ac tellus feugiat laoreet. Pellentesque lacus lectus, aliquet at luctus eget, molestie et purus. Phasellus fringilla cursus gravida. Etiam ultricies pellentesque eros at varius.

Ut gravida, justo eu ultricies ornare, magna nunc adipiscing felis, id congue dui nunc a purus. Mauris sagittis sem eu libero blandit et commodo massa fringilla. Vestibulum eget sapien libero, sit amet feugiat sem. Integer dolor massa, ultricies vitae ornare eu, scelerisque sed diam. Curabitur euismod felis vitae ante placerat ultrices. Ut eros nibh, blandit eu auctor commodo, volutpat quis risus. Nam adipiscing consectetur gravida. Curabitur convallis quam at elit ultricies faucibus. Donec consequat ligula nec neque adipiscing vitae varius lacus lacinia. Maecenas sit amet nisl ut velit sollicitudin mattis vel a ligula. Proin semper porta urna, tincidunt dignissim dui ornare vel. Maecenas est augue, placerat gravida pulvinar porta, hendrerit in turpis. Vivamus iaculis vehicula eleifend. Nunc ut ullamcorper odio.
</h3>
</body>
</html>
Go to the top of the page
 
+Quote Post
chibineku
post Oct 12 2009, 12:03 PM
Post #2


Dedicated Member
****

Group: Members
Posts: 1,256
Joined: 18-March 09
From: EK, Scotland
Member No.: 29,495
Languages: (X)HTML, CSS, JavaScript / jQuery, PHP, MySQL
If you give #nav a fixed or % width and float it left (as it is at the moment), and float #main right, it should all stay in proper alignment. You can either specify a width for #main or leave it to fill the available space by not setting it. Obviously the widths of both, if explicitly set, need to add up to the width of #wrapper or 100%.


--------------------
Go to the top of the page
 
+Quote Post
dsonesuk
post Oct 12 2009, 12:41 PM
Post #3


Dedicated Member
****

Group: Members
Posts: 1,333
Joined: 24-March 09
Member No.: 29,663
you do realize, that div main is empty? it does not surround the main text, and you have a missing end div tag.

there's more:

margin-left: -0x; -> margin-left: 0;

border-left:; -> border-left:none;


anyway, once you have fixed above, make margin-left of #main the same, or bit more (to give a space between, text and nav) than the width of #nav.

Then best idea, would be to give a fixed px width to the #nav, and give #main, #nav width+10 for margin-left.

This post has been edited by dsonesuk: Oct 12 2009, 01:02 PM
Go to the top of the page
 
+Quote Post
RossM
post Oct 12 2009, 01:34 PM
Post #4


Newbie
*

Group: Members
Posts: 4
Joined: 29-September 09
Member No.: 34,153
QUOTE (dsonesuk @ Oct 12 2009, 01:41 PM) *
you do realize, that div main is empty? it does not surround the main text, and you have a missing end div tag.

there's more:

margin-left: -0x; -> margin-left: 0;

border-left:; -> border-left:none;


anyway, once you have fixed above, make margin-left of #main the same, or bit more (to give a space between, text and nav) than the width of #nav.

Then best idea, would be to give a fixed px width to the #nav, and give #main, #nav width+10 for margin-left.


Hi, thanks for the advice. Could you sure give me an example of the code please as i'm not entirely sure what you mean...
Go to the top of the page
 
+Quote Post
dsonesuk
post Oct 12 2009, 01:51 PM
Post #5


Dedicated Member
****

Group: Members
Posts: 1,333
Joined: 24-March 09
Member No.: 29,663
<!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>

<script type="text/javascript">
/*<![CDATA[*//*---->*/

/*--*//*]]>*/
</script>

<style type="text/css">
body {
background-color: #FFFFFF;
background-image: url('background.gif');
background-repeat:repeat-x;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 0px;
margin: 0px;
text-align: center;
border-bottom: thin solid #000000
}
div#nav {
width: 200px;
padding: 1px;
margin-bottom: 0px;
margin-top: -1px;
margin-left: 0;
float: left;
border-right: thin solid #000000;
border-left:none;
border-bottom: thin solid #000000;
}
div#main {
margin-left: 210px;
margin-top: -10px;
padding: 5px;
}
div#footer {
padding: 15px;
margin: 0px;
border-bottom: thin solid #000000;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: none;
}


</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Ross's Homepage</h1>
</div>
<div id="nav">
<h2>Navigation</h2>
Home
<br>
Contact
<br>
About
<br>
</div>
<div id="main">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus at tellus interdum euismod. Pellentesque id dui enim, sit amet rhoncus justo. Ut dignissim, nibh et faucibus consequat, ante risus feugiat tellus, at sodales eros leo non tortor. Etiam interdum dictum lobortis. Nullam elementum mauris vitae magna malesuada euismod. Donec vehicula eros vitae metus consequat sed tristique velit egestas. Donec faucibus scelerisque mi, sed molestie ipsum dictum et. Sed facilisis suscipit neque, id volutpat erat volutpat ut. Donec faucibus diam et quam dictum lobortis. Duis lacus purus, faucibus a mollis sit amet, congue at eros. Morbi mauris nunc, blandit faucibus tincidunt et, volutpat non erat.

Pellentesque at magna dignissim nulla varius consectetur eu quis neque. Nunc quam risus, pretium at iaculis ac, congue non arcu. Nunc quis magna et felis congue dapibus nec vitae magna. Fusce in nulla eget lacus accumsan vulputate sed sed tellus. Phasellus at sagittis mauris. Praesent vitae dolor sem. Aenean luctus venenatis ligula, vitae interdum tellus scelerisque ut. Vestibulum luctus nibh in ipsum dignissim aliquam. Nulla scelerisque, odio eu ornare consectetur, ligula mauris vulputate lacus, in faucibus dui eros non nisi. Morbi cursus, odio non aliquet porttitor, lectus felis eleifend tellus, et pulvinar eros nisi sed dui. Praesent vulputate mollis tortor et sodales. Sed elementum nulla ac tellus feugiat laoreet. Pellentesque lacus lectus, aliquet at luctus eget, molestie et purus. Phasellus fringilla cursus gravida. Etiam ultricies pellentesque eros at varius.

Ut gravida, justo eu ultricies ornare, magna nunc adipiscing felis, id congue dui nunc a purus. Mauris sagittis sem eu libero blandit et commodo massa fringilla. Vestibulum eget sapien libero, sit amet feugiat sem. Integer dolor massa, ultricies vitae ornare eu, scelerisque sed diam. Curabitur euismod felis vitae ante placerat ultrices. Ut eros nibh, blandit eu auctor commodo, volutpat quis risus. Nam adipiscing consectetur gravida. Curabitur convallis quam at elit ultricies faucibus. Donec consequat ligula nec neque adipiscing vitae varius lacus lacinia. Maecenas sit amet nisl ut velit sollicitudin mattis vel a ligula. Proin semper porta urna, tincidunt dignissim dui ornare vel. Maecenas est augue, placerat gravida pulvinar porta, hendrerit in turpis. Vivamus iaculis vehicula eleifend. Nunc ut ullamcorper odio.
</h3>
</div>
</div>
</body>
</html>
Go to the top of the page
 
+Quote Post
RossM
post Oct 12 2009, 03:03 PM
Post #6


Newbie
*

Group: Members
Posts: 4
Joined: 29-September 09
Member No.: 34,153
Thanks alot for your help!
Go to the top of the page
 
+Quote Post
« Next Oldest · CSS · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

RSS Lo-Fi Version Time is now: 2nd September 2010 - 10:32 PM
Powered By IP.Board © 2010  IPS, Inc.