Hi
I am a novice using css. I have the following image from left to right:bezel.jpg, homebutton.jpg, tbdiv.jpg, aboutbutton.jpg, tbdiv.jpg, contactbutton.jpg,tbbg.jpg and adr.jpg.
I want to use the "div class" to setup my header. How would I go about doing this task. Any suggestion
Thank in advance
JerryLooks like a menu, which should be a list. A basic Suckerfish dropdown (<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/dropdowns/">http://www.htmldog.com/articles/suckerfish/dropdowns/</a><!-- m -->) would be appropriate.CSS:
div#menu {
width: 600px; /* make this equal to the total width of the images */
padding: 0;
margin: 0 auto; /* or whatever other values work for your design */
}
#menu img {
float: left;
margin: 0;
}
HTML:
<div id="menu">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"bezel.jpg" alt="" width="20" height="40">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"homebutton.jpg" alt="Home" width="80" height="40">
<!-- etc. for rest of images -->
</div> <!-- end of menu div -->Hi NOGDOG
thanks for your suggestion. My bezel image is 233x102 then my next image is 46x32. when I use your code the second image is at the lower right bottom of the bezel image.
thanksProbably need more details about exactly how you want things to appear. You originally asked for displaying of the images from left to right. Now I am guessing that you want the other images to be overlaid on top of the bezel image? If so, then the bezel image should probably be set as the background image for the header DIV, then display the other images within that DIV? But again, I'm only guessing.
I am a novice using css. I have the following image from left to right:bezel.jpg, homebutton.jpg, tbdiv.jpg, aboutbutton.jpg, tbdiv.jpg, contactbutton.jpg,tbbg.jpg and adr.jpg.
I want to use the "div class" to setup my header. How would I go about doing this task. Any suggestion
Thank in advance
JerryLooks like a menu, which should be a list. A basic Suckerfish dropdown (<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/dropdowns/">http://www.htmldog.com/articles/suckerfish/dropdowns/</a><!-- m -->) would be appropriate.CSS:
div#menu {
width: 600px; /* make this equal to the total width of the images */
padding: 0;
margin: 0 auto; /* or whatever other values work for your design */
}
#menu img {
float: left;
margin: 0;
}
HTML:
<div id="menu">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"bezel.jpg" alt="" width="20" height="40">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"homebutton.jpg" alt="Home" width="80" height="40">
<!-- etc. for rest of images -->
</div> <!-- end of menu div -->Hi NOGDOG
thanks for your suggestion. My bezel image is 233x102 then my next image is 46x32. when I use your code the second image is at the lower right bottom of the bezel image.
thanksProbably need more details about exactly how you want things to appear. You originally asked for displaying of the images from left to right. Now I am guessing that you want the other images to be overlaid on top of the bezel image? If so, then the bezel image should probably be set as the background image for the header DIV, then display the other images within that DIV? But again, I'm only guessing.