|
CSS - Positioning A Table On The Bottom Of The Screen
I am trying to set a table to sit on the bottom of the browser at all times, like a hovered BG image. Anyone know how to do this?
I've tried this but I obliviously don't know what i'm doing #grass { position:absolute; bottom:100% background-repeat: no-repeat; background-position: 0px -0px; } (it's a landscaping website, i want grass on the bottom on the screen) Similar TutorialsI created a footer that sits on the bottom of the screen using this code: .footer { padding-top:5px; margin-top:5px; font-size:8pt; color:#FFFFFF; position:absolute; bottom:0px; background-image:url('gfx/bg-bottom.jpg'); height:22px; width:100%; } It looks fine when the window is expanded to the size of the screen, but when you shrink it down (so the scroll bar will appear) and then scroll, the footer bar scrolls with the page.. It's kind hard to explain, just give it a try he http://www.juiceboxseo.com/do-it.php Is there a way to make sure it stays on the bottom? I was wondering if there was anyway to make a div appear at the bottom of the monitor. In other words, on my laptop, I have a site that I need to scroll down for. It goes as far down as a copyright notice. The copyright notice has a black border on top, right, and left, but not the bottom. That's fine because when it gets to that item, it stops scrolling and lines up with the bottom of the monitor. However, at home, I have a 21" monitor, and the bottom element is just floating there because everything easily fits within the screen. I wanted to see if I could get that bottom element to line up at the bottom of the viewable area somehow. Is this possible? Thanks. Hi, I am having some trouble with stretching a div to the bottom of my page. My background is blue, but I have a centered "main" div over it that is white and I have a fixed, white bar at the bottom with an "about" link and things of that nature. I havae a "content" div to hold text and actual content inside of the "main" div. When there is enough content, the white areas of the page should form a sort of "top hat" over the blue background. However, some pages do not have enough content to stretch the white foreground all the way to the bottom. Is there anyway to essentially add extra whitespace through CSS? Code:
div#main {
margin-left:auto;
margin-right:auto;
width:40%;
height:auto;
background-color:#fff;
}
div#content {
height:100%;
}
div#disclaimer {
background-color:#fff;
position:fixed;
bottom:0px;
left:0px;
width:100%;
}
Those are the pertaining bits of code. The actual content and text of the site are under "content" and "main" is just used for alignment and is a holder for other divs like the header. Any help would be appreciated, thanks! I'm working on a site where I want to layer grass along the bottom of the page, but slightly over the bottom of an image that's being used as a footer for a table. I'm new to CSS and any help would be greatly appreciated. Here's the code I'm using: <style type="text/css"> <!-- body { background-image: url(images/polkasky.jpg); background-attachment: fixed; } .greentable { background-image: url(images/cloud-back.png); vertical-align: text-top; } .cloudfoot { background-image: url(images/cloudbottom.png); background-attachment: fixed; display: block; margin-left: auto; margin-right: auto; background-repeat: no-repeat; } #Layer1 { width:100%; height:158px; background-image: urlimages/grass.gif); background-repeat: repeat-x; background-position: bottom center; background-attachment: scroll; } --> </style> <script type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('images/cloud-head-tongue.png')"> <table width="850" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><div align="center"><img src="images/anchors.png" width="650" height="25" /></div></td> </tr> </table> <div align="center"><img src="images/cloud-head-pink.png" name="Image1" width="1000" height="220" border="0" align="center" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="229,47,827,214" href="pages/spunkymonkey.htm" onmouseover="MM_swapImage('Image1','','images/cloud-head-tongue.png',1)" onmouseout="MM_swapImgRestore()" /> </map> </div> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable"> <tr> <td> <table width="850" border="0" align="center" cellpadding="0" cellspacing="10"> <tr> <td> <div align="center"> <script language="php">include ("$Home_Path/$Inc_Dir/pagelist_horizontal.php");</script></div></td> <td><script language="php">include ("$Home_Path/$Inc_Dir/search_catalog.php");</script></td> </tr> </table> </td> </tr> </table> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable"> <tr> <td> <table width="850" border="0" align="center" cellspacing="10" bgcolor="#FFFFFF"> <tr> <td width="636" valign="top"> <div align="center"> <script language="php">include ("$Home_Path/$Inc_Dir/title.php");</script> </div> <div align="left"> <script language="php">include("$Home_Path/$Inc_Dir/content.php");</script></div></td> <td width="180" valign="top"><div align="left">Newsletter Signup, Coupon, Etc Here</div></td> </tr> </table> </td> </tr> </table> <img src="images/cloudbottom.png" width="1000" height="145" class="cloudfoot" /> <div id="Layer1"></div> </body> </html> I'm new here so Hello guys! I have a problem with CSS - its probably really simplistic but i've been searching for ages and cant figure it out! I have a long narrow DIV which is a header, then a much smaller DIV which is a small square picture. What i want is for the small picture to fit as tightly into the bottom left hand corner as possible. I've tried this: Code: Float:left; postion:absolute; bottom:0px; but as i'm sure u can figure out that sends it to the bottom of the page and not the bottom of its parent DIV. Please can somebody let me know how it is possible to achieve this? hope this is coherrant and fairly simple to do! thanks. On a 3 column page I left the center column completely empty because I am using a non-scrolling, centered image as background and I want it persistently visible, though the 2 marginal columns are welcome to scroll. My problem arises when I try to put my navigation bar at the bottom of the page. It insists upon occupying the empty center column and rising to the top of it (though it gets itself truncated to the width of the center column). I don't want it there; I want it a bit below the longer of the two (populated) marginal columns and centered on the page. This is my first attempt with CSS for page layout and I am using the template from glish. Hi! i'm trying to position footer at the very bottom. this example does it as expected (if the page is longer than viewport, footer will be at the end of page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<h1>Content</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body></html>
but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#head
{
padding-left:20px;
padding-top:20px;
padding-right:20px;
background-color: #FFF;
background-image: url('/public/images/header-background.gif');
background-repeat: repeat-x;
background-position: bottom
}
#logo
{
height: 100px;
background-image: url('/public/images/header.jpg');
background-repeat: no-repeat
}
#content
{
}
#leftcontent
{
float:left;
width:67%;
margin:10px;
padding:30px 30px 70px 30px;
border: 1px solid #000;
background-color: #33251C
}
#leftcontent h1
{
color: #936FC4
}
#leftcontent h2
{
color: #FFF
}
#rightcontent
{
margin:15px
}
p, pre
{
margin:0px 30px 10px 30px
}
#rightcontent p
{
font-size:10px;
margin-left:0px
}
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #FFF
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block
}
#navlist li a, #navlist li a:link
{
background: #FFF;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #f90;
background: #EEE
}
#navlist li a#current:hover
{
border-bottom: 3px solid #999;
background: #DDD
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<div id="head">
<div id="logo">
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
</div><br/>
<div id="leftcontent">
<h1>My Mixes</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="rightcontent">
right side
</div>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
how may i fix it? thanx! I am trying to make a layout with a background image with 3 content boxes layered on top of it. The first two boxes are position correctly. They are offset top, left and top, right respectively. The third box should be positioned bottom, left but for some reason it isn't working. The left offset is working correctly, but instead of positioning itself off of the bottom of the container div, it positions itself that much above the viewport. If I set the bottom property to negative something, it acts like a top offset. While this is a workaround, it does not provide acceptable functionality. Anyone have any ideas? I've had two friends who are both seasoned web developers look at this and they were both stumped. I can post images of what it looks like and what it should look like if desired. Both of these code sections are php generating the html and css respectively. html: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title><?=$title?></title>
<link rel="stylesheet" type="text/css" href="./themes/<?=$theme?>/css/main.php" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#bottom_ccw").attr({ scrollTop: $("#bottom_ccw").attr("scrollHeight") });
});
</script>
</head>
<body>
<div id="wrapper">
<div id="inner_wrapper">
<div id="background"></div>
<div id="left_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="l_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="l_border_l"></div>
<div id="l_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="l_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="left_ccw">
<div id="cc1">
<?for($i=0;$i<500;$i++):?>1 <?endfor;?>
</div>
</div>
<div id="right_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="r_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="r_border_l"></div>
<div id="r_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="r_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="right_ccw">
<div id="cc2">
<?for($i=0;$i<1200;$i++):?>2 <?endfor;?>
</div>
</div>
<div id="bottom_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="b_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="b_border_l"></div>
<div id="b_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="b_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="bottom_ccw">
<div id="cc3">
<?for($i=0;$i<200;$i++):?>3 <?endfor;?>
</div>
</div>
</div>
</div>
</body>
</html>
css: css Code: Original - css Code <? header("Content-type: text/css"); ?> <? //Left content box width. $lcbw = 300; //Left content box height. $lcbh = 443; //Left content box horizontal offset. $lcbho = 100; //Left content box vertical offset. $lcbvo = 55; //Right content box width. $rcbw = 550; //Right content box height. $rcbh = 550; //Right content box horizontal offset. $rcbho = 100; //Right content box vertical offset. $rcbvo = 55; //Bottom content box width. $bcbw = 300; //Bottom content box height. $bcbh = 100; //Bottom content box horizontal offset. $bcbho = 100; //Bottom content box vertical offset. $bcbvo = 0; ?> /* Equalize the padding and margin for all elements across all browsers. */ * { padding: 0px; margin: 0px; } /* Generic top section for a content box. */ .top_b { clear: right; } /* Generic bottom section for a content box. */ .bot_b { clear: left; } /* Top left corner of a border. */ .border_tl { float: left; background: url('../images/main/border_tl.png'); width: 26px; height: 25px; } /* Top right corner of a border. */ .border_tr { float: left; background: url('../images/main/border_tr.png'); width: 26px; height: 25px; } /* Bottom left corner of a border. */ .border_bl { float: left; background: url('../images/main/border_bl.png'); width: 26px; height: 25px; } /* Bottom right corner of a border. */ .border_br { float: left; background: url('../images/main/border_br.png'); width: 26px; height: 25px; } /* Main site wrapper. */ #wrapper { margin: auto; width: 1057px; padding-top: 5px; } /* Main site inner wrapper. */ #inner_wrapper { position: relative; } /* The background element. */ #background { background: url('../images/main/background.png'); width: 1057px; height: 679px; position: absolute; z-index: 1; } /* Left content box borders wrapper. */ #left_bw { position: absolute; z-index: 2; top: <?=$lcbvo?>px; left: <?=$lcbho?>px; width: <?=$lcbw?>px; height: <?=$lcbh?>px; } /* Left content box top border. */ #l_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content box left border. */ #l_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box right border. */ #l_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box bottom border. */ #l_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content container wrapper. */ #left_ccw { position: absolute; z-index: 3; top: <?=($lcbvo+14)?>px; left: <?=($lcbho+14)?>px; width: <?=($lcbw-28)?>px; height: <?=($lcbh-28)?>px; overflow: hidden; } /* Left content container. */ #cc1 { padding: 5px; } /* Right content box borders wrapper. */ #right_bw { position: absolute; z-index: 2; top: <?=$rcbvo?>px; right: <?=$rcbho?>px; width: <?=$rcbw?>px; height: <?=$rcbh?>px; } /* Right content box top border. */ #r_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content box left border. */ #r_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box right border. */ #r_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box bottom border. */ #r_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content container wrapper. */ #right_ccw { position: absolute; z-index: 3; top: <?=($rcbvo+14)?>px; right: <?=($rcbho+14)?>px; width: <?=($rcbw-28)?>px; height: <?=($rcbh-28)?>px; overflow: hidden; } /* Right content container. */ #cc2 { padding: 5px; } /* Bottom content box borders wrapper. */ #bottom_bw { position: absolute; z-index: 2; bottom: <?=$bcbvo?>px; left: <?=$bcbho?>px; width: <?=$bcbw?>px; height: <?=$bcbh?>px; } /* Bottom content box top border. */ #b_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content box left border. */ #b_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box right border. */ #b_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box bottom border. */ #b_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content container wrapper. */ #bottom_ccw { position: absolute; z-index: 3; bottom: <?=($bcbvo+14)?>px; left: <?=($bcbho+14)?>px; width: <?=($bcbw-28)?>px; height: <?=($bcbh-28)?>px; overflow-x: hidden; overflow-y: scroll; } /* Bottom content container. */ #cc3 { padding: 5px; }
Sorry I tried to get the HTML to highlight too but it wouldn't work. Screenshot of how it looks: http://i34.photobucket.com/albums/d105/alphasynaptic/wrong.jpg Screenshot of how it should look (done with my hacky workaround): http://i34.photobucket.com/albums/d105/alphasynaptic/right.jpg I am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column. Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px; Here is my HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
height: 100%;
}
.left-col {
position: absolute;
width: 150px;
top: 130px;
left: 0px;
padding-left: 3px;
z-index: 2;
}
.right-col {
position: absolute;
width: 150px;
top: 120px;
right: 0;
padding-right: 3px;
z-index: 1;
overflow: hidden;
clear: both;
}
.center-col {
position: relative;
min-width: 300px;
min-height: 100%;
height: 100%;
z-index: 3;
top: 140px;
margin: 0px 160px 150px 170px;
text-align: left;
padding:5px;
}
.heading {
position: absolute;
left: 0px;
top: 0px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 0px;
z-index: 3;
padding-top: 25px;
margin: 0px;
display: block;
}
.footer-bar {
width: auto;
padding:10px 3px 3px 0px;
clear: both;
background-color: gray;
vertical-align: bottom;
text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
center content<br />
center content<br />
center content<br />
center content<br />
</div>
<div class="left-col">
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
</div>
<div class="right-col">
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
</div>
<div class="heading">
head content
</div>
<div class="footer">
<div class="footer-bar">page bottom</div>
</div>
</body>
</html>
Hi I have an image positioned on my page with this Code: .notpos {
overflow: visible;
position: absolute;
visibility: visible;
z-index: auto;
height: auto;
width: auto;
left: 170px;
top: 20px;
}
The problem is when a different screen resolution is used the image moves .......... can anyone help please? I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header. Also I have my unordered list inside of my header div and it's placed directly below my header. Any help much appreciated, just learning how to layout. http://imgbin.org/index.php?page=image&id=6637 CSS code Code: body {
font-family: "Lucida Sans Unicode", sans-serif, Verdana;
background-color: #999999;
}
#header {
height: 75px;
width: 100%;
border: 0px 0px 1px 0px;
border-style: solid;
border-color: white;
background-color: #336699;
}
#container {
margin: 0 auto;
width: 900px;
height: 100%;
background-color: #666666;
}
#content {
width: 75%;
}
#sidebar {
width: 25%;
background-color: #666666;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
and HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Jeremy</title> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1 class="header">Jeremy</h1> <ul> <li><a href="index.html">Home</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="forums.html">Forums</a></li> <li><a href="contactme.html">Contact Me</a></li> </ul> </div> <div id="container"> <div id="sidebar"> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p> <p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p> </div> </div> </body> </html> I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. I seem to have messed up while slicing...If my font size is too large, it'll mess up my table positioning...I'd like to know if there's any way to align text to the bottom of a table collumn? Is there anything I can put in my style sheet to do this? Am I not being clear enough? Please help. EDIT : I've got a picture uploaded. See how on the left there's that white space? And under "Welcome" there's also a lot of space? I figure if I could align the text to the bottom, it'd fix both problems. =/ The guys in html told me to post this here instead. Basically I have this table that Should be at the bottom of the page, but if theres a lack of content it gets pulled up. The red highlights area in the attachment is what Im talking about - note Ive tried bottom : 0px; and height : 100%; Any ideas? I have decided to move another of my sites over to css, but I seem to be stuck at the first problem. I have added a small code sample... What I am wanting to do is remove the table and acheive the same result with css and div tags. How can I align text to the bottom right with css like the sample code? PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Text aligned bottom right</title> </head> <body> <table border=0 height="90px" width="100%"> <tr><td style="vertical-align: bottom;background:white;text-align:right;"> <a href="">Home</a> | <a href="">About</a> | <a href="" >Contact</a> </td></tr></table> </body> </html> The problem that I am having stems from attempted compatability for 1. IE/other browsers, and 2. Not scrolling or having an absurd amount of dead space on different resolutions. Given that I'm currently using a 16:9 laptop, anything that I make for my resolution is very likely to scroll vertically on anything else. I would like to preface this by saying that, while I am a young person and am .. relatively web savvy, I'm also pretty miserable at CSS. I'll pick it up whenever I need to use it, but these times generally end up being a year plus apart, and so I generally .. forget everything that I picked up the last time, and have to re-learn. I am very good at nesting tables, and using an absurd number of them to get things to look how I want, but .. I really want to get away from that. CSS is cleaner and less .. well, less flat out dumb than using seven tables in one page to align things the way you want them? The Actual Problem I Have: (Do ignore the hideously coloured background, the green/blue combo is temporary until I get the code working properly. Anyway, so apparently I can't post URLs so: clocktock.com is the website in question, code on it is Code: <html> <head> <link rel="stylesheet" type="text/css" href="poing.css"> <link rel="icon" type="image/png" href="img/RL16.png"/> <title>[ eroding.net ]</title></head> <body> <table cellspacing="0" cellpadding="0" class="main" height="100%" width="100%" valign="bottom"><tr><td width=100% align=center valign="bottom"> <table border="0" cellspacing="0" cellpadding="0" height="90%"> <tr><td background="img/top_left.png" width=14 height=39></td> <td background="img/top.png" width=622 height=39><img src="img/top_left2.png" border=0></td> <td background="img/top_right.png" width=14 height=39></tr></td> <tr><td background="img/left.png" width=14 height=1></td> <td bgcolor="black" width="700" height="800" border=0 cellspacing=0 cellpadding=0 background="img/table_bg_grunge.png" valign="top"> <br><br> <center> aaa <br><br> </center> </td><td background="img/right.png" width=14></tr></td></table> </tr></td></table> </body></html> CSS Code: body { font-style: normal; font-variant: normal; font-weight: normal;
font-size: 12px;
font-family: Tahoma, Arial; background-color: #0F0F0F;
color:
#424242; background: url(img/damask.png);
background-attachment:
fixed; background-repeat: repeat; margin-bottom: 0px; vertical-align:
bottom;}
table { color: #424242; font: 11px Tahoma, Arial; margin: 0px;
}
sm {font-size: 0.9em; }
a:link { color: #424242; }
a:visited { color: #595959; }
a:hover { color: #424242; text-decoration:none; }
a:active { color: #424242; }
What I would, ideally, like to have is for the box to take a percentage of space. Say, vertically 80 or 90%, and then a blank remainder on the top. Horizontally, say, 10 or 15% on either side and then 70 or 80% for the "box." But, google as I might, I just can't find the right CSS commands to do it. It just gets funny looking and shrinks all my border images (Though I erased the code that caused that). Hi there, I have an HTML/CSS design I'm working on, that can be accessed he http://www.design-portal.co.uk/demo/ The CSS can be found he http://www.design-portal.co.uk/demo/style.css Basically what I would like is this: I want another static area that always appears at the bottom of the page underneath the main content text. As I've fixed the big box thing's height (it's going to appear the same height on every page) I want the user to be able to scroll to the next page if the text is too long to fit on the one page. I've created a screenshot as an example: http://www.design-portal.co.uk/demo/images/demo.jpg As you can see, the text at the bottom allows the user to scroll forwards and backwards. I can do this, but it never appears at the bottom; always just underneath the text above it depending on how much text is in the place. How can I just get the damn thing to stay at the bottom regardless of how much content is above it? Cheers in advance, Dave I have a css layout I'm working, that is all divs (my first time doing this without tables). My page consists of all divs, and then the body is a table for displaying date from a database. My problem is that I have the footer positioned absolutely at the bottom of the page, which is what I want, EXCEPT when the table extends longer and the user needs to scroll down. If the table does not extend the full height of the screen, then I want the footer at the bottom of the screen, but if the table extends past the bottom of the screen, I need to footer to be at the end of the table. I hope that makes sense. CSS Tags -- Just a portion of them: Code:
body {
margin: 0px 0px 0px 0px;
background-color: #E7F1FD;
font-family: Tahoma, Verdana, Arial, sans-serif;
height: 100%;
}
/*This is the main body of the page and contains the db data*/
#pwdb_body {
background-color: #E7F1FD;
border: 2px solid #FFF;
width: 100%;
height: 100%;
position: absolute;
top: 165px;
}
/*Footer */
#left_footer {
background-image:url(images/bar_header2.jpg);
width:100%;
height:36px;
position:absolute;
bottom: 0px;
}
My DIVS (partial): Code: <!-- START BODY --> <div id="pwdb_body"> <table width=100% border=1 name="main_body" bordercolor="#000000" style="border-collapse: collapse;" cellspacing=0 cellpadding=1> <tr> <td>...table data...</td> </tr> </table> </div> <div id="left_footer"><img src="images/index_02.gif"/></div> I have attached a screenshot of what I'm talking about. The footer bar is highlighted in a red box, and the table bottom is pointed out by a red arrow. |
|||||||