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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS-Div Content layout

    I'm new here and am in need of help.

    I'm still stuck in the table mentality. For the last three days I have been attempting to create a new layout and have had no luck and it's beginning to frustrate me as I can't seem to get the hang of it.

    On the site I had hoped to have live early this week, which is now impossible, I host a blog and decided to throw in a few extras to make the trip more worth while. So on the front page I want to add in a few divs, or as I still call them for some reason, tables, to create the layout I have in mind.

    I've watched what seems like endless minutes of YT vids, but that all end up being the same thing - header, content and footer tutorials.



    http://imageshack.us/photo/my-images/829/layoutvv.png/

    This is what I want, but just can't seem to get it right. Any help would be appreciated.

    Thank you!
    Last edited by drew32; 05-22-2011 at 04:01 PM. Reason: Adding link to photo of layout

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I'm not an expert but I've rustled this up - see screenshot.
    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" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title><!-- Insert your title here --></title>
        <style type="text/css">
        .wrapper2 {
            width: 700px;
            outline: 1px solid gray;
            text-align: center;
            margin: 0 auto;
        }
        .wrapper3 {
            width: 1000px;
            outline: 1px solid gray;
            text-align: center;
            margin: 0 auto;
        }
        .block {
            position: relative;
            width: 300px;
            height: 400px;
            display: inline-block;
            text-align: center;
            margin: 10px;
        }
        .blockH {
            background-color: black;
            color: white;
            height: 30px; 
        }
        .blockImg {
            width: 300px;
            display: table-cell;
            vertical-align: middle;
            background-color: gray;
            height: 300px;
        }
        .blockF {
            background-color: red;
            height: 50px;
        }
        </style>
    
    </head>
    <body>
        <div class="wrapper3">
            <h1>Just a Header Here</h1>
            <div class="block">
                <div class="blockH">The Header</div>
                <div class="blockImg"><img src="images/beach1.jpg" /></div>
                <div class="blockF">The Footer</div>
            </div>
            <div class="block">
                <div class="blockH">The Header</div>
                <div class="blockImg"><img src="images/beach2.jpg" /></div>
                <div class="blockF">The Footer</div>
            </div>            
            <div class="block">
                <div class="blockH">The Header</div>
                <div class="blockImg"><img src="images/beach3.jpg" /></div>
                <div class="blockF">The Footer</div>
            </div>
                <div class="block">
                <div class="blockH">The Header</div>
                <div class="blockImg"><img src="images/beach1.jpg" /></div>
                <div class="blockF">The Footer</div>
            </div>
            <div class="block">
                <div class="blockH">The Header</div>
                <div class="blockImg"><img src="images/beach2.jpg" /></div>
                <div class="blockF">The Footer</div>
            </div>            
            <div class="block">
                <div class="blockH">The Header</div>
                <div class="blockImg"><img src="images/beach3.jpg" /></div>
                <div class="blockF">The Footer</div>
            </div>
        </div>
    </body>
    </html>
    I'm using some fixed widths and heights, although the images can be various sizes as long as they fit within the central block. If not then the blocks would drop under each other when the browser is resized.

    I'm using 'display:table-cell' for the inner block to enable me to use 'vertical-align:middle' to centre the images.

    If you switch from class 'wrapper3' to 'wrapper2' (and refresh the page) it should show pairs of images.
    Attached Thumbnails Attached Thumbnails CSS-Div Content layout-beaches1.jpg  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Actually you could remove 'position: relative' for the 'block' class as I didn't need to use it.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    drew32 (05-22-2011)

  • #4
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You are a lifesaver! I defiantly wasn't expecting the whole layout and code as well, just an idea or shove in the right direction. But don't get me wrong, I defiantly appreciate it!

    After these last few days of just running into walls and getting no where it's great to finally have a resource. lol

    If you ever need anything just let me, I know how to do CSS layouts, graphic design, etc. But if it has anything to do with specific layouts like this with Div tags, etc, I'm afraid at the moment I would be of no help. lol


  •  

    Posting Permissions

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