0

Hi, quite new to css and as part of an assignment we have to create a set html page to look like it should using css. My problem(the relevant code is provided), is that the menu at the top where it looks like: first second
third fourth

I need it to be on only one line pushed right, and the box to be one line so like: first second third fourth (next to the right hand side).

I dont know which part of my css is doing this. Help would be appreciated.

<!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">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>title</title>
	
<style>


body	{
background-color: #c7c1c1;
font-family: Palatino Linotype, Georgia Times, Times New Roman, Serif;

}

div#centrepage	{
  margin-left: 150px;
  margin-right: 150px;
  margin: auto;
  background-color: #5D2C2C;
  max-width: 980px;
  min-width: 450px;
  
   
}

div#navbar a	{
	text-decoration: none;
	font-weight: bold;
	color: grey;
	
}

div#navbar 	{
	position: absolute;
	top: 20px;
	background-color: #5D2C2C;
	padding: 0px;
	min-width: 450px;
	max-width: 980px;
	text-align: right;
	margin: auto;
			
}
div#navbar ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
  
div#navbar  li {
  float: left;
  position: relative;
  
  background-color: #5D2C2C;
    min-width: 450px;
	max-width: 980px;
  }
  
  li ul {
  display: none;
  position: absolute; 
  top: 1em;
  left: 0;
  }

  li > ul {
	top: auto;
	left: auto;
	}
	li:hover ul { 
	display: block; 
}


div#intro	{
background-color: white;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
margin-bottom: 11px;
padding-top: 1px;

}

h1	{
background-color: white;
padding: 40px;
}


</style>
	
</head>

<body>
<div id="centrepage">
	<div id="thetitle">
	<h1>H1</h1>
	</div>
	
  <div id="navbar">
    <ul>
			<li><a href="#intro">First</a></li>
			<li><a href="#history">Second</a></li>
			<li><a href="#national">Third</a></li>
			<li><a href="#maritime">Fourth</a>

				<ul>
					<li><a href="#letters">1</a></li>
					<li><a href="#numbers">2 </a></li>
				</ul>
			</li>
    </ul>
  </div>

  
<div id="wikilink">
	<p>Information from <a href="http://www.wikipedia.com/en">Wikipedia</a></p>
</div>
</body>
</html>
3
Contributors
5
Replies
6
Views
8 Years
Discussion Span
Last Post by beforetheyknew
0

Hi,

Is this what you're after? I have changed what you see below.

div#navbar 	{
	position: absolute;
	top: 20px;
	padding: 0px;
	width: 980px;
	margin: auto;
	background-color: #5D2C2C;
			
}
div#navbar ul 
{
  float: right;
  padding: 0 10px 0;
  margin: 0;
  list-style: none;
  }
  
div#navbar  li {
  float: left;
  width: 75px;
  }
  
  li ul {
  display: none;
  position: absolute; 
  top: 1em;
  left: 0;
}

You should remove your min-width and max-width and keep to width. If you want your page to have a max and min width then declare this in the body or page wrapper id or class.

0

Crago's code works, but here's how i would do it

body {
                background: #c7c1c1; /*shorthand */
                font-family: Palatino Linotype, Georgia Times, Times New Roman, Serif;
            }
            
            div#centrepage {
                background: #5D2C2C; /*shorthand */
                width: 980px; /*why we declaring min and max? */
                position: relative; /*so we can center div properly and position elements within it absolutely -notice we moved the top:20 from #navbar */
		margin: 0 auto /* removed your left and right, added auto */
            }
            
            div#navbar a {
                text-decoration: none;
                font-weight: bold;
                color: #808080; /* Changed this to hex */
            }
            
            div#navbar {
                position: absolute; /* relative would probably be better... incase he ever decided to add some additional height */
                top: 0;
                background: #5D2C2C; /*shorthand */
                padding: 0px;
                width: 980px; /*why we declaring min and max? */
                text-align: right;
            }
            
            div#navbar ul {
                padding: 0;
                list-style: none;
		float:right; /* floating it right, instead of doing text-align */
		margin:0 20px 0 0; /*top right bottom left */
				
            }
            
            div#navbar li {
                float: left;
                position: relative;
                background: #5D2C2C; /*shorthand */
                width: 150px; /*change the width of each menu item here */
            }

            
            li ul {
                display: none;
                position: absolute;
                top: 1em;
                left: 0;
            }
            
            li > ul {
                top: auto;
                left: auto;
            }
            
            li:hover ul {
                display: block;
            }
            
            div#intro {
                background-color: white;
                padding-left: 5px;
                padding-bottom: 5px;
                padding-right: 5px;
                margin-bottom: 11px;
                padding-top: 1px;
            }
            
            h1 {
                background-color: white;
                padding: 40px;
            }

Edited by macneato: Adding comments

0

No sorry man looks good but i mean all on a single line box like the daniweb forum index thing above, and then pushed to the right, but still all on one line with spaces in between the words. Any ideas?

0

I'm not sure if im following you, but something like this (replace #navbar li selector)

div#navbar li {
background-color:#5D2C2C;
float:left;
padding:0 2px;
position:relative;
}
0

Hey thanks for trying guys, i think my css is so bad it was just overwriting whatever i added, (first time using css) jst gonna move on, do some other sections for now. Thank you

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.