Hi
I am trying to achieve this <!-- m --><a class="postlink" href="http://www.boostnowbreaks.co.uk/test/navigation.gif">http://www.boostnowbreaks.co.uk/test/navigation.gif</a><!-- m -->
What I have at the moment is this <!-- m --><a class="postlink" href="http://www.boostnowbreaks.co.uk/test/navigation.htm">http://www.boostnowbreaks.co.uk/test/navigation.htm</a><!-- m -->
I have tried everything but I cannot get the home icon to be inline with the navigation as the gif example, could someone please throw some light on how i can achieve this please!!
Thank YouI take it the little house icon is the home link for your site? If so, use the IMG element to embed an image on the page. Then use CSS to get it lined up like you want:
#nav img {
vertical-align: middle;
}Thanks but that does not work unless I am doing something wrong
<ul id="nav">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/icon-home.gif" alt="" />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Racing</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Hospitality </a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">History</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Team</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Offices</a></li>
</ul>
</li>I have got the icon within the nav but if you take a look now the navigation does not fit and the last item drops below the others.
I have adjusted the widths but it becomes a mess.
I know we are fairly close to cracking this, so your help in this would be greatly appreciated!<ul id="nav">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/icon-home.gif" alt="" />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Racing</a></li>That's not valid HTML.What you need is:
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/""><img ...></a></li>
<li>...</li>
You need to add the image and link as the first list item. Only LI tags can be the children of UL or OL tags. No other tag will show up correctly if directly inside the UL or OL tags.
I am trying to achieve this <!-- m --><a class="postlink" href="http://www.boostnowbreaks.co.uk/test/navigation.gif">http://www.boostnowbreaks.co.uk/test/navigation.gif</a><!-- m -->
What I have at the moment is this <!-- m --><a class="postlink" href="http://www.boostnowbreaks.co.uk/test/navigation.htm">http://www.boostnowbreaks.co.uk/test/navigation.htm</a><!-- m -->
I have tried everything but I cannot get the home icon to be inline with the navigation as the gif example, could someone please throw some light on how i can achieve this please!!
Thank YouI take it the little house icon is the home link for your site? If so, use the IMG element to embed an image on the page. Then use CSS to get it lined up like you want:
#nav img {
vertical-align: middle;
}Thanks but that does not work unless I am doing something wrong
<ul id="nav">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/icon-home.gif" alt="" />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Racing</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Hospitality </a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">History</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Team</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Offices</a></li>
</ul>
</li>I have got the icon within the nav but if you take a look now the navigation does not fit and the last item drops below the others.
I have adjusted the widths but it becomes a mess.
I know we are fairly close to cracking this, so your help in this would be greatly appreciated!<ul id="nav">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/icon-home.gif" alt="" />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Racing</a></li>That's not valid HTML.What you need is:
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/""><img ...></a></li>
<li>...</li>
You need to add the image and link as the first list item. Only LI tags can be the children of UL or OL tags. No other tag will show up correctly if directly inside the UL or OL tags.