2 replies [Last post]
zenno
zenno's picture
Offline
newbie
Last seen: 12 years 23 weeks ago
Timezone: GMT-5
Joined: 2010-01-17
Posts: 2
Points: 3

Greetings,

I am really new at CSS, but i think i understand the logic and i tried to put "clean" code before posting. My page also validate.

I want to do this "photo gallery". I'm using an external photo gallery generator that i implemented in my final page.

So, I have a main page with 2 div inside, one for the gallery TITLE, and the other for the gallery itself (code coming from external photo generator).

I want my gallery title to be fixed, this, i already done. But i also do not want my photo gallery to go over my gallery title when i scroll.

Also, i don't know why, but my gallery title div is never centered, while my photo gallery is centered using a simple -align="center"-.

I did read in the faq about horizontal centering and i applied it with no success.

What is it that i could have been missing.

Here is a link to the site in question:
http://www.zennodesign.com/temp/temp/index2.html

Thank you in advance.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 25 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The simplest method with what

The simplest method with what you have is probably to repeat the body background on the fixed title element and raise it's stacking order so the images/gallery slide behind and are hidden. You will need to zero the body margins though and to center the title imgage text adding text-align:centre to div#title should work. Remove any align attributes they are not used.

body {
padding:0; <<<<<
margin:0; <<<<<
background-image: url(abstract_color_and_lights_birth.jpg);
background-attachment: fixed;
}
 
#container {
text-align:center;
}
 
#titre {
position:fixed;
top:0;
width:100%; <<<<<<<
z-index:500; <<<<<<<
text-align:center; <<<<<<<
background: url(abstract_color_and_lights_birth.jpg); <<<<<<<<
}
 
#vlightbox {
text-align:center;
position: absolute;
left: 0px;
top: 95px;
}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

zenno
zenno's picture
Offline
newbie
Last seen: 12 years 23 weeks ago
Timezone: GMT-5
Joined: 2010-01-17
Posts: 2
Points: 3

I have a lot to learn.....

Thank you so much.

They are a lot of things that i'm learning with all this.

Ok, now, i applied what you said, it is indeed working well in firefox, but the gallery is still not centered with IE, i don't know why. I checked and rechecked the code to be sure i did not left out any of your suggestions.

Also, i noticed that the site load much more slowly than before, is it possible that it is because of the twin loading of the same wallpaper ? If it's the case, can i instead use some kind of transparent css feature for upper layer div ?

Another thing that i think is normal, the gallery appears slightly closer to the title in IE than in firefox.

http://www.zennodesign.com/temp/temp/index2.html

Thanks again for helping, this is much more fun than the way i used to do websites (entirely with tables).