I'm working on this website - http://soleproductions.com/virgilcardin/index.htm
I want to position the "7 Days a Week" waterdrop image just to the right of "Call Us Today..." text.
Here is my logic....
I created a div called "7daysaweek" and placed it inside the "largeimage" div and set the "largeimage" div to Relative so I could use absolute positioning of the "7daysaweek" div and set 7days div to 0 bottom, 0 right but it remains at the top left corner of the largeimage div. What am I missing?
Here is my HTML
<div id="largeimage">
<div id="7daysaweek"><img src="../images/7-days-a-week.png" width="114" height="178" alt="7 Days a Week" /></div>
</div>
Here is my CSS
#largeimage {
height: 409px;
width: 900px;
background-image: url(images/virgil-cardin-truck1-large.jpg);
background-repeat: no-repeat;
position: relative;
}
#7daysaweek {
height: 178px;
width: 114px;
right: 0px;
bottom: 0px;
position: absolute;
}
In design view, DW shows it at the bottom right of the largeimage div (where I want it) but when I look at it in Live View or within IE or Firefox, it is positioned at the top left corner of the largeimage div.
I've watched a few css positioning tutorials and I believe I am understanding how absolute and relative positioning works but just can't get it to work on my end. It's probably somethings super simple but I'm apparently not seeing it. Any help would be greatly appreciated.
Design View isn't reliable. Use Live View or Preview in browsers.
Leading numbers like "7" are not allowed in CSS selector names. The selector name must begin with a letter.
Try this (inline styles used here for expediency):
<div id="waterDrop" style="position:absolute; top:22px; left: 800px"><img src="images/7-days-a-week.png" alt="7 Days a Week" height="178" width="114">
</div>
Nancy O.
North America
Europe, Middle East and Africa
Asia Pacific