Jump to content

The Text Is Not On The Right Position


TheCatapult
 Share

Recommended Posts

Guys, I am having problem. post-78075-0-23113600-1325857932_thumb.jpg The font is not on the right position. What I mean to say that the text should start at the very top position but it has indent somehow. The ten divisions in the left side supposed to have text on it each. See you see a little dots, I guess those are the letters overlapped by the background. The number 10, you may see it. The problem now here is overlapping and not on its right position (having indent on the top). Pls. help. This is the code. I decaled already the w3.org or whatever it is. Anyway, the problem just came when i decalred it. Pls. help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>DZRW DZ Right Wins 87.5 Mhz</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/><style type="text/css">p{font-family:"Tahoma";font-size:12px;text-align:justify;}#news1{  width: 200px;  height: 12px;  position: absolute; top: 200px; left: 10px;  background: #ffcccc;}#news2{  width: 200px;  height: 12px;  position: absolute; top:215px; left: 10px;  background: #ffcccc;}#news3{  width: 200px;  height: 12px;  position: absolute; top: 230px; left: 10px;  background: #ffcccc;}#news4{  width: 200px;  height: 12px;  position: absolute; top: 245px; left: 10px;  background: #ffcccc;}#news5{  width: 200px;  height: 12px;  position: absolute; top: 260px; left: 10px;  background: #ffcccc;}#news6{  width: 200px;  height: 12px;  position: absolute; top: 275px; left: 10px;  background: #ffcccc;}#news7{  width: 200px;  height: 12px;  position: absolute; top: 290px; left: 10px;  background: #ffcccc;}#news8{  width: 200px;  height: 12px;  position: absolute; top: 305px; left: 10px;  background: #ffcccc;}#news9{  width: 200px;  height: 12px;  position: absolute; top: 320px; left: 10px;  background: #ffcccc;}#news10{  width: 200px;  height: 12px;  position: absolute; top: 335px; left: 10px;  background: #ffcccc;}#misc{  width: 200px;  height: 170px;  position: absolute; top: 385px; left: 10px;  background: #ffcccc;}#content{  width: 500px;  height: 300px;  position: absolute; top: 200px; left: 350px;  background: #ffcccc;}#DiscJockey{  width: 25px;  height: 1px;  position: absolute; top: 326px; left: 460px;  background: #ffcccc;}#Advertisement1{  width: 200px;  height: 100px;  font-family: Verdana, sans-serif;  position: absolute; top: 200px; left: 1000px; right: 10px;  background: #ffcccc;}#Advertisement2{  width: 200px;  height: 100px;  font-family: Verdana, sans-serif;  position: absolute; top: 305px; left: 1000px; right: 10px;  background: #ffcccc;}#Advertisement3{  width: 200px;  height: 100px;  font-family: Verdana, sans-serif;  position: absolute; top: 410px; left: 1000px; right: 10px;  background: #ffcccc;}#Advertisement4{  width: 200px;  height: 100px;  font-family: Verdana, sans-serif;  position: absolute; top: 515px; left: 1000px; right: 10px;  background: #ffcccc;}#Advertisement5{  width: 200px;  height: 100px;  font-family: Verdana, sans-serif;  position: absolute; top: 620px; left: 1000px; right: 10px;  background: #ffcccc;}#navigation{  width: 1190px;  height: 12px;  font-family: Verdana, sans-serif;  position: absolute; top: 180px; left: 10px; right: 10px;  background: #ffcccc;}</style></head><div id="news1"><p>1. Yahweh i know You are near</p></div><div id="news2"><p>2. It might be you</p></div><div id="news3"><p>3. Beautiful girl</p></div><div id="news4"><p>4. Kordero ng Diyos</p></div><div id="news5"><p>5. Papuri sa Diyos</p></div><div id="news6"><p>6. TO GOD BE THE GLORY!</p></div><div id="news7"><p>7. It might be you</p></div><div id="news8"><p>8. Beautiful girl</p></div><div id="news9"><p>9. Kordero ng Diyos</p></div><div id="news10"><p>10. Papuri sa Diyos</p></div><div id="misc"><p>GOD</p></div><div id="content"><p>To GOD be the Glory! I am a child of GOD, Jesus Christ! Jesus Christ is my LORD, SAVIOR AND PROTECTOR AND HE WILL BE THE ONE AND ONLY!The Holy Spirit will guide me! Amen!</p></div><div id="DiscJockey"><p>GOD</p></div><div id="Advertisement1"><p>GOD</p></div><div id="Advertisement2"><p>GOD</p></div><div id="Advertisement3"><p>GOD</p></div><div id="Advertisement4"><p>GOD</p></div><div id="Advertisement5"><p>GOD</p></div><div id="navigation"><p>GOD</p></div></body></html>

thankspost-78075-0-23113600-1325857932_thumb.jpg

Edited by MisterCatapult
  • Like 1
Link to comment
Share on other sites

Redesign without position: absolute; and top properties, these should be only used as a last resort, when you can't achieve the same result with padding, float and margins. In most cases you would not define a height for a block element, unless you specifically require it to be a fixed height.

Link to comment
Share on other sites

as already pointed out! padding, margins, float. first you create a outer container element (wrapper), within this you divide in to section navigation, header, left, right main content, then set size margins float etc, minimum you should have is similar to below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>DZRW DZ Right Wins 87.5 Mhz</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/><style type="text/css">p{font-family:"Tahoma";font-size:12px;text-align:justify;}#wrapper {width: 960px; margin: 0 auto;}#navigation{  min-height: 12px;  font-family: Verdana, sans-serif;  overflow:hidden;  margin-bottom:10px;}#navigation, #content, #news, #misc, .Advertisement  {background: #ffcccc;}#left {width: 200px; float:left; min-height: 300px;}#misc, #news{  min-height: 170px; margin-bottom:10px; overflow:hidden;}#right {width: 200px; float:right; min-height: 300px;}#content{  min-height: 300px; margin: 0 210px;   }#DiscJockey{  margin-top: 326px;}.Advertisement {min-height: 100px; overflow:hidden; margin-bottom:10px;}</style></head><div id="wrapper"><div id="navigation"><p>GOD</p></div><div id="left"><div id="news"><p>1. Yahweh i know You are near</p><p>2. It might be you</p><p>3. Beautiful girl</p><p>4. Kordero ng Diyos</p><p>5. Papuri sa Diyos</p><p>6. TO GOD BE THE GLORY!</p><p>7. It might be you</p><p>8. Beautiful girl</p><p>9. Kordero ng Diyos</p><p>10. Papuri sa Diyos</p></div><!-- END news--><div id="misc"><p>GOD</p></div><!-- END misc--></div><!-- END left--><div id="right"><div class="Advertisement"><p>GOD</p></div><div class="Advertisement"><p>GOD</p></div><div class="Advertisement"><p>GOD</p></div><div class="Advertisement"><p>GOD</p></div><div class="Advertisement"><p>GOD</p></div></div><!-- END right--><div id="content"><p>To GOD be the Glory! I am a child of GOD, Jesus Christ! Jesus Christ is my LORD, SAVIOR AND PROTECTOR AND HE WILL BE THE ONE AND ONLY!The Holy Spirit will guide me! Amen!</p><div id="DiscJockey"><p>GOD</p></div></div><!-- END content--></div><!-- END wrapper--></body></html>

Link to comment
Share on other sites

just add it to your p selector styling you already have

p{font-family:"Tahoma";font-size:12px;text-align:justify;margin: 0.9em 0;} 

i mean look at the #content the text start at top unlike others.
That because i forgot add overflow:hidden to #content
#content{  min-height: 300px; margin: 0 210px;  overflow:hidden; }

if you do not use overflow: hidden; or alternatively padding-top:1px; or border-top: 1px; you end with a issue called collapsing margin problem, where the child element margin if greater than the parent, will seep past the top edge of parent element, and in doing so, applies the margin to parent element instead.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...