| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 405
|
 Posted: Tue Apr 08, 2008 10:21 am link boxes height |
 |
|
|
I made one of my horizontal links to go across two lines, the other links go across one line. Thing is now, the borders stop halfway and the hover stops halfway for the links accross one line. Is there a way I can get the links to expand over two rows? and so get the borders and hovers to do the same.
| Code: |
.vmenu ul
{margin: 0; width: 750px; height: 40px;float: left; background: #fff url('images/hmenu.gif') repeat-x center;}
.vmenu ul li {display: inline;}
.vmenu ul li a
{float: left; text-align: center; width:90px;text-decoration: none; color: #666666; text-transform: uppercase; padding: 4px 6px; border-right: 1px solid #666666;}
.vmenu ul li a:visited {color: #666;}
.vmenu ul li a:hover
{color: gray; background: #fff;}
|
here is the list in the html
| Code: |
<div class="vmenu">
<ul>
<li><a href="index.htm">home</a></li>
<li><a href="vassistant.htm">virtual assistant</a></li>
<li><a href="tutorials.htm">tutorials</a></li>
<li><a href="contacts.htm">contacts</a></li>
<li><a href="about.htm">about</a></li>
<li><a href="privacy.htm">privacy</a></li>
<li><a href="sitemap.htm">sitemap</a></li>
</ul>
</div>
|
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1163
|
| Posted: Tue Apr 08, 2008 5:30 pm |
|
|
|
This is the only thing I can think of right now.
| Code: |
<div class="vmenu">
<ul>
<li><a href="index.htm">home<br><br></a></li>
<li><a href="vassistant.htm">virtual assistant</a></li>
<li><a href="tutorials.htm">tutorials<br><br></a></li>
<li><a href="contacts.htm">contacts<br><br></a></li>
<li><a href="about.htm">about<br><br></a></li>
<li><a href="privacy.htm">privacy<br><br></a></li>
<li><a href="sitemap.htm">sitemap<br><br></a></li>
</ul>
</div> |
|
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Wed Apr 09, 2008 2:41 am re |
|
|
|
| thanks I never thought of that, its a good way round I will try it. |
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Wed Apr 09, 2008 3:04 am re |
|
|
|
| Tried it but the border line is double rows on the one link and on the others the border remains small for one row. Maybe I could add a class on the list link that takes up two rows, to make it wider and so fit in the single the row, wanted to avoid that as I have 130 pages to change. thanks anyway |
|
sticks464
Joined: 31 Dec 2006
Posts: 1163
|
| Posted: Wed Apr 09, 2008 3:57 am |
|
|
|
Give this a try
css
| Code: |
.menu {
list-style:none;
margin:0;
/*font-size:1.2em;*/
float:left;
width:750px;
background:#000;
text-align:center;
}
.menu li {
display:inline;
border-right:1px solid #fff;
padding-right:0.5em;
margin-right:0.5em;
}
.menu a {
color: #fff;
font-family: Tahoma;
text-transform:uppercase;
text-decoration:none;
}
.menu a:hover {
color: #fff;
text-decoration:underline;
}
.menu li#lastItem {
border:none;
} |
html
| Code: |
<ul class="menu">
<li><a href="index.htm">home</a></li>
<li><a href="vassistant.htm">virtual assistant</a></li>
<li><a href="tutorials.htm">tutorials</a></li>
<li><a href="contacts.htm">contacts</a></li>
<li><a href="about.htm">about</a></li>
<li><a href="privacy.htm">privacy</a></li>
<li id="lastItem"><a href="sitemap.htm">sitemap</a></li>
</ul> |
I think I gave this to you the other day but you had already used another one. |
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Wed Apr 09, 2008 4:01 am re |
|
|
|
| ok I will try that and get back later on this evening |
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Wed Apr 09, 2008 4:22 am re |
|
|
|
| no it did not work but it looked good, thing is, the links were on top of each other and jumbled together not along the whole width. I did not really want that. But I found I could use the 'find a replace' in my editor for the whole list link text, to expand the width and make the whole word instead of the abbreviation so I will do that. I will add an inline style instead of a class. |
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Wed Apr 09, 2008 6:50 am re |
|
|
|
| Tried a few things like adding a class of width for the single list item, thing is, all of the list items have gone wider. Does anyone know why? I am trying to get the 'Virtual Assistant' sit on one row like the others, the others cannot get wider because there is not enough room for them all. www.bytesizeoffice.co.uk/careers |
|
sticks464
Joined: 31 Dec 2006
Posts: 1163
|
| Posted: Wed Apr 09, 2008 9:25 am |
|
|
|
| Adding a width element will not solve anything here. The controlling element for the whole menu is the font-size. Try changing the font-size where mine was commented out to get the results you want. |
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Wed Apr 09, 2008 11:27 pm re |
|
|
|
| OK I will try that, thanks |
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Thu Apr 10, 2008 12:13 am re |
|
|
|
| Changed the font sizes and tried them really small but the same problem occurred the link would not sit along the row as the others, and that made the borders wrong. So I tried width: auto; and it all works now, the link expands and the others do not have a wider border. Hope that width: auto is good for links accross all browsers, as it works. |
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
