Learn VBA & Macros in 1 Week!

CSS - Css Horizontal Navigation Bar With 2 Image States?

Full Excel VBA Course - Beginner to Expert

Css Horizontal Navigation Bar With 2 Image States?	View Content

I have been searching on the level world wide web for a tutorial about how to get CSS down for a horizontal navigation bar that uses different images for each individual button's off and on states?

Many of the tutorials I have found use some sort of background or two state images, and then write text on top the the images.

What if the buttons are designed in a non-arial/verdana/times/san serif font? I assume it would be best to just use images for the nav bar, but then, how do I write the CSS for a nav bar that's using a specific image as it's off stage, and then switches to another image when you scroll over it?

Full Excel VBA Course - Beginner to Expert

Horizontal Navigation

Similar Tutorials

View Content

I have a menu, click he http://progra.ro/demomenu/
This menu not appear correctly in Internet Explorer 6 due to "SPAN" element. Anyone know how to fix this problem leaving the span element intact in HTML ?

All browser show the menu correctly, except IE6.Thanks!

Centered Horizontal Navigation

Similar Tutorials

View Content

Hi everyone,

I am trying to make a horizontal navigation near the top of my website. But I can't seem to make it center but AND horizontal, i've only been able to center it but not horizontal... or have it horizontal but not center.

This is my CSS so far.

Quote:
ul#nav li {
display:inline;
margin: 0 auto;
width: 100%;
text-align:center;
}

ul#nav li a {
display:block;
height:48px;
width:113px;
background: transparent url(images/nav.png);
margin: 0 auto;
text-indent:-9009px;
}
ul#nav li a:hover {background-position:0 -48px}

ul#nav li#photos a {
width:139px;
margin: 0 auto;
background-position:-113px 0;
}
ul#nav li#photos a:hover {background-position:-113px -48px}

My home link and photo link are currently centered and on top of each other in a vertical fashion with this code.

Please help!

Help With Horizontal List Navigation In Mozilla

Similar Tutorials

View Content

I'm making a horizontal navigation menu using lists and CSS. It looks fine in IE, but in Mozilla, the double border on the bottom appears just beneath the top one, and the next line shows up after the unordered list. Hard to explain - you'd basically have to check it out for yourself:

http://www.michaelaparicio.com/

Any help would be greatly appreciated! Thanks.

Regards,
Mike Aparicio

Unwanted Item In Horizontal Navigation

Similar Tutorials

View Content

I'm a CSS novice, struggling to understand the nuances of some open source CSS I'm using for a site.

The main horizontal navigation has an extra item at the end of the row and I can't figure out why. Can you help me get rid of it?

Here is my include for the navigation:

<ul>
<li><a href="/index.shtml">Home</a></li>
<li><a href="/about.shtml">About</a></li>
<li><a href="/ultreyas.shtml">Ultreyas</a></li>
<li><a href="/weekends.shtml">Weekends</a></li>
<li><a href="/FAQs.shtml">FAQs</a></li>
<li><a href="/servant_community.shtml">Servant Community</a></li>
<li><a href="/resources.shtml">Resources</a></li>
<li><a href="/stay_in_touch.shtml">Stay in Touch</a></li>
<li><a href="/donate.shtml">Donate</a></li>
</ul>

Here is the CSS:
/*----------------------------*/
/* 2.4 - Navigation - Level 2 */
/*----------------------------*/
.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
.nav2 ul {float: left; width: 770px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(64,134,204); font-weight: bold;}
.nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
.nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 770px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}

I'd like "Donate" to be the last item, but there is another empty box appearing to the right of it.

Much obliged,

Laurie

Help With Drop Down Menu Of Horizontal Navigation

Similar Tutorials

View Content

I'm trying to get my horizontal navigation to work for a PTA page I'm creating. New to CSS and I think I've got a bit of the gist of it... but I'm really struggling with this. I've mostly "found" the coding I needed and then modified it to suit my needs.

As a designer, though, I still want it to look the way I want it to and I'm not quite able to accomplish that.

Basically, I would like a drop down menu added to the navigation I've created here - lwptsa . org/newsite/

This is the solution I found - lwptsa . org/newsite/dropdown . html

But I am unable to get the dark blue to continue to the end of the container.

** ACK, not allowed to post images. You can find the image I'm referring to he lwptsa . org/newsite/images/navigation . jpg

I'd like to fix the left margin spacing and it's coloring (A), making the lines between the buttons/blocks white (B) and having the blue flush with the white containers above and below (A). I'd also like to keep the top lines between the drop-down menu (C) but remove it from the main menu/navigation (B).

Hopefully this makes sense. My style sheets a

No drop-down menu, but working spacing and white separating lines (id - navigation):
lwptsa . org/newsite/
Code:

body
{
	margin: 20px;
	padding: 0;
	font: 100%/1.3 arial;
	font-size: medium;
	color: #000;
	background: #ccc;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 1em;
	line-height: 1.1;
}

h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
	font: 80%/1.3 helvetica, arial, sans-serif;
 }
img { border: none; }

a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }

a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }

a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }

#container
{
	margin: 0 auto;
	width: 1024px;
	background: #fff;
}

#container table
{
	font: 80%/1.3 helvetica, arial, sans-serif;
}

#header
{
	font-style:italic;
	font-size:small;
	color: #00693e;
	background: #fff;
	text-align: center;
	height: 115px;
	padding: 20px 20px 20px 30px;
}

#navigation
{
	font-size:small;
	float: left;
	width: 1024px;
	background: #002664;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation ul ul
{
position: absolute;
background: #d1d5da;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */

}

#navigation li a
{
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { color: #a3d869; }

#content-container
{
	float: left;
	width: 1024px;
	background: #fff;
}

#content
{
	height:	inherit;
	clear: left;
	float: left;
	width: 590px;
	padding: 0 20px 0 0;
	margin: 20px 0 20px 30px;
	display: inline;
	border-right: 1px solid #00693e;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 340px;
	padding: 20px 0;
	margin: 0 20px 0 20px;
	display: inline;
}

#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }

#footer
{
	font-size: x-small;
	clear: both;
	color: #fff;
	background: #002664;
	text-align: center;
	padding: 5px;
	height: 1%;
}

#translator
{
	text-align: center;
	margin: auto;
	position: absolute;
}

Drop-down menu, but issue with the blue not continuing to the end and weird issues with separating lines and margins (id - menu):
lwptsa . org/newsite/dropdown . html
Code:

body
{
	margin: 20px;
	padding: 0;
	font: 100%/1.3 arial;
	font-size: medium;
	color: #000;
	background: #ccc;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 1em;
	line-height: 1.1;
}

h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
	font: 80%/1.3 helvetica, arial, sans-serif;
 }
img { border: none; }

a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }

a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }

a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }

#container
{
	margin: 0 auto;
	width: 1024px;
	background: #fff;
}

#container table
{
	font: 80%/1.3 helvetica, arial, sans-serif;
}

#header
{
	font-style:italic;
	font-size:small;
	color: #00693e;
	background: #fff;
	text-align: center;
	height: 115px;
	padding: 20px 20px 20px 30px;
}

#menu ul
{
  font-family: Arial, Verdana;
  font-size:small;
  margin: 0;
  padding: 0;
  list-style: none;}

#menu ul li
{
  display: block;
  position:	relative;
  float: left;}

#menu li ul { display: none; }

#menu li a
{
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #002664;
  margin-left: 1px;
  white-space: nowrap;}

#menu ul li a:hover {   background: #00693e; }

#menu li:hover ul {
  display: block;
  position: absolute;
}

#menu li:hover li {
  float: none;
  font-size: 11px;
}

#menu li:hover a { background: #00693e; }
#menu li:hover li a:hover { color: #fff;background: #008d53; }

#content-container
{
	float: left;
	width: 1024px;
	background: #fff;
}

#content
{
	height:	inherit;
	clear: left;
	float: left;
	width: 590px;
	padding: 0 20px 0 0;
	margin: 20px 0 20px 30px;
	display: inline;
	border-right: 1px solid #00693e;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 340px;
	padding: 20px 0;
	margin: 0 20px 0 20px;
	display: inline;
}

#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }

#footer
{
	font-size: x-small;
	clear: both;
	color: #fff;
	background: #002664;
	text-align: center;
	padding: 5px;
	height: 1%;
}

#translator
{
	text-align: center;
	margin: auto;
	position: absolute;
}

Any and all help welcome. I'm trying to redesign the look and information of the PTA's website.

a.

Horizontal Multi Level Navigation Menu, With Rollover Images

Similar Tutorials

View Content

I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

I would really like your help on this been trying to do it for weeks now!!

Cheers

Horizontal List Navigation Breaks When Load Times Are Slow

Similar Tutorials

View Content

Hi All,

I have a new site and it has a bug that I don't know how to fix. The navigation and sub navigation is done with a list that is styled with CSS to be horizontal. I am not an expert at this, but learned it from a site, but unfortunately can't remember where

The thing is, the site works most of the time. But when pages load slow, sometimes the list gets displayed as a normal vertical list and the entire "look" of the navigation is ruined. I'm sure I've done something wrong, but I don't know what. Are there any CSS experts here who can set me straight?

The site is http://www.thehousebreakingbible.com/training/index.htm

Thanks for your time, Dana

Help With Css On States In Body Tag

Similar Tutorials

View Content

Horizontal Image Gallery

Similar Tutorials

View Content

Hi all

This is my first post so first of all Hello and i hope that i can help people and be helped.

I am trying to create a Horizontal Image gallery which will scroll I have looked on the web but can't find any concrete answer to what i'm tryign to create. I did find a sort of answer but only displays text i include below, if you haveany ideas of ohow i do display images with a horizontal scroll please help

Thank You
Chaz

P.s. I dunno if i have displayed the code correctly or if i'm meant to paste it in differently.
Code:

[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "(URL address blocked: See forum rules)">
<html>
<head>
<title>horizontally scrolling box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    background-color:#303;
 }
#wrapper {    
    width:800px;
    height:300px;
    margin:100px auto 0;
    background-image:url(images/eyes.gif);
 }
#container {
    width:700px;
    height:300px;
    overflow:auto;
 }
#content {
    width:800px;
    height:300px;
    color:#303
 }
#content p {
    margin:0;
    padding:10px;
 }
</style>

</head>
<body>

<div id="wrapper">

<div id="container">

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>

</div>

</div>

</body>
</html>

Remove Horizontal Image Gap

Similar Tutorials

View Content

Hi, I need to lay down two images side-by-side in an absolutely positioned div, but they always have a gap between them. I am guessing there is some inherent padding in an image, much like in a <p>, but I can't get rid of it.

Qualifiers:

1. The containing DIV is absolutely positioned, but I do NOT want to absolutely position the images within. I want them to be inline, so they lay across the div horizontally.

2. As follows from above, I want the images inline, not block.

Basically, I want to control the images, I think there is padding there I cant see, I would like to know how to remove the padding.

Here is my test page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html  >
<head>
    <title>Mind the Gap</title>
</head>
<body>
    
    <p style="position: absolute; top: 250px;">Desired code style</p>
    <div id="bottomAds" style="position: absolute; left: 0px; top: 297px; background-color: orange; width: 760px; height: 90px;">
	<img id="leftImage" alt="sorry cnn" style="border-width: 0; padding: 0; margin: 0; border: none;"  src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif" >
	    <a style="border: none; margin: 0;  padding: 0;" href="http://www.cnn.com"><img alt="sorry cnn" id="adImage" style="margin: 0; padding: 0; border: none; border-width: 0; " src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif"></a>
	</div>
    
    <p style="position: absolute; top: 450px;">Desired Result</p>
    <div id="Div1" style="position: absolute; left: 0px; top: 497px; background-color: orange; width: 760px; height: 90px;">
	<img id="Img1" alt="sorry cnn" style="display: block; float: left;"  src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif" >
	    <a style="border: none; margin: 0;  padding: 0;" href="http://www.cnn.com"><img alt="sorry cnn" id="Img2" style="border: none;" src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif"></a>
	</div>
	    
</body>
</html>

Thanks for looking at this, and for any tips.

CJB

Image Rollovers In Horizontal Nav Bars

Similar Tutorials

View Content

I've seen the link that Kravitz has linked to http://www.dynamicsitesolutions.com...mage_switching/ and while helpful, I think I'm becoming more confused. Part of the problem is that in those examples (and even there I'm getting confused over which example is supposed to be the one to use) the images are assumed to be the same width, so the property is set for 120px. But my images are different widths. Now I can make the rollovers work by for example:

Code:

.item1 a {
background-image : url(menuoffa.jpg);
float:left;
height:28px;
width:103px;
}

.item1 a:hover {
background-image : url(menuona.jpg);
float:left;
height:28px;
width:103px;
}

and then using html in the following way:
Code:

<div class="item1"><a href="pagelink.htm"></a></div>

My problem is that I can't center the items relative to the page If I were going to use 'tables' to do this, then I'd put all the items in one centered cell, but the whole point is not to use tables so what am I doing wrong?!?! Probably more like, what am I doing right, but anyway... And I've tried reading up on going the horizontal unordered list way http://www.webreference.com/program...ists/index.html but I'm using images instead of text so same problems still

OMG I'm going insane

Horizontal Stretch Of Image To Fill Div ?

Similar Tutorials

View Content

Here's my CSS
Code:

 #header {
        position: fixed;
        left: 0;
        width: 100%;
        height: 125px;
        top: 0;
        background-color: #ccffcc;
		background-image: url(images/topbackground2.jpg);
		}

Here's my HTML
Code:

<div id="header" >
<img src="images/spacefiller.jpg" align="left">
<a href="mainFrame.html" target="mainFrame"><img src="images/trial3.jpg" border="0" id="courseAssistant" align="left"/></a >
<img src="images/blend.gif" width="100%" height="20px" style="position: absolute;left: 122px;top:125px; ">
</div>

The problem is that I want the <img src=blend> to stretch the width of the div. The image is only 1px wide so I need it to stretch to fill up the header. The code I have works perfect for Mozilla but it won't work with IE. In IE the img stretches 122px farther than the div and causes there to be horizontal scroll bar at the bottom. I can't seem to figure this one out. Thanks in advance for the help and suggestions.

Css Horizontal Sprite Menu Using One Background Image. Please Help!

Similar Tutorials

View Content

I am looking to make a navigation menu similar to the following:

http : / / www . coremediadesign.co.uk/website_design_company/about_core_media_design.html

This is the sprite image they use.

http : / / img819.imageshack.us/img819/8185/menuo.png

I would like to accomplish the same thing. I am NOT looking for one long image with my entire menu in image format. I want a three-part background image/sprite like the one I posted above that is used as the background/hover/active by repeating it on the x-axis.

I have tried for a long time to get this working but have not been able to. Please help me out.

Image In Horizontal Lists Messing Up Alignment

Similar Tutorials

View Content

Hello all,

I am trying to make a horizontal nav bar using a list. Everything was going good until I tried to add an image (essential a line) to seperate each <li>. When I did this, the height of the nav bar expanded and it moved the entire list down about 15 pixels or so. I am attaching an image before I added the image and after I added the image to show.

Here is my css code for before I add the image:
PHP Code:
#navbar {
    height:37px;
    line-height:33px;
    padding: 2px 0 0 10px;
    vertical-align:top;
    background: url(images/linkbarbg1.png) repeat-x;
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #FFFFFF;

}

#navbar ul {
    vertical-align:top;
    margin:0;
    padding:0;
    border: 0px solid #000000;
}

#navbar ul li {
    display: inline;

}

#navbar ul li a {
    display: inline;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 4px;
    padding-right: 10px;
    padding-left: 10px;
    color:#FFFFFF;

}

#navbar ul li a:hover
{
height: 31px;
background:url(images/linkbarbg1hover.png) repeat-x top left;
background-color: #FF3300;
}

And HTML:
PHP Code:
<div id="main">
<div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div>

And here is what it looks like:

My CSS Code is the same for after, here is my HTML code for after:
PHP Code:
<div id="main">
<div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><img src="images/linkbarseperator1.png" /></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div>

and here is what is looks like:

Is there a way to fix this?

UPDATE
I have noticed the same thing happens even when it is not a list. Therefore, it must be due to some other factor...does anyone have any ideas?

Navigation Bar Positioning Over Image

Similar Tutorials

View Content

I am very new to web design. I had an old friend of mine design this website for me: directdevelopmentinternational.org

I am now trying to use what he did for that website you put together my bands website: throughtheconcreterecords.com

I am trying to get the navigation bar to sit inside of the blank white box I have created in my header image. I also just want the text to be black and maybe when highlighted change to a different color. I also am trying to make it so when you click the burning book logo in the upper left corner it brings you back to the main page.

I am having a terrible time figuring out how to do this as I am not sure what all of the different techniques are referred to. Any help at all would be much appreciated!

Scroll Over Image Navigation Bar

Similar Tutorials

View Content

hey.

not sure If i can complete this in CSS, I know how to do a singular image scroll over change, but I have a navigation bar i am creating, with about 9 links across is.

I want to have the image change as the mouse scrolls over each link option, so an image map navigation bar with multiple scroll over changes....

how is this possible... it must be some how... I'm currently using Dreamweaver cs4 for my site, although I do have a medium to basic knowledge of html and CSS, so I can adapt coding.

any help or pointers would be great.

Navigation Bar Bg Image Expanding To Far

Similar Tutorials

View Content

I'm currently working on a website and trying to setup two types of navigation. I don't know what happened with it, and I am by no means a expert with CSS... I'd barely say I am a beginner.. I merely took the code I am using from a different layout and am trying to tweak it. When originally designing the layout I had messed up on the slicing and the navigation worked fine. Upon reslicing the website and replacing the navigation code into the layout, I started noticing that the backgrounds for both sections are spanning wider then they are suppose to and do not know what I am over seeing or over looking. This problem has been bloody pissing me off for hours, and with all problems I have had with coding, it is probably something really simple, that I just have overlooked.

Here is the link.

xquizitewarfare dot com/website/index.html

(it isn't allowing me to post a direct link with me being a new member. This is something I'm trying to get finished, and don't want to proceed with coding the rest of the site until i have the nav figured out.)

Like I said I am just barely a beginner at CSS.. I spent about a hour getting the Validators to like my code. Only one error and that is to do with a background, and i'm not sure how to fix it. If anybody is able to respond, I would greatly appreciate it.

Horizontal Image Menu Flush Left Trouble

Similar Tutorials

View Content

I would like to align left images so that they touch against each other.
Here is a capture of my problem.
dollhedz.com/test

[CODE]
<style type="text/css">

body{
background-color:#000033;
color:#00cc33;

}

#wrapper{
background-color:#000000;
margin:15px auto 0px;
width:700px;
height:800px;
}

#sitenav{
background-image:url(sitegrax/sitenavback.jpg);
background-repeat: no-repeat;
height:55px;
padding-left:213px;
border: 0px;
margin:0px;
text-align:left;
}

#one{
float:left;
text-align:left;
align:left;
margin:0px;
padding:0px;
}

</style>
</head>

<body>

<div id="wrapper">

<div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" />
</div>

<div id="sitenav" >
<div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a>
<a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a>
<a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div>
</div>

</div>

</body>
</code>

Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image.

thank you for your time

Horizontal List With Background Image And Text ?link

Similar Tutorials

View Content

Hello,

I'm trying to create an list menu like the one in attached image and I have 2 problems.

1. In IE 6,IE 7 the list is ordered verticaly and not horizontaly (in Opera and FF it is ok)

2. I need to align the text on the bottom of the list like inattached image.

Here is what I manage to do till now : http://www.sibiul.net/test/list-align.php

Anyone knows what I must do ?

10x

How To Place An Image In The Menu Navigation

Similar Tutorials

View Content

Hi,

I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal.

I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible.

Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine.

If any body could help me this would be great.

This is what the index.html file looks like;
<body>
<div id="wrapper">
<div id="topwrapper"></div>
<div id="mainwrapper">

<div id="header">
<div class="center">

<div id="logo">
<a href="./index.html"><img src="./images/logo.png" alt="logo" /></a>
</div>


<div id="headerright">


<div id="mainmenu">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://" class="selected">Home</a>

<li><a href="./about.html">About</a>
<ul>
<li><a href="#">Our Company</a></li>
<li><a href="#">Vision and Mission</a></li>
<li><a href="#">Testomonials</a></li>
</ul>
</li>
<li><a href="#./.html">Services</a>
<li><a href="./.html">Vehicles</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a> </li> </ul>
</li>
<li><a href="./.html">Testomonials</a>
<ul>
</ul>
<li><a href="./html">Contact</a></li>
</ul>
</div>
</div>

</div>
</div>
</div>

Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example.