...

View Full Version : Side Nav pushing header down in main block



grimaldi
08-11-2011, 10:14 AM
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




<!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>

Mooseman
08-11-2011, 05:16 PM
Do you have a link?

grimaldi
08-12-2011, 09:55 AM
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...




#nav ul ul {
margin:16px 0 0 16px;
display:none;
}



You will see the collapsed navigation.

Thanks for getting back - hope you can help :)

grimaldi
08-15-2011, 09:17 AM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum