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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [CSS] Nested layers included into parent page overlap include area.

    I've been trying to work out a page for my site that is nothing but css and text that allows the user to choose from a menu of recent design work I've done.
    I've beev using these changes as an excuse to learn new things, and css positioning is realy killing me right now. I apologize if I come off sounding ignorant, but I'm just trying to work without using a table for the first time.

    I have a primary page that calls all other pages as php_includes via the method of ?id=xxx where xxx is the file name being included. The main page is http://www.arch13.com/index.php . I'm working on a page called "recent", and cannot get the page to stay within the boundry's of the include area.

    I have three Div's,
    -Recent_wrapper: which surrounds the page at a size of w640 and h353.
    -Recent_mast: which holds the masthead/title. W630 and H75.
    -Recent_nav: the actual list of recent works as an unordered list <ul> with bullets <il>.

    Recent_wrapper behaves, as does recent_mast nested inside recent_wrapper. The killjoy is the damn nav area. (isn't it allways the nav area?)

    The relavant css is:
    Code:
    .recent_wrapper 	{
    	width:630px;
    	height:353;
    	margin:0px auto;
    	text-align:center;
    	padding-top:0px;
    	border:1px #fff;
    	background-color:#eee;
    	}
    .recent_mast 	{
    	width:620px;
    	height:30px;
    	margin: 0 0 0 0px;
    	text-align:left;
    	padding:5px;
    	border-bottom:2px solid #fff;
    	background-color:#5B5B33;
    	color: #E6E4C3;
    	}
    .recent_nav 	{
    	width:620px;
    	height:75px;
    	margin:0 0 0 0px;
    	text-align:left;
    	padding:15px;
    	border-top:4px solid #fff;
    	background-color:#E6E4C3;
    	font-family: Verdana;
    	font-size: 11px;
    	}
    .recent_nav h2,
    .recent_nav ul		{
    						margin-top: 12px;
    						padding: 0;
    						float: left;
    						}
    .recent_nav ul a  {
    				margin: 0 5px 2px 0;
    				padding: 0 2px 0 4px;
    				line-height: 11px;
    				display: block;
    				}
    		ul.more a	{
    					color: #666;
    					}
    .recent_nav li 	{
    				margin: 0;
    				padding: 1;
    				line-height: 11px;
    				display: block;
    				}
    				.recent_nav h2		{
    						margin-right: 5px;
    						line-height: 12px;
    						width: 50px;
    						text-align: right;
    						}
    						
    .recent_nav h2#recent_header {
    									padding-left: 12px;
    									}
    .recent_nav h2#more_header {
    									padding-left: 12px;
    									}
    The actual page is Here and the page when called into the parent site template is http://www.arch13.com/index.php?id=recent . Notice how on the right side of the recent area, the recent_nav overlaps over the grey side bar? It's killing me. I've spent the better part of 6 hours online, at W3, and with an O'Reilly book. Still nada.

    Perhaps the good people of coding forums see a glaringly obvious error in the way my css is working?

    On a side note, I don't completley understand how I've got recent architecture and recent handwork (the two UL's) acting like two column's, but I like it.
    I know that:
    Code:
    .recent_nav h2,
    .recent_nav ul		{
    						margin-top: 12px;
    						padding: 0;
    						float: left;
    						}
    Causes it to happen, but I'm hazy as to why. Is there a better way to do this? Why does it work and how can I better set the size of these two floated areas? Can I make Recent_nav change height based on how many things are in these lists?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Did you change the code on the examples recently? I was rolling up my sleeves getting ready to dive into this and it looks fine, not to mention coded w/ tables (don't give up now!)

    Anyways, I'm just glancing at your code for now but I'd be willing to take a bet that what caused the problems were the floats on the #nav div. Floats are always tricky, but the biggest thing is they take the element "out of flow." So things that normally would be pushed over to the side just keep on going past whatever's being floated.

    The way to get around all that is to insert a block element after whatever's floated, and apply a little "clear: both" (that clears the float). So you can do something like this:
    Code:
    .something {
     float: left;
     width: 100px;
     height: 100px; 
     background-color: #999;
     margin: 10px;
     line-height: 100px;
     text-align: center;
     }
    
    .clear {
     clear: both;
     }
    
    <p class="something">floaty</p>
    <p class="something">floaty</p>
    <p class="something">floaty</p>
    <p class="something">floaty</p>
    <p class="something">floaty</p>
    
    <p class="clear">Clear!</p>
    
    <p>no longer floaty.</p>
    <p>no longer floaty.</p>
    <p>no longer floaty.</p>
    I don't know if this answers your question, but hopefully it will (or will one day!)

    You can set widths on floats, as you can see, but you can't really set a minimum height thanks to Internet Explorer without a little hackery.

  • #3
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek
    Did you change the code on the examples recently? I was rolling up my sleeves getting ready to dive into this and it looks fine, not to mention coded w/ tables (don't give up now!)
    Actually, as you where posting this, I was figuring the issue of keeping the css layout inside the include area of the table with the help of a freind who slapped me upside the head, and said "you idiot, if you remove the width declaration in recent_mast and recent_nav, theyy'll automagicly assume the width of their parent div". That solved that issue rather quickly.

    As for the main template being tables. It's on the list to move it to Div's, but not soon. I figure move forward learning css as layout, go back and fix when life gives you a moment to breath.

    I do have one remaining question though. As I stated at the end of my first post, I like the way my two <UL>'s have moved into a two column position, I just don't understand why it works. I;m hopeing someone can explain how
    Code:
    .recent_nav h2,
    .recent_nav ul		{
    						margin-top: 12px;
    						padding: 0;
    						float: left;
    						}
    Causes them to appear as two columns.
    I want to increase the spacing between the <UL> titles and the list contents so the words don't run over each other.

    Also, as I add more to the lists will they countinue to create more columns to accomidate the additons to the list? I'd like the backround of recent_nav to be behind the lists instead of them overrunning the area and overlapping into the wrapper div after the declared height of recent_nav but I don't want more than say 6 <li>'s per column. No idea how to accomplish something like that.


  •  

    Posting Permissions

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