|
HTML - Need Some Help With Combining Fixed And % On Tables
i attached an image that should give an idea of what im looking for. ive tried EVERYTHING and have no been able to get this to work. maybe dreamweaver just isnt good for this type of things? thanks in advance.
the website and pics are in the attached zip file Similar TutorialsIs it possible to combine ie's conditional if's? I basically want (without the use of js) to be able to send a message to IE5 / 5.0 / 5.5 / 6 users. But i want to keep HTML download to a min.... Therefore can i combine the conditional iff's? Is it possible to have an image, that when rolled over changes, and have the changed-rollover image be an image map...without using any java? I know how to do various image rollovers (both with one image that "moves" and two that switch) and I know how to make an image map. I just don't know how to combine them into one thing. Is it possible, and if so, how would I do it? Thanks! I have an html web page that is the look I want, we'll call it script A And I have a log-in script with the functionality I want, we'll call it script B I'd like help combining the top part of script A into the top part of script B, so that the functionality script (B) will have the header look of script A. So below you'll see the code from the top of script A & B. I'd like the header and images from script A to appear/fit into the top part of script B. Thanks for your help. Script A Code: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WTAhtml</title>
<style type="text/css">
body {background-color: #ebebeb;}
#container {
width: 830px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
}
#left_column {
border: 1px solid #999999;
float: left;
width: 230px;
margin-top: 5px;
margin-right: 10px;
margin-left: 20px;
margin-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
}
#header_table {
width: 100%;
border-collapse: collapse;
}
.header_top_tdl {
padding: 0px;
margin: 0px;
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #b7b7b7;
background-color: #800000;
width: 150px;
border-collapse: collapse;
border-right-width: 0px;
border-left-width: 0px;
}
.header_top_tdr {
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #b7b7b7;
background-color: #800000;
border-right-width: 0px;
border-left-width: 0px;
}
#right_column {
float: right;
width: 500px;
padding-right: 15px;
}
#footer {
margin: 20px;
padding: 3px;
clear: both;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #800000;
font-size: 14px;
}
.white_text {
background-color: #800000;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
.form_row {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.link_p {
margin-left: 20px;
vertical-align: middle;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.link_p img {
vertical-align: middle;
margin-right: 25px;
}
.link_p a {
text-decoration: none;
color: #000000;
}
.link_p a:hover {
color: #009933;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<table id="header_table">
<tr>
<td class="header_top_tdl"> </td>
<td class="header_top_tdr"> </td>
</tr>
<tr>
<td colspan="2"><div align="center"><img src="images/img11.jpg" height="134" width="461">
<img src="images/topimg2.jpg" height="160" width="309"></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="content">
Script B Code: <html><head>
<title>TEST</title>
<script src="java.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="styles.css">
</head><body bgcolor="#ffffff">
<br />
<table width="75%" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border: solid 1px;">
<tr>
<td style="padding: 20px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td>TEST</td>
<td align="right"> </td>
</tr></table>
</td>
</tr></table>
<br /><br />
<table width="75%" align="center" cellpadding="0" cellspacing="0" bordercolor="#800000" style="border: solid 1px;">
<tr bgcolor="White">
<td>
<table height="26" cellpadding="0" cellspacing="0" border="0" width="100%" bordercolor="#800000" background="img/_example/bg_tb1_.gif" width="100%"><tr>
<td width="200"><img src="img/_example/pixel.gif" width="200" height="1" alt="" border="0" /></td>
<td width="100%">
<table border="0" width="100%" align="right" cellpadding="2" cellspacing="0"><tr>
</tr></table>
</td>
</tr></table>
</td>
</tr>
<tr><td height="1" bgcolor="#d4d4d4"><img src="img/pixel.gif" width="1" height="1" alt="" border="0"></td></tr>
<tr>
Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts Hello. I need some assistance in figure out how to make a fixed/linkable/image. I used this code here
HTML Code: <body style="background-attachment: fixed; background-repeat: no-repeat;" background="XXX.jpg"> which worked great in keeping its place. Then I added HTML Code: <a href="http://www.davesite.com/"> before and after but no luck. Im trying to get that link to work for the background too, but its not working out at all. "Sadly no HTML skills whatsoever" hi guys im after a simple code so that the background on my forum is fixed and only the foreground moves up and down, someone must know iv looked all over the place and cant find how anywhere,someone help please Cheers Jacob Hi everyone!! I have a div box that has a fixed position so it is always there when you scroll down a page.... but as I have a long footer, the fixed div box goes over the footer when I scroll to the bottom of the page what is the best way to scroll a div box within another div box, so the div box is visible and scrolls with the page up to where the footer div starts? hope that makes sense? many thanks for you're help. I have a control on a pop up that i cant seem to get rid of the scroll bars....How do you create a pop up window with no scroll bars I want it to use the scroll bars on the control instead....any help with this issue?? Hi i have a table with a picture within its only cell . How can i lock the size of the table so that it wil not get any larger should a larger image be put in it? I have tried setting the width and height to a fixed value but that does not seem to do keep it fixed. Ideally i would like the image to resize itself to match the maximum values of the table but this i suppose will probably be a good bit harder? Howdy, I wanted to have a fixed bar at the bottom of website just like Facebook. Can anybody know how to do that? Bar should be customizable as per my requirement. Thanks in Advance. http://junksen.tumblr.com/ i have this blog, and i want the right and left bars to be fixed so that when i scroll down/up, it only scrolls down the middle post area. is there any way to do this? Hi there, I'm trying to create a center column that holds information on my website that is centered to the page, but anchored in place so that if you re-size the window no other instances will overlap. I've taken the time to scrounge around the forum for an answer, but to no avail. I've bounced between using divs and tables for the past few days before finally realizing that I should probably ask for help - I'm a few weeks old to html, so I apologize if my question is somewhat rudimentary. I'm trying to find a way around actually cranking out the numbers and manually placing the images in the center. //EDIT// Here's the code I'm using in the beginning, with css: table { margin-left: auto; margin-right: auto; } And here is my site if you want to see what I mean: www.crazybunny.exofire.net/ Thanks! I used this code here but it doesnt seem to work for GoogleChrome browser well, as it did for the others. Is there a code that will work for all the browsers? HTML Code: <html>
<head>
<script language="javascript">
function randomBackground()
{
var myImages = Array();
myImages[0] = 'xxx.jpg';
myImages[1] = 'xxx.jpg';
myRandomNumber = Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'URL('+myImages[myRandomNumber]+')';
}
</script>
<style type="text/css">
body
{
background-attachment: fixed;
background-repeat: no-repeat;
}
</style>
</head>
<body onload="randomBackground();"></body>
Hello, I am new in html, please could you advise with the following? In my page I have a caption and an iFrame where the height is big enough so that the scrollbar is never displayed - deliberately. I can scroll the page including the iFrame content up and down normally - cool. Now I fix the caption. When scrolling, the iFrame content goes over the caption. I want the iFrame content to stay below the caption. How to do this? I don't want to use iFrame scrollbar but the window scrollbar for scrolling. Thank you! HTML Code: <style>
fixed{position:fixed;color:red;}
</style>
<body>
<fixed> <h1>FIXED CAPTION</h1> </fixed>
<br><br><br>
<iframe src="test.html" width=815px height=2000px name="iFrame1" scrolling="auto"
frameborder="0" allowtransparency="true">
</iframe>
</body>
Without using an Iframe is it possible to make the header and footer fixed and keep it stable? I found this site with some ode but it s from years ago and not sure if it is correct way now. here is a link if it is allowed: http://limpid.nl/lab/css/fixed/header-and-footer I figure there is a reason I rarely see anything using a fixed header. Im not sure if I have ever seen a functioning website with a fixed scrollable header ever. My reason for asking is to try and make a site where the navigation stays fixed on top and auction listings will scroll underneath them. Sorry if the link is inappropriate CODE: <!-- IE in quirks mode --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <title>Fixed header and footer</title> <style type="text/css"> body{ margin:0; padding:header-<length> 0 footer-<length> 0; } div#header{ position:absolute; top:0; left:0; width:100%; height:header-<length>; } div#footer{ position:absolute; bottom:0; left:0; width:100%; height:footer-<length>; } @media screen{ body>div#header{ position:fixed; } body>div#footer{ position:fixed; } } * html body{ overflow:hidden; } * html div#content{ height:100%; overflow:auto; } </style> <div id="header"> header </div> <div id="footer"> footer </div> <div id="content"> content </div> |
|||||||