HTMLHelp Forums > CSS Positioning and Visibility

Full Version: CSS Positioning and Visibility

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

akforce

Jul 30 2009, 07:29 AM

Hey Guys,

Im working on a project but im having some issues with the positioning and visibility of my divs

If you click the following link you will see my error:

http://www.on-media.co.uk/clients/css/index.html

The instant error is the DIV has the highlight color, when the page loads, secondly in IE the div attaches itself to the bottom of the page and scrolls with it, but in FF it looks fine.

Here is the Screenshot in FireFox: http://www.on-media.co.uk/clients/css/firefox.jpg

Here is the Screenshot in IE: http://www.on-media.co.uk/clients/css/ie.jpg

This is what im trying to achieve: http://www.on-media.co.uk/clients/css/achieve.jpg

Here is the code im using in my style sheet.

CODE

.on-media #product_container{
    width:660px;
    height:369px;/* just add +369px to this figure to increase the row by one */
    margin:0 auto;
}
.on-media #p1_Container{
    width:221px;
    height:371px;
    float:left;
}
.on-media #p1{
    width:219px;
    height:369px;
    float:left;
    border:dotted 1px #AF9F9C;
    position:fixed;
    z-index:0;
}
.on-media #p1_image{
    width:219px;
    height:227px;
    text-align:center;
    padding:0;
    position:relative;
    z-index:0;
}
.on-media #p1_top{
    width:219px;
    height:84px;
    text-align:center;
    padding:0;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:16px;
    color:#2A1E1A;
    position:relative;
    z-index:2;
}
.on-media #p1_bottom{
    width:219px;
    height:27px;
    text-align:center;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:16px;
    color:#2A1E1A;
    line-height:27px;
    position:relative;
    z-index:2;
}
.on-media #p1_bottom2{
    width:219px;
    height:15px;
    text-align:center;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:11px;
    color:#2A1E1A;
    position:relative;
    z-index:2;
}
.on-media #p1_c{
    width:219px;
    height:369px;
    float:left;
    background:#D9D5CA;
    border:solid #A7977D 1px;
    position:absolute;
    z-index:1;
    filter:alpha(opacity=60);
    opacity:0.6;
    visibility: inherit;
}
.on-media #p1_overlay{
    width:219px;
    height:227px;
    text-align:center;
    position:inherit;
    z-index:2;
}

And this is my code on my DIVs

CODE

<div id="p1_Container">
<div id="p1" onmouseover="setVisibility('p1_c','inline')" onmouseout="setVisibility('p1_c','none')">
<div id="p1_c" onmouseover="setVisibility('p1_c','inline')" onmouseout="setVisibility('p1_c','none')"></div>
<div id="p1_top"><img src="images/products/healthy_peels_logo.png" width="208" height="61" /><br />
Cocoa Beans</div>
<div id="p1_image"><img src="images/products/healthypeels.jpg" width="208" height="227" /></div>
<div id="p1_bottom">8oz Bags</div>
<div id="p1_bottom2">from as little as $9.99</div>

</div></div>

I appreciate any help you can provide me

pandy

Jul 30 2009, 08:15 AM

CODE

.on-media #p1_c { display: none }

Are you sure you want 'position: fixed'? Looks very odd when the page scrolls. But then I haven't seen the whole thing.

Anyway, you need to do some cleaning up. Looks like div#p1 lacks a closing tag, but the validator finds other problems too.
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
The CSS too.
http://jigsaw.w3.org/css-validator/validat...g=1&lang=en

akforce

Jul 30 2009, 08:33 AM

well i applied that and it works fine now thanks

now i have another issue i want to include another div which will only show when i mouse over can i just add another mouseover property to the div ?

Because if i include it in the #p1_c div it applys the transparency

Frederiek

Jul 30 2009, 09:47 AM

QUOTE

now i have another issue i want to include another div which will only show when i mouse over can i just add another mouseover property to the div ?

No, but you can create a new function or modify the function you already have to do more than just setting the display of the one element.

pandy

Jul 30 2009, 09:56 AM

I think it would work with the same function. The id is passed to the function. You aren't going to nest those things inside each-other, are you?

akforce

Jul 30 2009, 10:25 AM

QUOTE(pandy @ Jul 30 2009, 09:56 AM)

I think it would work with the same function. The id is passed to the function. You aren't going to nest those things inside each-other, are you?

im not nesting commands within commands, but i've managed to get this sorted thanks for your help !

ill post a link to the html visual in a while

pandy

Jul 30 2009, 10:35 AM

I meant the DIVs. But if it works I guess you didn't.

akforce

Jul 30 2009, 11:55 AM

QUOTE(pandy @ Jul 30 2009, 10:35 AM)

I meant the DIVs. But if it works I guess you didn't.

http://www.on-media.co.uk/clients/css/index.html

heres the link there are probally errors i havn't checked it yet but ill validate it now

pandy

Jul 30 2009, 11:31 PM

Looks fine. Nice color scheme. I'd love some lorem ipsum beans.

akforce

Jul 31 2009, 05:57 AM

QUOTE(pandy @ Jul 30 2009, 11:31 PM)

Looks fine. Nice color scheme. I'd love some lorem ipsum beans.

ahah

thanks lol, well i managed to finish it, just waiting for the other products to input now!

http://www.marabelfarms.com/purchase/index.html

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.