|
CSS - Converting Table To Css And Aligning Bottom Right
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> Similar TutorialsI 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 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). 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 -->
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;
}
Is there a way to align something from the bottom of the page? 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;
}
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? 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! 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;}
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 Can someone please help me, I am fairly new to web design, I have been reading about CSS being the better way of web design than using tables. I have got the hang of creating layout, columns, etc. But can someone please help me with the code below. I am trying to convert this so it appears in the centre of the page Code:
<TABLE WIDTH=766 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD><IMG SRC="images/spacer.gif" WIDTH=23 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=6 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=24 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=16 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=75 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=110 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=115 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=12 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=88 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=13 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_02.gif" WIDTH=91 HEIGHT=32 ALT=""></TD>
<TD COLSPAN=9 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=5 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_04.gif" WIDTH=92 HEIGHT=45 ALT=""></TD>
<TD COLSPAN=8 ROWSPAN=2 ALIGN=left VALIGN=top><img src="images/index_05.gif" name="service" width="145" height="45" border="0"></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_06.gif" WIDTH=91 HEIGHT=45 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_07.gif" WIDTH=110 HEIGHT=45 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_08.gif" WIDTH=115 HEIGHT=45 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_09.gif" WIDTH=112 HEIGHT=23 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_11.gif" WIDTH=38 HEIGHT=22 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=6 ALIGN=left VALIGN=top><IMG SRC="images/index_13.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><img src="images/index_14.gif" name="news" width="72" height="40" border="0"></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_15.gif" WIDTH=38 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_16.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_17.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_18.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_19.gif" WIDTH=83 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_22.gif" WIDTH=66 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_23.gif" name="quote" width="84" height="41" border="0"></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_24.gif" WIDTH=69 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_25.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_26.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_27.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_28.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_30.gif" WIDTH=23 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=6 ALIGN=left VALIGN=top><img src="images/index_31.gif" name="about" width="117" height="40" border="0"></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_32.gif" WIDTH=79 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_33.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_34.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_35.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_36.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_38.gif" WIDTH=37 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_39.gif" name="specials" width="103" height="41" border="0"></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_40.gif" WIDTH=79 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_41.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_42.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_43.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_44.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=9 ALIGN=left VALIGN=top><img src="images/index_46.gif" name="hosting" width="157" height="40" border="0"></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_47.gif" WIDTH=62 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_48.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_49.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_50.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_51.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_53.gif" WIDTH=72 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=7 ALIGN=left VALIGN=top><img src="images/index_54.gif" name="contact" width="130" height="44" border="0"></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_55.gif" WIDTH=17 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_56.gif" WIDTH=109 HEIGHT=44 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_57.gif" WIDTH=110 HEIGHT=44 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_58.gif" WIDTH=115 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_59.gif" WIDTH=112 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_60.gif" WIDTH=101 HEIGHT=44 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_64.gif" WIDTH=75 HEIGHT=21 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_65.gif" WIDTH=110 HEIGHT=35 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_66.gif" WIDTH=115 HEIGHT=35 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ROWSPAN=4 ALIGN=left VALIGN=top background="images/index_68.gif"><table width="85%" border="0" align="center">
<tr>
<td><form action="" method="post" name="form1">
Login <br>
<input name="login" type="text" id="login" size="12" maxlength="6">
<br>
Password:</span><br>
<input name="pass" type="password" id="pass" size="12">
<br>
<input type="submit" name="Submit" value="Submit">
</form></td>
</tr>
</table></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_70.gif" WIDTH=75 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=16 ROWSPAN=3 ALIGN=left VALIGN=top> <IMG SRC="images/index_71.gif" WIDTH=438 HEIGHT=77 ALT=""></TD>
<TD ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top></TD>
<TD ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_80.gif" WIDTH=129 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=24 ALIGN=left VALIGN=top></TD>
</TR>
</TABLE>
Any help please??? My current HTML looks like this... Code: <table width="90%" align="center"> <tr class="gen_small" height="25"> <td colspan="5"><b>Test Category</b></td> </tr> <tr class="gen_small" height="50"> <td width="50" align="center"><img src="./templates/images/forum_open.gif" border="0"></td> <td><b><a href="view_forum.php?f=1">Test Forum</a></b><br>This is a test forum</td> <td width="200" align="right"></td> <td width="50" align="center"></td> <td width="50" align="center"></td> </tr> </table> I have some ideas on how to get a similar layout but how do i ensure the distances specified by the widths are also kept intact? Hi there, I have a table which displays some links in columns, but I cannot work out how to convert it into CSS. This is the table code: PHP Code: <table width="100%" border="0" cellpadding="2" cellspacing="0" class="normal_12_blue"> {section name=row loop=$row_submenu_id} <tr> <td><a href="{$row_submenu_link[row]}" >{$row_submenu_name[row]} </a></td> {section name=col loop=$col_submenu_id[row]} <td><a href="{$col_submenu_link[row][col]}" class="normal_12_blue">{$col_submenu_name[row][col]} </a></td> {/section} </tr> {/section} </table> I tried using plain <div> tags, but it doesn't put them in columns. Any ideas how I can convert this? I haven't had much luck on converting the html table with an image in it to a css <div> that can look like a html table in a way. Old Way Code:
<table border="1" cellpadding="5" cellspacing="2">
<tr>
<td>
<img src="test.gif">
</td>
</tr>
</table>
New Way Code:
<style type="text/css">
div.divTest
{
margin: 12px 0px 0px 30px;
padding: 8px 8px 8px 8px;
border: 3px double #000000;
/* width: 0px; */
}
</style>
<div class="divTest">
<img src="test1.gif">
</div>
Since the html table is for displaying the data and the image isn't one of them as stated by the w3.org's rule. Thanks.. 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. 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 I can't post URLs here, so please copy/paste the URL below. Look at the "email to friend" and "post to facebook" links on this page (url) proofs.gentryfoto.com/p/rswedding/1281copy27 (/url). My goal is to: 1. underline the text only, not the icon. 2. center the icons over the large image on the screen 3. Have it look the same in IE and FF. Currently, the icons are in the same row in IE, but are breaking into multiple lines in FF. I want them all on one line. What am I doing wrong? I am doing all kinds of experiments but can't get this right. Thanks. 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) 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? 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 |
|||||||