|
CSS - Broken Float In Sidebar
This is a first I've seen my problem and I'm hoping it's something silly stupid.
check out the site, code is listed below as well: http://bigoak.kjellandrew.com Ultimately I'm trying to float the sidebar to the left of the main content. First thing I notice is that the banner image has excess margin that is anywhere in the CSS. I've tried everything to eliminate that spacing and am starting to think it's related to my other problem. Second is that when I try to float the side bar (float: left on content and float: left on sidebar) it kills the div #body prematurely. You can tell cause the background color disappears and using firebug proves it showing that the body div is shortened. I've tried specifying heights (min height does extend it, but ultimately not a fix). I've made sure all of my divs are closed in proper order. And I've checked for random ", ', }, or / in my CSS and html and it's totally clean. It validates just fine too. HELP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Big Oak - Home</title>
<style type="text/css">
* { margin: 0; padding: 0;}
a img {
border: none;
}
.clear {
clear: both;
}
body {
background: url('_img/outside_bg.png') no-repeat top center #59858b;
}
#body {
margin: 0 auto;
margin-top: 50px;
background-color: #fff;
width: 950px;
height: 100%;
}
#header {
background: url('_img/header_wood.jpg') no-repeat top;
width: 950px;
height: 75px;
}
#header h1 {
text-indent: -9000px;
font-size: 0;
}
#header img.logo {
float: left;
position: relative;
top: -50px;
}
#header img.banner {
margin: 0px auto;
}
#header ul {
float: left;
list-style: none;
padding-top: 40px;
width: 480px;
}
#header li {
display: inline;
margin: 10px;
font-family: helvetica;
font-weight: normal;
font-size: 1em;
}
#header li a:link,
#header li a:active {
text-decoration: none;
color: #231f20;
}
#header li a:hover,
#header li a:active {
border-bottom: 2px solid #444;
}
#header form {
float: left;
margin: 30px 5px 0 0;
display: inline;
}
.searchbox {
height: 1.5em;
font-size: 1em;
padding: 2px 2px 2px 5px;
width: 140px;
vertical-align: middle;
border: 1px solid #ccc;
}
.searchsubmit {
vertical-align: middle;
}
#social_links img {
float: left;
padding: 30px 5px 0 0;
}
#container {
width: 890px;
margin: 0px auto;
}
#content {
width: 560px;
float: left;
}
#sidebar {
width: 270px;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="body">
<div id="header">
<h1>Big Oak</h1>
<a href="/"><img src="_img/bigoak_logo.png" alt="big oak logo" class="logo" height="119" width="142"></a>
<ul class="nav">
<li><a href="#">about</a></li>
<li><a href="#">speaking</a></li>
<li><a href="#">a:life</a></li>
<li><a href="#">go events</a></li>
<li><a href="#">contact</a></li>
</ul> <!-- ends main navigation list -->
<form method="get" action="">
<p><input type="text" class="searchbox">
<input type="image" src="_img/go.png" class="searchsubmit"></p>
</form>
<div id="social_links">
<a href="#"><img src="_img/facebook.png" alt="facebook"></a>
<a href="#"><img src="_img/twitter.png" alt="twitter"></a>
<a href="#"><img src="_img/rss.png" alt="rss"></a>
</div> <!-- ends social links div -->
</div> <!-- ends header div -->
<div id="container">
<img src="_img/header_img.jpg" alt="banner" class="banner" width="890" height="270">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
</div> <!-- ends content area -->
<div id="sidebar">
<h3>Cool Sidebar</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div><!-- ends sidebar div -->
</div> <!-- ends container div for main area of content -->
</div>
</body>
</html>
Similar Tutorialssubject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. Hey, I had a website which ran for about an year on most browsers with no probs. Now when Firefox v4 struck my site css is broken and im struggling to make it work on all sites properly. I know its shameless of me to ask to look trough the whole site but i just cant pick out where the problem exactly lies. the site is www . alterum . ee in firefox v4 main menu just breaks and seems like drags the content-wrapper with it. other browsers work fine atm. i would really appriciate if someone heped me with that problem. Or ill have to redo whole css from scratch which would be a bummer. For some reason my sidebar keeps breaking the wrapper and floating under my content on my blog page. universitysquarecondos. com / owners-2 / updates/ Sorry about wack url but it wont let me post urls since it thinks I may be spamming or something... Note that this only happens in IE, not in Mozilla (of course... ) Any ideas? Thanks for helping a noob get his sealegs, Reid Hi guys. For some reason, this page's layout is broken.. I'm suspecting that it's a problem with css. Page is mtvicdojo.org.nz/2008/03/20/thanks/ Here is my css. mtvicdojo.org.nz/wp-content/themes/theme_mtvicdojo/style (dot) css Any ideas why it is broken..? Thanks. I'm having a very hard time getting a particular website to look correctly in IE6. It looks perfect in Safar, Firefox, and IE7. But of course, IE6 can't seem to figure out what I want done. If you go to www . sixpak . org/~chafer2002/tactical/index.php (remove the spaces between www and sixpak and sixpak and org), you'll see the page. The page is laid out with a branding area, navigation area, a main content <div>...and within the main content <div>'s there are three "sub" <divs>...a left content, middle content (for the bulk of the content), and a right content. For some reason, the right content <div> "breaks" the middle content <div> and is pushed off to the left. I can't figure out how to get it back where it belongs...on the left side of the page. You can view the same link in Firefox. It looks fine. I'd appreciate any ideas on how to get this page to look right. Thanks! Russell I am working on a template that looks great in IE and Chrome but Firefox makes it look really ugly so I was curious if anyone would mind looking at my site and telling what they think I need. centextechs is the site Any help is greatly appreciated Randy Hi all, I have a small problem with the new design for my website and after trying things for like 30 minuts and asking some other people I decided to give up and try here. It's probably going to be something very simple but I just can't figure out what Website: URL CSS: URL Explaination pictu URL The first part is how it shows in Internet Explorer, the second shows Firefox and the third how it is supposed to be. I hope somebody can help me with this. Thx in advance. Greetings, Sjoerd Hi everyone, Help please. I'm relatively new to CSS. I've coded the following application form and when opened in Chrome and IE9 the formatting and layout is shown as expected. IE8 doesnt seem as friendly and the 2nd page 'Questionnaire' has broken borders. Can anyone help? Here is the CSS behind the 'Job Application Form' @charset "UTF-8"; /* CSS Document */ body{ background-image: url(xxxxxx); background-repeat: no-repeat; background-position: top left; background-color: #CBCBCB} form{ background-color:#FFFFFF; width:800px; margin:90px auto; border:2px solid #A9A9A9; padding: 20px; } #header_content * {font-family:Arial,Helvetica,sans-serif!important} #content {margin-bottom:20px;} #sectionCandInf, .sectionContent, #content div *{background-color:#FFF} #aq523 {width:650px;} #aq515 {width:650px;} #aq516 {width:650px;} #aq517 {width:650px;} #aq519 {width:650px;} #aq522 {width:650px;} #aq524 {width:650px;} #aq521 {width:650px;} #aq525 {width:650px;} #aq518 {width:650px;} #aq520 {width:650px;} #aq2922 {width:650px;margin-bottom:10px;} #aq2924 {width:650px;margin-bottom:10px;} #aq2916 {width:650px;margin-bottom:10px;} #aq2917 {width:650px;margin-bottom:10px;} #aq2918 {width:650px;margin-bottom:10px;} #aq2919 {width:650px;margin-bottom:10px;} #aq2920 {width:650px;margin-bottom:10px;} #aq2923 {width:650px;margin-bottom:10px;} #aq2926 {width:650px;margin-bottom:10px;} #aq2925 {width:650px;margin-bottom:10px;} #chpLoginSection{margin-top:20px; border:2px dotted #0092B5} #chpCreateSection {margin-top:20px;border:2px dotted #0092B5} h5 { font-size: 110%; font-weight: bold; margin: 0; padding: 20 20px; background-color: #fff!important; color: #FFFFFF; width: 25em; float: left; color: #000; } #reqstar{margin-bottom: 20px; margin-right: 80px} .section fieldset { clear: left; width:100%; padding: 5px 0; color: inherit; background-color: #CCCCFF; border:1px solid #A9A9A9; } #sectionDocument {padding-right:0px;padding-top:8px;margin-left: 30px;margin-right:30px; border:1px solid #A9A9A9}} #sectionDocument, .sectionContent #sectionDocument select, #sectionDocument input {margin-bottom:10px;} #sectionDocument #aq2822, #sectionDocument #aq2824 {width:400px;} #sectionDocument #aq2822 label, #sectionDocument #aq2824 label {width:40px;} .submit input, #footersubmitbav div input, input.chpbutton, input.footerbutton {font-size:12px; font-family:Arial,Helvetica,sans-serif; border: 1px solid #7F7F7F!important; background-color:#547EA8!important; text-align:center; cursorointer; text-decoration:bold !important; font-weight:normal; color:#ffffff;padding:4px 6px 4px 6px !important; } /*Job summary headers*/ .headerlabel1, .headerlabel2, .headerlabel3 {font-weight:bold;color:#A32425;} .headerlabel1, .headerlabel2 {padding-left:0px;} .headervalue1, .headervalue2, .headervalue3, .headerlabel1, .headerlabel2, .headerlabel3 {font-size: 14px;} .headerlabel3 {padding-left:0px;} .bodyAppProc h4 {font-size: 17px; font-weight:bold; color:#A32425;} .bodyAppProc h5, .bodyAppProc h6 {font-size: 14px; font-weight:bold;color:#A32425;} .bodyAppProc input, .bodyAppProc textarea, .bodyAppProc select{font-size: 11px;} #saveApp {margin-top:20px; margin-bottom: 20px;} #step_navigation_content, #content h4{margin-left:00px;} #headertable{padding: 10px 0px 10px 0px; line-height:1.7em; } .section h5{padding-left:0;} #chpCreateSection {border-left:1px dotted #C8B08BF!important} #step1input input, #step2input input,#step2input input,#step3input input, a.currentStep {font-size: 14px!important} /* migration 28B -> 28C */ #sMobilePhoneNumber {width:220px;} #tem {border:none;} #sectionWelcome {background-color: #fff} /*MedusaTech Additions*/ #aq6783 {margin-bottom:10px} #aq6696 {margin-bottom:10px} #aq6700 {margin-bottom:10px} #navbarValue a, #navbarValue input {font-size:14px;color:#4F6DB6;text-decoration:none;padding-top:1px;} #navbarValue a:hover, #navbarValue input:hover {text-decoration:underline;} #navbarValue .disabledLink a, #navbarValue .disabledLink input {color:#000000;} #navbarValue .disabledLink a:hover, #navbarValue .disabledLink input:hover {text-decoration:none;} #navbarLabel {font-size:14px;} .navbarLine {padding:0;margin:0;} #sectionAttachContent {border: 1px solid #A9A9A9;} .label {width:242px;} #sectionAttachContent .value {} I have three questions. 1. I saw some site which cut if there is a wide picture on side bars, like it just show the part which is on the sidebar box if its wider it cuts the extra part like this site if you see the first picture on the side bar its bigger but it cuts the extra part (-http://dot21.blogspot.com/-) , i want to know how to do it. 2. When some people add backgrounds they write background-repeat:no-repeat whats the function of that code??? and what can i write instead of no-repeat?? 3. whats the function of this code (background-position:bottom left) ??? If you couldnt answer some i hope you answer the ones you know. I am working on a site in CSS (first time! Yay!) I am having one problem: there is a sidebar, and I have used spacer images to make the coloring go to the very bottom of the page (the links stop above that). HOWEVER: this is for my screen size, and I am worried that when people view it with a different screen/window size, they will have scroll bars, even though there is no content at the bottom. Is there any attribute that will make it just go right to the bottom? Thanx. I'm trying to have a sidebar to the right of my page content that extends the entire height of the container it is in. Code: .sidebar {
padding: 0px;
margin: 0px;
width: 150px;
height: 100%;
color: #999999;
background: #ffffff;
float: right;
border-top: none;
border-left: 1px solid #cccccc;
border-bottom: none;
border-right: none;
}
This is the code I am currently using, but it is only as tall as the contents of the div. I need the border on the left to extend the length of the container it is in. Any ideas? Thanks, Scott Hi, we are hoping someone can help us figure out why (besides the obvious) our CSS isn't rendering our site correctly in any version of IE. If you take a look at our website (DJDeals) in Chrome or Safari, you'll see how it should look. Then take a look in IE. The shopping cart and other major features are WAY our of place... help? We've implemented a slightly modified form of suckerfish dropdowns...apparently I can't post links, but it's at jlfurnishings.com Here's the markup and javascript: Code:
<ul id="nav-bar" class="nav-bar">
<li><a href="/jlf/pages/facility" >Facility</a></li>
<li><a href="#" >About Us</a>
<ul>
<li><a href="/jlf/pages/aboutjlf" >JLF</a></li>
<li><a href="/jlf/pages/aboutlm" >Lone Meadow</a></li>
</ul>
</li>
<li><a href="/jlf/pages/designerresources" > Designer Resources</a></li>
<li><a href="#" >Projects / Clients</a> <ul>
<li><a href="/jlf/pages/hotels" >Hotels</a></li>
<li><a href="/jlf/pages/restaurants" >Restaurants</a></li>
</ul>
</li>
<li><a href="/jlf/pages/links" >Links</a></li>
<li><a href="/jlf/pages/newsevents" >News / Events</a></li>
<li><a href="/jlf/pages/calendar" >Calendar</a></li>
<li class="nav-bar-white">
<a href="/jlf/pages/contactus"><font style="color:#2E350A;">Contact Us</font></a>
</li>
</ul><!--end nav-bar -->
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav-bar").getElementsByTagName("LI");
if (!sfEls) sfEls = document.getElementById("nav-bar-products").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
Here's the CSS: Code:
#nav-bar {
position:relative;
float:left;
width:595px;
height:25px;
text-align:left;
padding-left:6px;
margin-left:30px;
line-height:25px;
}
.nav-bar {
position:relative;
float:left;
width:595px;
height:25px;
background:url(../img/content-nav-bg.jpg) #FFF no-repeat;
text-align:left;
padding:0px;
margin:0px;
padding-left:6px;
margin-left:30px;
line-height:25px;
color:#FFF;
}
.nav-bar li {
position:relative;
list-style:none;
display:inline;
margin:0px;
margin-left:-4px;
padding:0px;
}
.nav-bar a {
color:#FFFFFF;
font-size:11px;
font-weight:normal;
padding:0px;
padding-left:12px;
padding-right:8px;
margin:0px;
border-right:solid 1px #FFF;
margin:0px;
margin-left:-4px;
}
.nav-bar a:hover {
position:relative;
color:#2E350A;
background:#FFF;
padding:7px;
padding-left:12px;
padding-right:8px;
margin:0px;
margin-left:-4px;
}
.nav-bar li.nav-bar-highlight {
position:relative;
color:#FFF;
background:#FFFFFF;
font-size:11px;
font-weight:normal;
padding:7px;
padding-left:12px;
padding-right:8px;
margin:0px;
margin-left:-4px;
}
.nav-bar li.nav-bar-highlight a {
position:relative;
color:#2E350A;
background:#FFFFFF;
font-size:11px;
font-weight:normal;
padding:7px;
padding-left:12px;
padding-right:8px;
margin:0px;
margin-left:-4px;
}
/** this is for the "contact us" item that has a white background **/
.nav-bar-white {
background:#FFFFFF;
}
.nav-bar li ul, .nav-bar-products li ul { /* second-level lists */
position: absolute;
background: #E1E1E1;
z-index:9;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
.nav-bar li ul li, .nav-bar-products li ul li {
border:0px;
float:left;
clear:left;
margin-left:5px;
z-index:900;
}
.nav-bar li ul li a, .nav-bar-products li ul li a {
color:#4C4C4C;
border:0px;
width: 10em;
}
#nav-bar li:hover ul, #nav-bar li.sfhover ul, #nav-bar-products li:hover ul, #nav-bar-products li.sfhover ul { /* lists nested under hovered list items */
left: auto;
left:-20px;
top:10px;
z-index:900;
width: 10em;
}
They work fine in Firefox (for the most part...feels a little unstable), but in IE6 (and 7, I believe), the dropdowns are all jacked. Can anyone shed any light on this? I've played with it, but I'm not making any progress. My client is freaking out because this is overdue and my css guy is MIA and I'm about to rip my hair out. Any insight at all would be welcome... (URL address blocked: See forum rules) (dropdowns for 'About Us' and 'Projects / Clients') On a sidenote: how do you guys do this? I'm a PHP developer and CSS is like black magic to me :-) I can usually get things working fine in non-IE browsers, but then I pull up the site in IE and I'm completely mystified. Kudos to you all... Here's the main site: http: // anomalyrecords . net / index . html Here's the sto http: // anomalyrecords . net / catalog I am using a Zencart embedded template to wrap the main site design around Zencart.. This is working perfectly with a small remaining issue.. I am trying to synchronize the content placement of the sidebar items between Zen Cart and the rest of the site pages.. There is an ever so slight "shift" of the sidebar elements when you toggle bewteen the site pages and the store.. I've done a lot of tweaking and I'm fairly close, but I am at a COMPLETE loss how to put this to bed once and for all. I am hoping one of the CSS gurus here will see what I am clearly missing and guide me back to the light.. Hello, this is my first time posting here. I am having a problem with a CSS sidebar. You can view the page at this URL: http://approg.msu.edu/david/ccsac/index2.htm. For the life of me, I cannot get the sidebar to automatically extend to the length of the page. Obviously, it's not much of an issue at the URL I listed, but it makes a bigger difference when there is a lot of content on the page. I'm sure the solution is simple, I just need to be pointed in the right direction. Thanks. Hello everyone. I am working in wordpress trying to make a web site. I am pretty new to wordpress and i have basic CSS and HTML knowledge so i need some help with this. The website: Code: http://sitesuperhostdemo.com/m2/ 1. The #sidebar-1-wrap. The problem i am having is the sidebar. As you can see on the page the sidebar (#sidebar-1-wrap) is positioned under the content but i would want it to stand beside the content (#home-content). 2.The #content-sidebar-wrap. I didnt add this container it is built into wordpress but the problem is that anything i add in wordpress -> pages -> Home page is for some reason placed inside the #content-sidebar-wrap but i have no idea why. The #content-sidebar-wrap is streching my page down because it contains the sidebar but starts at the top of the default wordpress content and i am clueless as to how i can change it so it doesent include all the content i place on the page. I would like it to only contain #sidebar-1-wrap and if i am correct i assume i can then place the sidebar next to the content and stop the div from extending my page. 3. The sidebar position. I can for example set the following code to the #sidebar-1-wrap: Code: .home_page #sidebar-1-wrap {
position: relative;
top: -615px;
left: 40px;
}
but there must be a better way. Also doing this doesent change the #content-sidebar-wrap. It still extends the page down as if the sidebar is still under the content. This would maybe work if i knew how to change the content so it isnt inside #content-sidebar-wrap but i see no way of doing it. Someone help please before i blow my brains out. If anyone needs clarification on anything lmk and ill clarify. I'm a bit of a CSS newbie but I try. How do you get the sidebars' height to synchronize with the height of your content? I tried height=100% but it doesn't seem to work. If I put a lot of text in my content, it stretches down but the sidebars remain the same height, making the layout looking ugly. I don't want to have to press enter in my sidebars to match the content's height all the time! Here's my code: <style type="text/css"> #container { width: 100%; border: 1px solid gray; margin: 0px auto; } #banner { padding: 0px; background-color: #CDC8F1; } #content { padding: 5px; background-color: #FFFFFF; } #sidebar-a { float: left; margin: 0; padding: 0px; background-color: rgb(235, 235, 235); height: 100%; } #sidebar-b { float: right; margin: 0; padding: 0px; background-color: rgb(235, 235, 235); height: 100%; } #footer { clear: both; padding: 5px; background-color: rgb(213, 219, 225); } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } </style> |
|||||||