Member Avatar for beforetheyknew

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
  • 104 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by beforetheyknew
Member Avatar for Cragdo

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.

Member Avatar for macneato

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 because: Adding comments
Member Avatar for beforetheyknew

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?

Member Avatar for macneato

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;
}
Member Avatar for beforetheyknew

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.