|
CSS - Streching A Div To The Bottom Of The Screen
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! Similar TutorialsI 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. I 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 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) 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> this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things) So I have 3 images for the top of my page and 3 images for the bottom. The page is enclosed in a div frame titled "frame" each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe" Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom. Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame" I've tried some code in here to do it and it doesn't work.. any help here? thanks! Code:
<style type="text/css">
body {
text-align:center;
height:100%;
min-height:100%;
padding:0px;
}
#frame {
width:800px;
height:100%;
min-height:100%;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
position:relative;
}
#contentlefttop {
width:155px;
height:282px;
padding:0px;
float:left;
background-image: url(images/layout_01.gif);
background-repeat:no-repeat;
}
#leftframe {
float:left;
width:155px;
position:relative;
height:100%;
min-height:100%;
}
#contentleft {
clear:left;
float:left;
padding:0px;
width:155px;
padding-bottom:270px;
}
#contentleftbottom{
width:155px;
height:270px;
/*clear:left;
float:left;*/
padding:0px;
position:absolute;
bottom:0;
background-image: url(images/layout_07.gif);
background-repeat:no-repeat;
}
#contentcenter {
width:486px;
padding:0px;
clear:left;
float:left;
text-align:center;
min-height:100%;
height:100%;
padding-bottom:53px;
}
#rightframe {
float:left;
position:relative;
height:100%;
min-height:100%;
width:159px;
}
#centerframe {
float:left;
position:relative;
height:100%;
width:486px;
}
#contentrighttop {
width:159px;
height:282px;
padding:0px;
clear:left;
float:left;
background-image:url(images/layout_03.gif);
background-repeat:no-repeat;
background-position:top;
}
#contentright {
clear:left;
float:left;
width:159px;
padding:0px;
height:100%;
padding-bottom:270px;
}
#contentrightbottom{
width:159px;
height:270px;
/*clear:left;
float:left;*/
position:absolute;
bottom:0;
padding:0px;
background-image: url(images/layout_08.gif);
background-repeat:no-repeat;
background-position:bottom;
}
#contentheader {
width:486px;
height:135px;
float:left;
background-image: url(images/layout_02.gif);
background-repeat:no-repeat;
}
#contentfooter {
/*clear:left;
float:left;*/
width:486px;
height:53px;
background-image: url(images/layout_09.gif);
background-repeat:no-repeat;
position:absolute;
bottom:0;
}
#sitemessage {
margin-left:17px;
margin-right:31px;
height:90px;
text-align:center;
font-size:12px;
}
#wisemanquote {
margin-left:22px;
margin-right:24px;
height:85px;
text-align:center;
font-size:12px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<div id="frame">
<div id="leftframe">
<div id="contentlefttop">
<div id="sitemessage"></div>
</div>
<div id="contentleft">Left</div>
<div id="contentleftbottom"></div>
</div>
<div id="centerframe">
<div id="contentheader"></div>
<div id="contentcenter">
<p>Center</p>
</div>
<div id="contentfooter"></div>
</div>
<div id="rightframe">
<div id="contentrighttop">
<div id="wisemanquote"></div>
</div>
<div id="contentright">Right</div>
<div id="contentrightbottom"></div>
</div>
</div>
Hi, I am a wannabe css compiler... Have the following problem. wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen. I cannot figure out how to compensate the (top/left) position to cover both type screens... Anyone help me? <html> Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>All Fore U Golf Clinic</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "nav.css";
</style>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="header">header thing</div>
<div id="wrapper">
<div id="container">
<div id="content">
<h1>content</h1>
<p>Sum Stuff goes here...</p>
<p class="last">...and here</p>
</div>
</div>
<div id="sidebar">
<h1>navigation</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Golf Stuff</a>
<ul>
<li><a href="#">Clubs stuff</a></li>
<li><a href="http://www.google.com">accessories stufff</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
<br>
</div>
<div class="clearing"> </div>
</div>
<div id="footer">footer thing</div>
</body>
</html>
CSS: Code:
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
/*<![CDATA[*/
#wrapper {
background: #f1f2ea;
}
#header {
background: #d7dabd;
}
#container {
width: 100%;
background: #f1f2ea;
float: right;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: left;
}
#footer {
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
/*]]>*/
Works fine in IE, but when displayed in firefox the id=content extends off the screen. Hi All, This is my first post in CSS forums. I want to display a DIV in the center of screen. I am using this DIV for the showing the progress image in my search page (So it is is visible only in some cases.) How can I make it visible in the center of the visible screen (above all other elements). Note: User may have scrolled down the screen. I hope this is possible with CSS I've run into yet another IE "feature" that i'd like to ask you, dear colleagues, how to solve. I have a relatively positioned div and i need to absolute position another div inside of it to fill almost all width and height of the parent. I need it to have a 20px margin from top and bottom. Here's what works in real browsers: Code:
.somediv{
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
right: 0;
}
Now how do i make it work in a developer's nightmare IE? There are 2 more divs in top and bottom both 20px high so the new div shouldn't overlap with them. how can i get a div in the middle of the y-axis of the browser window? I couldn't figure out why people were telling me they couldn't see my page but i could see it just fine in two different locations. Come to find out I use firefox and IE is showing a blank page. Can someone help me with this? In IE 7.0 Why is the text displaying the way it is in this screen shot: http://www.larreamma.com/screens/lmma.png It should display like this: http://www.larreamma.com/screens/lmma_ie8.png (I do not have access to IE 7 to readly test various options). Thank you in advance. I have a page dien all in css that is all set for 800x600 resolution. Does any one know how I can detect larger screen size/resolutions and center the entire page for these instances thanks JT Ok so I got a big one here... At least it is to me. I know absolutely NOTHING about CSS. I use GoDaddy.com and their program WebSite Tonight to build my website. http://www.thebdsmith.com My problem is this. I build the site using a Macbook Pro 15 inch. I always felt I was rather limited with space. I was on my brother in laws computer, he has a PC with a widescreen monitor. When viewing the site on HIS computer there was so much empty space on the right hand side. So I got excited and redesigned the site (after redesigning just 2 a week earlier). The outcome was so much better than before. NOW, this is the problem. When I go back to my Macbook area is missing again and I have to scroll right to see it. I do NOT like that. I emailed GoDaddy support one guy gave me the dumbest reply I've ever heard that was the OPPOSITE of what I had stated. Another said my template design is a fixed width and I'd have to edit the CSS coding to fix it. I don't know where in the CSS code to edit. This is GoDaddy default CSS that I am just wanting to edit and reuse. I know nothing of CSS so I don't see why not. Code: /**
* @file
* @project 675
* @package sftheme
* @site app1
*/
/**
* ------------------------------------------------------------------
* @section RESETS
* ------------------------------------------------------------------
*/
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 11px;
color: #ffffff;
background-color: #051417;
background-image: url(images/675_background.jpg);
background-position: center top;
background-repeat: no-repeat;
}
a:link{color: #ffffff;}
a:visited{color: #ffffff;}
a:hover {color: #ffffff;}
.sf_navigation ul li a {color: #ffffff;}
.sf_navigation ul li a:visited {color: #ffffff;}
.sf_navigation ul li a:hover {color: #ffffff;}
.sf_navigation .subnav li a {color: #ffffff;}
.sf_navigation .subnav li a:visited {color: #ffffff;}
.sf_navigation .subnav li a:hover {color: #ffffff;}
.sf_footer {color: #ffffff;}
.sf_pagetitle {color: #ffffff;} /*(WST Only)*/
.sf_outer_wrapper {
}
.sf_main_header {
color: #ffffff;
font-size: 32px;
font-family: Verdana, Geneva, Kalimati, sans-serif;
padding-left: 29px;
}
.sf_pagetitle {
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 24px;
font-weight: normal;
margin: 0;
padding-top: 0px;
}
.sf_pagetitle h1{
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 24px;
font-weight: normal;
margin: 0;
padding-top: 0px;
}
/**
* ------------------------------------------------------------------
* @section HEADER
* ------------------------------------------------------------------
*/
.sf_outer_wrapper {
border-left:1px solid #2D4461;
border-right:1px solid #2D4461;
}
* html .sf_outer_wrapper {
width: 1200px;
}
.sf_main_wrapper{
width: 600px;
float: left;
margin-left: 67px;
}
* html .sf_main_wrapper{
margin-left: 0px;
}
.sf_wrapper {
margin:0 0;
padding:0px 10px;
width: 1000px;
}
* html .sf_wrapper {
width: 1200px;
}
.sf_wrapper:after {
clear:both;
content:".";
display:block;
font-size:1px;
height:0pt;
visibility:hidden;
}
.sf_region3 {
height: 150px;
}
.sf_main_header {
padding-top: 33px;
margin: 0px 33px;
color: #FFFFFF;
}
/**
* ------------------------------------------------------------------
* @section NAVIGATION
* ------------------------------------------------------------------
*/
.sf_region4 {
float: left;
font-size: 14px;
width: 200px;
overflow: visible;
float: left;
padding-bottom: 50px;
padding-right: 50px;
text-decoration: none;
margin-top: 53px;
margin-left: -24px;
.margin-left:-14px;
}
.sf_navigation .nav a {
width: 139px;
padding: 10px;
font-size: 18px;
}
.sf_navigation .sf_first_nav_item {
background-repeat: no-repeat;
background-position: 0px 0;
padding-top: 12px;
border: 0;
}
.sf_navigation {
float: left;
padding-bottom: 50px;
padding-right: 50px;
text-decoration: none;
margin-top: 0px;
width: 159px;
margin-left: 77px;
z-index: 1000;
position: relative;
}
* html .sf_navigation {
margin-left: 33px;
}
.sf_navigation .nav .subnav a {
background-image: none;
font-size: 12px;
padding-bottom: 12px;
padding-top: 12px;
background-color: #051417;
background-repeat: no-repeat;
background-position: top right;
border: none;
z-index: 1000;
}
.sf_navigation .nav .subnav a{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:link{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:visited{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:hover {
background-color: #051417;
color: #ffffff;
}
.sf_navigation ul {
padding: 0 0 12px 0;
margin: 0;
list-style: none;
float: left;
background-position:0 bottom;
background-repeat:no-repeat;
}
.sf_navigation:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
.widget {
margin-left: 24px;
}
* html .widget {
margin-left: 24px;
}
.sf_region4 .sf_navigation .nav a:hover {
text-decoration: none;
}
.sf_navigation ul li {
float: left;
}
.sf_navigation ul li a {
width: 214px;
display: block;
text-decoration: none;
padding: 0;
padding-bottom: 12px;
width: 200px
}
.sf_navigation li ul.subnav {
padding: 0;
margin: 0;
list-style: none;
float: left;
width: 160px;
position: absolute;
left: -999em;
margin-left: 158px;
margin-top: -43px;
z-index: 1000;
padding:5px 5px 0;
background-image: none !important;
background-color:#051417;
}
.sf_navigation .subnav li {
float: left;
margin-bottom: -1px;
width: 176px;
}
.sf_navigation .subnav li a {
width: 11em;
display: block;
color: #000000;
text-decoration: none;
padding: 0;
margin-bottom: 0px;
}
.sf_navigation .subnav li a:visited {
color: #000000;
}
.sf_navigation .subnav li a:hover {
color: #000000;
text-decoration: none;
}
#Nav1 li:hover,
#Nav1 li.hover {
position: relative;
}
/* lists nested under hovered list items */
#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
left: auto;
}
#Nav1 iframe{
position: absolute;
left: 0;
top: 0;
z-index: 0;
display: none;
}
* html #Nav1 iframe {
display: inline;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
.sf_navigation .widget_header{
display: none;
}
.sf_navigation ul.subnav a {
color: #FFFFFF;
}
.sf_navigation ul.subnav a:hover {
color: #a4bedf;
}
.sf_navigation ul.subnav a:visited {
color: #FFFFFF;
}
/**
* ------------------------------------------------------------------
* @section MAINCONTENT
* ------------------------------------------------------------------
*/
.sf_pagetitle {
margin-left: 316px;
width: 600px;
margin-bottom: 20px;
padding-bottom: 10px;
}
* html .sf_pagetitle {
margin-left: 5px;
}
.sf_pagetitle h1 {
padding-right: 22px;
}
.sf_main_wrapper {
margin-top:-25px;
padding-bottom: 50px;
}
.sf_content {
padding-left:27px;
padding-top:21px;
float: left;
width: 600px;
}
* html .sf_content {
padding-left:0px;
width: 700px;
}
/**
* ------------------------------------------------------------------
* @section FOOTER
* ------------------------------------------------------------------
*/
.sf_footer{
width: 425px;
margin: 0px auto;
padding-top: 60px;
padding-bottom: 20px;
}
a:hover {
text-decoration: none;
}
* html a {position:realtive}
Sorry for the huge post and thanks for taking the time to read and any help you may offer! B.D.Smith Hi All, I have a fixed div which I am using as a footer in my application. here is the screen shot of my page please have a look first so u will understand what i am talking about. http://img192.yfrog.com/img192/5572/1280x768.gif Problem is that if I browse the application on 1024 x 768 pixels it works great but when i change the resolution up to 1280 x 800 pixels the image inside the div change its position. I want this to appear same on every resolution...any suggestions or workaround. the CSS code is below Code:
#footer
{
position: fixed;
top: auto;
left: auto;
width: auto;
}
here is the HTML Code:
<html>
<head id="Head1" runat="server">
<link href="../App_Themes/style.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"> </script>
<title></title>
<style type="text/css">
.style1
{
width: 800px; background-color:White
}
.style2
{
height: 391px;
}
.style3
{
text-align: right;
}
</style>
</head>
<body bgcolor="#d7d7d7">
<form runat="server">
<div id="content" style="margin: auto; border: thin solid #C0C0C0; padding: 0px 0px 0px 0px; width: 820px; height: 595px"
align="center">
<table align="center" class="style1">
<tr>
<td style="font-family: 'Times New Roman', Times, serif; font-size: small; color: #FF0000;"
class="style3">
<asp:ContentPlaceHolder ID="StatusBar" runat="server">
</asp:ContentPlaceHolder>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/appHeader.png" />
</td>
</tr>
<tr>
<td class="style2" align="left" valign="top">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<%--<td style="background-color: #FF9933; height: 15px;">
</td>--%>
</tr>
</table>
<div id="footer">
</div>
<%-- <table align="center" class="style1">
<tr>
<td>
<div id="footer">
<img src="../images/footer.png" alt=""/>
</div>
</td>
</tr>
</table>
--%> </div>
</form>
</body>
</html>
I want a table below the container div and want to place my footer div inside that table and on every resolution it should come up the same...i did try but its not working...help need I have been looking for this all over the place but cant find the right solution. I want a div aligned like it's on this website. Code: http://www.captaincrawl.com/ 1. It's aligned in the center/middle of the screen 2. It's relative so it moves according to the window size 3. It should work on major browsers such as IE Can anyone help me please? I could use some help testing out a css box that's been breaking on large screen res's. Its a sliding door effect as the page gets wider made with 800px wide images. I added max-width: 1600px to my container I'm hoping that fixed it. Quote: #container{ width: 100%; margin-left: auto; margin-right: auto; margin-top: 100px; max-width: 1600px; } Hi When you resize the window to a smaller window the css formatted page contracts and it looks bad. How can you make it add scrollbars so the content doesn't squish as it stays where it is but scrollbars are added to view the whole page. Can it be done as this has a bad effect on my webpage with a few containers when resized to a smaller size. <style type="text/css"> body{margin:0%;padding:0%;min-width:700px;overflow:auto;} I use %positioning for the containers so I guess that also resizes in smaller window mode. If I was to use pixel length and SR is 800X600 is that the actual size i use or would it be smaller? I am having a very strange problem with firefox and different screen resolutions. I have just made a navigation system for a website and tested the links in I.E and F.F - no problems in my screen resolution of 1280 x 1024. I tested it at 800 x 600 and 1024 x 768 and firefox does not change to the hover status when hovering over the link. There are no problems in I.E at the smaller resolutions. Does anyone have any ideas what is causing this problem. After playing around with a few things i discovered that if i change my display from inline to block it works perfectly in firefox at all resolutions - In I.E it causes a step like appearance to the links. Below is the css I am using, I have also added the xhtml at the bottom. Code:
#top_button li {
margin: 0;
display: inline;
list-style-type: none;
}
#top_button a:link, #top_button a:visited {
float: left;
overflow: hidden;
height: 0px;
}
#top_nav {
margin: 0;
padding: 0;
}
#top_button {
position: relative;
top: 0px;
left: 157px;
height: 19px;
list-style: none;
margin: 0;
}
#t1 a:link, #t1 a:visited {
background-image: url(../images/top_nav_home_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 47px;
}
#t1 a:hover, #t1 a.current {
background-position: 0px -19px;
}
#t2 a:link, #t2 a:visited {
background-image: url(../images/top_nav_services_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 63px
}
#t2 a:hover, #t2 a.current {
background-position: 0px -19px;
}
#t3 a:link, #t3 a:visited {
background-image: url(../images/top_nav_portfolio_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 65px;
}
#t3 a:hover, #t3 a.current {
background-position: 0px -19px;
}
#t4 a:link, #t4 a:visited {
background-image: url(../images/top_nav_resources_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 72px;
}
#t4 a:hover, #t4 a.current {
background-position: 0px -19px;
}
#t5 a:link, #t5 a:visited {
background-image: url(../images/top_nav_contact_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 59px;
}
#t5 a:hover, #t5 a.current {
background-position: 0px -19px;
}
{
xhtml Code:
<div id="top_nav">
<ul id="top_button">
<li id="t1"><a class="current" href="/" title="home"></a></li>
<li id="t2"><a href="/services" title="services"></a></li>
<li id="t3"><a href="/portfolio" title="portfolio"></a></li>
<li id="t4"><a href="/resources" title="resources"></a></li>
<li id="t5"><a href="/contact" title="contact"></a></li>
</ul>
</div>
I would appreciate any suggestions! |
|||||||