|
CSS - Footer Links Not Aligning Left, Please Help
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}
Similar TutorialsHI there I am wondering if anyone can help with a css issue I am strugging to resolve. The url is simplyroomsandsuites co uk (forward slash) blog You can see where the footer image is floating left.. I have tried to float it centrally but it disappears. Thanks for any help. .footerArea {float: left; display: inline; width: 950px; background: url(/images/main_area_bottom_curve.png) top left no-repeat; padding: 30px 0 20px 0;} Have a look at this and tell me what's causing the navigation not to align. http://n.1asphost.com/wheelofgod/se...t/spokelist.asp How does one align the text to the left of a div? I have "text-align:left;" specified, however the text is centered when it is too narrow to fill the screen. The URL of the page in question is http://what-is-what.com . If you type an illegal character, such as "=", in the Ask box then the narrow text that is returned appears centered. Other narrow pages on the same site do the same, of course. Tested in Firefox 1.5.0.7 on Ubuntu. Hi, I am pretty new to the whole CSS thing and have had a look around for an answer to no avail. I am trying to align all the widgets for my wordpress theme to the left because my screen resolution is set to 2560 x 1440, they seem to wrap when my browser window is maximised. is there any way to stop this so that they stay underneath one another even when the screen is maximised? my website is at grandfunghi.com thanks in advance, J Hi everyone, I'm having some trouble positioning this footer to the bottom of the page. I'd like for the footer box to display directly under the content/navigation bar, with a gap of four pixels between the respective boxes. In action: http://www.stabhead.com/css/index.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Layout</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
color: blue;
text-align: center;
margin: 5px 0px 0px 0px;
}
#container {
position: relative;
width: 981px;
border: 0;
padding: 0;
margin: 0;
text-align: left;
}
#topbar {
position: absolute;
width: 981px;
height: 95px;
top: 0px;
background-color: #DDDDDD;
}
#loginbox {
position: absolute;
width: 249px;
height: 92px;
top: 97px;
background-color: #FFBD72;
}
#adbar {
position: absolute;
top: 97px;
left: 251px;
width: 730px;
height: 92px;
background-color: #949494;
}
#navbar {
position: absolute;
top: 193px;
left: 0px;
width: 117px;
background-color: #DDDDDD;
}
#content {
position: absolute;
top: 193px;
left: 121px;
width: 860px;
background-color: #DDDDDD;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 64px;
background-color: #DDDDDD;
}
-->
</style>
</head>
<body marginheight="0" marginwidth="0">
<div align="center">
<div id="container">
<div id="topbar">topbar</div>
<div id="loginbox">loginbox</div>
<div id="adbar">adbar</div>
<div id="navbar">navbar</div>
<div id="content">content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
The content may consist of something that is 500 pixels in height, or 10,000 pixels - it totally depends on how many words or images are in there, so the footer needs to grip on to the bottom of the content and stretch across the whole of the bottom of the page. If anyone could help me out here, it would be greatly appreciated. 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. Hi guys I'm in the process of getting my site together, and it's coming along fairly well. I've been using Firefox for testing, and haven't noticed anything wrong. However, when I checked it in IE8, text that I have explicitly left-aligned is now sitting centred on my page. I have validated the code, and there are no problems. I'm just confused... Here is my code: Code: <span style="text-align:left;">Jarryd Pearson</span><br /><br />
<table align="left">
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Phone:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Mobile:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Email:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Postal Address:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
</table>
And here's my CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background: #0d1866;
color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
paypal {
border: none;
}
img.footer {
border: none;
width: 88px;
height: 31px
}
td.contact {
vertical-align:top;
}
tr.rule {
padding: 0px;
}
/* DIVS */
div#main {
padding: 2px;
margin: 2px;
}
div#text {
width: 650px;
height: 370px;
vertical-align: top;
overflow: auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 10px;
}
I apologise if this has been posted before. I did a search, and couldn't seem to find this particular issue. If someone has already posted this, please point me in their direction! Thanks Jarryd Here's the html and css for http://www.pxgo.com/lifepak-prime.php - What I really need help with is aligning the footer (I know absolute positioning is bad for me, but relative doesn't work either) and floating my image (which for some reason vanished once I added the floatleft class). Thanks in advance for any help! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE>Lifepak Prime</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css"></HEAD>
<BODY>
<?php
include ("include/head.txt");
?>
<?php
include ("include/menu.txt");
?>
<div id="content"><h2>Lifepak Prime</h2><img class="floatleft" src="graphics/lifepak-prime.bmp" width="192" height="192" alt="Lifepak Prime" />
Lifepak Prime contains all the nutrition in Lifepak anti-aging formula <i>and more</i>. Add quality years to your life by providing the vitamins, minerals, and trace elements your body needs to protect and regenerate cells.
<br><br>Lifepak Prime all-natural dietary supplements addresses the specific needs of men over 40 and post-menopausal women with BioGinkgo 27/7 extract (ginkgo biloba), milk thistle, glutathione, alpha-lipoic acid, coenzyme Q10, and grape seed extract.
<br><br>Lifepak Prime provides 150 IU, or 500 % daily value, of vitamin E, increased levels of B6, B12, and zinc for optimal nutrition intake. Lifepak Prime also provides unique dietary components for bone health, as well as those that support memory and circulation.
<br><br>My family uses Lifepak so I'll be happy to answer questions about Lifepak on the <a href="http://www.pxgo.com/discuss/viewforum.php?f=9">Lifepak message board</a>. We'd also love to hear from other people who are using Lifepak.
<br><h2>Lifepak information</h2>Lifepak Prime is optimized for men over 40 and post-menopausal women. There is also a Lifepak for pregnant and lactating women (Lifepak PreNatal), Lifepak for woomen from 18-menopause (<a href="lifepak-women.php">Lifepak Women</a>), and adults from 18 to 40 (<a href="lifepak.php">Lifepak anti-aging formula</a>).
<br><br>Lifepak is a vitmain, mineral, phytonutrient supplement. Lifepak is much more than a multiple although it does address common deficincies:
<ul><li>Vitamins A, E, and B6
<li>Zinc, iron, calcium, and magnesium for healthy bones
<li>Alpha-lipoic acid, vitamins B9 (folic acid), B12, C, E, flavinoids, and carotenoids for the anti-aging processes of cellular protection and cellular regeneration.
</ul></div>
<br><br>
<?php
include ("include/ads.txt");
?><br><br>
<?php
include ("include/footer.txt");
?>
</BODY></HTML>
Code: BODY { margin-left: 0%; margin-right: 0%; margin-top: 0%; font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR:#000000; BACKGROUND-COLOR:#ffffff; }
A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
FONT {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; FONT-FAMILY: verdana, arial, sans-serif}
.titular {COLOR: #000000; background-color:#238c13;}
.negro {background-color:#000000; color: #FFFFFF; FONT-SIZE: 12px; FONT-FAMILY: verdana, arial, sans-serif; font-weight:bold;}
.floatleft {float: left; border=1; padding=1; margin: 4px;}
a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
#head {
font-family:verdana, arial, sans-serif;
color:#000000;
font-size:16px;
font-weight:800;
background:#238c13;
padding:0px;
}
#head h1 {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-size:18px;
font-weight:800;
z-index:1;
}
#head a,
#head a:link,
#head a:visited,
#head a:active,
#head a:hover {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-family:verdana, arial, sans-serif;
font-size:18px;
font-weight:800;
text-decoration: none;
}
/* All the content boxes belong to the content class. */
#content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:200px;
margin:30px 170px 20px 220px;
border:0px;
background-color: #ffffff;
padding:10px;
color: #000000;
font:bold 15px verdana, arial, sans-serif;
z-index:5;
}
#content h2 {font:bold 16px verdana, arial, sans-serif; padding:15px;}
#content a:link { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:visited { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:active { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:hover { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#navi {
position:absolute;
width:200px;
top:120px;
left:20px;
border-right:#238c13 2px dotted;
background-color:#ffffff;
padding:0px;
color:#238c13;
font:bold 13px verdana, arial, sans-serif;
z-index:2;
}
#navi A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#ads {
position:absolute;
width:130px;
top:100px;
right:10px;
border-left:#238c13 2px dotted;
background-color:#ffffff;
padding:10px;
z-index:3;
}
#footer {
position:absolute;
width:100%;
top:730px;
margin:10px 0px 0px 0px;
padding:10px 0px 0px 0px;
border-top:#238c13 2px dotted;
background-color:#ffffff;
z-index:4;
}
#footer A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
I 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... Hi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right. | [image] text .... right-side text | This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method. All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method. Any help or suggestions will be greatly appreciated. Thanx I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty. I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line. For the offending code, please see: http://www.forma3.com/stuff/css/top_menu_v1.html http://www.forma3.com/stuff/css/css/right_menu_v1.css Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed. 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 Hi For some reason my links won't align centrally on a mac or netscape. Here's the classes in a style sheet I'm linking to. It works on a PC though. I want the links to only become underlined when you roll over. The problem is the links are long sentences and in a thin table so they go over on to two lines. And when this happens, the second line is not aligned centrally with the first. It's slightly scew. .copy { font-family: "Times New Roman", Times, serif; font-size: 11px; line-height: 13px; color: #000000; text-align: center; padding-right: 20px; padding-left: 20px; text-decoration: none} a.copy:hover { font-family: "Times New Roman", Times, serif; font-size: 11px; line-height: 13px; color: #000000; padding-right: 20px; padding-left: 20px; text-decoration: underline; text-align: center;} I use this css: #clearfooter { /* VERTICALLY ALIGN THE FOOTER TO BOTTOM WHERE REQUIRED */ clear: both; height: 170px; overflow: hidden; } #footerbox { /* BOX FOR THE FOOTER */ height: 170px; width: 759px; margin:0 auto; padding:0; margin-top :-170px; text-align: center; } It puts the footer at the bottom of the page. In IE I can click on the links in that part of the page. In FF I cannot. If I remove the "clearfooter" id then it works in FF although obviously it knackers the page layout...any solution available? 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. |
|||||||