|
CSS - Trouble Aligning A Table To The Bottom Middle
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). Similar TutorialsI'm working on a new page at http://www.plumeriawebdesign.com/webdevgirl/ and am having problems aligning the middle div column. In IE it shows approximately 25px below the dark blue date bar while it shows correctly in FF. I'm also having problems with it extending further than the 100% wrapper div. Here is my HTML Code:
<body>
<div id="wrapper">
<div id="top" align="center"><img src="images/webdev_02.gif" alt="Exceptional web design made affordable"/></div>
<div id="nav">
<?php
$today = date("D M d Y");
echo "$today\n";
?>
</div>
<div id="left">left column</div>
<div id="right">right column</div>
<div id="middle">middle column</div>
</div>
</body>
CSS is he Code:
/* CSS Document */
html {
height: 100%;
}
body {
margin: 0px 0px 0px 0px;
background-color:#333;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
position: relative;
min-width: 600px;
width: 100%;
height: 100%;
color: #333;
}
#wrapper {
width: 100%;
height: 100%;
}
html>body #wrapper {
height: 100%;
}
#left {
float: left;
left:0px;
top:113px;
width:12%;
background-color: #a2cde3;
border-right: 2px solid #333;
padding: 5px 5px;
}
#middle {
top: 0px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 12%;
margin-right:12%;
padding: 5px 5px;
height: 100%;
min-width: 360px;
width: 76%;
background-color: #626262;
color: #000;
}
html>body #middle {
margin-left: 12%;
margin-right:12%;
}
#right {
float: right;
top: 0;
width:12%;
background-color: #a2cde3;
border-left: 2px solid #333;
padding: 5px 5px;
}
#top {
min-width: 600px;
width: 100%;
height: 100px;
background-color: #FFF;
color: #FFF;
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #top {
height:100px;
}
#nav {
top: 100px;
left: 0;
min-width: 600px;
width: 100%;
height: 12px;
background-color: #005698;
color: #e4e4e4;
vertical-align: bottom;
text-align:left;
text-indent: 5px;
clear: both;
}
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. =/ 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> Normally when I want to vertically align some text to the middle of a div I use line-height: 40px; and vertical-align: middle; However that only seems to work on single lines of text because with multiple lines of text the line height of each line means there is a large gap between the text rather than centreing the whole lot vertically. How do I get around this? I thought something like the following would work but it doesn't. <div style="line-height: 60px; vertical-align: middle;"> <span style="line-height: normal;">line1<br />line 2</span></div> So I'm still on my quest to be able to create my 1st entirely CSS site, and need some help as I'm not sure how to do this. I want to be able to align a navigation list at the bottom right of the content area. Also while I'm at it, I want the site to be at a minimum 462px (just an example), but would like for it to increase in height if the content itself expands beyond the 462. And the navigation menu, I'd like to somehow keep at the bottom right of the viewable area. Thanks... here's the code... HTML Code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> </head> <body> <div class="outer"> <div class="logo"> <img src="images/logo.gif" /> </div> <div class="spacer"> </div> <div class="nav"> <a href="#">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a><br /> <a href="#">Link 4</a><br /> <a href="#">Link 5</a><br /> <a href="#">Link 6</a> </div> <div class="content"> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p> </div> </div> </body> </html> CSS Code: Code:
body {padding:0px;
margin:0px;
}
div.outer {background-image:url('images/bg2.jpg');
background-repeat:no-repeat;
width:770px;
height:462px;
}
div.logo {text-align:right;
padding:10px;
height:75px;
}
div.spacer {float:left;
width:200px;}
div.nav {float:right;
text-align:right;
padding:20px;
}
div.content {background-image:url('images/bg3.jpg');
width:400px;
padding:20px;
}
.nav a{text-decoration:none;
color:black;
font-size:20px;
font-family:"sans serif", verdana, arial;
}
.nav a:hover{text-decoration:underline;
}
I'd like to have a container, a row, really. And I'd like text aligned to the top of the div, and then some more text aligned to the bottom of the div, like this: ------------------------------------------ Top text Bottom text ------------------------------------------ The thing is, I can't use tables, so if someone knows how to accomplish in a completely tableless way, I'd appreciate it! I did try the following, but it didn't work: Code:
.mainDiv{
position: relative;
float: left;
width: 150px;
}
.mainDiv .upper {
top: 0;
position: absolute;
}
.mainDiv .lower {
bottom: 0;
position: absolute;
}
hey all, here's my test page http://www.pyesnflpool.com/ at the top... Im trying to get the two links (Register & Recover Your Password) to be beside the arrows and Email Pye beside the mail image it is running off two scripts, one for the links (snippetSideLine)and the other is holding together the header (elementTopPage) As you can see on side-b I was making some effort to align them to the bottom with no success, my thoughts were to align to the bottom and than do a padding-bottom: 15px; or whatever, because I tried padding-top:120px to side-a which put the links in the right spot but left the rest of the page all over the place any help is much appreciated, thanks Code:
<!-- snippetSideLine -->
<div>
<?php
if (isset ($this->User) && !empty ($this->User)) {
if ($this->User->Type == 1) {
?>
<a href="../admin/index.php">Admin Panel</a>
<?php
}
?>
<a href="../members/myaccount.php">My Account</a>
<a href="index.php?Logout">Logout</a>
<?php
}
else {
?>
<a href="../members/register.php">Register</a>
<a href="../members/forgotten.php">Recover Your Password</a>
<?php
}
?>
</div>
<!-- End: snippetSideLine -->
Code:
<!-- start: elementTopPage -->
<style type="text/css">
#wrapper {
text-align: left;
vertical-align: text-bottom;
margin: 0px auto;
padding: 0px;
border:0;
width: 850px;
}
#side-a {
float: left;
width: 458px;
height: 167px;
background: url('../images/top_left.jpg') no-repeat;
}
#side-b {
float: right;
width: 168px;
height: 167px;
vertical-align: text-bottom;
vertical-align: baseline;
background: url('../images/top_right.jpg') no-repeat;
}
#content {
float: left;
width: 224px;
height: 167px;
background: url("../images/top_bg.jpg") repeat;
}
</style>
<!-- elementTopPage -->
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="side-a">
<?php
$this->Snippet ('SideLine');
?>
</div>
<div id="content">
</div>
<div id="side-b">
email pye
</div>
</div>
</div>
<!-- End: elementTopPage -->
Hello, Let's say this... I have an element that has a height of 600px. I have an element inside of that element that I want aligned to the very bottom. How could I accomplish this feat? Is there a way to align something from the bottom of the page? Ok, so I just used Pagination for the first time (Yay). I'm creating a make shift shopping cart, and was trying to align "Add to Cart" to show at the bottom of the product listing. Right now, the products show 5 per row, and the format is: image of item item name price Then there is some padding and I want the submit button to appear at the very bottom of the div (within the a href if possible). I have the a href set as display:block, so when hovered over, the area is gray. I want the submit button to be within that area. I have tried with several variations (I did move the </a> to after the </form> line: - Placed the <form> lines within a separate div and tried aligning it to the bottom using margin-bottom - Tried styling the <input> using margin-bottom as well. My knowledge of divs isn't really that good as I never really used them much before, so I'm sure it's something simple enough. Right now when I do place it in the <a href></a> area, the Add to Cart button shows up right under the item_name... so it's staggered as item names may take up 1, 2, or 3 lines. And keeping it under the link area makes the button too far down. If you need further info, let me know. Here's the code to pulling the info from the products table: Code:
$query = "SELECT `id`, `image`, `item_name`, `msrp` FROM products $limit";
$result = mysql_query($query, $conn) or die(mysql_error());
$i == 0;
while($row = mysql_fetch_array($result)) {
extract($row);
$i ++;
$image_loc = "images/products/" . $image;
$j = $i/5;
$display .= "<div id=\"store\"><a href=\"view_item.php?id= ".$id."\"><img src=\"".$image_loc . "\" style=\"width:100px; padding-bottom:5px;\"><br />" . $item_name . "</a>";
if ($logged_in != 'false') {
$display .= "<form action=\"add_cart.php\" method=\"post\">";
$display .= "<input type=\"hidden\" value=\"".$id."\">";
$display .= "<input style=\"margin-left:20px;\" type=\"submit\" value=\"Add to Cart\">";
$display .= "</form>";
$display .= "</div>";
}
if (is_int($j)) {
$display .= "<div style=\"clear:both;\"></div>";
} else {
}
}
Here's the CSS: Code:
#store {width:150px;
float:left;
padding-bottom:30px;
padding-left:15px;
padding-right:15px;
}
#store a{display:block;
text-decoration:none;
padding:10px;
height:200px;
}
#store img{border:0;
}
#store a:hover{background:#ccc;}
Hi, I'm having a problem which I though should be fairly simple, but I've been hacking at it for many hours now. I want to align blocks horizontally at the bottom of a containing block. The containing block has a fixed height while the contained block do not. Here's a mockup of what I want: URL How should I modify the following code so that it renders like the above? Code: <div style="height:50px">
<div style="float:left">one</div>
<div style="float:left">two</div>
</div>
Thanks! Please view: http://www.archanix.com/aib/about/ Notice the red square aib logo towards the bottom of the page. I have been successful in aligning the image to the bottom of the div. But because I'm using position:relative; bottom:72px; it pushes my footer down farther than I want. Any way i can get around that? Any help would be greatly appreciated. Thanks, Jesse www.devwebsites.com is the url. You wil see the login box below teh ads and I am trying to get the login stuff to be next to the ads. heres my code Code: <table cellspacing="0" cellpadding="0" border="0" style="padding-left:12px;margin-top:-9px; padding-top:3px;"> <tr> <td class="header"> <script type="text/javascript"><!-- google_ad_client = "pub-0405738179168907"; /* 468x60, created 9/20/08 */ google_ad_slot = "6289309218"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <form method="post" id="commentform" action="" name="smelogin"> Username : <div><input type="text" id="username" size="11" name="username" style="background-image:url(/images/u.gif); background-position:left; background-repeat:no-repeat ; height: 18px; width:15%; display:block; border-bottom:#000000 solid 1px; padding-left:18px;" maxlength="21" /></div> <div> Password : <input type="password" style="background-image:url(/images/p.gif); background-position:left; background-repeat:no-repeat ; height: 18px;width:15%; display:block; border-bottom:#000000 solid 1px; padding-left:18px;" id="password" size="11" name="password" maxlength="25" /></div> </td> </tr> </table> <div align="center"><input type="submit" name="login" value=" Login "> </div> <p><a style="font-size: 8pt;background:transparent;padding:0px;" href="/register.html"><div>[ Signup ]</div></a> Help? 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. 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'm in the midst of redeveloping my site's look and feel using CSS. I'm having a moderate amount of luck so far, but I've run into a problem. I'm testing using Firefox 1.0 PR, but I've seen this behaviors in other Mozilla-based browsers. Example 1: URL. As you will probably see, the white background only extends to the bottom of the one DIV. The only way I was able to get the white background to extend to the bottom of the two DIVs was to use an image in one of the container DIVs. Example 2: URL. Of course, then the problem is still that it doesn't extend all the way to the bottom of the browser unless it's filled entirely with content. The effect I'm looking for is something like this: URL. My CSS is here URL. First, if anyone can help me figure out how to get the background to extend evenly, without an image, that would be great. If there's a way to make the page always extend to the bottom of the browser, I'd love to hear about that, too. Thanks in advance for any help you can offer. Hi everyone, I have a problem I'm trying to overcome with displaying an image next to the text in a table cell. I've set the table cell to valign=middle and this achieves the layout I want (hopefully this demonstration will look right..) Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here PICTUREHERE PICTUREHERE So the text and the picture are laid out along the middle of the cell. However as soon as the text gets too big for the cell (or the cell gets smaller) this happens: Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here, but when it's longer PICTUREHERE PICTUREHERE the remainder comes here I knew this to be because the img is still an inline element in the cell. I tried to solve the problem by making the img float:left, but the following happens, even if the valign=middle property is set in the cell: Code: PICTUREHERE The text goes here, but when it's longer PICTUREHERE the remainder comes here PICTUREHERE PICTUREHERE PICTUREHERE Is it possible to achieve the top layout. If it is can someone help me please (it's probably staring me in the face) Thank you in advance Andy http://www.gaminghybrid.com/cms_design/ I would like to get the top tab table (#top-tabs) and the sub tabs (#sub-tabs) centered, instead of the semi-left alignment they are in. What is the best way to go about it? (I've tried <center> and text-align:center) Also, as you can see in FireFox, the bottom bite doesn't go to the bottom of the other two content bits, but it does in IE. Any help is appreciate Wasn't sure if this was a CSS issue or an issue with the HTML. I am not using a DOCTYPE declaration, so that may also be the issue. I have a portion of a page where I want an image to appear. It is a static image that sits in between 2 scripts. When placed, in both IE and Firefox, there is a 1-2px white space between it and the next TD. The original code was like this: Code: <td width="144"> <SCRIPT> write_minorlinks_xml() </SCRIPT> <img src="images/site/database.gif"/> <SCRIPT> write_dblinks_xml() </SCRIPT> </td> Which makes it appear as this in either browser: I added a div into there so now it reads: Code: <div class="db"><img src="images/site/database.gif"/></div> Stats as follows: image width = 144px I've tried changing the TD, Table and Image attributes both in the CSS and in the HTML itself. No change. It is also important to show what the scripts do. You can't view it in the source but if you could, it would show up like this: Code: <td width="144"> <TABLE class="links" border="0" cellspacing="0" cellpadding="0"> <TR><TD class="minor_link"><span class="minor_link"> <a href="url" target="_top">name</a></span> </tr></td></table> <img src="images/site/database.gif"/> // </td> Also to note, the XML in the script name is in the name only. And the class "minor_link" does not exist. I am thinking that the extra space could be because of the code the scipts put in there. However, Since putting the image code into a div, I changed the background color to #FF7A7A (which is the pink color of the trailing edge of the image, which matches the border to the right of it.) As a result, Firefox now displays it as: Which is fine for cheating sake, but it still displays as the first image in IE. Here is the portion of the CSS that concerns the div (which has made no change in either IE or Firefox) Code: div.db
{
background-color: #FF7A7A;
padding: 0px;
margin: 0px;
}
Any help or ideas would be appreciated. |
|||||||