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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Help with layout please?

    Hi,

    I'm trying to recreate this file:



    With a simple list.

    However, in the first blue div my bullet points are not showing up, and in the second I can't get the line heights right - anyone help?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Website</title>
    <style>
    
    * {
      padding: 0;
      margin: 0;
    }
    
    body {
      font: normal 11px verdana, arial, verdana, helvetica, sans-serif;
      background: #ECECEC;
      color: #000;
    }
    
    /** Moveable Boxes **/
    .box {
        background:#FFF;
        padding-bottom: 6px;
        width:304px;
        height:200px;
        border: 1px solid #CCC;
        border-top:11px solid #ccc;
        margin:0 9px 5px;
        float:left;
        display:inline;
    }
    
    
    .box ul { float: left; list-style-type:disc; }
    .box li {list-style-type:disc; width:152px; background:#0066cc}
    
    
    .box2 {
        background:#FFF;
        padding-bottom: 6px;
        width:304px;
        height:200px;
        border: 1px solid #CCC;
        border-top:11px solid #ccc;
        margin:0 9px 5px;
        float:left;
        display:inline;
    }
    
    
    .box2 ul { float: left; list-style-type:disc; }
    .box2 li {list-style-type:disc; width:152px; background:#CC0000}
    
    </style>
    </head>
    <body>
    
        <!-- box -->
        <div class="box"> 
          <ul>
            <li>Aquarius</li>
            <li>Aries</li>
            <li>Cancer</li>
            <li>Capricorn</li>
            <li>Gemini</li>
            <li>Leo</li>
          </ul>
          <ul>
            <li>Libra</li>
            <li>Pisces</li>
            <li>Saggittarius</li>
            <li>Scorpio</li>
            <li>Taurus</li>
            <li>Virgo</li>
          </ul>
        </div>
      </div>
      
          <!-- box -->
        <div class="box2"> 
          <ul>
            <li>This is the first line</li>
            <li>This is the second line</li>
            <li>This is the first line</li>
            <li>This is the second line</li>
            <li>This is the first line</li>
            <li>This is the second line</li>
          </ul>
          <ul>
            <li>This is the first line</li>
            <li>This is the second line</li>
            <li>This is the first line</li>
            <li>This is the second line</li>
            <li>This is the first line</li>
            <li>This is the second line</li>
          </ul>
        </div>
      </div>
      
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Website</title>
    <style>
    
    * {
      padding: 0;
      margin: 0;
    }
    
    body {
      font: normal 11px verdana, arial, verdana, helvetica, sans-serif;
      background: #ECECEC;
      color: #000;
    }
    
    /** Moveable Boxes **/
    .box {
        background:#FFF;
        padding-bottom: 6px;
        width:304px;
        height:200px;
        border: 1px solid #CCC;
        border-top:11px solid #ccc;
        margin:0 9px 5px;
        float:left;
        display:inline;
    }
    
    
    .box ul { float: left; list-style-type:disc;  background:#0066cc;}
    .box li {list-style-type:disc; width:132px; margin-left: 20px;}
    
    
    .box2 {
        background:#FFF;
        padding-bottom: 6px;
        width:304px;
        height:200px;
        border: 1px solid #CCC;
        border-top:11px solid #ccc;
        margin:0 9px 5px;
        float:left;
        display:inline;
    }
    
    
    .box2 ul { float: left; list-style:none;margin-bottom: 10px;}
    .box2 li {list-style:none; width:150px; }
    
    .box2 div { background-color:#CC0000; display: block; width:152px; float: left;}
    
    
    </style>
    </head>
    <body>
    
        <!-- box -->
        <div class="box"> 
          <ul>
            <li>Aquarius</li>
            <li>Aries</li>
            <li>Cancer</li>
            <li>Capricorn</li>
            <li>Gemini</li>
            <li>Leo</li>
          </ul>
          <ul>
            <li>Libra</li>
            <li>Pisces</li>
            <li>Sagittarius</li>
            <li>Scorpio</li>
            <li>Taurus</li>
            <li>Virgo</li>
          </ul>
        </div>
      </div>
      
          <!-- box -->
        <div class="box2"> 
    		<div>
         		<ul>
            		<li>This is the first line</li>
            		<li>This is the second line</li>
    			</ul>
    			
    			<ul>
            		<li>This is the first line</li>
            		<li>This is the second line</li>
    			</ul>
        		<ul>
    	    		<li>This is the first line</li>
            		<li>This is the second line</li>
          		</ul>
    		</div>
    		<div>	
          		<ul >
            		<li>This is the first line</li>
            		<li>This is the second line</li>
    			</ul>
    			<ul>
            		<li>This is the first line</li>
            		<li>This is the second line</li>
    			</ul>
    			<ul>
            		<li>This is the first line</li>
            		<li>This is the second line</li>
          		</ul>
    		</div>
        </div>
      </div>
      
    </body>
    </html>


  •  

    Posting Permissions

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