Css help with images

  • 1
  • Question
  • Updated 8 years ago
i have my basic navigation bar built with css and html thanks for that john mc
How do i apply the images im very noob ish to this stuff so any help would be fantastic.
Photo of Reader

Reader

  • 52 Posts
  • 0 Reply Likes
  • conffussed

Posted 8 years ago

  • 1
Photo of Drummer

Drummer

  • 153 Posts
  • 1 Reply Like
I don't think it is possible to do images with CSS
You can use images using Fotolia though.
Photo of Reader

Reader

  • 52 Posts
  • 0 Reply Likes
i mean the navigation tag image. it does say on yola codes to add the image but im not sure how to
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Hey Reader,
Sadly i have to go to bed now,
If you can put your CSS into this
http://forsite.synthasite.com/encoder...
and then copy the code and paste it on here and I will take a look tommorow.
Photo of Reader

Reader

  • 52 Posts
  • 0 Reply Likes
Thank you ill leave a link to the site where i got the code from.

( http://www.dave-woods.co.uk/?p=101%20... )

<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>playstation</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Links</span></a></li>
</ul>
<style type="text/css">* {
padding: 0;
margin: 0;
}
body {
font-size: 73%;
font-family: verdana, arial, helvetica, sans-serif;
padding: 10px;
}
#navigation {
list-style: none;
overflow: auto;
}
#navigation li {
float: left;
background-color: #666; /* to cater for users without images */
}#navigation a {
display: block;
background-image: url(tabright.gif);
background-position: top right;
background-repeat: no-repeat;
color: #FFF;
text-decoration: none;
font-weight: bold;
}
#navigation span {
display: block;
background-image: url(tableft.gif);
background-repeat: no-repeat;
padding: 5px 15px;
}#navigation a:hover {
background-position: right -198px;
}
#navigation a:hover span {
background-position: 0 -198px;
}</style>
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Reader

Are you wanting to use the images that came with your menu? The tabright and tableft?

If so, then you need to alter the image path for these images.

For example: background-image: url(tabright.gif); would be background-image: url(resources/tabright.gif);

Please give this a try and let us know if you still have trouble with this.
Photo of Reader

Reader

  • 52 Posts
  • 0 Reply Likes
Do I change the word URL into C:documnts/info for eg sorry to keep going on about this
Photo of Reader

Reader

  • 52 Posts
  • 0 Reply Likes
Thankyou so much
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Reader

Please don't apologize! It can be a bit confusing if you're new to this.You need to upload your images to your File Manager - have you done this yet? If not, please do this and then you just need to change the image path as I have shown above.

Please let me know how this goes.