SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: CSS text placement
-
Sep 29, 2007, 12:52 #1
- Join Date
- Jun 2003
- Location
- India
- Posts
- 162
- 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>
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
-
Sep 29, 2007, 16:19 #2
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 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%; /* Clear children in IE */ }
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>
-
Sep 30, 2007, 12:17 #3
- Join Date
- Jun 2003
- Location
- India
- Posts
- 162
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks markbrown4 for the reply. I got it working. Going to read the CSS FAQ now :-)
-
Sep 30, 2007, 15:41 #4
- 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
-
Sep 30, 2007, 17:19 #5
- 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