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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27

Thread: CSS layering

  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS layering

    I'm having some problems with layering. I've never really dealt with z-indexes and I'm finding them pretty tricky. How should I go about making the layout below?



    The black area is the background of the page. The red and blue boxes are going to be used for background designs. And the white box is the content container.

    Thanks for any help.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Are the backgrounds a set size? Did you want the content container to have a certain height? I don't think z-indexing is going to be needed but without knowing the details of the background images and using the vague image you've given us we can't do much.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The backgrounds will both be 50% width and 100% height. The content container's height will change depending on the amount of text there (like a typical page).

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Details

    As _Aerospace_Eng_ already indicated, there are multiple ways to achieve such an effect, and without any detailed information about the backgrounds themselves, and their function, it's hard to say anything conclusive.
    It could simply be that they are made part of the body background, or sit as a container background on top of the body but underneath the content; in both cases, positioning would probably not be needed.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for being so vague. Here's a mockup of my design so far:


    The stripe on top will always be extending to the left edge of the screen, and the stripe on bottom will extend to the right. Both stripes will have corresponding stripes lined up perfectly in the content container (for the title and copyrigth info). There is also a background image behind everything that is not tiled.

    I just assumed the best way to accomplish this would be to split the background into 2 equal parts. Please help me to do this the best way possible. Thanks.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Containers

    Yeah, probably.
    Since there can only be one background image assigned to each element, nesting elements is a useful technique to achieve a layering effect (ideally, of course you would use elements that are already there).

    In your case, the non-tiled background image halfway down the page could be set as background image to the body element, which always is the outermost and therefore lowest layer.
    Then, for the two stripes, you would need at least two elements; both need to run the width of the body to be able to run the stripes to the edges of the page. The stripes only need to run halfway, their ends centered and covered up by the top level of header and footer.
    Nesting these two containers would probably be most convenient.
    Lastly, you'd need three stacked element for header stripe (the content width portion), content and footer stripe.

    In rough markup, that would look something like this:
    Code:
    <body>
      <div id="outertop">
        <div id="outerbottom">
          <div id="header">...</div>
          <div id="content">...</div>
          <div id="footer">...</div>
        </div> <!-- end outerbottom -->
      </div> <!-- end outertop -->
    </body>
    I'm sure somebody can come up with a more elegant solution, but this is the best I could come up with based on your description.
    Last edited by ronaldb66; 09-20-2006 at 03:31 PM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    New Coder
    Join Date
    Sep 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your way looks like it would work and probably a lot simpler than the method I was thinking of using. Thanks. How would I make the stripes only run halfway across?

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    CSS has a background-position property that allows you were to start from so for example th red stripe. You can tell it to start at the right side so many pixels or start from the left a negative pixel value. If you sliced the images for us we might be able to come up with something better.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Sep 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I understand there's a background positioning property, but it doesn't control the width does it? The width of each stripe needs to be 50% of the width of the screen.

    What do you mean by slicing the image? Are you wanting individual images of the parts (top stripe, bottom stripe, etc.)?

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can set widths on elements and yeah I meant individual parts. Have you not ever made a graphical layout before?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Sep 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Red stripe (top):


    Black stripe (bottom):


    The background color is #464646.

    Do you need anything else? Thanks for your help so far.

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The main background would be cool but not necessary. Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    border:0;
    height:100%;
    background:#464646;
    color:#000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:13px;
    }
    #container {
    min-height:100%;
    background:#FFF;
    width:50%;
    margin:auto;
    }
    * html #container {
    height:100%;
    }
    #header {
    height:83px;
    width:50%;
    background:url(http://img154.imageshack.us/img154/1677/rednj9.png) repeat-x;
    position:fixed;
    top:0;
    left:0;
    }
    #content {
    padding-top:83px;
    padding-bottom:33px;
    }
    #content p {
    margin:0;
    padding:10px;
    text-align:justify;
    }
    #clearfoot {
    height:33px;
    overflow:hidden;
    clear:both;
    }
    #footer {
    height:33px;
    width:50%;
    background:#FFF url(http://img155.imageshack.us/img155/3253/blackwf3.png) top right repeat-x;
    position:fixed;
    right:0;
    bottom:0;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    html {
    overflow-y:hidden;
    overflow-x:hidden;
    }
    body {
    overflow-y:auto;
    }
    #header, #footer {
    position:absolute;
    }
    #footer {
    bottom:-1px;
    right:17px;
    right:expression(window.screen.width - document.body.clientWidth);
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="header">&nbsp;</div>
    <div id="container">
    	<div id="content">
    		<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec congue justo et nunc. Aliquam commodo porta augue. In hac habitasse platea dictumst. Mauris lectus. Cras a nisl. Nullam felis. Sed mattis arcu et augue. Duis fringilla, eros sed mattis aliquam, ligula erat lacinia est, eget sagittis massa lorem at dolor. Sed ut augue. Cras nulla erat, bibendum ac, tristique id, dictum vitae, quam. </p>
    		<p> Mauris nulla risus, auctor ac, pretium sed, malesuada vitae, turpis. Aliquam erat volutpat. Morbi hendrerit dui nec sem. Nulla pretium lectus ac lorem. Pellentesque eu nibh nec magna iaculis euismod. Phasellus facilisis, neque fermentum scelerisque pretium, urna metus sollicitudin pede, non rhoncus sapien dolor at diam. Quisque non nulla quis magna imperdiet bibendum. Morbi ut enim vel elit suscipit vestibulum. Vestibulum metus. Phasellus metus. Aenean malesuada auctor odio. Vestibulum consectetuer velit ut orci. Vestibulum aliquet purus a libero. Quisque cursus ullamcorper lorem. </p>
    		<p> In vel erat ut dolor sollicitudin tincidunt. Phasellus venenatis diam sed nibh. Donec lorem mauris, varius vitae, aliquet id, dapibus id, lorem. In hac habitasse platea dictumst. Aenean consequat. Suspendisse eget augue ac dui cursus molestie. Quisque lobortis fringilla urna. Maecenas ut mauris. Curabitur molestie. Cras nisi nibh, lobortis tincidunt, tincidunt quis, fringilla et, erat. Maecenas in eros. Proin nibh metus, tincidunt sed, accumsan pulvinar, laoreet et, orci. Morbi fermentum gravida mauris. Duis sit amet risus. Phasellus vehicula nunc nec ante. </p>
    		<p> Quisque est. Nulla tempus scelerisque purus. Phasellus tincidunt. Sed ullamcorper eros vel turpis. Aliquam erat volutpat. Nam bibendum dolor. Morbi facilisis neque quis risus. Donec bibendum, enim sed adipiscing dignissim, tortor arcu tincidunt nisl, eu laoreet enim pede at enim. Donec sed augue vel erat dictum pellentesque. Donec nisl tortor, eleifend id, ullamcorper quis, varius sit amet, lectus. Nullam pretium lacus semper ipsum. Aliquam non nulla et diam pulvinar consequat. Pellentesque quis ipsum id nunc adipiscing pharetra. Etiam at orci. Sed iaculis accumsan nulla. Nunc vel velit. </p>
    		<p> Cras lobortis massa nec felis. Curabitur libero. Vestibulum consectetuer, ligula hendrerit iaculis tincidunt, nibh lacus consectetuer arcu, et nonummy quam turpis id ligula. Suspendisse commodo orci id dolor. Praesent eleifend accumsan ipsum. Nulla quis enim. Integer sagittis, nulla sed sagittis ultrices, purus mi mattis nulla, sed sodales nunc orci ac velit. Maecenas ac mauris at dui pulvinar egestas. Aliquam mauris leo, aliquet vel, euismod at, rutrum quis, ipsum. Pellentesque nonummy pharetra lectus. Sed ultricies, velit sit amet mattis interdum, tortor ante sodales orci, sed lacinia purus libero eu enim. Nam faucibus. </p>
    		<p> Nulla facilisi. Donec at felis. Nunc lobortis feugiat lacus. Praesent facilisis. Donec iaculis. Integer posuere mattis ante. Maecenas ultrices metus non elit. Sed at lectus. Vivamus nec lacus. Integer imperdiet consectetuer velit. Aenean sem. Pellentesque neque massa, tristique id, iaculis a, dignissim ac, neque. Fusce lobortis volutpat nunc. </p>
    		<p> Vestibulum dui orci, sodales vitae, condimentum eu, tempor tincidunt, lorem. Donec posuere, sem vehicula posuere tincidunt, erat lorem mattis sapien, non semper tortor velit ac dolor. Phasellus laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec varius. Nulla facilisi. Phasellus sagittis, augue sit amet tristique vulputate, arcu sapien semper justo, sit amet pretium arcu ante nec erat. Integer massa arcu, tempor eu, bibendum at, varius vel, pede. Maecenas magna lacus, posuere porta, auctor non, pellentesque sed, nisl. Donec rutrum arcu quis nibh. Mauris eget nunc id ante tincidunt fringilla. Fusce tincidunt sem vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed erat nisl, dapibus eu, iaculis id, ultrices vel, erat. Duis sodales, est sed accumsan mollis, neque purus rhoncus nunc, eget ultrices lacus diam auctor mi. Sed velit. Maecenas auctor mi vitae nulla. Morbi semper quam et dui. Pellentesque eleifend, massa vel malesuada luctus, ante enim sollicitudin diam, in dapibus orci ante quis justo. Duis pellentesque pharetra orci. </p>
    		<p> Vestibulum in est. Nunc eget ante. Donec mattis adipiscing est. Cras tortor justo, semper sit amet, pretium non, dictum quis, magna. Ut in dui sit amet tellus adipiscing ullamcorper. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur lobortis nunc in magna. Phasellus a massa ac mauris ornare ullamcorper. Fusce suscipit dui ac felis. Curabitur ultricies commodo nunc. Vestibulum ac pede ut orci fringilla sagittis. Donec varius. Maecenas non ligula. Mauris eget lectus. Aenean suscipit porta sem. Etiam purus. Morbi blandit. </p>
    		<p> Donec et enim et purus ultrices vehicula. Ut a arcu quis ipsum pellentesque convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent et mauris interdum tellus vestibulum gravida. Sed adipiscing pulvinar quam. Proin aliquam bibendum leo. Sed volutpat, magna at consectetuer ullamcorper, elit tellus vehicula mi, a eleifend metus quam a erat. Curabitur vehicula, nisl ac elementum pellentesque, nunc justo rutrum nulla, eu tincidunt ligula eros non mi. Mauris tellus diam, tincidunt ut, pharetra et, luctus ac, purus. Duis id sapien pulvinar odio eleifend rhoncus. </p>
    		<p> Proin dui. Nunc turpis elit, consequat eu, mollis ac, euismod nec, eros. Sed sollicitudin. Proin purus tortor, semper vel, bibendum sed, consequat eu, lacus. Mauris erat leo, gravida nec, tincidunt eu, consequat vel, libero. Aliquam et justo. Donec ullamcorper. Maecenas fringilla risus eget dolor. Duis interdum. Praesent pede magna, consectetuer at, placerat sed, consequat quis, lacus. Vestibulum tincidunt orci eget elit. Suspendisse augue diam, consectetuer sollicitudin, rutrum vitae, suscipit et, ante. </p>
    		<p> Nam vitae lectus quis nisi semper faucibus. Suspendisse sem. Aenean sed urna. Quisque porta nisl eget ipsum. Fusce in magna non risus pulvinar tincidunt. Nunc pharetra pretium neque. Vivamus tincidunt rutrum ipsum. Aenean diam elit, pulvinar in, rhoncus sit amet, auctor ut, mauris. Morbi sit amet ante. Pellentesque commodo, nulla non porttitor pretium, pede urna sollicitudin velit, quis ultrices lectus felis sed purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed turpis ligula, venenatis sit amet, ultricies elementum, porta eget, nisl. Ut fringilla suscipit augue. Aenean iaculis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eget lectus. Maecenas viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
    		<p> Vestibulum mauris nisi, placerat ac, ullamcorper quis, interdum eget, elit. Vestibulum elit sem, fermentum vel, facilisis id, feugiat nec, tellus. Proin sodales luctus eros. Pellentesque nonummy. Etiam quis magna ac odio volutpat placerat. Curabitur sagittis, elit nec hendrerit molestie, turpis dolor placerat libero, sed pharetra risus justo vel sem. Quisque magna dui, auctor ac, lacinia eu, aliquet vel, nulla. Suspendisse potenti. Suspendisse in ante. Nulla euismod pretium sapien. Vivamus vel purus mattis augue rhoncus vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
    		<p> Vestibulum lacinia vestibulum neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam lacinia, arcu quis consectetuer rutrum, felis quam placerat eros, sit amet sollicitudin turpis arcu ut sapien. Nullam enim. Vestibulum at lorem eu ligula vestibulum ultrices. Integer ullamcorper ligula. Nullam ac ante ut neque ultrices rhoncus. Morbi faucibus ante id nulla. Maecenas tellus nulla, tristique id, vestibulum ornare, rutrum eu, sem. Aliquam pede mi, feugiat at, commodo quis, tincidunt vehicula, sem. Maecenas dignissim lobortis velit. Pellentesque feugiat rutrum lectus. Suspendisse lorem. Cras dignissim condimentum leo. Etiam sodales elementum nulla. Morbi nec lorem. Ut porta commodo magna. Mauris congue nonummy leo. Cras orci. </p>
    		<p> Quisque porttitor nisi vel felis. Sed aliquam dolor. Nulla malesuada varius dolor. Cras consequat elit a neque elementum tincidunt. Phasellus convallis sapien ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget magna id purus dictum vehicula. In euismod. Mauris cursus. Praesent ac dolor vel neque malesuada ullamcorper. Phasellus aliquet. Suspendisse potenti. Nunc congue leo. Nullam viverra condimentum quam. </p>
    		<p> Aliquam erat volutpat. Suspendisse lectus. Vestibulum tortor nibh, pellentesque et, rutrum eget, ultricies eu, nulla. Praesent euismod elit at nisi. In tempor, pede at vestibulum semper, metus dolor gravida justo, non venenatis ipsum erat et nulla. Proin urna. Vestibulum erat neque, ultrices eget, tristique a, fringilla ac, mi. In vulputate. Morbi et lacus. Duis molestie posuere quam. Nullam sed diam sit amet dui malesuada dignissim. Nam venenatis. Pellentesque ultrices sem id justo. Quisque fringilla, erat et tincidunt ultrices, risus ligula vestibulum lectus, vitae faucibus nisl lectus et mi. Morbi consequat ultricies nibh. Quisque dictum velit nec dui. Pellentesque nec diam vel mi dapibus scelerisque. Nulla facilisi. </p>
    		<p> Nam sit amet justo. Phasellus facilisis ligula id nulla. Praesent ut sem ac risus pretium congue. Pellentesque varius, massa vitae ornare convallis, augue orci vulputate ligula, vitae bibendum felis velit a mi. Aliquam pulvinar nisi non est. Donec ac odio ut est molestie pulvinar. Nulla a quam. Ut a ipsum. Vestibulum nonummy lobortis magna. Vivamus neque massa, porta sit amet, vulputate eget, convallis sit amet, turpis. </p>
    		<p> Praesent tortor. Fusce in magna sit amet dui dapibus posuere. Cras ut ante. Curabitur feugiat, mi ac dictum semper, turpis augue venenatis augue, eget hendrerit magna dui ut dolor. Sed dictum. In mollis. Phasellus at neque. Duis molestie risus in nisi egestas pharetra. Pellentesque nulla enim, tincidunt in, tempus tempor, imperdiet elementum, magna. Duis eget mi. Phasellus nunc. Suspendisse potenti. Praesent posuere nulla vitae erat. Donec luctus orci volutpat magna. Quisque at ligula at quam ornare tempus. Donec mollis ullamcorper ante. Fusce ac eros mollis nibh pellentesque auctor. In fermentum pede eget libero. Proin sagittis turpis non metus. </p>
    		<p> Nulla non nisl. Praesent in augue in pede tempus porttitor. Praesent odio mauris, porttitor mattis, lobortis sit amet, vestibulum et, quam. Vestibulum posuere euismod diam. Duis hendrerit neque eget turpis. Proin tempus nisi vel dolor. Suspendisse nibh massa, ultrices scelerisque, euismod vitae, condimentum non, nisi. Aliquam sit amet sapien. Duis bibendum, mi ultrices commodo dignissim, ipsum massa iaculis augue, vel congue erat turpis eu ante. Nam vitae mauris at eros auctor rutrum. Proin sit amet nisl. Nulla sed justo. Pellentesque tellus. In hac habitasse platea dictumst. Phasellus congue ultrices massa. Suspendisse ornare, erat et viverra dapibus, odio lectus dictum pede, sit amet pharetra magna nunc vitae augue. Proin a dui. Morbi at enim. </p>
    		<p> Duis semper nulla suscipit tellus. Pellentesque nunc turpis, auctor in, eleifend condimentum, vulputate tincidunt, pede. Sed sed eros a nunc ultricies accumsan. Cras dictum cursus ipsum. Fusce auctor, purus nec vehicula ornare, dui erat scelerisque nisi, iaculis placerat tortor nisl vitae tellus. Cras sagittis accumsan nulla. Nullam adipiscing enim sit amet diam. Curabitur ultricies quam vitae est. Vivamus molestie est quis elit. Nullam massa. In porta vulputate risus. Phasellus vel tellus aliquet sem fermentum congue. Praesent semper viverra dolor. Fusce at urna. Nam tempor velit non tortor. Sed augue mi, pretium eget, fringilla eget, dictum at, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante pede, feugiat at, sagittis sed, bibendum a, sapien. </p>
    		<p> Duis volutpat, justo a dapibus mattis, lorem eros iaculis justo, at elementum augue sapien eu lacus. Pellentesque velit sapien, egestas in, dapibus quis, bibendum gravida, sem. Phasellus id elit. Vestibulum sit amet elit. Suspendisse viverra nunc et diam. Praesent tempor eleifend justo. Cras varius. Morbi consectetuer. Pellentesque nibh. Vivamus eu ipsum in libero lacinia pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin in dolor sit amet mi aliquam euismod. Aliquam et mi at est fringilla iaculis. Donec libero est, facilisis nec, facilisis sed, gravida quis, ligula. Nulla ac risus at sapien fringilla iaculis. Suspendisse feugiat. Donec leo. Vestibulum facilisis ligula vel magna. </p>
    	</div>
    </div>
    <div id="footer">&nbsp;</div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    New Coder
    Join Date
    Sep 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I understand what you're doing now with the stripes, but there is a problem. The header and footer shouldn't be overlapping the content container. They should header should stay above the text and footer at the bottom, like a typical web design. Also, there should be a header and footer inside the content container that extends the width of it (across the white). They should line up with their corresponding stripe. So I guess the background stripes should be underneath the content container as to not hide any text that would appear in the header or footer. The only way I know of to do this is to use z-index. Hopefully that's somewhat understandable.

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Is the width of the content ever going to change or is that a set width?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #15
    New Coder
    Join Date
    Sep 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It has a set width.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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