PDA

View Full Version : CSS, PHP positioning problem.


tux
04-01-2008, 10:54 PM
Hi all,

This is a snippet of my code to display three thumbnails down the left and one big image on the right....

<div id="gal_holder">
<div class="img_left2">
<div class="img1"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/Thumbs/DTLAND0164.jpg" alt="Burrow Mump &minus; Somerset (GB)" ></a></div>
</div>
<div class="img_right2"><p><span class="blue_bold">Description:</span> Burrow Mump &minus; Somerset (GB)</p>
<div class="img2big"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/DTLAND0061.jpg" alt="Burrow Mump &minus; Somerset (GB)" ></a></div>
</div>
<div class="img_left2">
<div class="img1"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/Thumbs/DTLAND0164.jpg" alt="Watendlath &minus; Lake District (GB)" ></a></div>
</div>
<div class="img_left2">
<div class="img1"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/Thumbs/DTLAND0164.jpg" alt="Hillside Farm &minus; Lake District (GB)" ></a></div>
</div>
</div>

I need to change it to this......

<div id="gal_holder">
<div class="img_left2">
<div class="img1"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/Thumbs/DTLAND0164.jpg" alt="Burrow Mump &minus; Somerset (GB)" ></a></div>
</div>
<div class="img_left2">
<div class="img1"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/Thumbs/DTLAND0164.jpg" alt="Watendlath &minus; Lake District (GB)" ></a></div>
</div>
<div class="img_left2">
<div class="img1"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/Thumbs/DTLAND0164.jpg" alt="Hillside Farm &minus; Lake District (GB)" ></a></div>
</div>
<div class="img_right2"><p><span class="blue_bold">Description:</span> Burrow Mump &minus; Somerset (GB)</p>
<div class="img2big"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/DTLAND0061.jpg" alt="Burrow Mump &minus; Somerset (GB)" ></a></div>
</div>
</div>

... as the left hand divs will be populated using a php do while loop.

My CSS is .....

/* Uses 100% height code for div#wrapper as explained at http://www.sitepoint.com/forums/showpost.php?p=1243541&postcount=8 */

/* commented backslash hack \*/
html, body {height:100%;}
/* end hack */

html, body {
min-height: 100%;
margin:0;
padding:0;
}
body {
background: #FFFFFF url(Images/left_dtl.gif) repeat-y left top;
color:#000000;
}

form {
color: #000000;
font-family: arial;
font-size: 12px;
font-weight: normal;
text-decoration: none;
}

.form {
background-color: #B7D8F1;
border: #C3B5AB;
}

a {
color: #0095D7;
font-family: arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
margin: 0px;
}

h3 {
color: #0095D7;
font-family: arial;
font-size: 16px;
font-weight: bold;
text-decoration: none;
margin: 0px 0px 0px 0px;
}

#wrapper {
position: relative;
min-height: 100%; /* IE 6 doesn't understand "min-height" */
height:auto;
background: url(Images/rgt_dtl.gif) repeat-y right top;
min-width: 720px;
}
.clearing {
font-size: 0px;
line-height: 0px;
clear: both;
height: 0px;
}

* html #wrapper { /* Only IE 6 (and maybe IE 5?) will see this because it starts with "* html" */
height: 100%; /* IE 6 treats height as if it's min-height */
}
#header {
background: #0095D7 url(Images/left_cnr.gif) repeat-y left top;
height: 110px;
}
#header h1 {
margin:0; /* to avoid gaps above and below the logo image */
}
#logo {
float: right;
background: url(Images/fade.gif) no-repeat left top;
padding-left: 181px; /* padding leaves room for fade.gif background */
}
#nav {
background: url(Images/left_dtl_top.gif) no-repeat 0 0;
padding-left: 147px;
margin: 0;
}
#nav div {
background: url(Images/rgt_cnr.gif) no-repeat 100% -110px;
height: 57px;
padding-right: 35px;
margin: 0;
}
#nav div div {
background: url(Images/top_dtl.gif) repeat-x 0 0;
padding: 0; /* to negate the padding applied by "#nav div" */
}


/* Main Navigation */

#nav div div div { height: 36px; }
#nav div div div dl { margin: 0; padding: 0; }

/* IE5 Mac Hack \*/
#nav div div div {
clear: both;
list-style: none;
margin: 0 auto;
padding: 0;
width: 537px;
}
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */

#nav div div div dt { float: left; }

#nav div div div dt a {
display: block;
height: 0px !important;
height /**/:36px; /* IE 5/Win hack */
padding: 36px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}

#nav div div div dt a:hover {
background-position: 0 -36px;
}

#nav div div div dt#home,
#nav div div div dt#home a { width: 92px; background-image: url(Images/Buttons/home.gif); }

#nav div div div dt#gallery,
#nav div div div dt#gallery a { width: 89px; background-image: url(Images/Buttons/gallery.gif); }

#nav div div div dt#about,
#nav div div div dt#about a { width: 89px; background-image: url(Images/Buttons/about.gif); }

#nav div div div dt#shop,
#nav div div div dt#shop a { width: 89px; background-image: url(Images/Buttons/shop.gif); }

#nav div div div dt#links,
#nav div div div dt#links a { width: 89px; background-image: url(Images/Buttons/links.gif); }

#nav div div div dt#contact,
#nav div div div dt#contact a { width: 89px; background-image: url(Images/Buttons/contact.gif); }

body.home dt#home,
body.home dt#home a,
body.gallery dt#gallery,
body.gallery dt#gallery a,
body.about dt#about,
body.about dt#about a,
body.shop dt#shop,
body.shop dt#shop a,
body.links dt#links,
body.links dt#links a,
body.contact dt#contact,
body.contact dt#contact a {
background-position: 0 -72px;
}


#content {
margin: 0 37px 0 150px;
clear: both;
background: #FFFFFF url(Images/titlebar.gif) repeat-x left top;
height: 1%;
}

#content p {
color: #000000;
font-family: arial;
font-size: 12px;
margin-bottom: 0; /* Bottom margin needs to be 0 to avoid gap at bottom of page in Opera. */
}

#content div h2 {
margin: 0;
}

/* Begin Gallery CSS */

#gal_holder {
width: 620px;
margin: 25px auto 0px auto;
min-height: 90px;
overflow: hidden;
}
* html #gal_holder .img1, * html #gal_holder .img2 { /* for IE6 which doesn't understand min-height but treats height like min-height */
height: 90px;
margin: 0px;
}
#gal_holder .img_left {
height: 90px;
float: left;
width: 260px;
margin: 0px 0px 40px 0px;
}
#gal_holder .img_right {
height: 90px;
float: right;
width: 260px;
margin: 0px 0px 40px 0px;
}
#gal_holder .img_left2 {
height: 120px;
float: left;
width: 150px;
margin: 0px 0px 40px 0px;

}
#gal_holder .img_right2 {
height: auto;
float: right;
width: auto;
margin: 0px 5px 5px 5px;
}
.img1 {
float: left;
margin: 0px 0px 0px 0px;
height: 120px;
}
.img2 {
float: right;
margin: 0px 0px 0px 0px;
}
.img2big img {
margin: 0px;
padding: 5px;
border: 2px;
border-style: solid;
border-color: #0095D7;
}
.cat1 {
float: right;
margin: 35px 0px 0px 0px;
}
.cat2 {
float: left;
margin: 35px 0px 0px 0px;
}
.img_right2 p{
margin: 0px 0px 0px 2px;
}
/* End Gallery CSS */

#title {
background: #FFFFFF url(Images/Titles/titlebar.gif) repeat-x;
clear: both;
height: 32px;
padding-right: 35px;
margin: 0;
}

#title_image {
position: relative;
float: left;
margin-top: 10px;
}

#text {
margin-top: 10px;
margin-left: 150px;
margin-right: 150px;
}



.blue_bold {
color: #0095D7;
font-family: arial;
font-size: 12px;
font-weight: bold;
}

.small_text {
color: #000000;
font-family: arial;
font-size: 8px;
margin-left: 100px;
}

#logo_left {
position:fixed;
bottom: 0;
left:0;
}

* html #logo_left {
position:absolute;
left:0;
bottom: 0px;
}

img {
border: none;
}

#footer {
position: absolute;
margin: 0;
bottom: 10px;
right: 0;
padding-right: 35px;
}

#footer p {
color: #0095D7;
font-family: arial;
font-size: 12px;
margin-bottom: 0; /* Bottom margin needs to be 0 to avoid gap at bottom of page in Opera. */
}

..... which includes the styling for other pages on the site. Thought it best to include it all in the post.

By moving the img_right2 div to the bottom has put the layout right out. Could someone explain how I can correct it.

This is how it should be. (http://www.photographybydantucker.com/gallery2_backup.php)

And this is how it shouldn't be, with the img_right2 div moved. (http://www.photographybydantucker.com/gallery2.php)

Thanks.

Regards, Paul

domedia
04-01-2008, 11:33 PM
Put all your img_left2 in a seperate div and float this div to the left :)

tux
04-02-2008, 09:06 AM
Thanks Domedia. That worked a treat. I had been trying to adjust what I already had, didnt think to add another div. The only other thing I had to do was add the same width to the new div as the img_left2 div.

Thanks again.

Regards, Paul