SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict Johana Solendhal's Avatar
    Join Date
    Aug 2004
    Location
    Land of the free
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Desperate help needed - Need central table to expand

    I sure hope I can explain myself:

    I have a content that is desplayed between two columns (not excactly columns becuase they are defffined by CSS elements) and I want it to expand when the screen is extended and not stick to the left padding. For example, int he sitepoint main site, when you add/remove the favorites explorer bar in IE6 the text expands and fills less lines, but it still manages to remain inside it's area.
    What a mess, I know, sorry guys.

    Can any of you help me out?


    This is the central content. I'm sure this is wrong, but the idea was to pad the content in the right central area, and add a 100% widh so that it expanded correctly, naturaly, this didn't quite workout.

    #centraltab {
    position: absolute;
    WIDTH: 100%;
    HEIGHT: 181px;
    top:170px;
    right: 164px;
    left: 164px;
    z-index: 1;
    left: 171px: ;
    BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; border-spacing: 0px;
    FONT-SIZE: 10px; COLOR: #27659f; LINE-HEIGHT: 20px; FONT-FAMILY: Verdana; TEXT-ALIGN: justify;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Assuming you have placed columns to the left and right that are 164px wide each then all you need to is set a margin-left and a margin-right on the centre content.

    I'm assuming the left and right columns are either absolutely placed or floated then all you need to add is this.
    Code:
    #centraltab {  
    margin-right: 164px;
    margin-left: 164px;
    height: 181px;
    You can set a margin-top if you need to move it into place.

    I would need to see the rest of your code to give you a proper example.

  3. #3
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mmm can you post the code please.

  4. #4
    SitePoint Addict Johana Solendhal's Avatar
    Join Date
    Aug 2004
    Location
    Land of the free
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still can't get it to work.

    Here's the code:

    http://www.websitefocus.net/notables42.html

    The problem is that I want to it fit nicely inside the central area, and expande properly.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    mMore or less as I posted above but also bring the centre content html to the top.
    Code:
     #centraltab { 
     margin-right: 160px;
     margin-left: 160px;
     margin-top: 170px;
     HEIGHT: 181px; 
     FONT-SIZE: 10px; COLOR: #27659f; LINE-HEIGHT: 20px; FONT-FAMILY: Verdana; TEXT-ALIGN: justify;
    }
     
    --> 
    </style>
    </head>
    <body>
    <div id="centraltab">Central content Central content Central content Central content 
      Central content Central content Central content Central content Central content 
      Central content Central content Central content Central content Central content 
      Central content Central content</div>
    <div id="navtop"> jh hh jhjhjh</div>
    You have a lot of errors in your css so run it through the css validator to clean it up (e.g. HORIZONTAL-ALIGHT: right; !!! Theres no such thing. I think you mean text-align:right )

    I must mention here that because you have absolutely placed nearly everything on your page then you wil have to control everything and nothing will be able to flow because all elements are absolute.

    If you want the center content to flow downwards and push the footer down then you will need to re-think your design.

    Hope that helps anyway.

    Paul

  6. #6
    SitePoint Addict Johana Solendhal's Avatar
    Join Date
    Aug 2004
    Location
    Land of the free
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you mean by flow?

    Thank you for the help by the way.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    What do you mean by flow?
    When elements follow each other logically in the html without being positioned explicitly then they are said to be in the natural flow of the document.

    If you absolutely place an element at 100px from the top then it will always be 100px from the top of its parent. (A parent is defined as the nearest ancestor that also has a position defined (e.g. position:relative or position absolute). If no such ancestor exists then the parent (containing block) is the html root.)

    So say you have positioned a footer as 200 pixels down from the top of the page. If you have content above that footer that expands to greter than 200 pixels in height then the content will just overwrite the footer. However if you had just placed the footer after the content without positioning it then the content would just push the footer down as it expands because it is said to be in the flow.

    Most pages are a mixture of both but most documents require some fluidity unless they are completely fixed width.

    If you had floated your side columns and then used a footer without positioning (you would need clear:both on the footer to clear the floats) then the footer would automatically sit under the floats and when the content in the centre expanded downwards (as when the screen is resized ) then the footer woulod also be pushed downwards and not be overwritten.

    Paul

  8. #8
    SitePoint Addict Johana Solendhal's Avatar
    Join Date
    Aug 2004
    Location
    Land of the free
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul. I had actually considered some of the things you said before the design that is still in process. I am going to rethink the structure nd will take into account everything you said.

    About the current situation of the center content, and taking into account the current state of things, is there a way I can make the central content not overwrite the right column has it expands, and above all, how can I make it expand?

    And sorry to be taking your time.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    About the current situation of the center content, and taking into account the current state of things, is there a way I can make the central content not overwrite the right column has it expands, and above all, how can I make it expand?
    Use the code I gave you above

  10. #10
    SitePoint Addict Johana Solendhal's Avatar
    Join Date
    Aug 2004
    Location
    Land of the free
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Paul.

    big Kisses.


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
  •