SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with CSS page layout

    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
    Code:
    /* 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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi maitkaa. Welcome to the forums.

    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. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.
    Code:
    #wrapper {
        width: 990px;
        margin: 0 auto;
    }

  4. #4
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that did the job thank you ! This thread can be closed now

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Glad to hear that worked for you! Thanks for the feedback.

  7. #7
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Spoted a new small mistake.if you scroll down from here : http://leagueoflegendsfreestuff.weeb...ree-skins.html you can see the background is grey. How can i fix that i dont want to make a new thread.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Change this:

    Code:
    body {
    margin: 0;
    font: 12px Tahoma;
    color: black;
    background: url(http://img580.imageshack.us/img580/5023/86339321.jpg) 1% 0 rgb(21, 25, 33) repeat-x;
    }
    to this

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

  9. #9
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much , worked like a charm and the site looks way better now.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You're welcome.


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
  •