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 Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Side Nav pushing header down in main block

    Hi there,

    Hoping someone can help me with this, I think its more an explaination I'm after than just getting it to work. I've put the code at the bottom of this post, I've stripped some things out and simlified it for your viewing - there was a lot of stuff in there!.

    Issue one Side Nav affecting header size in main block.

    Basically, as you can see the 'header' block above the table height is pushed down by the height of the side navigation. Though you can't see this here, this is actually a collapsable navagation so the height will always vary. Now, I have that header ID in the clearfix, when I take it out, the height remains intact / returns to 'normal'. The reason I'm keen to have a clearfix on this is there will be a heading and various floated controls and buttons. Also this 'block' could be dropped in else where through the site, so I don't really want a float on it incase it breaks on other pages.

    So any ideas on this, or is taking it out the clearfix and just floating it the only solution? The main column isn't floated left as it is to be a no-wrapping fluid layout, with a fixed width left column.

    Issue Two Hiding/Displaying on hover.

    As you can see the list items in the side navigation have a span with the class of 'actions' on them. These actions should appear when hovering over the relevant list item. The problem I'm having is because they're all nested lists, when you hover over an LI, all the LI's display block and display the delete button. Its a bit crude in the code I've pasted but I have played around with this alot!

    Thanks alot and I hope you clever people can lend a hand!

    Re. Ste

    Code:
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    
    /* = RESET STYLES 
    --------------------------------------------------------------------------- */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    	}
    ol, ul 	{ list-style: none; }
    table 	{ border-collapse: collapse; border-spacing: 0; }
    body 	{font: 13px/1.231 Arial, Helvetica, sans-serif; color: #888888; font-size: small;}
    
    
    /* = LAYOUT STYLES 
    --------------------------------------------------------------------------- */
    
    /* GENERIC */
    
    body {
    	background:#373737;
    	color:#c8c8c8;
    	font: 11px "Lucida Grande", Arial, Sans-serif;
    	margin:0;
    	padding:0;
    	}
    section,
    article,
    header,
    footer,
    nav,
    aside,
    hgroup { 
    	display: block;
    	}
    	
    a {
    	color:#e7e7e7;
    	text-decoration:none;
    	}
    a:hover {
    	color:#fff;
    	}
    
    /* SIDE MENU */
    	
    aside {
    	background:#474747;
    	border-right:1px solid #2c2c2c;
    	float:left;
    	margin:0;
    	padding: 0 0 16px;
    	position:relative;
    	width:240px;
    	}
    aside h2 {
    	background:#373737;
    	border-bottom:1px solid #2c2c2c;
    	font-size:12px;
    	font-weight:normal;
    	margin-bottom:16px;	
    	padding:9px 0 9px 16px;
    	text-shadow:1px 1px 0 #1f1f1f;
    	}
    #nav ul {
    	margin-left:16px;
    	}
    #nav ul ul {
    	margin:16px 0 0 16px;
    	}
    #nav ul li {
    	margin-bottom:16px;
    	text-indent:36px;
    	position:relative;
    	}
    #nav .actions {
    	background-position:0 -554px;
    	display:block;
    	float:right;
    	height:16px;
    	margin-right:8px;
    	position:relative;
    	width:32px;
    	}
    	
    #nav .delete {
    	background-position:left -597px;
    	display:none;
    	float:right;
    	height:16px;
    	overflow:hidden;
    	text-indent:-9999px;
    	width:16px;
    	}
    #nav li:hover .delete {
    	display:block;
    	}
    #nav-1 li:hover {
    	cursor:move;
    	}
    
    /* MAIN CONTAINER */
    
    #main {
    	margin-left:241px;
    	}
    table {
    	border:none;
    	color:#c8c8c8;
    	font-size:11px;
    	margin:0;
    	padding:0;
    	width:100%;
    	}
    thead {
    	background:#a0a0a0;
    	border:1px solid #292929;
    	color:#000;
    	font-weight:bold;
    	text-shadow:1px 1px 0 #ccc;
    	}
    thead td {
    	border-right:1px solid #767676;
    	}
    table td {
    	padding:3px 10px;
    	}
    table ul {
    	float:left;
    	}
    table li {
    	margin:0 2px;
    	float:left;
    	}
    
    /* THE PROBLEM */
    
    #table-tools {
    	background:#a2a2a2;
    	border-top:1px solid #c2c2c2;
    	margin:0; 
    	padding:0;
    	}
    #table-tools h2 {
    	color:#2c2c2c;
    	font-size:12px;
    	text-shadow:1px 1px 0 #ccc;
    	}
    	
    
    /*  = CLEARFIX
    ************************************************/	
    
    .clearfix:after,
    #mid:after,
    .inner:after,
    #table-tools:after {
    	content:".";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
    }
    .clearfix,
    .inner,
    #mid,
    #table-tools {
    	display:inline-block;
    	}
    .clearfix,
    #mid,
    .inner,
    #table-tools {
    	display:block;
    	}	
    		
    </style>
    
    </head>
    
    <body>
    	<div id="mid">
    		<div class="inner">
    			<aside>
    				<nav id="nav">
    					<h2>Main Nav</h2>
    					<ul id="nav-1" class="nav-collapsible">
    						<li>
    							<a href="#" title="TITLE TEXT.">Navigation One</a>
    							<div class="actions">
    								<button class="delete">Remove</button>
    							</div>
    							<ul>
    								<li>
    									<a href="#" title="TITLE TEXT.">Father</a>
    									<div class="actions">
    										<button class="delete">Remove</button>
    									</div>
    									<ul>
    										<li>
    											<a href="#" title="TITLE TEXT.">List item 1</a>
    											<div class="actions">
    												<button class="delete">Remove</button>
    											</div>
    										</li>
    										<li>
    											<a href="#" title="TITLE TEXT.">List item 2</a>
    											<div class="actions">
    												<button class="delete">Remove</button>
    											</div>
    										</li>
    										<li>
    											<a href="#" title="TITLE TEXT.">List item 3</a>
    											<div class="actions">
    												<button class="delete">Remove</button>
    											</div>
    										</li>
    									</ul>
    								</li>
    								<li>
    									<a href="#" title="TITLE TEXT.">Father</a>
    									<div class="actions">
    										<button class="delete">Remove</button>
    									</div>
    								</li>
    								<li>
    									<a href="#" title="TITLE TEXT.">Father</a>
    									<div class="actions">
    										<button class="delete">Remove</button>
    									</div>
    								</li>
    								<li>
    									<a href="#" title="TITLE TEXT.">Father</a>
    									<div class="actions">
    										<button class="delete">Remove</button>
    									</div>
    									<ul>
    										<li>
    											<a href="#" title="TITLE TEXT.">List item 4</a>
    											<div class="actions">
    												<button class="delete">Remove</button>
    											</div>
    										</li>
    										<li>
    											<a href="#" title="TITLE TEXT.">List item 5</a>
    											<div class="actions">
    												<button class="delete">Remove</button>
    											</div>
    										</li>
    										<li>
    											<a href="#" title="TITLE TEXT.">List item 6</a>
    											<div class="actions">
    												<button class="delete">Remove</button>
    											</div>
    										<ul>
    											<li>
    												<a href="#" title="TITLE TEXT.">List item 7</a>
    												<div class="actions">
    													<button class="delete">Remove</button>
    												</div>
    											</li>
    											<li>
    												<a href="#" title="TITLE TEXT.">List item 8</a>
    												<div class="actions">
    													<button class="delete">Remove</button>
    												</div>
    											</li>
    											<li>
    												<a href="#" title="TITLE TEXT.">List item 9</a>
    												<div class="actions">
    													<button class="delete">Remove</button>
    												</div>
    												<ul>
    													<li>
    														<a href="#" title="TITLE TEXT.">List item 10</a>
    														<div class="actions">
    															<button class="delete">Remove</button>
    														</div>
    													</li>
    													<li>
    														<a href="#" title="TITLE TEXT.">List item 11</a>
    														<div class="actions">
    															<button class="delete">Remove</button>
    														</div>
    													</li>
    													<li>
    														<a href="#" title="TITLE TEXT.">List item 12</a>
    														<div class="actions">
    															<button class="delete">Remove</button>
    														</div>
    													</li>
    												</ul>
    											</li>
    										</ul>
    									</li>
    									</ul>
    								</li>
    							</ul>
    						</li>
    					</ul>
    					<ul id="nav-2">
    						<li><a href="#" title="TITLE TEXT.">Navigation Two</a>
    							<ul>
    								<li><a href="#" title="TITLE TEXT.">Father</a>
    									<ul>
    										<li><a href="#" title="TITLE TEXT.">List item 13</a></li>
    										<li><a href="#" title="TITLE TEXT.">List item 14</a></li>
    										<li><a href="#" title="TITLE TEXT.">List item 15</a></li>
    									</ul>	
    								</li>
    								<li><a href="#" title="TITLE TEXT.">Father</a></li>
    							</ul>
    						</li>
    					</ul>
    				</nav>
    			</aside>
    			<div id="main">
    				<header id="table-tools">
    					<h2>Heading of Table tools</h2>
    				</header>						
    				<table>
    					<thead>
    						<tr>
    							<td>1</td>
    							<td>2</td>
    							<td>3</td>
    							<td>4</td>
    							<td>5</td>
    							<td>6</td>
    							<td>7</td>
    							<td>8</td>
    							<td>9</td>
    						</tr>
    					</thead>
    					<tbody>
    						<tr>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    						</tr>
    						<tr>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    						</tr>
    						<tr>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    							<td>Lorem ipsum dolor</td>
    						</tr>					
    					</tbody>
    				</table>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

  • #2
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Do you have a link?

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey there,

    Its not live or on a server at the minute, just working on the templates.

    If you paste the code I added to the post into an .html file it will show you what I'm on about, the big silver/grey box is all the <header>

    And if you add display:none too...

    Code:
    #nav ul ul {
    	margin:16px 0 0 16px;
    	display:none;
    	}
    You will see the collapsed navigation.

    Thanks for getting back - hope you can help

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I've managed to drop the side nav pushing the header in the main content area down / stretching its height. I done this by using overflow:hidden; on the header with no height set.

    ...can someone explain why? This is essentially a clearfix but when I add this header into the clearfix I have at the bottom of the styles its breaks it?


  •  

    Posting Permissions

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