you could add some padding to the a tag.
Peter
thanks
i just tried this,
my menu is horizontal so it makes every thing jump,
as the text is pretty close together,
is there a way that doesnt.
http://thisisharrington.com/wordpress/
take a look. if you have a chance,
what id like to happen is the section you go in stays highlighted which ive managed to do but the rollover yellow is thinner than the
yellow when its highlighting the section.
see what i mean.
Yeah, you should not add it to the a:hover tag, but to the a (without the hover).
That way a:hover inherits the padding from a.
You could remove the padding-left from #navlist li to enhance the effect.
The a:active pseudo tag is probably what you’re looking for for your other question, however I have seen cases that didn’t work like expected.
Peter
this has now spread the menu items apart, is there a way i can sqeeze these back together without loosing the width on the yellow.
thanks
give the <a>s the padding you require and also make them display:block in your css. This should highlight the whole block when hovered
this has now spread the menu items apart..
only by 1px, since your li’s first had a 5px left padding, and now your a’s have a 3px padding on both sides (which gives a total of 6px between the a’s, if you removed the left padding on the li’s).
Peter
give the <a>s the padding you require and also make them display:block in your css.
Before doing that he has to put the h1 also in a li (it’s actually not good coding the way it’s now), and have the li’s float left.
Peter
You can do this
<style type=”text/css”>
a:link {
color: #006666;
}
a:visited {
color: #999999;
}
a:hover {
color: #0033FF;
}
a:active {
color: #00FFFF;
}
</style></head>
<body>
<div style=”width:200px;”onMouseOver=”this.style.backgroundColor=’#fff200′” onMouseOut=”this.style.backgroundColor=’#ffffff'” bgcolor=”#ffffff”>
My Link
</div>
GAry
p
{ font-family: Arial, sans-serif;
font-size: 11px;
line-height: 10px;
margin: 0 0 5px 0;
color: #373737;
letter-spacing: -.03em;
}
ul
{ font-family: Arial, sans-serif;
font-size: 11px;
line-height: 10px;
margin: 0 0 5px 0;
color: #373737;
padding-top: 4px;
letter-spacing: -.03em;
}
a
{ color: #373737;
text-decoration: none;
padding: 0 0px 0 0px;
}
a:hover
{ color: #373737;
text-decoration: none;
background-color:#fff200;
}
h1
{
font-size: 19px;
font-family: Arial , sans-serif;
margin: 5px 0;
color: #373737;
padding-bottom: 8px;
letter-spacing: -.03em;
}
h2
{ font-size: 15px;
font-family: Arial, sans-serif;
line-height: 5px;
color: #373737;
margin: 0 0 0 0;
padding-bottom: 8px;
letter-spacing: -.03em;
}
h3
{ font-size: 20px;
font-family: Arial, sans-serif;
color: #373737;
margin: 0 0 0 0;
padding-bottom: 8px;
}
h4
{ color: #373737;
font-family: Arial, sans-serif;
font-size: 12px;
margin-bottom: 12px;
}
this how it looks at the moment:
yes probably very messy? right
can you help me out?
We should probably start with cleaning up your xhtml. The suggestion of miocene22 is not that bad, but it won’t work for your code.
If you add display: block; to your anchor link tags (<a>), then your menu items will be displayed under vertically, not horizontally.
To correct that, you would have to float your list items left, but since the first anchor link isn’t a list item, it won’t work.
You also should move the <h1> tag outside the <ul>, or in each <li>.
Peter
sorry i dont understand;
where is the <h1> tag in the
either in your header.php or your index.php, starting with
<ul id="navlist">
Peter
<ul id="navlist">
<h1>
<a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>
<!-- To show "current" on the Archive Page (a listing of all months and categories), individual posts, but NOT individual posts in category 10 -->
<li<?php
if (is_page('latest') || is_single() && !in_category('10'))
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/wordpress/latest">latest</a>
</li>
<!-- To show "current" on the Archive Page (a listing of all months and categories), individual posts, but NOT individual posts in category 10 -->
<li<?php
if (is_page('archive') || is_single() && !in_category('10'))
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/wordpress/archive">archive</a>
</li>
<!-- To show "current" on any posts in category 10, called Design -->
<li<?php
if (is_page('blog') || in_category('10') && !is_single())
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/wordpress/blog/">blog</a>
</li>
<!-- To show "current" on the About Page -->
<li<?php
if (is_page('info'))
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/wordpress/info/">info</a>
</li>
</h1>
</ul>
ok here it is, i think right.
this is my header php
do i deleate the <h1>?
