SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images won't appears inside previous DIV

    http://swearingatvideogames.com/2010...-inferno-acre/

    Trying to get those 2 images under BOSS: DEATH to be inside the overall DIV with the border.

    Code:
    <div class="achievearea">
    <div class="achievetop"><div class="achievement">BOSS: DEATH</div><div class="gspoints">&nbsp;</div></div>
    Make use of your Block while Death is swinging at you. His first attack consists of 3 swings of the scythe which are blockable. Once his attack subsides hit him with a mixture of Quick and Strong attacks and then go back on the defensive. If you see Death add some fire to his scythe then be ready to Double Jump as he comes down to jump over his Shockwave. Once you've given Death a good beatdown he'll eventually start to grab you. A quick [B] button smash will release you with no damage done. Eventually you'll come to a button sequence to end the fight. [RT] - [X]. Then do some more damage to him and you'll get a final button sequence. [RT] - [B smash] - [X]
    
    <a rel="shadowbox[acre_01]" href="http://swearingatvideogames.com/images/dante/01_01_01.jpg"><div class="achieveimg caption"><img src="http://swearingatvideogames.com/images/dante/01_01_01s.jpg" border="0" alt="" />
    <div class="cover achievecaption">Death's Main 3 Strike Attack</div></div></a>
    
    <a rel="shadowbox[acre_01]" href="http://swearingatvideogames.com/images/dante/01_01_02.jpg"><div class="achieveimg caption"><img src="http://swearingatvideogames.com/images/dante/01_01_02s.jpg" border="0" alt="" />
    <div class="cover achievecaption">Glowing Scythe = Jump</div></div></a>
    
    </div>
    The CSS I am using:

    Code:
    div.achievearea {
    	border: 1px solid silver;
    	padding: 3px;
    	margin-bottom: 16px;
    }
    
    div.achievetop {
            margin-top: 4px;
    	padding: 2px;
    	background: #EEEEEE;
    }
    
    div.achievebottom {
            margin-top: 0px;
    	padding: 2px;
    	background: #EEEEEE;
    }
    
    div.achievement {
            width: auto;
    	font-weight: bold;
    	float: left;
            color: #000;
    }
    
    div.achievetitles {
    	width: auto;
    	text-align: center;
            color: #000;
            font-weight: bold;
            font-size: 11pt;    
    }
    div.achievetitles a:link {
    	color: #000;
    }
    div.achievetitles a:visited {
    	color: #000;
    }
    
    div.achievetitlestop {
    	width: auto;
    	text-align: center;
            font-weight: bold;
            font-size: 13pt;
    }
    
    div.gspoints {
            width: auto;
    	text-align: right;
            color: #000;
            font-weight: bold;
    }
    
    div.achieveimg{
    	width: 240px;
            float: left;
            display: inline;
    	height: 130px;
    	margin: 15px 12px 5px 12px;
    	background: #161613;
    	border: solid 2px #666;
    	position: relative;
    	overflow: hidden;
    	text-align: center;
    }
    
    div.achieveimg img{
    	position: absolute;
    	top: 0;
    	left: 0;
    	border: 0;
    }
    
    div.achievecaption{
    	position: absolute;
    	background: #000;
    	height: 20px;
    	width: 100%;
    	opacity: .8;
    	/* For IE 5-7 */
    	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    	/* For IE 8 */
    	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }
    
    .captionfull .achievecaption {
    	top: 20px;
    	left: 0;
    }
    
    .caption .achievecaption {
    	top: 112px;
    	left: 0;
    }
    I know just enough to be dangerous is my problem. Thanks for any help!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the "div.achieveimg" is floated and as a result the parent doesn't even know it is there. It needs a clearing mechanism placed on the parent
    Code:
    div.achievearea {overflow:hidden;}
    Also, it's invalid to have block element placed inside an inline element (aka a <div> inside an <a> )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. Now the images are inside but the text appears to be aligned over the right image.

    http://swearingatvideogames.com/2010...es-of-acheron/

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you mean the text "Just to the left of the Poet is a high alcove with the first piece of silver. Just a standard jump up there to get the silver." (and the other side) it's because you need to wrap that text around a block element and not just let it hang there . Just wrap a <p> there around the text (on all instances of that)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again!

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad to help . If you have any further questions a new thread might be appropriate so we don't make this thread too long (and since they are different questions )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •