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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css content areas, borders and expanding images

    Hi there guys,

    This is my first visit to this site and I must say it is very useful and a great asset to anyone beginning to learn to code.

    I am on my first attempt at putting together a site for a content management system.

    I have set up the header and the area for the links, but, I am now on the content area and I have tried to play around a bit, but I would be really grateful if I can get some help on it.

    The *current progress* can be found here:


    http://testing.elitestrikeforce.com/...est3/e107.html


    The css and html is all in the source there for now.

    If you go to the here:

    http://testing.elitestrikeforce.com/...rogress V3.jpg

    you will see the jpg of what the site is eventually going to look like (though there is only 1 content box at the moment as they will all be the same).


    What I am doing for the content areas is as follows:

    Code:
    <div id='content_wrapper'>
    	<div id='content_wrapper_lb'>
    	</div>
    	<div id='content_wrapper_center'>
    	</div>
    	<div id='content_wrapper_rb'>
    	</div>
    		<!--Footer-->
    </div>

    So, if you look at the source on the site, you will see that the content wrapper is supposed to encompass the left border, the content wrapper center and the right border - (it is annoying to have to build the borders like this, but I could not think of any other way).

    once I have figured this out, there will be further content boxes inside the content_wrapper_center to contain the menus and news etc.


    The difficulty I am having is that I want the left and right (and center) content area images to repeat in the y direction, to the height of the main overall content wrapper while things inside the center content wrapper expand down the page.

    At the moment, the left , right and center seem to be expanding independently from one another and not filling the outer content wrapper as the center content wrapper grows.

    I have used some testing text to show what happens when the content wrapper center grows.

    I hope I have been clear enough for you guys to be able to give me some assistance - If I have not been, please do shout.

    Many thanks in advance for your help,

    Zed.

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    The difficulty I am having is that I want the left and right (and center) content area images to repeat in the y direction, to the height of the main overall content wrapper while things inside the center content wrapper expand down the page.
    Code:
    .left {
    background-image: url(link to image);
    background-repeat: repeat-y;
    width: width of image px;
    length: length of image px;
    }
    Code:
    <div class="left">
    Content here
    </div>
    Do you mean something like that?

    If it isn't what you mean, then I apologize, I'm very slow...

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First of all, there is no need to apologise - I would like to thank you for replying


    It's not quite what I was looking for though - I will try and explain a little more succinctly:


    The #content wrapper contains 3 elements "left border, center, and right border".

    This is for a cms, where the centre area will expand to height "n". I want the centre area to expand, thus pushing the main content wrapper down. I also want the left and right borders to fill the y-direction to the bottom.

    So, as you can see from the temporary site link:

    http://testing.elitestrikeforce.com/...est3/e107.html


    the central blue is pusing the overall content wrapper (pink down), but the left and right borders are not filling in the y-direction to the same height as the overall wrapper - hence the pink background of the overall wrapper is showing.


    I hope this helps you to help me as it were

    If I can be clearer, please shout

    Thanks again,

    Zed.

  • #4
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, I thought this might be the case - I have was looking into some positioning things and came across brainjar.com:

    http://www.brainjar.com/CSS/positioning/default3.asp

    There I found this quote:

    Second, unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it.
    the 3 images (left wrapper, center wrapper and right wrapper images) are inside the "content wrapper", and perhaps this is the reason they are not all meeting at the height of the content wrapper?

    I would be really grateful of a solution anyone might have

    Many thanks in advance,

    Zed.


  •  

    Posting Permissions

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