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:
<!-- m --><a class="postlink" href="http://www.radioactiverabbit.com/new_layout/">http://www.radioactiverabbit.com/new_layout/</a><!-- m -->
Thanks!There is an easier/better way of doing it. Set you navigational a elements to be block level elements. Take a look at <!-- m --><a class="postlink" href="http://www.webdevfaqs.com/layouts/layout1.htm">http://www.webdevfaqs.com/layouts/layout1.htm</a><!-- m --> to see what I mean.Okay, I'll try that. I looked at the code for the menu, and it has
<span class="hidden">|</span>
What is that for?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=http://www.webdeveloper.com/forum/archive/index.php/"" class="mainItem">Link text"</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="mainItem">Link text"</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" 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: <!-- m --><a class="postlink" href="http://www.alistapart.com/stories/journey/">http://www.alistapart.com/stories/journey/</a><!-- m -->
and
<!-- m --><a class="postlink" href="http://www.alistapart.com/stories/taminglists/">http://www.alistapart.com/stories/taminglists/</a><!-- m -->
For another CSS layout, see
<!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/Originally">http://www.cm-life.com/pages/newdesign/Originally</a><!-- m --> 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: <!-- m --><a class="postlink" href="http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-divide-links">http://www.w3.org/TR/WCAG10/wai-pageaut ... vide-links</a><!-- m -->
#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:
<!-- m --><a class="postlink" href="http://www.radioactiverabbit.com/new_layout/">http://www.radioactiverabbit.com/new_layout/</a><!-- m -->
Thanks!There is an easier/better way of doing it. Set you navigational a elements to be block level elements. Take a look at <!-- m --><a class="postlink" href="http://www.webdevfaqs.com/layouts/layout1.htm">http://www.webdevfaqs.com/layouts/layout1.htm</a><!-- m --> to see what I mean.Okay, I'll try that. I looked at the code for the menu, and it has
<span class="hidden">|</span>
What is that for?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=http://www.webdeveloper.com/forum/archive/index.php/"" class="mainItem">Link text"</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="mainItem">Link text"</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" 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: <!-- m --><a class="postlink" href="http://www.alistapart.com/stories/journey/">http://www.alistapart.com/stories/journey/</a><!-- m -->
and
<!-- m --><a class="postlink" href="http://www.alistapart.com/stories/taminglists/">http://www.alistapart.com/stories/taminglists/</a><!-- m -->
For another CSS layout, see
<!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/Originally">http://www.cm-life.com/pages/newdesign/Originally</a><!-- m --> 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: <!-- m --><a class="postlink" href="http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-divide-links">http://www.w3.org/TR/WCAG10/wai-pageaut ... vide-links</a><!-- m -->