HTML + CSS, putting links outside of a list and stopping them wrapping

B@Th*nG

B@Th*nG

B@Th*nG

Soldato
Joined
18 Oct 2002
Posts
6,830
Hey guys,

am learning html and am having trouble with a simple nav bar. I've got it set up so that there's a drop down list on 2 of the 4 links in the bar, but the 2 links which aren't in the list show on different lines. It doesn't seem to matter where i put the "nowrap" or "white-space", it doesn't seem to work.

Code: 
<STYLE>
div#navbar {
	text-align:right;
	position: relative; top: -1em;	/* position the navbar up a line to fit in navbar box */
}

div#navbar a:link {
	font-style: normal;
}

div#navbar a {
	color: white;
	font-style: normal;
	display: block;	/* making the whole link clickable */
	width: 10em;	/* force to set width */
}	

div#navbar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

div#navbar li {
	float: left;
	width 10em;
}

div#navbar li ul {
	display: none;
}

div#navbar li:hover ul {
	display: block;
	width: 10em;
	position: absolute;	
}

div#navbar p {
	white-space: no-wrap;
	overflow: hidden;
}
</STYLE>

<div id="navbar" title="Navigation Bar">

<p><a href="index.html">home</a>

<ul>
<li><a href="basichtml.html">basic html</a>
	<ul>
	<li><a href="basichtml.html#Headings">headings</a></li>
	<li><a href="basichtml.html#Paragraphs">paragraphs</a></li>
	<li><a href="basichtml.html#Divisions">divisions</a></li>
	<li><a href="basichtml.html#Line Breaks">line breaks</a></li>
	<li><a href="basichtml.html#Basic HTML formatting">basic html formatting</a></li>
	<li><a href="basichtml.html#Images">images</a></li>
	<li><a href="basichtml.html#Links">links</a></li>
	<li><a href="next.html">clickable images</a></li>
	</ul>
</li>


<li><a href="continue.html">page structuring</a>
	<ul>
	<li><a href="continue.html#hiding and displaying divs">hiding and displaying divs</a></li>
	<li><a href="popups.html">pop-ups</a></li>
	<li><a href="dropdowns.html">drop-downs</a><li>
	</ul>
</li>
</ul>


<a href="about.html">about</a></p>

</div>

What am i doing wrong?

B@
 
Code: 
<STYLE>
div#navbar {
    text-align:right;
    position: relative; top: -1em;    /* position the navbar up a line to fit in navbar box */
}

div#navbar a:link {
    font-style: normal;
}

div#navbar a {
    color: white;
    font-style: normal;
    display: block;    /* making the whole link clickable */
    width: 10em;    /* force to set width */
}    

div#navbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

div#navbar li {
    float: left;
    width 10em;
}

div#navbar li ul {
    display: none;
}

div#navbar li:hover ul {
    display: block;
    width: 10em;
    position: absolute;    
}

div#navbar p {
    white-space: no-wrap;
    overflow: hidden;
}
</STYLE>

<div id="navbar" title="Navigation Bar">

<ul>
<li><a href="index.html">home</a></li>
<li><a href="basichtml.html">basic html</a>
    <ul>
    <li><a href="basichtml.html#Headings">headings</a></li>
    <li><a href="basichtml.html#Paragraphs">paragraphs</a></li>
    <li><a href="basichtml.html#Divisions">divisions</a></li>
    <li><a href="basichtml.html#Line Breaks">line breaks</a></li>
    <li><a href="basichtml.html#Basic HTML formatting">basic html formatting</a></li>
    <li><a href="basichtml.html#Images">images</a></li>
    <li><a href="basichtml.html#Links">links</a></li>
    <li><a href="next.html">clickable images</a></li>
    </ul>
</li>


<li><a href="continue.html">page structuring</a>
    <ul>
    <li><a href="continue.html#hiding and displaying divs">hiding and displaying divs</a></li>
    <li><a href="popups.html">pop-ups</a></li>
    <li><a href="dropdowns.html">drop-downs</a><li>
    </ul>
</li>

<li><a href="about.html">about</a></li>
</ul>


</div>
 
You must log in or register to reply here.
Back
Top Bottom