Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem with vertical aligning

    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)



    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.





    This is in my html document:

    Code:
    <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.

    Code:
    #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

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    We really need to see all the code including the DOCTYPE to help you better.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    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.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here is the entire code

    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>

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    and this is the complete css

    Code:
    @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;
    }

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    For convenience I have assembled the code here.

    View source.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •