SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 stacked images and one floated right

    Hi all,

    An easy answer to this, but the generic nature means searching is not supplying the answer.

    I am trying to stack one (1) image or element on top of another (2), with a another image floated to the right with its (3) top edge level with the top up of the upper image/element:

    11 3
    11 3
    22 3
    22 3

    What ever I do (3) ends up horizontally level with (2):

    11
    11
    22 3
    22 3
    3
    3

    Additionally if any one can tell me why I cannot get banner 5 to have any spacing between it and (3) it would be appreciated - its been a while since I have coded any proper CSS and it shows.

    Code:
     
    1 - mapicons
    2 - map500
    3 - sky
     
    #midsection {
     width: 647px;
     position: relative;
     text-align: center;
     margin-left: auto;
     margin-top: 15px;
     margin-right: auto;
    }
     
    #mapsize {
     width: 56px;
     position: relative;
     float: left;
    }
     
    #mapicons {
     width: 500px;
     position: relative;
     float: left;
     border: 2px solid red;
    }
     
    #zoom {
     width: 110px;
     position: relative;
     float: right;
    }
     
    #map500 {
     width: 500px;
     height: 500px;
     position: relative;
     float: left;
     text-align: center;
     border: 2px solid red;
    }
     
    #banner5 {
     width: 468px;
     position: relative;
     text-align: center;
     margin-left: auto;
     margin-right: auto;
    }
     
     <div id="midsection">
      <span id="mapicons">
       <span id="mapsize"><a href="#"><img src="images/icons/map_24.gif" border="0" /></a><a href="#"><img src="images/icons/map_32.gif" border="0" /></a></span>
       <span id="zoom"><a href="#"><img src="images/icons/zoom_16.gif" border="0" /></a><a href="#"><img src="images/icons/zoom_24.gif" border="0" /></a><a href="#"><img src="images/icons/zoom_32.gif" border="0" /></a><a href="#"><img src="images/icons/zoom_40.gif" border="0" /></a></span>
      </span>
     <span id="map500"><img src="images/500.gif" border="0" /></span>
     <span id="sky"><a href="#"><img src="images/icons/map_24.gif" border="0" width="120" height="600" /></a></span>
     <span id="banner5"><img src="images/468x60.gif" border="0" width="468" height="60" /></span>
     </div>

  2. #2
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay so I spotted the problem (incorrectly ordered elements for relative positioning) -- tired eyes!

    Edit:

    Found the problem for my second issue too


    Thanks,

    Dan

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    do you have a link to the banner page with all images etc ?

    i am not shure if this is what you need, stacking images:

    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" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0px;/* no margins body */
    	padding:0px;/* no padding body */
    	height:100%;
    	width:100%;
    	}
    	body{font-size:1em;}
    	
    	.con{margin:0 auto 0 auto;width:754px;background:#ffffcc;padding:0 0 1em 0;}/* main container */
    	
    	/* general */
    	div,p,span,b,a{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:.9em;
    	color:#000000;
    	margin:0px;
    	padding:0px;
    	text-align:left;/* to get text back to the left*/
    	}
    	
    	.img1,.img2,.img3{
    	width:100px;
    	height:100px;
    	background:#ff6600;
    	float:left;
    	border:1px solid #0000ff;
    	margin:1em 0em 0em 1em;
    	display:inline;
    	}
    	
    	.img2{background:#0000ff;}
    	
    	.img3{float:right;background:#ccff66;margin:1em 1em 0em 0em;}
    	
    	.fcl{clear:both;height:1px;overflow:hidden;/*margin-top:-1px;*/}
    	
    	</style>
    </head>
    
    <body>
    <div class="con">
    <div class="img1">1</div>
    <div class="img1">1</div>
    <div class="img3">3</div>
    <div class="fcl"></div>
    <div class="img1">1</div>
    <div class="img1">1</div>
    <div class="img3">3</div>
    <div class="fcl"></div>
    <div class="img2">2</div>
    <div class="img2">2</div>
    <div class="img3">3</div>
    <div class="fcl"></div>
    <div class="img2">2</div>
    <div class="img2">2</div>
    <div class="img3">3</div>
    <div class="fcl"></div>
    </div>
    </body>
    </html>

  4. #4
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for that but I figured out the problem just before you posted.

    Thanks,

    Dan


Bookmarks

Posting Permissions

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