Web Analytics Made Easy -
StatCounter inside div text positioning issue - CodingForum

Announcement

Collapse
No announcement yet.

inside div text positioning issue

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • inside div text positioning issue

    Code:
    <style>
    .title{
    width:100%;
    height:50px;
    background-color:skyblue;
    font-size:20px;
    }
    </style>
    
    <div class="title">
    here's my title
    </div>
    What I want to do is, positionate the text (not the div), without affecting the div's size/width.

    I tried using 'padding-bottom: 5px' but then it affected the div size...

  • #2
    Hello Dhuan,
    The way it is now there is no tags for styling the text so your limited to styling .title

    Since it's just a heading you could use h1, h2, h3 ... and style that. Works really well and that's what the heading tags were made for.

    I've used your example, h1 tag on the second example and styled the text in the 3rd example here -
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	outline: none;
    	border: none;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    .title {
    	width:100%;
    	height:50px;
    	line-height: 50px; /*vertically centers text*/
    	background-color:skyblue;
    	font-size:20px;
    	margin: 10px 0; /*just to separate them a little*/
    }
    .title p {
    	text-align: left;
    	color: #3F0;
    	margin: 0 0 0 100px;
    }
    </style>
    </head>
    <body>
        <div id="container">    
            <div class="title">
            	here's my title
            </div>
            
            <h1 class="title">here's another title</h1>
            
            <div class="title">
            	<p>a third title</p>
            </div>
        <!--end container--></div>
    </body>
    </html>
    http://www.w3schools.com/css/css_text.asp

    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

    Comment

    Working...
    X