45 users online (0 members and 45 guests)  


  Results 1 to 4 of 4

Related

  1. How to create round corners in css    Forum: CSS Forum
    Replies: 3
  2. Overlapping background Images    Forum: CSS Forum
    Replies: 1
  3. Preventing overlapping layers    Forum: HTML Forum
    Replies: 6
  1. #1
    lsachs's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2002
    Posts
    21

    overlapping corners with CSS

    I'm trying to get this look with CSS. Please ignore everything else on this page, but just notice that the border at the top overlaps the border at the left which overlaps the border on the bottom, which overlaps the one on the right and so on. I also want the borders to sit outside the content area and remain there no matter how the user resizes the window.

    http://www.coolpillows.com/test/home.htm

    I found an example of CSS that looks close to what I'm after here

    http://www.pmob.co.uk/temp/hundredpercent-display-table2.htm

    I tried to replicate/modify it to suit my purposes, but I think I'm in over my head.

    http://www.coolpillows.com/coolpillows.htm

    Is there hope for me? Any ideas? Thanks in advance!

    -lee

  2. #2
    lsachs's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2002
    Posts
    21

    Re: overlapping corners with CSS

    i didn't see much of a reply, but i was able to noodle my way around. Here's an update, but i'm still not all there:

    I added my left nav & I have the basic look & feel down. But when I put content into the inner div and try to give it a background color, it doesn't display the way I expect.


    http://www.coolpillows.com/test/test_withcontent.htm

    I've tried variations on the margin and created a separate class called 'innerbody' that's:

    #innerbody{
    background:#C6E3B5;
    font-color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 75%;
    margin-left: -15px;
    margin-top: -17px;
    padding-left: 30px;
    padding-top: 30px;
    }


    but inner, I suspect is causing the problems.

    http://www.coolpillows.com/test/test_withinnerbody.htm

    The other thing, which I don't fully understand is the display: table-cell; selector.

    #centrecontent {
    display:table-cell;
    }


    This is what happens when you try to take someone else's code and use it for your own purposes. But I'm learning.

  3. #3
    juanmanuel's Avatar
    New User

    Status
    Offline
    Join Date
    May 2005
    Posts
    8

    Re: overlapping corners with CSS

    I maked this code, some months ago, i hope it can help you to solve your problem, i use some margin-left in the bottom div in order to get the overlapping effect in all the layer. I believe(and i know) there are a lot of css combinations to obtain this effect(I know at least 2).
    Feel free to e-mail me for help!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">

    <style type="text/css">
    *{
    margin: 0px;
    padding: 0px;
    }
    #top{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 5%;
    background-color: #006830;
    color: #FFFFFF;
    /*z-index:100;*/
    }

    #left{
    position: absolute;
    top:0px;
    left:0px;
    width: 20%;
    height: 100%;
    background-color: #686830;
    color: #FFFFFF;
    /*z-index:0;*/
    }

    #right{
    position:relative;
    /*z-index: 200;*/
    float: right;
    width: 20%;
    height: 100%;
    background-color: #686868;
    color: #FFFFFF;
    }

    #bottom{
    position: absolute;
    bottom: 0px;
    width: 80%;
    height: 5%;
    margin-left:20%;
    background-color: #FF6830;
    color: #FFFFFF;
    }

    #content{
    position:absolute;
    top: 5%;
    left: 20%;
    height: 90%;
    width: 60%;
    background-color: #000033;
    color: FFFFFF;
    font-weight: bolder;
    }
    </style>
    </head>

    <body>

    <div id="left">
    LEFT
    </div>
    <div id="top">
    The top!!!
    </div>
    <div id="right">
    RIGHT
    </div>
    <div id="bottom">
    BOTTOM
    </div>
    <div id="content">
    <p>
    The coordinates must be set as percent values!!!
    </p>
    <h2>Important(26/12/2004)</h2>
    <p>
    This sample was property of Juan Manuel Z˙˝iga Arias, email removed
    if you want to publish this sample you need to preserve this text.
    This sample is provided for educational use!,but you can adapt it for any thing.
    </p>
    </div>
    </body>
    </html>
    Last edited by HTML; 05-16-2005 at 12:47 PM.

  4. #4
    juanmanuel's Avatar
    New User

    Status
    Offline
    Join Date
    May 2005
    Posts
    8

    Re: overlapping corners with CSS

    Very important!!!!


    In orden to display large amount of text using this sample layout, you must set the overflow porperty of the #content ruler to scroll.

    .
    .
    .
    overflow: scroll;
    .
    .
    .

    It preserve the content panel size by adding scrollbars. In internet explorer
    you have the power of choice where to put the scrollbars:

    overflow-y: "some overflow value";
    overflow-x: "some overflow value";



Tags for this Thread