Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS content length out of sync

    Hi,
    I added a Blogger script to show my flickr images (see script here)

    I needed to increase the content length in my CSS file to acccomodate it to 550px.

    As you can see from my site (www.irish-guy.com) and the top RIGHT (sorry), my content sidebar is now out of sync. How can I cover this up. How to I change the location of the right hand sidebar to sync with the content length?

    Any help is appreciated!

    Michael


    body
    {margin:0; padding:0; color:#303030; background:#fafafa url(img/bodybg.gif) top left repeat-y; font:76% Verdana,Tahoma,sans-serif;}

    ul
    {list-style:circle; margin:15px 0 20px 0; font-size:0.9em;}

    li
    {margin:0 0 8px 25px;}

    a
    {color:#d85d5d; font-weight:bold; text-decoration:none;}

    a:hover
    {color:#505050; text-decoration:underline;}

    img
    {float:left; margin:0 15px 15px 0; padding:1px; background:#ffffff; border:1px solid #d0d0d0;}

    a img
    {border-color:#d85d5d;}

    a img:hover
    {background:#d85d5d; border-color:#d85d5d;}

    /**************** Sidebar area styles ****************/

    #sidebar
    {position:absolute; top:0; left:0; width:220px; height:100%; overflow:auto; background:#e0e0e0 url(img/sidebarbg.gif) top right repeat-y; text-align:right;}

    body > #sidebar
    {position:fixed;}

    #sidebar h1
    {margin:20px 18px 0 5px; color:#d85d5d; font-size:1.6em; letter-spacing:-2px; text-align:right;}

    #sidebar h2, #sidebar h3
    {margin:0 20px 18px 5px; color:#808080; font-size:1.1em; font-weight:bold; letter-spacing:-1px; text-align:right;}

    #sidebar h3
    {margin:20px 18px 4px 5px; color:#606060;}

    #sidebar p
    {margin:0 20px 18px 5px; color:#606060; font-size:0.8em;}

    #sidebar a
    {color:#808080}

    /**************** Navigation menu styles ****************/

    #menu a
    {display:block; width:202px; padding:5px 18px 5px 0; color:#606060; background:#e0e0e0 url(img/sidebarbg.gif) top right repeat-y; font-size:1.8em; font-weight:normal; text-decoration:none; letter-spacing:-2px;}

    #menu a:hover
    {color:#303030; background:#f0f0f0 url(img/sidebarbg.gif) top right repeat-y;}

    #menu a.active
    {padding:5px 18px 5px 0; background:#fafafa; border-top:2px solid #c0c0c0; border-bottom:2px solid #c0c0c0;}

    #menu a.active:hover
    {color:#505050; background:#fafafa;}

    /**************** Content area styles ****************/

    #content
    {width:550px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}

    #content p
    {margin:0 0 20px 0; line-height:1.5em;}

    #content h1
    {margin:0; color:#d85d5d; font-size:4em; letter-spacing:-5px; text-align:center;}

    #content h2
    {margin:0; color:#808080; font-weight:normal; font-size:2.5em; letter-spacing:-2px; text-align:center;}

    #content h3
    {clear:both; margin:30px 0 10px 0; color:#d85d5d; font-weight:normal; font-size: 2em; letter-spacing:-2px;}
    Last edited by subaculture; 12-06-2005 at 06:23 PM.

  • #2
    New Coder
    Join Date
    Dec 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try changing it to width: 570px;

    I think the padding is pushing it out 20 pixels.

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thakks but that would make it a little bit worse as you can see. If pushes out the content width (550 to 570)! a bit more (see top right of screen).


    Mike

  • #4
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    Other way round if you want it to be 550 with 20px padding then you need to set the width to 510px;
    ie 550 - 20 - 20

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by NancyJ
    Other way round if you want it to be 550 with 20px padding then you need to set the width to 510px;
    ie 550 - 20 - 20
    You mean change the width of the script? Where can I change the right hand (grey margin) so that it syncs at 550px with the main content width?

    I am pretty new at this, sorry!

    Mike

  • #6
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    change this
    Code:
    #content
    {width:550px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}
    to this
    Code:
    #content
    {width:510px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by NancyJ
    change this
    Code:
    #content
    {width:550px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}
    to this
    Code:
    #content
    {width:510px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}

    Hmm, but the script (flash picture gallery) requires at lest 550px or that will jutt out over the right margin.

    M

  • #8
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    ...just redo your bg image then

  • #9
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    or change the script, it only needs 500px. it just has a containing div set to 550px, it doesnt need to be that big, change that to 510px and it should fit perfectly, just with a smaller border.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •