 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 400
|
 Posted: Thu Apr 03, 2008 2:40 am class problem with link |
 |
|
|
I am trying to do a class as the last navigation list shows a right border that I do not want. But I cannot get the class to work. Does anyone know how to solve this?
| Code: |
<div id="container">
<div id="header">
</div>
<div id="centercontent">
<div id="leftcontent">
<ul class="menu">
<li><a href="index.htm">Homepage</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="studio.htm">Studio</a></li>
<li><a href="guestbook3.htm">GuestBook</a></li>
<li><a href="contacts.htm">Contacts</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="about.htm">About</a></li>
<li class="last"><a href="workshops.htm">Workshops</a></li>
</ul>
</div>
</div></div>
|
the CSS is this:
| Code: |
#container {
width: 750px;
height: 100%;
margin: auto;
background: #000000;
text-align: left;}
#centercontent {
width: 750px;
float: left;
background: #000000;
color: #FFFFFF;
display: inline;
height: 1%;/* combat IE's 3 pixel jog */}
#header {
width: 750px;
height: 64px;
background-color: black;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
border-bottom: 30px solid black;
margin: 0;
padding: 0;}
.menu {
list-style: none;
padding: 0;
width: 750px;}
.menu li a {
background: black url('images/lista.gif') repeat-x bottom left;
color: white;
font-family: Tahoma;
font-size: 1.00em;
display: inline;
float:left;
width: 87px;
border-right: 1px solid;
padding: 3px 0;
padding-left: 5px;
text-decoration: none;
text-align:center;}
menu.ul li last {border-right: 1px solid black;}
.menu li a:active {color: white;}
.menu li a:visited {color: white;}
.menu li a:hover {background-image: url('images/listb.gif');}
|
Also the navigation items do not fill the whole width even though I set them too. Maybe I should text-align center to fix that. Still a beginner though I have worked through many problems |
|
sticks464
Joined: 31 Dec 2006
Posts: 930
|
| Posted: Thu Apr 03, 2008 12:35 pm |
|
|
|
| Code: |
<style type="text/css">
#container {
width: 750px;
height: 100%;
margin: auto;
background: #000000;
text-align: left;}
#centercontent {
width: 750px;
float: left;
background: #000000;
color: #FFFFFF;
display: inline;
height: 1%;/* combat IE's 3 pixel jog */}
#header {
width: 750px;
height: 64px;
background-color: black;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
border-bottom: 30px solid black;
margin: 0;
padding: 0;}
.menu {
list-style:none;
margin:0;
font-size:1.00em;
float:left;
background:#000;
}
.menu li {
display:inline;
border-right:1px solid #fff;
padding-right:0.5em;
margin-right:0.5em;
}
.menu a {
color: white;
font-family: Tahoma;
}
.menu a:hover {
color: #fff;
text-decoration:underline;
}
.menu li#lastItem {
border:none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="centercontent">
<div id="leftcontent">
<ul class="menu">
<li><a href="index.htm">Homepage</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="studio.htm">Studio</a></li>
<li><a href="guestbook3.htm">GuestBook</a></li>
<li><a href="contacts.htm">Contacts</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="about.htm">About</a></li>
<li id="lastItem"><a href="workshops.htm">Workshops</a></li>
</ul>
</div>
</div></div>
</body>
</html> |
|
|
quartzy
Joined: 26 Dec 2007
Posts: 400
|
| Posted: Thu Apr 03, 2008 3:20 pm re |
|
|
|
| thanks, hope it works I have been battling with this for ages. |
|
quartzy
Joined: 26 Dec 2007
Posts: 400
|
| Posted: Fri Apr 04, 2008 12:30 am re |
|
|
|
Well I tried this and I still have the border showing. So it does not work.
| Code: |
<li><a href="contacts.htm">Contacts</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="about.htm">About</a></li>
<li id="lastitem"><a href="workshops.htm">Workshops</a></li>
</ul>
</div>
|
| Code: |
.menu li a {
background: black url('images/lista.gif') repeat-x bottom left;
color: white;
font-size: 1.00em;
font-family: Tahoma;
font-weight: bold;
display: inline;
float:left;
width: 88px;
border-right: 1px solid;
padding: 3px 0;
padding-left: 5px;
text-decoration: none;
text-align:center;}
menu li#lastitem {border: none;}
|
|
|
sticks464
Joined: 31 Dec 2006
Posts: 930
|
| Posted: Fri Apr 04, 2008 4:00 pm |
|
|
|
| Well I see I'll only get a halfhearted use from you this time. I f you use the code the way I used it and not your way you would like too, then it will work. If you get it too work ok, if not, discard it. |
|
quartzy
Joined: 26 Dec 2007
Posts: 400
|
| Posted: Fri Apr 04, 2008 5:59 pm re |
|
|
|
| I dont know what you mean, did'nt I use it your way? apart from making the I for item small case. Anyhow I have found that inline style is what I need to do, as nothing else works. style="border-right: 0" |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
