SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can anyone solve this? (CSS)

    I need to do a design like the one I attached using CSS. I can't solve how to do it. Is it possible? The thing that troubles me is the left box that joins with the right box; as you can see the right box has a border BUT the border does not go all the way down. Any ideas or suggestions?

    The boxes have a fixed width, but the height of the main box and the lower left box are fluid (change in size depending in the content).

    I think the only option here is to use backgound images that include the borders instead of using the css drawn borders.


  2. #2
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could do it with divs kinda like this


    #container
    {width:100%; height:100%; padding-bottom:10px; padding-right:10px; z-index:1}


    #topleft
    {position:relative; width:200px; height:150px; left:10px; top:10px; background-color:#FFFFFF; z-index:2}

    #bottomleft
    {position:relative; width:210px; height:500px; left:-200px; top:10px; background-color:#DFEBF7; z-index:2}

    #topright
    {position:absolute; width:800px; height:660px; left:0px; top:10px; background-color:#FFFFFF; z-index:2}


    #light_blue_bit_at_the_top_of_each_div
    {position:relative; top:0px; left:0px; height:30px; width:100%; z-index:3}

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont know.. I tried the code you posted, I was not sure how would the html looked like (which divs inside each divs) but anyways I tried it and and everything was messed up.

    Also, in your example you are not considering the borders..

  4. #4
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update: After playing with this for a while I have this design which is already html and css.



    I am using a version of the nifty corners to generate the rounded corners.
    Now, I have one problem: if you look at the main big box, you can see that I included an image of the bent corner. I was not able to draw the bottom border because if I add a bottom border then the border is placed at the bottom of the image anulating the bent corner effect. Any ideas on how can I draw the bottom border without it going above the picture??

    My final task is to try to join the bottom left box with the right box but I have the same problem: how can I remove the border in the intersection of those boxes? The only way I can think of is a large bottom image that includes the bottom border but I prefer not to use that option.

    PD- I decided to make all the boxes fixed height and width.

  5. #5
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    UPDATE 2: I made it! I was able to join the lower left box with the main one. What I did is I overlaped them a little bit so that the left box is above the large one and it blocks the border.

    The only piece I am missing is the bottom border. Any ideas in how can I do it? (my problem is that if I put a bottom border it goes below the vorner image I have) I neet the border to stop at the image.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If your folded corner graphic includes the background colour, you should be able to use negative 1px margins on the graphic to "pull" it over the css borders, thereby covering the border corner.

    To offer any further suggestions regarding "cutting out" the top left box from the rest of the layout, we would probably need to see your complete present code and graphics, preferably by way of a link to an online site mockup, in order to play around with it.

    Cheers
    Graeme

  7. #7
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, centauri, I must accept your solution is pretty clever. I never thought of that.. what I ended up doing is adding two sepparate divs floating left. one of the divs contains the border and has a specific width (total width - width of the corner image), then I added the image in the remaining space.

    I am almost there! I had to change the format of the divs because even though I achieved to overlap one box with the other, I could not make both boxes to align at the bottom (in each browser they looked different). So I had to change all the boxes to "float left" and then I was able to align them BUT now I still have a border to deal with.

    Here is the image of what I have right now:




    All I need to do now is get rid of the border that is in the intersection of both boxes. The boxes are aligned using float left. I think I can not use the negative border trick because one table ends 1 pixel before the other one starts.

    Is there any way?

  8. #8
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the mockup:

    http://www.ubuntu3d.com/mockup/mockup.html

    You can see where the css archive is stored as well as the image by viewing the source of the page.

    What I need to do is:
    - getting rid of the border where the left box and the right box intercepts.
    - right now the boxes are fixed. If there is a way to do them fluid in height that would be awesome. I was not able to do it because id one box grows then the other one does not align at the bottom.
    - compatibility with IE 6, IE 7, and Firefox. (safari would be nice too) I do not care about opera..
    - I was able to add the bottom border without interfering with the image, but if there is a better way to do it please tell.

    Thank you in advance.

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Leave it with me - I have a few ideas which should work and have the benefit of reducing some of the separate classes you have now, but it will be a few hours until I get back to my other PC to have a play.

    Cheers
    Graeme

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, have had a play and got it virtually as your original graphic.

    I started with a clean slate, and used the same element names where possible - there are a number of divs which I managed to eliminate.

    New designs should use a strict doctype, as you are not transitioning existing code, and due to lack of support for xhtml, html 4.01 strict is currently the best choice.

    In my css, I started with a universal selector zeroing browser default margins and paddings for a known starting point. Below the header, I put all content in a #mainContent div with a 186px left margin to clear everything on the left. An #xsnazzy div is not required. I put the bottom border on the .xboxcontent divs, and used an absolutely positioned <b> tag to place the bottom right corner fold, using negative values to cover the original border.

    The sidebar just covers the lower section and is actually within #mainContent, but positioned absolutely aligned to the bottom and pulled to the left with a negative value so that it just overlaps #mainContent's left border.

    As the #mainContent div is position:relative, the #xsnazzy_logo div can also be included within it and positioned absolutely relative to it (if that makes sense). The inclusion of these divs within #mainContent also assists with the css due to the cascade.

    The html I came up with is
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="container">
      <div id="header">
    	<div id="topMenu">
      	  <ul id="rnav">
    	  	<li id="rnav_ayuda"></li>
      	  </ul>
      	</div>
        <div id="insideHeader"></div>
      </div><!-- end #header -->
      <div id="mainContent">
      	<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
    	<div class="xboxcontent">
    	  <h2>Title of box</h2>
    	  <p>hgfas dhjgafs d, asdkua sdhjkw avsdkjhvasd sdkfn s kjbj ha sdj hvasdvaskhjdv askhjdv sakdhv ashjdv hsjdvaks hddvv hashdv ashdv asjhdb asdv asdv ahsdgv ashgd ajsgdc ajsdc jascgd hgfas dhjgafs d, asdkua sdhjkw avsdkjhvasd sdkfn s kjbj ha sdj hvasdvaskhjdv askhjdv sakdhv ashjdv  hsjdvaks hddvv hashdv ashdv asjhdb asdv asdv ahsdgv ashgd ajsgdc ajsdc jascgd hgfas dhjgafs d, asdkua sdhjkw avsdkjhvasd sdkfn s kjbj ha sdj hvasdvaskhjdv askhjdv sakdhv ashjdv  hsjdvaks hddvv hashdv ashdv asjhdb asdv asdv ahsdgv ashgd ajsgdc ajsdc jascgd</p>
    	  <p>hgfas dhjgafs d, asdkua sdhjkw avsdkjhvasd sdkfn s kjbj ha sdj hvasdvaskhjdv askhjdv sakdhv ashjdv  hsjdvaks hddvv hashdv ashdv asjhdb asdv asdv ahsdgv ashgd ajsgdc ajsdc jascgd hgfas dhjgafs d, asdkua sdhjkw avsdkjhvasd sdkfn s kjbj ha sdj hvasdvaskhjdv askhjdv sakdhv ashjdv  hsjdvaks hddvv hashdv ashdv asjhdb asdv asdv ahsdgv ashgd ajsgdc ajsdc jascgd hgfas dhjgafs d, asdkua sdhjkw avsdkjhvasd sdkfn s kjbj ha sdj hvasdvaskhjdv askhjdv sakdhv ashjdv  hsjdvaks hddvv hashdv ashdv asjhdb asdv asdv ahsdgv ashgd ajsgdc ajsdc jascgd 
    hgfas dhjgafs d, asdkua sdhjkw avsdkjhvasd sdkfn s kjbj ha sdj hvasdvaskhjdv askhjdv sakdhv ashjdv  hsjdvaks hddvv hashdv ashdv asjhdb asdv asdv ahsdgv ashgd ajsgdc ajsdc jascgd hgfas dhjgafs d, asdkua sdhjkw avsdkjhvasd sdkfn s kjbj ha sdj hvasdvaskhjdv askhjdv sakdhv ashjdv  hsjdvaks hddvv hashdv ashdv asjhdb asdv asdv ahsdgv ashgd ajsgdc ajsdc jascgd</p>
    	  <div id="sidebar1">
    	  	<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
    		<div class="xboxcontent2">
    		  <h2>Title of box</h2>
    		  <p>aaalk asdlkj asd asldkj asdlkjasd laksjd aslkdj asldkjas dlkasjd laksjd laksjlkjsldkjslkdj lksjd lksjd lskjd laksjd lkasjd, asd.as d.as dkjas da./sd, .asjd akj</p>
    		</div>
    	  </div>
    	  <div id="xsnazzy_logo">
    		<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
    		<div class="xboxcontent_logo">
    		  <h2>&nbsp;</h2>
    		  <p><img src="imgs/logo.jpg" alt="Logo" width="131" height="111" /></p>
    		</div>
    	  </div>
    	  <b class="xcorn"></b>
    	</div>
      </div>
    </div>
    </body>
    </html>
    and css
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	font: 12px Verdana, Arial, Helvetica, sans-serif;
    	color: #002E6B;
    	background-color: #FFFFFF;
    }
    #container {
    	width: 780px;
    	background: #BBCDE8;
    	margin: 0 auto;
    	border: 1px solid #000000;
    }
    #header {
    	background: #0056A4 url(../imgs/header_backg2.jpg) repeat-x;
    	height: 150px;
    	padding: 0;
    } 
    #header #insideHeader {
    	background-repeat: no-repeat;
    	background-position: right;
    	height: 120px;
    	float: left;
    	width: 100%;
    }
    #topMenu {
    	width: 100%;
    	height: 20px;
    	float: left;
    }
    #rnav {
    	list-style-type: none;
    	font-size: 10px;
    	font-weight: normal;
    	height: 20px;
    	float: right;
    }
    #rnav a{
    	color: #FFFFFF;
    	text-decoration: none;
    }
    #rnav a:hover{
    	color: #9DBCE4;
    }
    #rnav li {
    	float: right;
    	margin: 3px 0 0 0;
    	padding: 0 6px;
    	border-right: 1px dotted #FFFFFF;
    }
    #mainContent {
    	margin: 15px 5px 20px 186px;
    }
    .xtop, .xbottom {
    	background:transparent;
    	font-size:1px;
    	display: block;
    }
    .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
    .xb1, .xb2, .xb3 {height:1px;}
    .xb2, .xb3, .xb4 {
    	background:#C5DBF2;
    	border-left:1px solid #1D2881;
    	border-right:1px solid #1D2881;
    }
    .xb1 {
    	margin:0 5px;
    	background:#1D2881;
    }
    .xb2 {margin:0 3px; border-width:0 2px;}
    .xb3 {margin:0 2px;}
    .xb4 {height:2px; margin:0 1px;}
    .xboxcontent {
    	display:block;
    	background:#FFFFFF;
    	border:0 solid #1D2881;
    	border-width:0 1px 1px;
    	height: 465px;
    	position: relative;
    }
    .xboxcontent2 {
    	display:block;
    	background:#DFEBF7;
    	border:0 solid #1D2881;
    	border-width:0 0 1px 1px;
    	height: 314px;
    }
    .xboxcontent h2 {
    	font-size: 12px;
    	text-align: center;
    	background-color: #C5DBF2;
    	padding-bottom: 1px;
    	letter-spacing: 1px;
    }
    .xboxcontent p {
    	padding: 0.3em;
    	letter-spacing: 1px;
    	text-align: center;
    }
    .xcorn {
    	position: absolute;
    	width: 14px;
    	height: 14px;
    	bottom: -1px;
    	right: -1px;
    	background-image: url(../imgs/cornerBend.jpg);
    }
    * html .xcorn {
    	bottom: -2px;
    	right: -2px;
    }
    #sidebar1 {
    	width: 181px;
    	position: absolute;
    	bottom: -1px;
    	left: -181px;
    }
    * html #sidebar1 {
    	bottom: -2px;
    }
    #sidebar1 .xb1, #sidebar1 .xb2, #sidebar1 .xb3, #sidebar1 .xb4 {
    	border-right: 0;
    	margin-right: 0px;
    }
    #xsnazzy_logo {
    	width: 172px;
    	position: absolute;
    	left: -181px;
    	top: -5px;
    }
    .xboxcontent_logo {
    	display:block;
    	background:#FFFFFF;
    	border:0 solid #1D2881;
    	border-width:0 1px 1px;
    	height: 138px;
    }
    Cheers
    Graeme

  11. #11
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am wordless....
    the design is perfect. it is exactly what I needed. It is amazing how can stuff that looks impossible can actually be done. I need to keep studying because I am new at using css I just do not finish to get the logic because the stuff I do looks different in every browser. I was very good at doing layouts with tables but I believe that is not used now. anyways, thank you very very very much !!! !! I'll start analizyng your code right now to see how did you solved the borders issue.
    I owe you big

  12. #12
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure how clear my notes were above...

    The #sidebar1 div I set up to not have any right border, and I included it within the #mainContent div. As #mainContent has its position property set to "relative", any absolutely positioned elements within it will be positioned with respect to #mainContent. So I absolutely positioned #sidebar1, aligned it to the bottom of #mainContent minus 1 pixel to align the border, and puuled it 181px to the left with the negative "left" value - this leaves #sidebar1 positioned so it just covers the left border of #mainContent.

    The same technique is used to pull the logo div up and to the left into position.

    With a little work, this could be made fluid height, but would require some graphics to implement "faux columns"...

    Cheers again
    Graeme

  13. #13
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have analized the code and now I understand. I did not know the absolute placement worked "inside" a relative placed div (I thought it was always the absolute value of the brower's window).

    One last quick question:
    right now I was trying to make the sidebar adapt in height depending on the main box content. what I noticed is that if I use an absolute placement in the bottom property of the sidebar, it will stay "glued" to the mainbox at the bottom so it will follow it BUT the upper part of the sidebar will move too. I tried to use a top absolute position with a bottom absolute position to try to make the sidebar adapt in height depending on the mainbox size, but that did not work. Is it possible to do this? (specifying a top and bottom absolute position being relative to another div so that when the other div grows the other one grows too?) I hope I was able to explain well what I mean...

  14. #14
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    With a little work, this could be made fluid height, but would require some graphics to implement "faux columns"...

    Cheers again
    Graeme
    Thanks again, I did a search for "faux columns" and found this site:
    http://alistapart.com/articles/fauxcolumns/

    I'll see if I can apply the concepts..

  15. #15
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By not specifying a height, specifying top and bottom positions on the absolutely positioned div will stretch it except in IE6 .. (surprise, surprise). Getting a fluid height will take a little work - like a challenge?

    I haven't given any thought to where a faux background graphic might be applied here, and it may require another element.

    Something else I didn't mention before: as I did not specify a width on #mainContent, a percentage width on #container will make the layout fluid horizontally.

  16. #16
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    By not specifying a height, specifying top and bottom positions on the absolutely positioned div will stretch it except in IE6 .. (surprise, surprise). Getting a fluid height will take a little work - like a challenge?

    I haven't given any thought to where a faux background graphic might be applied here, and it may require another element.

    Something else I didn't mention before: as I did not specify a width on #mainContent, a percentage width on #container will make the layout fluid horizontally.
    I tried to specify the top and bottom position but it did not work in Firefox 2 (mac version), The box was not stretching. I do not know if I did somthing wrong.

    I have now read the webpage explaining the flaux columns and I was wondering the same thing: where to place tha background image. I do not think it is possible to place it inside the main box div because of the margin it has.

    Thanks for telling me about the possibility to make the container fluid. I will try that also to see how it looks with the final design of the page. [edit] I already tried it and it looks great. is there a way to specify a minimum width because if you resize the window the box keeps getting smaller and smaller without considering the content.

    You seem to have very good fundations in CSS, what is the best place to learn all these things? (any book recommendation? or website?)

  17. #17
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    My two cents: you might consider using Dynamic Drive's EqualColumns Javascript instead of the faux columns fix. Just a thought. It works well for me.

    I'm no CSS guru, but I like HTML Utopia: Designing Without Tables Using CSS. I've found A List Apart very helpful, as I have Listamatic; the CSS Zen Garden is amazing.

  18. #18
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

  19. #19
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been doing some more thinking about this layout, and making it vertically dynamic with content should be possible - a bit of playing has been a little frustrating due to IE6's inability to handle simple concepts, but now it intrigues me and is an interesting challenge. Will have more of a look....

    As far as css knowlege goes, most of what I know comes from experimentation, and forums like this one, and sites like:
    beginners guide
    ALA css articles
    Wellstyled
    BonRouge
    Listamatic
    Stu Nicholls
    Eric Meyer
    IE did not handle it properly
    Paul O'Brien


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
  •