|
CSS - Padding/positioning Sliding Doors Navigation
I am constructing a website using the sliding doors navigation (http://www.alistapart.com/articles/slidingdoors/ and http://www.alistapart.com/articles/slidingdoors2/). I have gone through both articles to successfully create the sliding doors naviagiton that I require.
My header image that I wish to place behind the navigation is 780px wide by 263px high. Therefor, I will be placing this navigation at the bottom (baseline) of this image. I have increased my header div size to fit the image (780px x 263px). Then I have padded the navigation to try to make it position on the bottom of the image (padding-top: 236px). Unfortunatly, doing this give a 1px padding difference for IE and Firefox. IE shows it up fine, but Firefox does not. Firefox makes it look like its spaced 1px to many. If i decrease the padding to 235px, Firefox looks fine but IE displays it with 1px to less...I dont want to have to result to browser dependant css, but all hacks are welcome. Heres the code: Code:
body {
text-align: center;
background-color: #7999E4
}
#header{
width: 780px;
background: url('images/head.gif') repeat-x bottom;
font-size: 93%;
line-height: normal;
height: 263px;
padding: 0;
margin:0;
border:0;
}
#main {
background-color: #ffffff;
width: 780px;
height: 500px;
}
#nav2 {
background-color: #e7e7e7;
width: 100%;
border-bottom: 1px solid #000;
height: 20px;
}
#header ul {
margin: 0;
padding:0;
padding-top: 236px;
padding-left: 10px;
list-style: none;
}
#header li {
display:inline;
margin:0;
padding:0;
}
#header a {
float: left;
background: url('images/left_both.gif') no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
border-bottom: 1px solid #765;
text-decoration: none;
}
#header a span{
float: left;
display: block;
background: url('images/right_both.gif') no-repeat right top;
padding: 5px 15px 4px 6px;
font-weight: bold;
color: #765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a span{float: none;}
/* End IE5-Mac hack*/
#header a:hover span{
color: #333;
}
#header #current a{
border-width: 0;
background-position: 0% -150px;
}
#header #current a span{
background-position: 100% -150px;
padding-bottom:5px;
color: #333;
}
#header a:hover {
background-position:0% -150px;
}
#header a:hover span {
background-position:100% -150px;
}
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link title="Style" href="style2.css" type="text/css" rel="STYLESHEET">
</HEAD>
<BODY>
<center>
<div id="header">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li id="current"><a href="#"><span>Properties</span></a></li>
<li><a href="#"><span>Quick Searches</span></a></li>
<li><a href="#"><span>Holidays</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<div id="main">
<div id="nav2"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Similar TutorialsSo my webpage is using a sliding doors type navigation bar while also implementing a php includes in the content area. One of the problems here is on showing the "selected" or "you are currently here" state of a navigation button. Normally, it seems you would simply specify the class of the li element that corresponds to the page the user is on as "selected". However in this case, the navigation code is in the index.php and therefore constant and unchanging. So how would I implement this feature on my website? I've tried using javascript to manually change the styles, but either thats not possible or I have no idea what I'm doing. I realize my post may not be very clear as I am not sure how else to explain it. I will gladly clarify. Thanks! My first new thread here! Hoping for some quick review and suggestions - any input is much appreciated. I have a site in the *early* stages of development and I'm using the "sliding doors" technique for tabbed navigation. Not sure if I'm allowed to post links, so below are some code snippets and I've also attached a screenshot. The nav container (#nav) temporarily has a yellow background just as a clear visual cue and it is not positioned on the page yet - so forgive the ugliness! - but the code for the actual tab effects is complete, or so I thought. CSS: Code:
/* horizontal main menu navigation */
#nav {
float:left;
width: 100%;
background: yellow; /*temporary color just for visual cue */
}
#nav ul {
margin: 0;
padding: 0 0 0 300px;
list-style: none;
}
#nav ul li {
float: left;
margin: 0;
padding: 0;
font: bold 1em/2em Verdana, Arial, Helvetica, sans-serif;
background: url(images/tab_right.gif) no-repeat top right;
}
#nav a {
float: left;
display: block;
margin: 0 10px 0 0;
padding: 5px 2px;
color: #fff;
text-decoration: none;
background: #284d73 url(images/tab_left.gif) no-repeat top left;
}
HTML: Code: <div id="nav"> <ul> <li id="t-index"><a href="/" title="Gonzi's home page">HOME</a></li> <li id="t-about"><a href="#" title="About Us">ABOUT US</a></li> <li id="t-services"><a href="#" title="Our Services">OUR SERVICES</a></li> <li id="t-fleet"><a href="#" title="Our Fleet">FLEET</a></li> <li id="t-reserve"><a href="#" title="Reservations">RESERVATIONS</a></li> </ul> <!-- end #nav --> </div> Problem is two fold: 1. The 'a' elements are styled to 'display: block' to make the entire tab clickable, yet it isn't actually rendering this way, and I'm at a loss to explain why. Perhaps something obvious I'm just missing... 2. The 'tab_right.gif' background image (in 'li' elements) and the 'tab_left.gif' background image (in the 'a' elements) don't appear to be meeting up correctly, leaving an area with no image. Again, no idea why and I'm hoping a 2nd pair of eyes may find something I'm missing... If it would help to see the actual implementation, I can send a URL - just let me know how to get that to you (email?). Thanks for any suggestions! luispunchy In the past year or two I've been playing with CSS layout techniques, and have grown to the point where I consistently use CSS instead of tables. I'm all for it. But as much as I love them, some of the trendy practices seem to be a little impractical - particularly sliding doors, sprites and the suckerfish dropdowns. With sprites, I can see the benefits of having fewer HTTP requests and having all rollover images in one file. With suckerfish dropdowns, it's definitely nice to have the navigation and subnavigation organized into lists. Sliding doors can certainly save a lot of bandwidth and load time, and make editing graphical navigation much easier. I'm sure all of these are terrific from SEO and accessibility standpoints, too. But the code for these techniques seems extremely convoluted and bloated. My personal experience with suckerfish dropdowns and sprites both are that they require hacks to get them to work smoothly in browsers as recent as IE6. After all is said and done, there's actually more code required to attain the same functionality that could be achieved using HTML and JavaScript. I'm curious to see what input everyone has. I'd love to justify styling unordered lists into sliding door dropdown nav tabs with sprite backgrounds, just because I have so much fun doing it. But is it really practical? Hi, does anyone know how to do sliding doors where the "a" element is active rather than the "li"? I'm using drupal, and it makes the "a" element active, and I'm having a hard time porting the code over... Hi there, I am in the process of making a website to purchase tickets for Cannon and Ball's show in Morecambe, and I've tried to make it as standards compliant and usable as possible. I've made a nav bar using a UL tag. This works fine in opera and mozilla, but the hover effect doesn't kick in in IE until you are actually on the text. I've tried using the IE7 patch and that helps none. Can anyone tell me what I'm doing wrong? The site is: http://cannonandball.1stmorecambe.net/ Style sheet: http://cannonandball.1stmorecambe.net/style.css I am designing a site which has a vertical nave which when an item in the list is hovered over it adds the left and right border and decreases the padding by 5 px: Code:
#navlist2 a
{
width: 168px;
/* extend the sensible area to the maximum with IE5 */
display: block;
text-align: left;
text-decoration: none;
color: #fff;
margin-top:5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
font-size: 12px;
font-weight: bold;
}
#navlist2 a:visited {
}
#navlist2 a:hover {
width: 163px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
padding-left: 5px;
}
It works fine in firefox, but I noticed that there is massive slowdown/lag . So im wondering, why this is happening in IE and how can I fix it? Hello, My site is www.jwwebdesign.info . It shows up fine in IE, but does not display correctly in Netscape (or Firefox says my friend). Can anyone point me to why the problem is occurring? As well, how can I change the padding without affecting the scroll bar of my div (if I increase padding, scrollbar goes off page because of width setting)? Thanks in advance, Jeff Hey, In the top menu For some reason I can't seem to pick (after frying my brain working on this for the past however many hours) why there is such a huge empty space above the menu. I'm sure it's something simple I just keep missing. Also having trouble positioning the other menu without bloating up the css with potentially useless code. (-px, etc). Website style.css menu2.css (says menu two, but is just the second attempt at css for the first menu) Cheers for all help! I have ran into a bit of a problem getting the navigation to show all on one line when in a div set to 765px (The width I need the site to be...). The div is required for the rest of my site removing it is not an option. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Header</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-us" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="width: 765px;"> <ul id="nav-header"> <li id="zero-nav"><a href="#">Zero</a></li> <li id="one-nav"><a href="#">One</a></li> <li id="two-nav"><a href="#">Two</a></li> <li id="three-nav"><a href="#">Three</a></li> <li id="four-nav"><a href="#">Four</a></li> <li id="five-nav"><a href="#">Five</a></li> </ul> </div> </body> </html> CSS: Code: ul#nav-header li {
display:block;
float:left;
}
ul#nav-header li a {
display:block;
outline:none;
width:101px;
height:74px;
background:url(as_nav_header.gif) no-repeat 0 0;
text-indent:-9009px;
margin:0;
overflow:hidden;
}
ul#nav-header li a:hover {
background-position:0 -74px;
}
ul#nav-header li#one-nav a {
width:134px;
background-position:-101px 0;
}
ul#nav-header li#one-nav a:hover {
background-position:-101px -74px
}
ul#nav-header li#two-nav a {
width:134px;
background-position:-235px 0;
}
ul#nav-header li#two-nav a:hover {
background-position:-235px -74px
}
ul#nav-header li#three-nav a {
width:137px;
background-position:-369px 0;
}
ul#nav-header li#three-nav a:hover {
background-position:-369px -74px
}
ul#nav-header li#four-nav a {
width:122px;
background-position:-506px 0;
}
ul#nav-header li#four-nav a:hover {
background-position:-506px -74px
}
ul#nav-header li#five-nav a {
width:134px;
background-position:-628px 0;
}
ul#nav-header li#five-nav a:hover {
background-position:-628px -74px
}
Thanks, - Chris B. I am very new to web design. I had an old friend of mine design this website for me: directdevelopmentinternational.org I am now trying to use what he did for that website you put together my bands website: throughtheconcreterecords.com I am trying to get the navigation bar to sit inside of the blank white box I have created in my header image. I also just want the text to be black and maybe when highlighted change to a different color. I also am trying to make it so when you click the burning book logo in the upper left corner it brings you back to the main page. I am having a terrible time figuring out how to do this as I am not sure what all of the different techniques are referred to. Any help at all would be much appreciated! On a 3 column page I left the center column completely empty because I am using a non-scrolling, centered image as background and I want it persistently visible, though the 2 marginal columns are welcome to scroll. My problem arises when I try to put my navigation bar at the bottom of the page. It insists upon occupying the empty center column and rising to the top of it (though it gets itself truncated to the width of the center column). I don't want it there; I want it a bit below the longer of the two (populated) marginal columns and centered on the page. This is my first attempt with CSS for page layout and I am using the template from glish. Hello, I sincerely apologize ahead of time for what I think to be the craziness of this request, but I'm about to go bonkers. I have a website set up for a guild through guildomatic and I have some customizations applied courtesy of another, more css-savvy individual. He used a "custom css" and some JavaScript to do some skinning so that his theme looked like another theme. I've made further tweaks using my good ol'fashioned try try until you succeed mentality (some C++/Perl experience) but there is one problem that I just can't wrap my head around. There is a navigation bar (including login/logout/register links) inside a table tagged "crumb" that no matter what I do I cannot get it centered so that it stays in the correct position when the window changes size. I would like for the "crumb" to show up above the banner and centered (the banner is centered too) so that they move with eachother whether your viewport is large or small. Am I completely missing something here or is there a rule that I'm not following? I've tried applying the "auto" setting to the right and left margins in various different levels of the structure and figure I either haven't found the right combination or I'm going about this the wrong way. I have tried disabling the custom CSS and JS to make sure they aren't interfering and I still can't make this happen so far. Any help would be greatly appreciated. Thanks for reading! -Ryan Here's the code: Code:
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:100000001;"></div>
<div id="root">
<table id="root_table">
<tr id="adminConsoleContainer">
<td colspan="1">
<table class="controls">
<tr>
<td class="notices"></td>
<td class="configure">
<ul class="nav controls">
<li>
<img alt="Upgrade" class="raw_icon" src="(URL address blocked: See forum rules)" title="Upgrade" />
<a href="(URL address blocked: See forum rules)=2481105406&cep=b69e9d1e6f0577c6d79da3f5d9b8e910">Add Services</a>
</li>
<li>
<img alt="Administrator Console" class="raw_icon" src="(URL address blocked: See forum rules)" title="Administrator Console" />
<a href="/console">Administrator Console</a> </li> </ul> </td> </tr> </table> </td> </tr> <tr> <td id="banner">
<div class="ggcode">
<table cellpadding=0 cellspacing=0 width="1050" style="margin-left:auto;margin-right:auto;">
<tr>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
<td style="text-align:left;vertical-align:top;background-image:url((URL address blocked: See forum rules));background-repeat:repeat-x;">
<img style="align:top; padding-top:0px; width:970px; height:229px" src="(URL address blocked: See forum rules)">
</td>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
</tr>
</table>
<script type="text/javascript" src="(URL address blocked: See forum rules)"></script>
</div>
</td>
</tr>
<tr>
<td >
<table id="crumb">
<tr>
<td id="nav">
<div class="ggcode">
<div id="menuSection">
<a href="/">Home</a> - <a href="/forums">Forums</a> - <a href="/members">Roster</a> - <a href="/raids">Raids</a> - <a href="/items">Items</a> - <a href="/raids/attendance">Attendance</a> -
<a href="/dkp">TOPP</a> - <a href="(URL address blocked: See forum rules)">Logs</a>
</div>
</div>
</td>
<td id="user_welcome"> Welcome, Valcore. <a href="/user/logout">Log out</a><br/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict 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=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! Hey Everyone! I'm having issues with a custom sliding panel showing correctly in IE. It works EXACTLY as I'd like in Firefox, but breaks in Internet Explorer. I tried different positioning items, and tweaking everything I could think of, but it would appear that I'm stumped. knockoutsadvertising[dot]com/gaptest/ In the right hand sidebar, clicking 'Learn More' will open the panel. There's a link within the panel to close it again. Any help on how to get this thing positioned correctly in IE would be awesome. Brad Hi There - Just finished the tutorial from List Apart. I've got the tabs working well, but I can't get the text colour to style in browsers (works fine in dreamweaver). I've been at this for so long that I'm sure I'm not seeing something that's obvious to fresh eyes. Could someone please look at my code and tell me where I'm being a bone-head? I've put the rules all over the place and can't seem to get the text-colour to go right. Thanks for your help. Here's the html: Code: <div id="tabnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Here's the CSS: Code: #tabnav {
float:left;
width:100%;
background:#FFFFFF url("tab_background.png")
repeat-x bottom;
line-height:normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 13pt;
}
#tabnav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#tabnav li {
float:left;
background:url("tab_inactive_right.png")
no-repeat right top;
margin:0;
padding:0;
}
#tabnav a {
display:block;
background:url("tab_inactive_left.png")
no-repeat left top;
padding:8px 15px 4px;
}
#tabnav a:link{
color:293356;
text-decoration: none;
}
#tabnav a:hover{
color:596eba;
text-decoration: none;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#tabnav a {float:none;}
/* End IE5-Mac hack */
#tabnav #current {
background-image:url("tab_active_right.png");
}
#tabnav #current a {
background-image:url("tab_active_left.png");
padding-bottom:5px;
}
I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } |
|||||||