www.webdeveloper.com
Results 1 to 2 of 2

Thread: Best way to do a layout

  1. #1
    Join Date
    Feb 2009
    Posts
    124

    Best way to do this layout

    Best way to do a layout

    Hi all

    I have a layout that I'm a bit stuck with.

    http://www.ttmt.org.uk/layout/layout.png

    It's a banner with an image on tht left and an info box on the right

    The info box contains a block of text and a link.

    The banner needs to be responsive so the info box will get narrower and taller but the image and the link will still be in the center.

    I have this but I'm not sure it's thr best way to do it.

    http://www.ttmt.org.uk/layout/index.html



    Code:
    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        
      
      <!--css-->
      
      <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        body{
          background: #ccc;
        }
        
        .container{
          background: white;
          overflow: auto;
          max-width: 800px;
          margin: 0 auto;
        }
        img{
          float: left;
        }
        .info{
          border: 1px solid #aaa;
          width: 80%;
          margin:10px ;
          float: right;
        }
        .info p{
          padding: 20px 150px 20px 10px;
        }
        .info a{
          background: red;
          color: white;
          padding: 10px;
          float: right;
          text-decoration: none;
          margin: -80px 10px 0 0;
        }
      </style>
      
        
      <title>Title of the document</title>
      </head>
      
    <body>
      
        <div class="container">
          <img src="face.png" alt=""/>
          <div class="info">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
            </p>  
            <a href>Learn More</a>
          </div>  
        </div>  
      
    </body>
    
    </html>
    Last edited by ttmt; 02-07-2014 at 04:28 PM.

  2. #2
    Join Date
    Feb 2014
    Posts
    5

    You may do this..

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="robots" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />


    <!--css-->

    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    body{
    background: #ccc;
    }
    .container{
    background: white;
    overflow: auto;
    max-width: 800px;
    margin: 0 auto;
    }
    .lftimg{
    float: left; width:16%;
    }.lftimg img{width:100%;}
    .info{
    border: 1px solid #aaa;
    width: 80%;
    margin:10px ;
    float: left;
    }
    .info p{
    padding: 20px 150px 20px 10px;
    }
    .info a{
    background: red;
    color: white;
    padding: 10px;
    float: right;
    text-decoration: none;
    margin: -80px 10px 0 0;
    }
    @media screen and (max-width:800px){
    .container{max-width:100%; }
    .lftimg {float:none; width:100%; text-align:center;}
    .lftimg img{width:auto;}
    .info{width:97%; float:none; margin:0 auto 10px;}
    }


    </style>


    <title>Title of the document</title>
    </head>

    <body>

    <div class="container">
    <div class="lftimg">
    <img src="face.png" alt=""/>
    </div>
    <div class="info">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    </p>
    <a href>Learn More</a>
    </div>
    </div>

    </body>

    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles