Need help with CSS page layout

HTML & CSS
1

Hello

First of all Awesome forum !

Now i need some help with my site : http://leagueoflegendsfreestuff.weebly.com/ as you can see the text isnt in the borders how can i fix it ?

Here is my Main-style.css

/* Common  -------------------------------*/

body { margin:0; font:12px Tahoma; color:black; background:url(http://img580.imageshack.us/img580/5023/86339321.jpg) 50% 0 #151921 repeat-x; }

#header { height:199px; width:990px; background:url(http://img856.imageshack.us/img856/9316/headeruof.jpg) no-repeat; padding-left:0px; margin-left:auto; margin-right:auto; text-align:left;}
#header h1 { font-size:18px; margin:0; color: #f4e4bc; padding-top:115px; padding-left: 80px;}

#container { width:990px; background:url(http://img51.imageshack.us/img51/6643/containerbgc.gif) repeat; padding-left:px; margin-left:auto; margin-right:auto; text-align:center;}

#footer { clear:both; padding:20px; text-align:center }
#subnav { color:#0094c5; font-size:11px; margin:20px 0;}	
#subnav a { color:#f4e4bc; font-size:11px; text-decoration: none}
#subnav a:hover { color:#f4e4bc; font-size:11px; text-decoration: underline }
.copyright { font-size:10px; color:#8a8a8a;}

	
/* Template 1 -------------------------------*/	

#navigation { width:960px; height:25px; font-size:13px; color: #f4e4bc; text-decoration:none; line-height:25px; color:#0094c5; margin-left:auto; margin-right:auto;}
#navigation a { width:170px; height:25px; font-size:13px; color: #f4e4bc; text-decoration:none; line-height:25px;}
#navigation a:hover { text-decoration:underline; }

#newstitle { width:800px; margin-left:auto; margin-right:auto; margin-bottom: 20px; text-align: left; font:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color: #0094c5;}

#newsheader { width:790px; height:41px; background-image:url(../images/title_bg.gif); background-repeat: repeat-x; margin-left:auto; margin-right:auto; text-align: left; font:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color: #0094c5; padding-left:10px; padding-top: 5px;}

#newsauthor { text-align: left; font:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color: #a2a4a4; padding-left:0px; padding-top: 2px;}

#newsdate { text-align: ritgh; font:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color: #a2a4a4; padding-left:0px; padding-top: 2px; float:right;}

#newsbody { width:780px; background-color:#f4e4bc; margin-left:auto; margin-right:auto; text-align: left; font:Arial, Helvetica, sans-serif; font-size:12px; font-weight: normal; line-height:18px; color: #011f26; padding-left:10px; padding-top: 5px; padding-right:10px; padding-bottom: 10px;}
.newslink { color:#a50000; }
.newslink a{ color:#a50000; text-decoration: underline;}
.newslink a:hover{ color:#a50000; text-decoration: none;}


#footer { clear:both; padding:20px; text-align:center }
#subnav { color:#0094c5; font-size:11px; margin:20px 0;}	
#subnav a { color:#f4e4bc; font-size:11px; text-decoration: none}
#subnav a:hover { color:#f4e4bc; font-size:11px; text-decoration: underline }
.copyright { font-size:10px; color:#8a8a8a;}



/* Template 2 -------------------------------*/	

#navigation2cont { width:170px; margin-left:70px; text-align:left; margin-right:0px; float:left;}

#navigation2top { width:170px; height:8px; background-image:url(http://imageshack.us/f/706/nav2top.gif/); background-repeat:no-repeat; margin-left:0px; margin-right:0px; float:left;}

#navigation2 { width:170px; font-size:13px; color: #f4e4bc; background-image:url(http://imageshack.us/f/268/nav2mid.gif/); background-repeat: repeat; text-decoration:none; line-height:25px; color:#0094c5; margin-left:0px;text-align:left; margin-right:0px; padding-left:0px; float:left;}
#navigation2 a { width:170px; font-size:13px; color: #f4e4bc; text-decoration:none; line-height:25px;}
#navigation2 a:hover { text-decoration:underline; }

#navigation2bot { width:170px; height:8px; background-image:url(http://imageshack.us/f/542/nav2bot.gif/); background-repeat:no-repeat; margin-left:0px; margin-right:0px; float:left; margin-bottom:20px;}


#newscol2 { width:640px; margin-left:0px; margin-right:70px; text-align: left; float:right;}


#newstitle2 { width:612px; height:40px; margin-left:0px; margin-right:0px; margin-bottom:0px; text-align: left; font:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color: #0094c5; padding-top:0px; }


#newsheader2 { width:612px; height:41px; background-image:url(http://imageshack.us/f/837/titlebg.gif/); background-repeat: repeat-x; margin-left:0px; margin-right:0px; text-align: left; font:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color: #0094c5; padding-left:10px; padding-right:10px; padding-top: 5px;}


#newsauthor2 { text-align: left; font:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color: #a2a4a4; padding-left:0px; padding-top: 2px;}


#newsdate2 { text-align: right; font:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color: #a2a4a4; padding-left:0px; padding-top: 2px;}


#newsbody2 { width:612px; background-color:#f4e4bc; margin-left:0px; margin-right:0px; text-align: left; font:Arial, Helvetica, sans-serif; font-size:12px; font-weight: normal; line-height:18px; color: #011f26; padding-left:10px; padding-top: 5px; padding-right:10px; padding-bottom: 10px;}
.newslink2 { color:#a50000; }
.newslink2 a{ color:#a50000; text-decoration: underline;}
.newslink2 a:hover{ color:#a50000; text-decoration: none;}

thnx in advance!

2

Hi maitkaa. Welcome to the forums. :slight_smile:

as you can see the text isnt in the borders

Actually, I can’t see that. What borders? Could you explain in more detail how you want this to look?

3

This is just a guess, in case the width of the text is supposed to be the same as the width of the image at the top. You can add this to your css.


#wrapper {
    width: 990px;
    margin: 0 auto;
}
4

http://img823.imageshack.us/img823/5326/borderyu.png these

5

that did the job thank you ! This thread can be closed now

6

Glad to hear that worked for you! Thanks for the feedback.

7

Spoted a new small mistake.if you scroll down from here : http://leagueoflegendsfreestuff.weebly.com/free-skins.html you can see the background is grey. How can i fix that i dont want to make a new thread.

8

Change this:

body {
margin: 0;
font: 12px Tahoma;
color: black;
background: url(http://img580.imageshack.us/img580/5023/86339321.jpg) 1% 0 [COLOR="#FF0000"]rgb(21, 25, 33)[/COLOR] repeat-x;
}

to this

body {
margin: 0;
font: 12px Tahoma;
color: black;
background: [COLOR="#FF0000"]#000[/COLOR] url(http://img580.imageshack.us/img580/5023/86339321.jpg) 1% 0  repeat-x;
}
9

Thank you very much , worked like a charm and the site looks way better now.

10

You’re welcome. :slight_smile: