|
CSS - Left Nav Div Not Reaching Footer
Hey all,
This is my first post in the CSS forum, as i have just started a project to make a 100% validated CSS based site, however i am having a little trouble. On the page in question www.chewie.co.uk/3phones.com/ i have a 3 column layout with the navigation on the left and a news section on the right, middle coloumn houses page content. The problem that i am having is that i cannot get the div to reach down the page to the footer, so as you an see i am left with an ugly white space between them. As i say i am just starting so it is a little confusing, but i have searched around the net, tried to add more container divs, played around with the attributes etc, but just cant fix it because i dont understand why it is happening. If any one could shed some light i would be very grateful... Nav div html Code:
<!-- Left Navbar -->
<div id="navBar">
<div id="sectionLinks">
<h3>Section Links</h3>
<ul>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
</div>
<!--end navBar div -->
Nav div CSS... Code:
#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #cccccc;
height: 100%;
}
/*********** #navBar link styles ***********/
#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}
/*********** #sectionLinks styles ***********/
#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
}
#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover{
background-color: #dddddd;
}
Thanx for reading. Similar TutorialsI haven't been able to get the blue footer's left & right margin/padding to just fall into place. I have been working on this for 3 weeks now. This is my only last open item to complete the layout feature. Grrrr.... So, I welcome any help. The red div I made is just a buffer padding that offset and keep the text be inside the blue div. (For text readablity). CSS code Code:
a
{
color: #000000;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
body
{
margin: 0px; /* remove margins */
padding: 0px; /*remove padding */
border: 0px; /* remove borders */
height: 100%; /* fix height to 100% for IE */
max-height: 100%; /* fix height for other browsers */
width: 100%;
overflow :hidden; /* get rid of scroll bars in IE */
color: #000000;
font-family: Verdana;
font-style: normal;
font-weight: normal;
}
div
{
margin: 0px;
padding: 0px;
}
html
{
margin: 0px; /* remove margins */
padding: 0px; /* remove padding */
border: 0px; /* remove borders */
height: 100%; /* fix height to 100% for IE */
max-height: 100%; /* fix height for other browsers */
width: 100%;
/* background: #fff; */ /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden; /*get rid of scroll bars in IE */
/* */
}
p
{
margin: 0px;
padding: 0px;
}
div.divFooterBody
{
/* margin: -100px -2px 0px 0px; */ /* Margin-Top need to be in negative range to fix the location due to Gecko browsers bug with the overflow setting... Also, Margin-Left need to be in negative range to fix the location due to IE bug with the overflow setting... */
/* padding: 8px 0px 8px 0px; */ /* Margin-Left & Margin-Right need to be at 0px due to incorrect padding & location of several div tags in varieties of browsers... */
background: #ffffe0;
width: 80%;
border: 1px solid #000000;
color: #000000;
font-family: verdana;
font-size: 10pt;
font-style: normal;
font-weight: normal;
z-index: 5;
}
div.divLayoutContent
{
position: relative;
height: 100%;
max-height: 100%;
display: block;
overflow: auto;
z-index: 3;
}
div.divLayoutFooter
{
position: absolute;
bottom: -1px;
right: 15px;
/*margin: 0px 15px 0px 0px; */
width: 100%;
height: 50px;
/* display: block; */
z-index: 4;
}
div.divLayoutHeader
{
position: absolute;
top: 0px;
right: 15px;
margin: 0px;
width: 100%;
height: 100px;
display: block;
z-index: 5;
}
div.divLayoutFooterBuffer1
{
position: absolute;
bottom: -1px;
/* padding: 0px 5px 0px 5x; */
/*padding-left: 8px;*/
/*padding-right: 8px;*/
/*margin-right: -40px;*/
/*padding-left: -10px;*/
/*margin-left: 25px;*/
/* margin-top: 19px; */
/* padding: 20px 17px 10px 31px;*/ /* ??(padding-left 15px + 16px) padding-left:16px is the buffering to correct the absolute position - right of 15px... */
width: 100%;
height: 90px;
display: block;
background-color: #0000ff;
}
div.divLayoutFooterBuffer2
{
height: 100px;
display: block;
background-color: #ff0000;
}
div.divLayoutHeaderBuffer1
{
padding: 12px 0px 12px 16px; /* padding-left:16px is the buffering to correct the absolute position - right of 15px... */
color: #ffffff;
font-family: Verdana;
font-size: 250%;
text-align: center;
background: #000000;
}
div.divLayoutHeaderBuffer2
{
height: 100px;
display: block;
background-color: #ff0000;
}
HTML code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Web Layout</title>
</head>
<body>
<div class="divLayoutHeader">
<div class="divLayoutHeaderBuffer1">blah blah...</div>
</div>
<div class="divLayoutContent">
<div class="divLayoutHeaderBuffer2"></div>
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
<div class="divLayoutFooterBuffer2"></div>
</div>
<div class="divLayoutFooter">
<div class="divLayoutFooterBuffer1">hhh
<div class="divFooterBody">
blah blah
<a href="#">blah</a>
<a href="#">blah</a>
<a href="#">blah</a>
<a href="#">blah</a>
</div>
</div>
</div>
</body>
</html>
Thanks... In my footer I'm having a problem with my links aligning left. I'm not sure how I would go about coding it so that Promotional Kit aligns left underneath Headshot v2. I tried text-align: left in ul, li, and in the footer link section but nothing. I may need to change the layout all together which is fine, but I could use your help. Thanks in advance http://www.lonniebruhn.com/sitelab/ and here is the css code: Code: body, html {
font-size: 100%;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
background-color: #000;}
#container {
margin: 0px auto 90px auto;
width: 940px;
text-align: left;
background-image: url(images/container-bg.jpg);
background-repeat: no-repeat;
background-color: #1d1d1d;;
overflow: hidden}
object {
display:block;
z-index:1}
#header {
width: 920px;
position: relative;
top: 5px;
margin: 0 auto;
background-color: #333;
border: 2px #000 solid;}
#header h1 {color: #ffffff;
font-size: 2em;
font-family: Impact, "Arial Black", Trebuchet, sans-serif, "Times New Roman";
line-height: 90%;
text-align: center;
margin: 0;
padding: 10px;}
.quote {
position: relative;
text-align: right;
Left:10px;
font-family: "Arial Black", Verdana, Helvetica, Arial, sans-serif;
color: #ffcc33;
font-size: .5em;
font-style: italic;
}
#logo {
position: relative;
margin:0 auto;
background-image: url(images/header-logo.jpg);
background-repeat: no-repeat;
width:920px;
height:120px;
border: 2px #000 solid;
}
#left {
margin: 15px 10px 0px 10px;
width:180px;
position: relative;
width: 180px;
float: left;
border: 2px #000 solid;
background-color: #333;}
#left h1{
height:20px;
margin: 10px auto;
color: #ffcc33;
font-family: Impact, "Arial Black", Verdana, Helvetica, Arial, sans-serif;
font-size: 1.50em;
text-align: center;
text-decoration: underline;
}
#dates {
position: relative;
margin: 0 auto;
text-align: left;
}
#dates ul {
margin:0;
color: #ffffff;
font-family: Verdana, Arial, sans-serif;
font-size: .625em;
font-weight: bold;
position: inherit;}
#dates li {
padding: 10px 0 5px 5px;
list-style-image: url(images/1.gif);
display: list-item;
margin: 0px 18px 15px -15px;
list-style-type: none;
text-align:left;
border-bottom: 2px #ffcc33 dashed;}
#mainbody {
position: relative;
background-color:#333;
width: 480px;
min-height:320px;
margin: 15px auto;
right: 20px;
border: 2px #000 solid;
}
#right {
position: relative;
width: 220px;
background-color: #333;
min-height: 320px;
float: right;
border: 2px #000 solid;
margin-top: 15px;
margin-right: 10px;}
#right h1 {
text-align: center;
color: #ffcc33;
font-family: Verdana, Arial, sans-serif;
font-size: 1.25em;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 10px;}
#footer-wrap {
background-image: url(images/footer-bg.gif);
width: 100%;
height: 78px;
z-index: 2;
left: 0;
bottom: 0;
position: fixed;
text-align:left}
#footer-left {
position:fixed;
width: 244px;
min-height:68px;
margin-top: 5px;
border-right: 2px #000 solid;
left:-25px;
padding-right: 25px;
float:left;}
#footer-left ul{
display: block;
margin:0;
width:244px;
list-style-type: none;
}
#footer-left li {
display: inline;
margin-right:10px;
}
#footer-wrap a:link, #footer-wrap a:visited, #footer-wrap a:active {
color: #000;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .75em;
text-decoration: none;
}
#footer-wrap a:hover {
text-decoration: underline;}
#footer-center {
position: fixed;
}
#footer-right {
position: fixed;
}
p {
margin:0 25px 25px 25px;
font-size: .875em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
color: #fff;
text-align: justify;}
#links{
text-align: right;
padding: 2px;
}
#links a:link, #links a:visited, #links a:active {
right:8px;
font-weight: bold;
font-size: 0.625em;
font-family: Verdana, Arial, sans-serif;
color: #cccccc;
font-family: Verdana, Arial, sans-serif;
text-decoration: none;
position: relative;}
#links a:hover {
text-decoration: underline;}
#links ul {margin: 0; list-style-type:none}
#links li {
display: inline;
}
#menu
{ height: 15px;
width: 920px;
height:22px;
position: relative;
margin: 0 auto;
background-color: #333;
border-left: 2px #000 solid;
border-bottom: 2px #000 solid;
border-right: 2px #000 solid;}
#menu ul{margin: 0 auto;}
#menu li
{ float: left;
margin: 0;
padding: 0;
list-style: none;
}
#menu li a
{ display: block;
height: 20px;
text-decoration: none;
padding: 0 19px 0 19px;
border: 2px #000000 solid;
text-transform: uppercase;
font-size: 0.75em;
font-family: Verdana, Helvetica, Arial,sans-serif;
color: #ccc;
background-color: #666;}
#menu li a:hover, #menu li a#selected, #menu li a#selected:hover
{ border: 2px #000000 solid; background-color: #3f3f3f;
}
.postdate {
display:block;
margin: 10px 20px 20px 20px;
padding-left: 10px;
color: #ffcc33;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.75em;
background-color: #000;}
.post p {
margin: 0px 5px 0px 5px;
font-size: .75em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
padding: 10px;
padding-top: 20px;
line-height: 120%;
}
.post h1 {
margin: 0px 5px 0 5px;
color: #ffcc33;
font-size: 1.2em;
font-family: Verdana, Georgia, sans-serif, "Times New Roman";
padding: 10px;
text-decoration: underline;}
.post h2 {
margin: 0px 20px 0 20px;
color: #ffcc33;
font-size: .6em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
padding: 15px 10px 5px 10px;
text-transform: uppercase;
border-bottom: 8px #666 double;}
.blue {
color: #3399ff;;
margin: 5px 0 10px 0;
display: block;}
.video {
width: 190px;
margin: 10px auto 0px auto;
z-index: 1}
I'm trying to use CSS to create a layout that has a top header, followed by a left side navbar, a center content area, and a bottom footer. I'm totally lost by the CSS needed to make this happen. Here's what I'm trying. It's borrowed from other posts that came up by searching for headers and footer. Any help would be fantastic. I'm trying to end my use of frames for the header and navbar. Thanks in advance for any help. Code:
#header {
left: 0;
width: 100%;
height:125px;
top: 0;
background-image: url(images/topbackground2.jpg);
background-repeat: repeat;
}
#navbar{
width:122px;
height:100%;
background-color:#3f79a1;
position: absolute;
top: 125px;
left: 0px;}
#footer{
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
position: absolute;
bottom: 0;
left:0;
background-color: #ccffcc;
width: 100%;
text-align: center;
padding: 0 15%;
}
I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look: http://www.chcs-ut.com/support.php?section=technical http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times? Thnx I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.). Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left". What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it? Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. I always seem to run into this problem and somehow get it fixed but this time I am stuck. I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE .. The main CSS: Code: * {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#e5e5e5;
}
#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}
#navigation {
width: 640px;
height: 22px;
background-color:#c9c9c9;
margin-top: 88px;
}
#insidewrapper {
height:auto;
width:99%;
margin: 6px 1px 4px 1px;
}
/* Begin Left Side Info Boxes */
#sidebar {
width:150px;
height:600px;
margin-left:2px;
float:left;
border:1px solid #666666;
border-bottom:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#666666;
background-color:#ffffff;
}
.infobox {
height:123px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
padding:3px;
border-top:0px;
border-left:0px;
border-right:0px;
}
.infopic {
margin-top:9px;
}
.infobutton {
height:20px;
border-bottom:1px solid #666666;
padding-left:3px;
}
/* Begin Main Content */
#maincontent {
width:465px;
height:593px;
margin-left:158px;
border:1px solid;
border-color:#666666;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding:3px;
background-image:url(../images/background_trans2.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
}
/* Main Content for pages with textual content */
#content {
width:97%;
height:auto;
padding:5px;
}
/* Main Content for pages with products */
#productWrapper {
height:auto;
width:100%;
margin-top:10px;
}
#productLeft {
height:auto;
width:115px;
float:left;
}
#productMiddle {
height:auto;
width:200px;
margin-left:1px;
float:left;
}
#productRight {
height:auto;
width:auto;
}
/* Begin Footer */
#footerlinks, #footer {
width:640px;
height:auto;
text-align:center;
float:left;
}
#footerlinks {
border-right: 2px solid gray;
border-bottom: 1px solid gray;
border-left: 2px solid gray;
background-color:#c0c0c0;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
letter-spacing:1px;
color:#555555;
padding-bottom:4px;
}
#footer {
margin-left:0;
margin-top:0;
margin-bottom:15px;
padding-top:8px;
border-top: 0px;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
border-left: 2px solid gray;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#555555;
background-color:#a9a9a9;
}
/* Begin Rightside Column */
#right {
border: 1px solid orange;
width:195px;
margin-left:650px;
padding-top:111px;
}
OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)? Here's some example HTML: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!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" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>
And the CSS: css Code: Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }
Hi, I have this page: 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=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {padding: 0; margin: 0; }
html {padding:0; margin:0;}
.leftDiv {
height: 100px;
width: 30px;
background-color: teal;
float: left;
}
.mainDiv {
padding: 5px 0 10px 0px;
width: 200px;
height: 20px;
background-color: blue;
}
.mainPara {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
<div class="leftDiv">
</div>
<div class="mainDiv">
<p class="mainPara">
First Para
</p>
</div>
<div class="mainDiv">
<p class="mainPara">
Second Para
</p>
</div>
</div>
</body>
</html>
And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions? Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent. Any help is appriciated, CJB I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan hi everyone i would appreciate any help or suggestions! i am using assistly's templates for my portal which is right-to-left. i have succeeded in altering most of the portal correctly, however, some of the <li> bullet points and icons are still showing up as left-to-right. you can see the problem on my portal site he help.cbtisrael.com i have tried changing adding dir: rtl; to every possible css option, but to no avail. if you have any other suggestions for moving the icons and bullet points to the right, please let me know! thanx ============================== here is some of the relevant css code: Code: /* Support Main Column */
#support-main {
float: right;
width: 700px;
}
#support-main .support-body {
background: #FFF;
border: 1px solid #CCC;
-moz-box-shadow: 0 3px 4px #CCC;
-webkit-box-shadow: 0 3px 4px #CCC;
}
#support-main .content {
overflow: hidden;
padding: 20px;
}
/* Support Main Column Headers */
#support-main h3 {
border-bottom: 1px solid #DDD;
margin: 0 0 20px;
padding: 0 0 20px;
}
#support-main h4 {
margin: 0 0 30px;
}
#support-main h5 {
margin: 0 0 9px;
}
#support-main h5 a {
background: #EEE;
color: #666;
font-size: 11px;
padding: 3px 7px;
margin: -2px 0 0 9px;
position: absolute;
text-decoration: none;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
}
/* Dashboard */
#support-main .dashboard h5 a:hover {
text-decoration: none;
color: #FFF;
background: #254689;
}
#support-main .dashboard td {
border-bottom: 1px solid #CCC;
padding: 20px 0 10px;
}
#support-main .dashboard .row1 td {
padding: 0 0 10px;
}
#support-main .dashboard .last td {
border-bottom: none;
}
#support-main .dashboard .topic {
margin: 0;
}
#support-main .dashboard .topic ul {
color: #254689;
margin: 0 15px 20px 0;
list-style: none;
}
#support-main .dashboard .topic li {
background: url('{{ "/images/portal/featured-bullet.png" | portal_image_url: image_asset_host }}') -2px 5px no-repeat;
margin: 0 0 5px;
padding: 0 0 0 15px;
}
#support-main .dashboard .topic li.featured a {
background: #FAFBCA;
font-weight: bold;
}
#support-main .dashboard h5 {
background: url('{{ "/images/portal/icon-types-small.png" | portal_image_url: image_asset_host }}') 0 0 no-repeat;
height: 16px;
font-size: 13px;
text-transform: uppercase;
padding: 0 0 0 20px;
}
#support-main .dashboard h5.questions {
background-position: 0 -109px;
}
/* Article Lists */
#support-main .articles ul {
list-style: none;
}
#support-main .articles h4 {
margin: 0 0 5px;
font-weight: normal;
}
#support-main .articles li {
margin: 0 0 30px;
}
#support-main .articles li.question {
background: url('{{ "/images/portal/icon-types.png" | portal_image_url: image_asset_host }}') 0 3px no-repeat;
padding: 0 0 0 40px;
}
#support-main .articles li.article {
background: url('{{ "/images/portal/icon-types.png" | portal_image_url: image_asset_host }}') 0 -276px no-repeat;
padding: 0 0 0 40px;
}
#support-main .articles li.question.featured {
background-position: 0 -138px;
}
#support-main .articles li.article.featured {
background-position: 0 -415px;
}
#support-main .articles li.featured h4 a {
font-weight: bold;
background: #FAFBCA;
}
#support-main .articles li p {
margin: 0 0 5px;
color: #777;
}
#support-main .articles .condensed {
background: #FFFDF4;
border: 1px solid #E3DEBF;
margin: 0 0 30px;
padding: 20px 20px 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#support-main .articles .condensed li {
margin: 0;
padding: 0;
}
#support-main .articles .condensed h4 {
font-size: 15px;
}
#support-main .articles .condensed p {
margin: 0 0 20px 30px;
color: #777;
}
#support-main .articles .condensed a {
margin: 0 0 20px 30px;
}
I have a dynamic site I am developing. http://www.rubberducktech.com/software/eDeli2/Menu.php along the top there was an issue with a gap on the left and the right (Using IE6). I got the gap fixed on the left using * html #mainLogo{ margin-left: -3px; margin-right: -2px;/*this doesn't work*/ } which I found here in the forum. But, I cannot seem to get the right side gap to go away. Here is the code #header{ font-size:90%; color:#ffffcc; font-weight:bold; } #mainLogo{ background-image:url(../images/logo-span.png); background-repeat:repeat-x; margin-top:10px; height:140px; } Here is my page: http://dev.donmyersministries.com/ The CSS in on the page itself still. My problem: I want my footer to go at the bottom after the two columns, but I just can't figure it out. I have read several tutorials on keeping the footer at the bottom, but nothing has worked for me. This is my first (good) CSS only layout. Help! Thank you all. later Hey All, I'm stumped on a problem I'm having with css. Here's the website I'm working on: johnraymondonline.com/mjbfoundation/ It's wordpress and I was working to modify a template. The problem I'm having is with the div for the footer. I've made the width 100% and it's not expanding the full width of the page. I've checked to see if it was encased in a div and it appears as if it isn't. I'm not sure what to do at this point...use absolute positioning? Any help would be appreciated. Thanks in advance!!! Hello. Maybe this would be a better post on CSS. Here is my code. Right now I'm trying to add a set of links at the bottom of the web page. Any thoughts? This has been driving me nuts! Thanks again everyone HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<title> Attorneys at Law, New York Lawyer</title>
<meta name="" content="">
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<meta name="KeyWords" content="HTML">
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js">
</script>
</head>
<body>
<div id="mainContainer">
<div id="topBar"><img src="webbanner.jpg" width="760" height="100">
<!--#include file="left_bar.shtml" -->
<!-- Main Content-->
<div id="mainContent">
<!-- Google Search-->
<form action="" id="cse-search-box">
<div align="right">
<input type="hidden" name="cx" value="013298611985327428493:xedrvpp2ns4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="(URL address blocked: See forum rules)=cse-search-box&lang=en"></script>
<!-- BreadCrumb Nav-->
<div id="navBreadCrumb">
<a href="(URL address blocked: See forum rules)">Home</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href="">Areas of Practice</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href=""> Real Estate</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<strong>Foreclosure</strong>
</div>
<h1><font face="times new roman, times, serif" size="5">About Our Firm</font> <hr size="2" width="100%" />
<!-- end content --></h1>
<p align="justify"><strong>Lawyer</strong> is a full-service law firm with conveniently located offices in ... and ... Counties. As the largest suburban general practice in ..., we have a skilled team of 31 attorneys, including a physician-attorney, as well as two on-staff Registered Nurses and an extensive support staff to serve our clients.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Why should you choose .... at your New York Attorney?</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv </p>
<p align="justify">individual circumstances.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Affiliations</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Please visit our <a class="con" href="practice_areas.php">
areas of practice</a> for further information on our legal services or <a class="con" href="email.php">
contact us </a>directly for an initial consultation.</p>
</div>
</div>
</div>
</body>
</html>
CSS Code:
html{
height:100%;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
margin:0px;
padding:0px;
background-color:#001b4f;
text-align:center;
}
.clear{
clear:both;
}
#mainContent{
padding-right:10px;
padding-left:210px;
padding-bottom:10px;
background-color:#fff;
}
#mainContainer{
width:760px;
text-align:left;
margin:0 auto;
background-color: #fff;
border-left:1px solid #272727;
border-right:1px solid #272727;
padding-bottom:10px;
}
#topBar{
width:760px;
height:100px;
padding-bottom:0px;
padding-top:0px;
border-bottom:2px solid #272727
}
#searchbox{
position:absolute:0,0;
}
#leftMenu{
width:200px;
padding-left:10px;
padding-right:1px;
float:left;
background-color: #fff;
padd
padding-top:25px;
}
#botTable{
display: table-footer-group;
float: top;
bottom: 100%
So I have this site and I'm not great with css, but this one has to be done all in css I think. And I've got everything working except for the footer. The footer needs to display below the background image which is aligned center top. So if there is plenty of text, the footer should display below all of the text, and if there isn't much text then it should display under the background image. This is how its currently set up: container div header div wrapper div wrapper div left div middle div right div footer div wrapper div the footer has position: absolute; bottom: 0; the container with position: relative puts the footer up the top over the top of the header. With position: absolute it does something else weird, and with neither it puts the footer at the bottom of the screen over the top of the content. the wrapper has relative position, which seems to be why the left, middle and right divs are positioning correctly with their positions as absolute. I think the header just positions correctly since its up top. So it would seem I'd need the footer to be inside another div that is position relatively. I just tried that, but it also positions the footer at the bottom of the screen with more content under it.. I guess what I want really is to have the site split into three horizontal divs, header, main and footer. Then within each of those to center all of the content to only 975px wide. And really its only the main div that needs the background image at all. Can anyone help? Hi, Im trying to make my footer on my page be a certain height of around 150px. BUT I want it to fill to the bottom of the page even when there is less content or the window is made larger or smaller. So basically a sticky footer which fills to the bottom of the page. An example would be the footer he yoast.com My current CSS is he #fwrap { background-color:#BAAE9F; border-top: 1px solid white; border-top-width: 1px; border-top-style: solid; border-top-color: white; width:100%; height:100%; height:145px; } Any help would be appreciated! Thanks I want my footer to have no whitespace under it (like 1px ). I have it set like this: #footer { border-top:1px solid; text-align:right; margin:0px; font-size:smaller; padding-bottom:0px; } and it doesn't work so I'm guessing it is somewhere else in the file but I've tried messing around with most (all?) of the padding / margins and it still doesn't work. How could I do this? What I want is like the footer at http://www.oswd.org . |
|||||||