|
HTML - Table Problems - Stacking
Hi Guys:
I am editing a html page for my boss but am having problems with the images stacking instead of being properly aligned. I can't figure it out for the life of me: http://www.nyu.edu/fas/dept/chemistr.../testpage.html Can anyone provide any advice on how to fix this? I am editing this page with Adobe Golive. Thanks! Similar Tutorialspretty basic question, never had trouble with this before.. but on my page http://nativboardriding.com/company.htm i would like the 3 div sections, ABOUT, CONTACT, and INTERNATIONAL DISTRIBUTORS to be stacked horizontally. they are all divs with width 200px styled to float left, and the sum of their widths is 600px (3 x 200px) which is well below the width of the div they are nested in (800px).. however the last 2 divs still drop down to the next line.. WHY!?? thanks in advance for the help Hi everyone, I'm building a webpage with the center portion as the content area. I have a background image for the entire page, then another background image for the content area, then more image links stacked on top of the content area. What I want to do is for the content area to fade in/out to different pages depending on which image link I click. What I did is have all the "pages" in one html file, separated by div containers. Clicking a link will navigate to that div container. Since each "page" is essentially just a background image with some content on it, I tried to stack all of them into the exact same spot, but I'm having trouble with this as all the pages currently are lined up vertically, going below my screen hidden from view. Here's an illustration of what it looks like: I got everything working now except for two annoying problems: - The fade out animation does not play when navigating to any page except the home page (navigating to home page the animation will play) - When I go to any page except home page, all the images will appear lined up vertically, causing the scroll bar at the side to appear briefly before disappearing, since having each page stacked and all visible will go beyond bottom of my screen, which is very unappealing Here is my code so far: I've simplified it to two content pages so it's easier to read. HTML: Code: <meta charset="utf-8">
<title>The Elements of Go</title>
<!--jQuery library-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<!--CSS for html-->
<link href="css/ElementsOfGo.css" rel="stylesheet" type="text/css">
<!--<link href="css/ElementsOfGoFonts.css" rel="stylesheet" type="text/css">-->
<!--FADE-->
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() { showWindow("mainpage") }, 2000);
$('.aboutbutton').click(function() {
hideAllWindows();
setTimeout(showWindow("aboutpage"), 2000);
} );
$('.mainbutton').click(function() {
hideAllWindows();
setTimeout(showWindow("mainpage"), 2000);
} );
function hideAllWindows() {
$('#mainpage').fadeOut();
$('#aboutpage').fadeOut();
$('#historypage').fadeOut();
$('#referencespage').fadeOut();
$('#strategiespage').fadeOut();
}
function showWindow(name) {
$('#' + name).fadeIn();
}
});
</script>
</head>
<body>
<div id="backgroundcontainer">
<div id="mainpage">
CONTENT GOES HERE FOR THIS PAGE
<!--image link to head to about page-->
<a class="transition aboutbutton"><img src="some image">
</a>
</div>
<div id="aboutpage">
CONTENT GOES HERE FOR THIS PAGE
<!--image link to head back to main page-->
<a class="transition mainbutton"><img src="some image">
</a>
</div>
</div>
</body>
</html>
CSS: Code: @charset "utf-8";
/* CSS Document */
/*The webpage background image*/
body {
background-image:url(../pictures/menubackgroundbubbles.png);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
}
#backgroundcontainer {
display:block;
margin-left:auto;
margin-right:auto;
}
/*background image for the content pages*/
#mainpage,#aboutpage {
background-image:url(../pictures/background.png);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
overflow:hidden;
display: none;
margin-left: auto;
margin-right: auto;
position: relative;
width:800px;
height:570px;
}
#mainpage img,#aboutpage img {
position: absolute;
border:none;
width: 119px;
height: 119px;
}
Thanks for any help! Hi there. I'm just starting off in web design, and I am learning as I go along. I have been working on my site all day using Dreamweaver, but there is still one thing I am trying to do without success. Basically I have one Large image on a page, and I want to stack four smaller images vertically next to it on the right hand side. (shown in the attached image) I tried using a table, but all the boxes had the same dimensions. If I use margin to align the pictures, I cannot move the third picture underneath the small one. I realize I am going about this all wrong, but I have no clue as to how to achieve what I am trying to do. All I seem to find on the net is how to wrap text around an image. For example, here's what I did: Quote: <img src="images/Main Window Gallery1.png" width="517" height="395" border="0"><img src="images/small window1 gallery1.png" style="margin: 0px 0px 303px 25px;” width="132" height="92" border="0"><img src="images/small window1 gallery1.png"" height="92" border="0" align="absmiddle" style="margin: 0px 0px 180px 0px;” width=" valign="center"132> Any help is appreciated. Thank you. This page works correctly in Firefox and Chrome, but not IE. What can I do to fix it? Many thanks. http://pivotanimator.net/faq.html i've got a little problem with an html table (sorry if i bothered you by adding colors to the table rows) Quote: <table border="1" width="900px" align="center"> <tr> <td bgcolor="#e6e6e6"> </td> </tr> <tr> <td bgcolor="#d2d2d2" width="900px" height="15px"> </td> </tr> <tr> <td bgcolor="#ff0000" width="900px" height="130px"> </td> </tr> <tr> <td bgcolor="#0024bf" width="900px" height="25px"> </td> </tr> <tr> <td bgcolor="#339df6" width="200px" height="340px"> </td> <td bgcolor="#ffcc00" width="700px" height="340px"> </td> </tr> <tr> <td bgcolor="#d2d2d2" width="900px" height="30px"> </td> </tr> </table> the table should look like this Basically I'm in the process of creating a website and things aren't going down so well on the coding front. http://blazeshare.net/ (temp URL) As you can see part of the table becomes stretched or w/e. I am in a rush so I've just used Dreamweaver and can't think for the life of me why its doing this. I tried valign on like every row/column in the damn code in another version to no avail, might have something to do with the way I sliced it. Been a while since I've attempted something like this so I'm a bit stuck. table code : http://blazeshare.net/nbdistro.txt As I said, messy coding because rushed using dreamweaver to make things easy. But apparently not.. lol. Anyone know the reason for this? Hi everyone, My website, currently at http://www.mlcprop.com/index2.html , is having issues. They a 1.) There is lots of extra space at the bottom when viewed in IE. 2.) The drop-down menu (click "apartments") doesn't display properly in IE; there is supposed to be a green background. It displays fine in Safari/Firefox/Opera however. 3.) I'm having trouble getting the bottom section to work properly. There's supposed to be a green gradient background for the content area that fades out to the page's brown background color. I did this by creating a central table cell with a tiling background image of the green gradient that's very tall and narrow. However, some pages are VERY long... such as thisone. How do I account for this? I tried matching the cell's background color to the image but it doesn't seem to match, or should I just make my tiling green background super long to account for this? I didn't want the file size to be huge. The lower left table cell ("footl") doesn't seem to display properly either. There's supposed to be an image there, a subtle shadow effect. It displays fine on the right ("footr"). Can anyone help with any of these? Thanks so much, Tatiana I am building an adwords landing page. The URL is he http://www.amanochocolate.com/adwords/dark-chocolate If you notice, I have put a text block on the right that is all black. I wanted it to have rounded corners so I used some graphics to achieve that. However, for some reason, the table cell color is showing up around the border even though I have no borders set for the table. (I.,e., border:0pt) Also, the border I don't want on the bottom is thicker for some odd reason. I've seen this before but have never figured out what causes this. I would simply like my table borders to be really clean (and gone). Any ideas? -Art I am trying out a couple of layouts for presenting some information in table format. Basically, two tables side by side. Table 1: 3 rows, one column fixed width. table 2: A calendar format with 3 rows. In FF they are displayed as I want them. Even if I include an overflow to force a horizontal scrollbar. Ok I know. But if horizontal scrollbars are not desired, then why do we have them? In IE the overflow is totally ignored. Should I happen to have in table 1, a 4th line of text, then the <hr> I use as a seperator, shows up floating beside table 1, not underneath it as it should. Easily fixed with a <br> but I feel that should not be necessary. In IE, A horizontal scroll bar is not displayed until the data is forced way beyond the edge unlike in FF. Then table 2 drops below table 1 which is not where I want it. In another format, I simply place table 2 under table 1. Which is ok but just doesn't look right. Anyone have a site that discusses this problem and how to work around it so that the browsers are satisfied and the tables show as I want? Okay so i was trying to do a site using photoshop then dreamweaver but it always messed up during the coding. So a nice fella here in htmlforums told me to try tables so okay i tried it and well it worked out really well for the most part. but it's just that it is my first time trying tables and this is what i want http://www.og-guild.com/ and this is what i currently have www.da-nexgen.com dont think im stealing their stuff it's a commonly used layout for guild websites. But in my site you can see things are not really all set fine for example my navigation menu has spaces between them when hey should be real close together. and the biggest problem i have is that i want to have all the site stuff in the middle in 800w and the outer background a different color sort of like the one in og-guild.com. can you guys please help me Hello all. Im totally green and just started last night on making a website. i am at the moment trying te make a nice layout but cant get the links in my menu bar to open up in the content table. can someone plz help me out?!? this is my code so far: index.htm <html><head></head> <frameset rows="20%,*"> <frame name="title" src="banner.gif"> <frameset cols="30%,*"> <frame name="menu" src="menu.htm"> <name="content" src="content.htm"> </frameset> </html> menu.htm <html> <head> <title>Frame Menu</title> <base target="content"> </head> <body bgcolor="#0099DD"> <tr><td><a href="content1.htm"><img border="0" src="homeknap.gif" width="80" height="21"></a></td></tr> <tr><td><a href="content2.htm"><img border="0" src="aboutknap.gif" width="80" height="21"></a></td></tr> <tr><td><a href="content3.htm"><img border="0" src="joinusknap.gif" width="80" height="21"></a></td></tr> <tr><td><a href="content4.htm"><img border="0" src="contactknap.gif" width="80" height="21"></a></td></tr> </body> </html> content.htm <html><head> <base target="content"> </head> ... </html> i can only get it to open my buttons in new windows, not on the main page as i want.... plz help me out. My site is not on the internet yet and wont be before its done sometime in the future. hope someone can help me out! I'm actually having the same problem I've seen wandering about, and I've already considered all the given advice and nothing seems to be working. The background image is split into a 3x3 table for easier loading, and now I'm getting a small gap between the rows themselves. This is the page: http://akito.clavis-sama.com/ I don't have any <p> tags and my margins are all set to 0 already. Yet I have those lines in the middle of my table for the header image. Any clue as to what the problem could be? Hi, and thanks in advance for those who have a look at this issue. As an amateur webmaster, this question may seem extremely simple, but after working on it a while I have not been able to make it work. What I have is a solid bar running down the left side of the page, and I only want it to take up 20% of the page, I would like to then create the main page contents to the right of that bar taking up the remaining 80% with a white background. I was able to get the table set up for the side bar, but could not seem to start another one for the rest of the page. Like I said, this is an amateur speaking, so the answer may be very simple. Here is the html I have written so far: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style href>a {text-decoration: none} </style> <title></title> <body bgcolor="#FFFFFF" text="#000000" link="#D8F0E3" vlink="#246B44" alink="#9ED9B8" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <style type="text/css"> body {text-align: left; } </style> <table width="20%" border="0" cellspacing="0" cellpadding="10" height="3" bgcolor="#006699"> <td align="center" valign="middle"> <font face="Verdana" size="4" color="#FFFFFF">Round Table Quotes Association <br> <style type="text/css"> body {text-align: left; } </style> </head> <br> <font face="Verdana" size="2"><a href="about.html" target="_blank">About</a><br><br> <font face="Verdana" size="2"><a href="cv.html" target="_blank">Authors Index</a><br><br> <font face="Verdana" size="2"><a href="submit.html" target="_blank">Submissions</a><br><br> <font face="Verdana" size="3" color="#FFFFFF">Table of Contents<br><br></font> Can someone tell me the code I will need to created the field to the right of the bar which will be inline with the bar and its contents, but filling up the remainder 80% of the page? Thanks so much, htmldad I am working on the webpage: http://www.ashleylandscaping.com All works well, until you click on the "Contact" button. If you look at the other pages, everything is displayed properly. On the "Contact" page you will see a "Contact Us Form". When i have this form/table on the webpage, the whole bottom of the page disappears. If I remove that form from the page, everything looks fine. It must be just 1 or 2 things i'm missing, but I cant see it for the life of me. For this page on my site: http://www.monkeygambling.com/new%20...ingindex.shtml I am having trouble with the borders on the central part. I have created an external css file with these commands table.border { border-top:1px outset "gray"; border-right:1px outset "gray"; border-bottom:1px outset "gray"; border-left:1px outset "gray"; } td.border { border-top:0px inset "gray"; border-right:1px inset "gray"; border-bottom:0px inset "gray"; border-left:1px inset "gray"; } I want a border with one px width like a normal table, but I don't want the cells to have horizontal borders where the <hr> are. I have got the table to have a border around it, but I want the double line with highlighted edges like in a normal table. If that makes sense could anyone help me? thanks I am making a table layout and am having a problem. There are two pictures enclosed.. one is how is should look (minus text) and the other is how it shows up in InternetExplorer Table Code: <body text=#FFFFFF LINK=#FFFFFF ALINK=#FFFFFF VLINK=#FFFFFF> <table width="770" valign="top" border="0" cellpadding="0" cellspacing="0" align="center" alt=""> <tr> <td colspan="4"> <img src="images/header_01.png" width="770" height="185" alt=""></td> </tr> <tr> <td colspan="2" valign="left" width="446" height="71" alt="" style="background: url('images/header_02.png') no-repeat; padding-top: 0px; padding-left: 446px; padding-right: 0px; padding-bottom: 0px;"> </td> <td colspan="2" valign="right" width="324" height="71" alt="" style="background: url('images/header_03.png') no-repeat; padding-top: 12px; padding-left: 10px; padding-right: 535px; padding-bottom: 0px;"> <!---------------------------------News-----------------------------------> <p class="marquee"> <Marquee direction="left" scrollamount="2" scrolldelay="50"> News at 11! </Marquee></p> <!---------------------------------News-----------------------------------> <td> <tr> <td width="229" colspan="1" valign="top" alt="" style="background: url('images/header_04.png') repeat; padding-top: 0px; padding-left: 80px; padding-right: 225px; padding-bottom: 5px;"> <!---------------------------------Navigation------------------------------------> <p class="nav">Main</p> <p class="li"> = <a href="index.html">Home</a><br> </p> <!---------------------------------Navigation------------------------------------> </td> <td class="padding" colspan="2" valign="top" width="282" alt="" style="background: url('images/header_05.png') repeat; padding-top: 40px; padding-left: 3px; padding-right: 3px; padding-bottom: 5px;"> <!----------------------------------Content--------------------------------------> <center>*insert title*</center> <!----------------------------------Content--------------------------------------> </td> <td colspan="1" valign="top" width="257" height="21" alt="" style="background: url('images/header_06.png') repeat; padding-top: 8px; padding-left: 0px; padding-right: 0px; padding-bottom: 5px;"> <!------------------------------------Info---------------------------------------> <center>Hey!</center> <!------------------------------------Info---------------------------------------> </td> </tr> <tr> <td colspan="1" valign="top" width="770" height="118" alt="" style="background: url('images/header_07.png') no-repeat; padding-top: 50px; padding-left: -1px; padding-right: 0px; padding-bottom: 30px;"> <!-----------------------------------Credits---------------------------------------> <center> Site is Copyright © of Concord Cosplay Group 2007<br> Layout by Joel Watson </center> <!-----------------------------------Credits---------------------------------------> </td> </tr> </table> </body> Hello, I have been fighting with this for several months. I am trying to get this to work across the board with IE and FF and was hoping I could get some help that I might be over looking. Please bare with me on this as it is detailed. Ok, this is a page that outputs Christmas displays users submit. Here is a sample page. http://www.mesquitechristmas.com/loc...y.php?id=%2021 Yes this page is XHTML Valid before we even start. Only problem I have in FF is that the Google Map will not center, but in IE6,7 it does. I have a div class assigned to it just to center it. Now I can assign a div align="center" but that will not validate. Code: div.c1 {text-align: center}
Other then that it renders and looks perfect in FF as usual because of it being a superior browser. Now in to my IE problems.... First, in both IE 6,7 if you look at the table that says "About this display..." you will notice a red line dividing each row. In FF this looks fine and works. But in IE if their is not content the line does not show in the entire row. What could be causing this? I would like this line to show regardless if there is content or not like it shows in FF. Lastly in IE6 only Below the "return to list" button their is a HUGE gap that does not show up in IE7 or FF. I have been trying to fix this for months and can not get it right. Any idea why this is happening? I am running out of time and could greatly use the help and suggestions. If you need me to post some code for these isolated problems I would be glad to. Otherwise you can just view source of the code to see it. -Thanks hey, simple question here i just cant get it to work though. i want to align some text to the bottom and to the right of a table <table width="100%" cellspacing="0" border="0" cellpadding="18" height="75%"> <tr> <td bgcolor="000000" width="10%"> <img src="graphics/spacer.gif" width="100" height="1"> </td> <td bgcolor="ffffff" width="90%" valign="top"> <h2>Welcome to the Darwin Soccer Clubs Official Website</h2> <hr color="black"> <p>Here we strive to bring you all the latest news from the club by keeping you updated on the results from all our games throught out the season, the roster so you will never forget when your teams, where your teams playing and who there playing. <br><br> Also check out the new <a href="p4potw.html">Player of the week</a> page to see if you have made it to number one!</p> <p align="right" valign="bottom"> THIS IS THE PART I CANT GET TO WORK</p> </td> </tr> i dont no why.. and try not to think about the other writing in the table this is for my studies i am doing. cheers </table> Hi All, I'm trying to show an image in a table but I end up with a bottom border of three to four pixels beneath it. Here's a simplified example of my table: Code: <table bgcolor="#00CC66" border="0" cellpadding="0" cellspacing="0"> <td> <img src="images/dummy.jpg" border="0"> </td> </table> You can see it in action here. The dummy.jpg is the grey box btw. |
|||||||