...

View Full Version : Problem with vertical aligning



valentine
09-01-2010, 01:41 PM
Ok I know this is a common problem but I have looked through other threads and couldn't find the answer. I hope someone can help.

I am basically trying to make a thumbnail menu, align to the bottom of my page, which will acommodate from 1 to 6 thumbnails. Each thumbnail is in its own div of 54x54 with 10px padding top and right (as I want it to be bottom-left aligned)

http://i22.photobucket.com/albums/b304/heliosvk/Picture19.png

The problem is, when I have 1 to 3 thumbnails, they stick the top of the div, rather than the bottom where I want them.


http://i22.photobucket.com/albums/b304/heliosvk/Picture21.png


This is in my html document:



<div id="projectthumbsindex">
<div id="projectthumbsindexcontent">

<div id="projectthumbs">
<img src="images/projectthumbs/anothermagazine1thumb.gif" />
</div>

<div id="projectthumbs">
<img src="images/projectthumbs/anothermagazine2thumb.gif" />
</div>

<div id="projectthumbs">
<img src="images/projectthumbs/anothermagazine3thumb.gif" />
</div>

<div id="projectthumbs">
<img src="images/projectthumbs/anothermagazine4thumb.gif" />
</div>

<div id="projectthumbs">
<img src="images/projectthumbs/anothermagazine5thumb.gif" />
</div>

</div>
</div>

and this is the related CSS code from the style sheet.


#projectthumbsindex {
position: absolute;
float: left;
left:340px;
top: 619px;
width:192px;
height:128px;
overflow:hidden;
}

#projectthumbsindexcontent {
position: absolute;
float: left;
left:0px;
width:192px;
height:128px;
vertical-align:bottom;
}

#projectthumbs {
float:left;
vertical-align:bottom;
height:54px;
width:54px;
padding-right:10px;
padding-top:10px;
}

Could anyone tell me why it's not working? Thank you very much

effpeetee
09-01-2010, 03:26 PM
We really need to see all the code including the DOCTYPE to help you better.

Frank

Donkey
09-01-2010, 03:29 PM
for a start you are using multiple instances of the same id on the same page. Id's should only be used once on a page. Change to a class that can be used as many times as you wish.

valentine
09-01-2010, 03:39 PM
Here is the entire code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Robert Storey Studio</title>
<link href="robcss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/text/editorialgrey.gif','images/text/advertisinggrey.gif','images/text/aboutcontactgrey.gif','images/text/bloggrey.gif','images/thumbs/jaegerbw.gif');MM_showHideLayers('thumbmenueditorial','','hide','thumbmenuadvertising','','hide')">
<div id="tempworkingarea"> <div id="logo"><img src="images/text/roblogo.gif" /></div></div>

<div id="page-container">

<div id="title">
<img src="IMAGES/text/robtitle.gif"
</div>

<div id="textimagecontainer">
<div style="position:absolute;left:340px;top:25px">
<img src="images/text/work.gif" name="WORK" id="WORK">
</div>

<div id="textimagecontainer">
<div style="position:absolute;left:340px;top:45px">
<img src="images/text/editorial.gif" name="Editorial" id="Editorial" onclick="MM_showHideLayers('thumbmenuadvertising','','hide','thumbmenueditorial','','show')"
onmouseover="MM_swapImage('Editorial','','images/text/editorialgrey.gif',1)" onmouseout="MM_swapImgRestore()">
</div>

<div id="textimagecontainer">
<div style="position:absolute;left:339px;top:65px">
<img src="images/text/advertising.gif" name="Advertising" id="Advertising" onclick="MM_showHideLayers('thumbmenueditorial','','hide','thumbmenuadvertising','','show')"
onmouseover="MM_swapImage('Advertising','','images/text/advertisinggrey.gif',1)" onmouseout="MM_swapImgRestore()">
</div>

<div id="textimagecontainer">
<div style="position:absolute;left:340px;top:85px">
<img src="images/text/personal.gif" name="Personal" id="Personal" onmouseover="MM_swapImage('Personal','','images/text/personalgrey.gif',1)" onmouseout="MM_swapImgRestore()">
</div>

<div id="textimagecontainer">
<div style="position:absolute; left:339px; top:110px">
<img src="images/text/aboutcontact.gif" name="aboutcontact" id="aboutcontact" onmouseover="MM_swapImage('aboutcontact','','images/text/aboutcontactgrey.gif',1)"
onmouseout="MM_swapImgRestore()">
</div>

<div id="textimagecontainer">
<div style="position:absolute;left:340px;top:130px" onmouseover="MM_swapImage('blog','','images/text/bloggrey.gif',1)"> <a href="http://robertstorey.blogspot.com" target="_blank">
<img src="images/text/blog.gif" name="blog" id="blog" onmouseover="MM_swapImage('blog','','images/text/bloggrey.gif',1)" onmouseout="MM_swapImgRestore()"></a></div>



<div id="thumbmenueditorial">

<div id="textimagecontainer10pxbottompadding"><img src="images/text/editorialcaps.gif" /></div>

<div id="thumbs"><img src="images/thumbs/jaegerbw.gif" name="jaegerthumb" id="jaegerthumb"
onmouseover="MM_swapImage('jaegerthumb','','images/thumbs/jaeger.gif',1)" onmouseout="MM_swapImgRestore()" /></div>

<div id="thumbs"><a href="ft.html"><img src="images/thumbs/ftbw.gif" name="ftthumb" id="ftthumb"
onmouseover="MM_swapImage('ftthumb','','images/thumbs/ft.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>

<div id="thumbs"><img src="images/thumbs/anothermagbw.gif" name="anothermagthumb" id="anothermagthumb"
onmouseover="MM_swapImage('anothermagthumb','','images/thumbs/anothermag.gif',1)" onmouseout="MM_swapImgRestore()" /></div>

</div>


<div id="thumbmenuadvertising">

<div id="textimagecontainer10pxbottompadding"><img src="images/text/advertisingcaps.gif" /></div>


<div id="thumbs"><a href="ft.html"><img src="images/thumbs/ftbw.gif" name="ftthumb" id="ftthumb"
onmouseover="MM_swapImage('ftthumb','','images/thumbs/ft.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>

<div id="thumbs"><a href="jaeger.html"><img src="images/thumbs/jaegerbw.gif" name="jaegerthumb" id="jaegerthumb"
onmouseover="MM_swapImage('jaegerthumb','','images/thumbs/jaeger.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>

<div id="thumbs"><img src="images/thumbs/anothermagbw.gif" name="anothermagthumb" id="anothermagthumb"
onmouseover="MM_swapImage('anothermagthumb','','images/thumbs/anothermag.gif',1)" onmouseout="MM_swapImgRestore()" /></div>

</div>



<div id="bar"></div>

<div id="main">

<div id="about">

<div id="textimagecontainer">
<img src="images/text/anothermagazine.gif" />
</div>

<div id="textcontent">
Spring Summer 2010<br />
Photographer: Josh Olins <br />
Stylist: Cathy Edwards
</div>

</div>

</div>

<div id="projectthumbsindex">
<div id="projectthumbsindexcontent">

<div class="projectthumbsclass" id="projectthumbs1">
<img src="images/projectthumbs/anothermagazine1thumb.gif" />
</div>

<div class="projectthumbsclass" id="projectthumbs2">
<img src="images/projectthumbs/anothermagazine2thumb.gif" />
</div>

<div class="projectthumbsclass" id="projectthumbs3">
<img src="images/projectthumbs/anothermagazine3thumb.gif" />
</div>

<div class="projectthumbsclass" id="projectthumbs4">
<img src="images/projectthumbs/anothermagazine4thumb.gif" />
</div>

<div class="projectthumbsclass" id="projectthumbs5">
<img src="images/projectthumbs/anothermagazine5thumb.gif" />
</div>

</div>
</div>

<div id="anothermagazine1"><div style="position: absolute; float: left; left:545px; top: 231px; width:auto; height:51px;"> <img src="images/projects/anothermagazine1.gif" />










</div>






</body>
</html>

valentine
09-01-2010, 03:41 PM
and this is the complete css



@charset "UTF-8";
/* CSS Document */

html, body {
margin: 0;
padding: 0;
}

#page-container {
height: 100%;
}

#title {
width: 185px;
height: 38px;
position: absolute;
top: 25px;
left: 25px;
}

#bar {
top: 206px;
left: 25px;
position:absolute;
background-color:#000;
height: 2px;
width: 925px;
}

#tempworkingarea {
width: 1024px;
height: 768px;
position: absolute;
vertical-align:bottom;
top: 0px;
left: 0px;
z-index: -10px;
}


#thumbs {
float:left;
height:54px;
width:54px;
padding-right:10px;
padding-bottom:10px;
}

#thumbmenu {
position:absolute;
left:545px;
top:25px;
height:156px;
width:448px;
}

#thumbmenueditorial {
position:absolute;
left:545px;
top:25px;
height:156px;
width:448px;
}


#thumbmenuadvertising {
position:absolute;
left:545px;
top:25px;
height:156px;
width:448px;
}


#thumbmenupersonal {
position:absolute;
left:545px;
top:25px;
height:156px;
width:448px;
}


#main {
position: absolute;
top:231px;
height:500px;
left:25px;
width:925px;
}

#textimagecontainer {
position: absolute;
height: 18px;
clear:both;
}

#textimagecontainer10pxbottompadding {
height: 18px;
padding-bottom:10px;
clear:both;
}

#projectthumbsindex {
position: absolute;
float: left;
left:340px;
top: 619px;
width:192px;
height:128px;
overflow:hidden;
}

#projectthumbsindexcontent {
position: absolute;
float: left;
left:0px;
width:192px;
height:128px;
vertical-align:bottom;
}

#projectthumbs {
float:left;
vertical-align:bottom;
height:54px;
width:54px;
padding-right:10px;
padding-top:10px;
}

.projectthumbsclass {
float:left;
vertical-align:bottom;
height:54px;
width:54px;
padding-right:10px;
padding-top:10px;
}

#projectimages {
position: absolute;
float: left;
left:545px;
top: 231px;
width:auto;
height:51px;
}


#about {
left: 15px;
width: 288px;
padding-right:15px;
}

#list {
width: 180px;
padding-right:15px;
}

#textcontent {
padding-top: 25px;
width: 268px;
}

#listtextcontent {
width: 170px;
}

#logo {
width: 74px;
height: 70px;
position: absolute;
top:677px;
left: 25px;
align-vertical:bottom;
padding-bottom:25px;
}

BODY, TD {
font-family:"Times","Times New Roman","century", "sans serif";
font-size: 13px;
letter-spacing:1px;
line-height: 17px;
margin:0px;
padding:0px;
overflow:hidden;
color:black;
}

A {
padding-bottom:0px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:black;
text-decoration:none;
color:black;
padding-bottom:1px;
margin-bottom:1px;
line-height: 18px;

}

A:hover {
color:black;
padding-bottom:0px;
border-bottom-color:white;
border-bottom-width:1px;
border-bottom-style:transparent;
text-decoration:none;
margin-bottom:1px;
padding-bottom:1px;
}

a img, {
border: none;
text-decoration: none;
}

a:link img, a:visited img, a:hover img {
border: none;
text-decoration: none;
padding-bottom:0px;
border-bottom-color:white;
border-bottom-width:0px;
border-bottom-style:transparent;
margin-bottom:0px;
padding-bottom:0px;
color:transparent;
}

a.imagelink, a.imagelink:link, a.imagelink:visited img, a.imagelink:hover img {
border: none;
text-decoration: none;
padding-bottom:0px;
border-bottom-color:white;
border-bottom-width:0px;
border-bottom-style:transparent;
margin-bottom:0px;
padding-bottom:0px;
color:transparent;
}

teedoff
09-01-2010, 03:42 PM
Also, couldn't you wrap all the images in one div? and then position each image relevant to the div they are placed in. As Donkey suggested, you shouldnt use the same id name for more than one div.

effpeetee
09-01-2010, 03:57 PM
For convenience I have assembled the code here (http://www.exitfegs.co.uk/1_9.htm).

View source.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum