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="">Wikipedia</a></p>
</div>
</body>
</html>
  • 3 Contributors
  • 5 Replies
  • 125 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by beforetheyknew

Dani AI

Generated

Short diagnosis and a simple fix

The menu was wrapping because individual items were effectively wider than the available space and the layout was being driven by floats/absolute rules. and were on the right track: remove the hard min/max widths on each menu item and keep the page width on the wrapper. A clearer, modern approach is to let the nav be a single flexible row and align it to the right.

Minimal example (keeps items on one line and pushes them right)

<nav 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></li>
  </ul>
</nav>
#centrepage { width:980px; margin:0 auto; position:relative; }
#navbar { position:absolute; top:20px; right:0; background:#5D2C2C; }
#navbar ul {
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
  align-items:center;
  flex-wrap:nowrap;
}
#navbar a { display:block; padding:8px 12px; white-space:nowrap; color:grey; text-decoration:none; }

Quick debugging checklist and notes

  • In DevTools inspect the computed widths: if sum(li widths) > container width items will wrap. Remove min/max widths from the li rules and use padding for spacing.
  • A fast, non-flex fallback: ul{white-space:nowrap;} li{display:inline-block;} keeps items on one line in older browsers.
  • Keep the page wrapper (centrepage) responsible for overall width/centering; position the navbar relative/absolute inside that wrapper so right:0 reliably aligns it.
  • For dropdowns keep li { position: relative } and the submenu position: absolute with top:100% so the submenu does not affect the single-line main menu.

This keeps the menu on one line, spaced, and pinned to the right without brittle per-item width rules.

Recommended Answers

All 5 Replies

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.