SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need a space between div and text

    Hi,
    Here's what I have:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <?php // -- GenB -- ?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Site Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="demo.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div class="wrapper"><!--begin wrapper for page-->
    <div class="header"><img src="images/coupleBeachBench2.jpg" alt="Company Logo"></div><!--Header section-->
    <div class="navbar"><!--Begin Nav-->
    <div class="button"><a href="#">Home</a></div>
    <div class="button"><a href="#">Register</a></div>
    <div class="button"><a href="#">New Members</a></div>
    <div class="button"><a href="#">Articles</a></div>
    <div class="button"><a href="#">About Us</a></div>
    <div class="button"><a href="#">Contact Us</a></div>
    <div class="button"><a href="#">Blog</a></div>
    </div><!--End nav-->
    <div class="login"></div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
      <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
      <p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
    </div>
    
    </div><!--end wrapper-->
    
    
    
    </body>
    </html>
    and here's the css:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body{
    }
    
    .wrapper {
    	width:1100px;
    	margin:0 auto;
    	}
    	
    .header {
    	width: 1100px;
    	text-align:center;
    	}
    
    .navbar{
    	width: 900px;
    	height: 25px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	line-height: 22px;
    	font-weight:bold;
    	border: 1px solid #000;
    	background:url(images/navbar_grad.jpg) repeat-x;
    	margin:0 auto;
    }
    
    .button a {
    	float:left;
    	width: 110px;
    	height: 25px;
    	color:#000000;
    	text-decoration:none;
    	text-align:center;
    }
    
    .button a:hover {
    	float:left;
    	width: 110px;
    	height: 25px;
    	color:#fff;
    	text-decoration:none;
    	text-align:center;
    	background:url(images/navbar_grad_roll.jpg) repeat-x;
    }
    
    .login {
    	width: 250px;
    	height: 200px;
    	border: #000000 medium solid;
    	float:left;
    	margin-left:9%;
    	}
    	
    	.content {
    	width: 900px;
    	margin-left:8%;
    	}
    As you can see I'm just fooling around with some design's, but the text is up against the login nav

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    A simple solution is to add a right margin. E.g.

    Code:
    .login {
    	width: 250px;
    	height: 200px;
    	border: #000000 medium solid;
    	float:left;
    	margin-left:9%;
            margin-right: 20px;
    }
    The layout strategy could be improved, but this is a direct answer to the question.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    OT:
    you should make your navigation a UL.

    <ul class="navbar">
    <li class="button"><a href="#">Home</a></li>
    <li class="button"><a href="#">Register</a></li>
    ...
    </ul><!--End nav-->


    alternate to ralph's solution, I would suggest adding margin-top:20px to #content instead.. it should work for more consistent spacing. (OR padding-top:20px would also work, but if you have a bg in that div it would change its position.. which might be inconvenient)


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
  •