6 replies [Last post]
daemon
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2004-07-04
Posts: 12
Points: 0

alright...so im trying to create a simple navbar with separators between some of the buttons. iv tried to use the <br /> tag, but w3c.org says that isnt valid...does anyone know of a different way to do it?

******************************
xhtml markup

<div id="leftnav">
<ul>
<li class="leftnav-top"><a href="index.html" title="The Wire - Web Design News">The Wire</a></li>
<li><a href="goodies.html" title="Web Design Resources">Goodies</a></li>
<li><a href="journal.html" title="My Life's Wanderings">Wanderings</a></li>
<li><a href="about.html" title="About My Bad 'Ol Self">About</a></li>
<li><a href="music.html" title="My Love of Dark Melody">Music</a></li>
<li><a href="computing.html" title="Me and My Computers">Computing</a></li>
<li><a href="work.html" title="My Resume">Work/Resume</a></li>
<li><a href="links.html" title="Places to Go">Links</a></li>
</ul>
</div>

css

#leftnav {
float: left;
background: #000;
border: none;
width: 1px;
margin-top: 5px;
}

/* navbar boxes/buttons */
#leftnav ul {
list-style: none;
border: 0;
}

#leftnav li {
text-align: center;
border-bottom: 1px solid #fff;
width: 113px;
margin: 0;
padding: 0;
font: 10px/15px verdana, "lucida grande", lucida, arial, sans-erif;
color: #fff;
background: #4b4b4b;
}

.leftnav-top {
border-top: 1px solid #fff;
}

#leftnav li a {
display: block;
font-weight: normal;
padding: 0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
background: #4b4b4b;
color: #fff;
width: 111px;
text-decoration: none;
}

#leftnav li a:hover {
font-weight: normal;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
background: #fff;
color: #000;
text-decoration: none;
}
******************************

rmfred
Offline
Elder
Rock Springs, WY
Last seen: 1 year 42 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

&lt;br /&gt;

got a link we can view?
don't see any br in your code?

www.powerbitwebdesign.com Powerbit your custom web design company

daemon
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2004-07-04
Posts: 12
Points: 0

&lt;br /&gt;

here is what i have...i dont have a link to view it yet...
but ill elaborate on what i want to do with it.

the markup above and here is supposed to make up a large box with numerous buttons within it. these buttons are 15px high and 113px wide. what i would like to do is separate these buttons with around 113px of space.
******************************
xhtml markup

<div id="leftnav">
<ul>
<li class="leftnav-top"><a href="index.html" title="The Wire - Web Design News">The Wire</a></li>
<li><a href="goodies.html" title="Web Design Resources">Goodies</a></li>
<br />
<br />
<li><a href="journal.html" title="My Life's Wanderings">Wanderings</a></li>
<li><a href="about.html" title="About My Bad 'Ol Self">About</a></li>
<li><a href="music.html" title="My Love of Dark Melody">Music</a></li>
<li><a href="computing.html" title="Me and My Computers">Computing</a></li>
<li><a href="work.html" title="My Resume">Work/Resume</a></li>
<br />
<br />
<li><a href="links.html" title="Places to Go">Links</a></li>
</ul>
</div>

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 10 years 30 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

&lt;br /&gt;

To make it validate you should put the <br /> tags between the <li></li> tags

<div id="leftnav">
<ul>
<li class="leftnav-top"><a href="index.html" title="The Wire - Web Design News">The Wire</a></li>
<li><a href="goodies.html" title="Web Design Resources">Goodies</a><br /><br /></li>
<li><a href="journal.html" title="My Life's Wanderings">Wanderings</a></li>
<li><a href="about.html" title="About My Bad 'Ol Self">About</a></li>
<li><a href="music.html" title="My Love of Dark Melody">Music</a></li>
<li><a href="computing.html" title="Me and My Computers">Computing</a></li>
<li><a href="work.html" title="My Resume">Work/Resume</a><br /><br /></li>
<li><a href="links.html" title="Places to Go">Links</a></li>
</ul>
</div>

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

daemon
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2004-07-04
Posts: 12
Points: 0

&lt;br /&gt;

thanks for that bit of info. Smile

but the main trouble im having is with the grey space and explorer. whenever i try to make a break inside a list item or try to make a new div inide the list item a wad of ugly grey space accompanies it (i just want it to be black between the buttons).
you can see what i mean here:

http://www.goth.net/~murray

a new technique i tried (using divs) can be viewed above. here's the css/xhtml that creates it...
**************************

XHTML
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>
Angst - Web Design News and Resources
</title>
<link rel="stylesheet" type="text/css" href="style1.css" />

</head>

<body>

<!--The markup that follows is for the top homebar-->
<div id="topbar">
<div id="homebarroll">
<a id="homebar" href="index.html" title="Angst - Web Design News and Resources From the
Editor's PowerMac.">
<span class="hide">
Angst - Web Design News and Resources From the Editor's
PowerMac.
</span>
</a>
</div>
</div>
<!--===============================================-->

<!--The markup that follows is for the leftnav sidebar-->
<div id="leftnav">
<ul>
<li class="leftnav-top"><a href="index.html" title="The Wire - Web Design News">The Wire</a></li>
<li><a href="goodies.html" title="Web Design Resources">Goodies</a></li>
<li>
<div id="blankbox1">
<ul>
<li />
</ul>
</div>
</li>
<li><a href="journal.html" title="My Life's Wanderings">Wanderings</a></li>
<li><a href="about.html" title="About My Bad 'Ol Self">About</a></li>
<li><a href="music.html" title="My Love of Dark Melody">Music</a></li>
<li><a href="computing.html" title="Me and My Computers">Computing</a></li>
<li><a href="work.html" title="My Resume">Work/Resume</a></li>
<li>
<div id="blankbox2">
<ul>
<li />
</ul>
</div>
</li>
<li><a href="links.html" title="Places to Go">Links</a></li>
</ul>
</div>
<!--===================================================-->

<!--The markup that follows includes all of the components of the content area-->
<div id="locimg">
<img src="img/thewire.gif" alt="The Wire - Web Design News" />
</div>
<!--====================================================-->

</body>

</html>

css

body {
color: #fff;
background: #000;
padding: 0 ;
font-family: verdana, "lucida grande", lucida, arial, helvetica,
sans-serif;
font-size: 10px;
}

/* top area for home bar to go */

#topbar {
float: left;
background: #000;
color: #fff;
border: 0;
border-bottom: 0px;
margin-right: 100%;
padding: 0;
text-align: left;
height: 50px;
}

.hide {
display: none;
}

/* Image-free home bar with rollover */
#homebarroll {
margin: 0;
padding: 0;
border: 0;
width: 800px;
height: 50px;
background: url(img/hb_roll.gif) no-repeat;
}

#homebar {
display: block;
padding: 0;
border: 0;
margin: 0;
background: url(img/hb.gif) no-repeat;
width: 800px;
height: 50px;
}

a#homebar:hover {
background: url(img/hb_roll.gif) no-repeat;
}

/* left hand navigation bar */

#leftnav {
float: left;
background: #000;
border: none;
width: 1px;
margin-top: 5px;
}

/* navbar boxes/buttons */
#leftnav ul {
list-style: none;
border: 0;
}

#leftnav li {
text-align: center;
border-bottom: 1px solid #fff;
width: 113px;
margin: 0;
padding: 0;
font: 10px/15px verdana, "lucida grande", lucida, arial, sans-erif;
color: #fff;
background: #4b4b4b;
}

.leftnav-top {
border-top: 1px solid #fff;
}

#leftnav li a {
display: block;
font-weight: normal;
padding: 0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
background: #4b4b4b;
color: #fff;
width: 111px;
text-decoration: none;
}

#leftnav li a:hover {
font-weight: normal;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
background: #fff;
color: #000;
text-decoration: none;
}

/* Blank Boxes Here*/
#blankbox1 ul {
list-style: none;
border: none;
background: #000;
}

#blankbox1 li {
text-align: center;
height: 15px;
width: 113px;
margin: 0;
padding: 0;
color: #000;
background: #000;
border: none;
}

#blankbox2 ul {
list-style: none;
border: none;
background: #000;
}

#blankbox2 li {
text-align: center;
height: 15px;
width: 113px;
margin: 0;
padding: 0;
color: #000;
background: #000;
border: none;
}

/* Site Location Indication Image */

#locimg {
height: 75px;
float: left;
margin: 5px 0px 0px 150px;
voice-family: "\"}\";
voice-family: inherit;
margin: 5px 0px 0px 300px;
}

*****************************

thanks beforehand.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 1 week 5 days ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

&lt;br /&gt;

Did you fix it? In both IE and Firefox it's fine.

Verschwindende wrote:
  • CSS doesn't make pies

daemon
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2004-07-04
Posts: 12
Points: 0

&lt;br /&gt;

yes, thanks.