SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text control within a div

    Hi,
    I use css to emulate a simple table for a header title in my site, here is the css <div code:

    .headerhome {
    font-size: 12px;
    background-color: #CC0000;
    text-align: left;
    font-family: verdana, helvetica, sans-serif;
    color: #FFFFFF;
    width: 100%;
    height: 20px;
    margin-left: 7px;


    }

    What i'm missing, is code to control the text inside the div: vertical position of text, and I also want to add some px to the left of the text.

    What should I add ?

    Thanks,
    Koros

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    100% width + margin-left 7px = no fit

    little boxes
    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	body{font-family: verdana, helvetica, sans-serif;}
    	
    	div{text-align:left; }
    	
    	* {margin:0;padding:0;}
    	
    	.headerhome{border:1px solid #CC0000;margin:10px}
    	
    	.headerhome h3,.left h3,.right h3{
    	font-size:12px;
    	background:#CC0000;
    	color:#FFFFFF;
    	line-height:20px;
    	font-weight:100;
    	padding:0 0 0 15px;
    	}
    	.headerhome p,.left p,.right p{
    	font-size:10px;
    	padding:0 0 0px 15px;
    	}
    	
    	.left{width:400px;float:left;background:#ccccff;}
    	.right{width:200px;float:right;background:#ccccff;}
    	
    	.x{padding:0 0 5px 0;}
    	.x h3{margin:10px 10px 0 10px;}
    	.x p{margin:5px 10px 0 10px;padding:0;}
    	
    	.z{clear:both;height:20px;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    <div class="headerhome">
    <h3>12345</h3>
    <p>ab<br /><br /><br /><br /><br />cde</p>
    </div>
    
    <div class="right">
    
    <div class="headerhome">
    <h3>12345</h3>
    <p>ab<br /><br />cde</p>
    </div>
    
    </div>
    
    <div class="left">
    
    <div class="headerhome">
    <h3>12345</h3>
    <p>ab<br /><br />cde</p>
    </div>
    
    </div>
    
    <p class="z"></p>
    
    <div class="right x">
    
    <h3>12345</h3>
    <p>abcde</p>
    
    
    </div>
    
    <div class="left x">
    
    
    <h3>12345</h3>
    <p>abcde</p>
    
    
    </div>
    
    </body>
    </html>
    Last edited by all4nerds; Jun 18, 2006 at 13:20.


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
  •