Log in

View Full Version : CSS Image Gallery - problem + 2 other html/css questions... need help


smogg9
07-06-2010, 10:35 AM
Hi,
I try to use css gallery from here: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

1. here is my problem: http://img204.imageshack.us/img204/3936/galleryf.jpg
works good, but when I scroll down the gallery is over the fixed header... how to fix it?

2. how to move the larged image to display above the thumbnails ? i tried and can't figure it out how...

3. how to make the background fixed when I scroll the page? I want to have header fixed (it is) and the background fixed (it's NOT and I don't know how to make it fixed) while I'm scrolling the page. I want to scroll ONLY the #container.

here is the HTML code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Header &amp; Footer: Cross Browser</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>
<body>
<div id="header-wrap">
<div id="header-container">
<div id="header">
<h1>xx<em>xx</em></h1>
<ul id="menu">
<li><a href="">xx</a></li>
<li><a href="">xx</a>
<ul>
<li><a href="">xx</a></li>
<li><a href="">xx</a></li>
</ul>
</li>
<li><a href="">xx</a>
<ul>
<li><a href="">xx</a></li>
<li><a href="">xx</a></li>
<li><a href="">xx</a></li>
</ul>
</li>
<li><a href="">xx</a>
<li><a href="">xx</a>
<ul>
<li><a href="">xx</a></li>
<li><a href="">xx</a></li>
<li><a href="">xx</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="ie6-container-wrap">
<div id="container">
<div id="content">
<h1>xx</h1>
<p>xx</h1>
<p>
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb">
<img src="images/gallery/thumbs/tree_thumb.jpg" width="100px" height="66px" border="0"/>
<span>
<img src="images/gallery/tree.jpg"/>
</span>
</a>
<br/>
<a class="thumbnail" href="#thumb">
<img src="images/gallery/thumbs/ocean_thumb.jpg" width="100px" height="66px" border="0"/>
<span>
<img src="images/gallery/ocean.jpg"/>
</span>
</a>
<br/>
<a class="thumbnail" href="#thumb">xx<span><img src="images/gallery/tree.jpg"/>
</a>
</div>
</p>
</div>
<div id="sidebar">
<h2>Sed ut perspiciatis</h2>
<p>xx</p>
<blockquote>
<p>xx</p>
</blockquote>
<p>xx</p>
<h2>xx</h2>
<p>xx</p>
<ol>
<li>xx</li>
</ol>
<p>xx</p>

<ul>
<li>xx</li>
</ul>
<p>xx </p>
</div>
</div>
</div>
</body>
</html>

CSS:




body {
font: 62.5% Arial, Helvetica, sans-serif;
color: #000000;
margin: 0px 0px 0px 0px;
padding: 0;
background-image: url(../images/background.png);
background-repeat: repeat;

}

h1, h2 {
color: #000000;
font-family: Tahoma, Arial, Geneva, sans-serif;
margin: 30px 10px 10px;
}

h1 {
font-size: 2.5em;
}

p {
margin: 10px 0;
padding: 0;
}

blockquote {
font-style: italic;
}

#header-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

#header-container {
margin: 0px auto 0px auto;
height: 120px;
background: url(../images/header-bg.png) no-repeat bottom;
}

#header {
width: 940px;
margin: 0 auto;
position: relative;
}

#header h1 {
color: #be06c6;
text-align: right;
width: 290px;
margin: 0;
position: absolute;
right: 0;
top: 20px;
}

#header h1 em{
color: #be06c6;
font-size: small;
display: block;
}

#header ul {
position: fixed;
font-family: Arial, Verdana;
font-size: 18px;
margin: 73px 0px 0px 170px;
padding: 0;
list-style: none;
}
#header ul li {
display: block;
position: relative;
float: left;
}
#header li ul { display: none; }
#header ul li a {
display: block;
text-decoration: none;
color: #000000;
border-top: 1px solid transparent;
padding: 5px 12px 5px 15px;
background: #b5b6ba;
margin-left: 5px;
white-space: nowrap;
}
#header ul li a:hover { background: #e1e1e1; }
#header li:hover ul {
display: block;
position: absolute;
}
#header li:hover li {
float: none;
font-size: 16px;
right: 170px;
bottom: 73px;
}
#header li:hover a { background: #b5b6ba; }
#header li:hover li a:hover { background: #be1e1e1; }

#container {
width: 999.5px;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
padding: 90px 0 40px;
background-image: url(../images/background.png);
background-repeat: repeat;
border-width: 7px;
border-style: solid;
border-color: #ffffff;
}

.gallerycontainer{
position: relative;
left: 12px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 2px solid transparent;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 2px solid transparent;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: transparent;
padding: 0px;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

#content {
float: left;
width: 625px;
}

#sidebar {
float: right;
width: 275px;
margin-top: 10px;
}
tomywie
07-07-2010, 08:42 PM
1. the image overlaps your header because of it's z-index is set higher than the z-index of your header. apply this to the css for the header:


#header {
width: 940px;
margin: 0 auto;
position: relative;
z-index: 60;
}

2. you can change how much the popup-image will be padded:


.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

just change top and left to decide where your image will appear.
the text highlighted in blue is the z-index for the popup image.
the highest number will appear on top.
if you need more explanation for z-index then: http://www.w3schools.com/css/pr_pos_z-index.asp

the solution i could come with for you 2 problem was that you can only stack the images horizontal or vertical if you don't want the popup to overlap some of the other thumbs.

3. pretty simple, just add this to body:


body {
font: 62.5% Arial, Helvetica, sans-serif;
color: #000000;
margin: 0px 0px 0px 0px;
padding: 0;
background-image: url(../images/background.png);
background-repeat: repeat;
background-position: fixed;
}

best regards from toby
smogg9
07-13-2010, 12:58 PM
1. the image overlaps your header because of it's z-index is set higher than the z-index of your header. apply this to the css for the header:


#header {
width: 940px;
margin: 0 auto;
position: relative;
z-index: 60;
}

2. you can change how much the popup-image will be padded:


.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

best regards from toby

Thanks for reply Toby, but it does not help at all... images still overlay on the header...