PDA

Click to See Complete Forum and Search --> : link width problems

PunkSktBrdr01
10-02-2003, 10:27 PM
I'm trying to make links that stretch all the way across their containing div, but they don't. Here's the CSS:


#nav a {
width: 100%;
font-family: Arial, sans-serif;
font-size: 16px;
cursor: pointer;
color: #D42E02;
background-color: #BBBBBB;
text-decoration: none;
border-color: #BBBBBB;
border-style: solid;
border-width: 0 0 2px 0;
}
#nav a:hover, .nav a:active {
background-color: transparent;
}


Here's a link to the test page:

http://www.radioactiverabbit.com/new_layout/

Thanks!
pyro
10-02-2003, 10:58 PM
There is an easier/better way of doing it. Set you navigational a elements to be block level elements. Take a look at http://www.webdevfaqs.com/layouts/layout1.htm to see what I mean.
PunkSktBrdr01
10-03-2003, 11:47 AM
Okay, I'll try that. I looked at the code for the menu, and it has


<span class="hidden">|</span>


What is that for?
toicontien
10-03-2003, 12:10 PM
The <span class="hidden">|</span> is for older browsers that do not display links as block elements and still display them as inline elements. There's a better way to get around this problem:

In CSS in the <head>

<style type="text/css">
<!--
ul.mainMenu {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
}

ul.mainMenu li { /* ACCOUNT FOR AN IE BUG THAT PLACES A 1 EM MARGIN BELOW EACH LIST ITEM */
display: inline;
padding: 0px;
margin: 0px;
}

a.mainItem {
display: block;
/* ANY OTHER COMMON STYLES FOR THE FOUR LINK STATES
LINK, ACTIVE, VISITED, AND HOVER */
}

a.mainItem:link {}
a.mainItem:active {}
a.mainItem:visited {}
a.mainItem:hover {}
-->
</stsyle>


HTML in the <body>


<ul class="mainMenu">
<li><a href="" class="mainItem">Link text"</a></li>
<li><a href="" class="mainItem">Link text"</a></li>
<li><a href="" class="mainItem">Link text"</a></li>
</ul>


Doing things this way will make your main menu appear like a bulleted list for non-CSS browsers and 4.0 browsers.

See: http://www.alistapart.com/stories/journey/

and

http://www.alistapart.com/stories/taminglists/

For another CSS layout, see

http://www.cm-life.com/pages/newdesign/
pyro
10-03-2003, 01:31 PM
Originally posted by toicontien
The <span class="hidden">|</span> is for older browsers that do not display links as block elements and still display them as inline elements.Yes, for that reason and this one: http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-divide-links