SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    India
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS text placement

    Hi,

    I made a page

    HTML Code:
    <style>
    
    .window {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin-bottom: 0.8em;
    }
    
    
    .hd {
    color: #FFFFFF;
    font-family:verdana;
    font-size:12px;
    font-weight:bold;
    background: url(http://images.hi5.com/images/header/subnav_gradient2.gif);
    padding:5px 0px 5px 2px;
    border-left:5px solid #5c7099;
    border-right:5px solid #5c7099;
    }
    </style>
    
    <div class="window">
    
    <div class="hd">
    <div style="margin-left: 1em; float:left">Left Text</div>
    <div style="margin-right: 1em; float:right">RIGHT TEXT</div>
    </div>
    
    <div class="bd">I will also show how to set up a secondary DNS server, but I will not use normal zone transfers to get the records from the primary to the secondary DNS server.</div>
    
    </div>
    You can see it at

    http://www.webcash.in/fp/css1.html

    I need the "Left Text" aligned left and "RIGHT TEXT" to right side.

    Now it is showing, but the text is not visible properly, it seems the the "bd" div is overlapping to "hd" div.

    Can any one tell how i made the Left Text and RIGHT TEXT show clearly ?

    Also the text in "bd" div is center align, what is the reason for this ? I do not say text-align:center in the style.

    Thanks,

    Yujin

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    You're not clearing your floats!

    And your text isn't aligned center - it's just the text is getting out of the way of the floats on either side.

    Code:
    .hd {
    color: #FFFFFF;
    font-family:verdana;
    font-size:12px;
    font-weight:bold;
    background: url(http://images.hi5.com/images/header/subnav_gradient2.gif);
    padding:5px 0px 5px 2px;
    overflow: hidden; /* Clear children */
    width: 100&#37;; /* Clear children in IE */
    }
    Perhaps a safer method for clearing is to simply add a clearing div.
    Code:
    <div class="hd">
      <div style="margin-left: 1em; float:left">Left Text</div>
      <div style="margin-right: 1em; float:right">RIGHT TEXT</div>
      <div style="clear: both"></div>
    </div>
    It's thoroughly covered in the CSS FAQ at the top of the forum

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    India
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks markbrown4 for the reply. I got it working. Going to read the CSS FAQ now :-)

  4. #4
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could also create a .lefttext and .righttext class, its much easier to change these in a style sheet at a later time and upload a single style sheet than to have to change inline styles and have to upload a ton of pages.

    You could also achieve the same thing using two span tags inside a single div. the first span with a class of "lefttext" the second with a class of "righttext".
    intragenesis, llc professional web & graphic design

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Better still, make the container text-align: right and then you only have to put a span around the left bit and float it left.


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
  •