1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help with divs,please

Discussion in 'CSS' started by Igozorus, Jul 27, 2013.

  1. #1
    Hello.So,here is my website.
    svetlana.co.nf
    So problem would be this page http://svetlana.co.nf/semicvetik.html
    You see the white background and the text.So at first background is normal and then,when second column of text starts the background becomes more narrower,it like loses some white background on both sides.Who knows how to fix that?Here is my css
    /* CSS Document */
    html { height:100%; }
    body { margin:0px;
    background-image:url(images/flowers_yellow.jpg);
    background-attachment:fixed;
    height:100%;
    }
    #outer { width:560px;
    margin:0px auto;
    background-color:#EBEBEB;
    height:100%;
    }
    #wrapper { margin:0px auto;
    width:500px;
    background-color:#EBEBEB;
    }

    ul { background-color:#0F9; }
    li { display:inline;
    margin-right:30px; }

    ul li a { font-size:20px;
    text-decoration:none; }

    a:link { color:#55002B; }
    a:hover { color:#EA0000; }
    a:visited { color:#55002B; }

    h1 { color:#0f9;
    text-align:center;
    font-size:40px; }

    p { color:#BB005E;
    font-size:17px; }

    .sem { font-family:"Times New Roman", Times, serif;
    font-size:25px;
    font-weight:bold; }

    #stih { text-align:center;
    margin:0px auto;
    width:auto; }

    So,i think the problem is somewhere in divs?I can't fix it.
    I tried #stih { height:100%; } and it wont affect at all
    If i give #wrapper { height:100%; } Then somehow white background disappears at all starting from second column of text and i can see the background image.
    Help please
     
    Solved! View solution.
    Igozorus, Jul 27, 2013 IP
  2. Katy

    Katy Moderator Staff

    Messages:
    3,490
    Likes Received:
    513
    Best Answers:
    7
    Trophy Points:
    355
    #2
    The width for the #wrapper should be changed to width:560px; :)
     
    Katy, Jul 27, 2013 IP
  3. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #3
    Well,that does help that page and white background becomes alright,but...
    I did #wrapper { 500px; } and #outer { 560px; } So that all content would centered and not pressed to the sides of #wrapper.So now,if i do #wrapper { 560px; } my content becomes really bad.On the page semicvetik.html the picture pressed to the left.On main page picture pressed to the left too and also the paragraphs becomes pressed to left and right side,the content don't have margin anymore.I don't want that.
     
    Igozorus, Jul 27, 2013 IP
  4. #4
    Ok, if you want the picture and the menu centered just add text-align: center; to the wrapper. Or if you want absolutely everything centered on your website just add text-align: center; to body {}

    I don't see any problem with the text though. You might want to add padding instead of width: auto; if it pushed the text to the sides in your browser.
     
    Katy, Jul 27, 2013 IP
    kk5st likes this.
  5. jonclancey

    jonclancey Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    Hye!!
    use dream weaver and get hints to fix the cs issues. Its quite easier and practical.
     
    jonclancey, Jul 27, 2013 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Utterly ridiculous suggestion.
     
    kk5st, Jul 27, 2013 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Katy is correct.
    Make the css on #wrapper like so:
    #wrapper {
      background-color: #EBEBEB;
      margin: 0 auto;
      text-align: center;
      width: 560px;
    }
    Code (markup):
    Note the text-align property, also as she suggested.
    cheers,

    gary
     
    kk5st, Jul 27, 2013 IP
  8. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #8
    Ok,thank you guys
     
    Igozorus, Jul 27, 2013 IP