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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Problems with div tag alignment

    Hello.

    I've been trying to solve a problem I'm having with the alignments of some div tags. I know there are some threads about this topic but this is quite a particular case. I'll post and image to describe my situation:



    What I want is to have the text "Mega Man X7" (plus some more text) positioned right to the image.

    My issue is that I use a CSS shadow-marquee trick that I found in a magazine. So, when I set anything inside the inner box to "float" (the frame class div tag in my code) it automatically sets the content outside the box (like the Mega Man X7 text which is set to float right). When set to float left, the text is positioned just below the image, but still outside everything.

    So, I cannot get this right! That's why I'm looking for your help guys. My codes are below:

    CSS
    Code:
    .shadow {
    	background: #666666;
    	border: 1px solid #666666
    	margin: 5px;
    	position: relative;
    }
    .frame {
    	text-align: center;
    	background:#C2C9EC;
    	border: 1px solid #999999;
    	position: relative;
    	padding: 5px;
    	left: -4px;
    	top: -4px;
    }
    /* The Frame class goes inside the shadow div tag to produce the effect shown in the image */
    HTML
    Code:
    <div align="center">
    <div class="shadow" style="width:600px;" align="center">
    <div class="frame">
    <div align="left" style="padding-left:10px; padding-top:10px; padding-bottom:10px; padding-right:10px;">
    <img src="img/box/ps2/mmx7.jpg" name="imagen1" width="100" height="140" border="0" id="imagen1"/>
    </div>
    <div style="float:right; padding-left:50px; padding-top:10px; padding-bottom:10px; padding-right:10px;">
    <div class="txt">
    <b>Mega Man X7 Videos</b>
    </div>
    </div>
    </div>
    </div>
    </div>
    Thanks in advance
    Last edited by Spielmeister; 11-05-2010 at 08:56 PM. Reason: Solved

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    This is one way to do it.
    html:
    Code:
    <div align="center">
    <div id="shadow">
    <div id="frame">
    
    <div align="left">
    <table> 
        <tr>
    
            <th><img src="mm7.jpg" name="imagen1" width="100" height="140" border="0" id="imagen1" /></th>
            <th><b>Mega Man X7 Videos</b></th>
        </tr>
    </table>
    </div>
    </div>
    </div>
    </div>
    CSS:
    Code:
    #shadow {
    	background: #666666;
    	border: 1px solid #666666
    	margin: 5px;
    	position: relative;
    	width: 600px;
    }
    #frame {
    	text-align: center;
    	background:#C2C9EC;
    	border: 1px solid #999999;
    	position: relative;
    	padding: 5px;
    	left: -4px;
    	top: -4px;
    }
    #imagen1 {
        padding-left: 10px; 
        padding-top: 10px; 
        padding-bottom: 10px; 
        padding-right: 10px;
    }
    
    /*We use ids when it is just a one time thing. Use classes when you want to use it on more than one thing.*/
    My image was in the same folder as the other two files.
    Last edited by Chris Hick; 11-05-2010 at 09:32 AM.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    (Slap on my head xD)
    I did not think about using tables for this. It sure helps.

    However, I'd like to know if there is a solution using only div tags.

    Thanks.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Put the images in one class of paragraph <p>, float that class left, put the text in another class, float them right. Paragraphs are block elements too, so you can specify them like divs.

  • Users who have thanked DrDOS for this post:

    Spielmeister (11-05-2010)

  • #5
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Following along DrDOS's line, (and to clear up some excess divs), your layout ought be more along the lines of:

    Code:
    <div class="shadow">
    <div class="frame">
    <img src="img/box/ps2/mmx7.jpg" name="imagen1" width="100" height="140" id="imagen1"/>
    <p>Mega Man X7 Videos</p>
    </div>
    </div>

    That's about all you need to get things working, once suitable styled/positioned with CSS.
    Last edited by MattF; 11-05-2010 at 07:54 PM.

  • Users who have thanked MattF for this post:

    Spielmeister (11-05-2010)

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Excellent, the <p> tag works great.

    Thanks to all.


  •  

    Posting Permissions

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