|
HTML - Table Scaling
I have a question about this web page:
http://moparch.com/_moparch/architec...piastudio.html Right now, when you make the browser window smaller in the horizontal direction the image scales to fit the window. However, when you make the browser smaller in the vertical direction the image does not scale. How do I get the image to scale when I make the browser smaller in the vertical direction? Thanks in advance. Similar TutorialsI know there are a lot of table scaling issues out there, but I can't find one with my specific problem. I've set up this page made of a simple table with 9 cells. 3 Rows and 3 columns. All the cells have jpegs in them except the center one. That has a flash swf. My end intention is to have this without any scrollbars. I already know how to take those off, but I've left those on until I figure out this problem so that you can scroll around the page to see what I'm talking about. http://www.cachemeadow.com/beta_website/index2.html MY ISSUE: I'm wanting the viewer's screen to automatically center on the flash movie (the center cell). I would like all other cells in the table to 'bleed' off screen, thereby accommodating viewers with higher/lower screen resolutions. This also includes the first cell (top left) to bleed off the top-left so that the screen can be centered on the center cell. I would also prefer to make the page so that if anybody views or scales the entire window that it would always center in on the center cell (flash swf). I don't know very much code. I'm more of a graphics guy. Please help. Here's my existing code: Thank you. I've searched around quite a bit, read various articles and so-on and only really come to the conclusion that this is a lot harder than it should be! What I have is a simple page for a PHP script, it has a little form for entering keywords, and displays an image above this form. Now, what I want to do is place these in a table, and have that table resize to fit the viewable area of the user's browser-window. So, what I have is a table with three-rows: The title of the image The image itself The form for entering image keywords Now, what I would like to do is have the image scale to fill the middle cell, which by default eats up all available space leftover by the form and title cells. However, this isn't happening, I enter a height of 100% for the image but it seems to be using some other container to get its height. I'm generally well-versed in HTML, but this one has me stumped! Any help is appreciated, here is the basic HTML I'm using for what I had thought would be a simple page Code: <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<meta name="author" content="Haravikk.com" />
<title>Add keywords</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
text-align: center;
}
tr, td, textarea { width: 100%; }
table {
width: 99%;
height: 100%;
margin: 0 auto 0 auto;
}
table, td {
border-width: 0;
border-spacing: 0;
padding: 0;
}
#image { height: 100%; }
#tdTitle { height: 5%; }
#tdImg { height: 75%; }
#tdForm { height: 20%; }
#formText { width: 100%; height: 75%; }
</style>
</head>
<body>
<table>
<tr>
<td id="tdTitle"><b>placeholder.png</b></td>
</tr>
<tr>
<td id="tdImg">
<img id="image" src="http://haravikk.com/placeholder.png" alt="" />
</td>
</tr>
<tr>
<td id="tdForm">
<form action="keywords.php" method="post">
<textarea name="keywords" id="fmrText"></textarea><br />
<input type="submit" />
</form>
</td>
</tr>
</table>
</body>
</html>
Now, I don't know if I could eliminate the table in favour of divs and do this, any suggestions to make the above html work, or to re-write it are welcome! The image provided is just to illustrate the problem quick intro~ im an artist making a unique gallery. i did have someone else helping out n tried doing things in wordpress but that was getting to be too much trouble (especially after a promotion in their dayjob left me effectively alone with a site beyond my understanding). so i'm striking out to make it look as i want in plain ol' html first, and will tackle the database and backend stuff later. http://www.gaudiepod.org.uk/light/al.../test****.html ^ this example uses a few different techniques from my explorations of the possibilities. http://www.gaudiepod.org.uk/light/al...t****beta.html ^ this example is closer to what i am looking for (ignoring that it's all the same image for the moment). the images aren't merely cell-backgrounds, and so can be turned into clickable links without messy text (which was there just to give something that i could turn to links to lead to the fullscreen images), however all is not yet quite right.... ...when the window is large enough, the images in the grid show correctly, filling the screen. (hurrah!) but squish the window too small, and the cells refuse to shrink further than 100% the image's original size, and worse, the "fill table to 100% of window" breaks, and a scrollbar appears. i was wondering perhaps if i discovered the code to disable the scrollbar, that would force the table to remain constrained to the window's edge again. (would it?) but i'm guessing this cant be the whole solution, given the behavior of the table as is. what i'm going for, is a grid of 9 clickable images , that always scale to fit the window (or frame). (tho of course, the skills here will be scalable/transferable to tables any number of cells, not limited to just a 3x3 table of 9 cells) how can i make sure the table remains inside the window (no scrollbars!), and the images can scale down to smaller than original size? if i've messed up some other way (like left some link pointing to my local files or something), do please let me know. My question is regarding this gallery that I put together: http://moparch.com/moparch/architecture/ds.html My goal is to make it so the image scales with the size of the browser window. Right now the image only scales as the page shrinks horizontally. When the page shrinks vertically the image does not change size. The page is made up of two flash movies, one for the images and one for the text and arrows. In dreamweaver I have set the image flash movie (the one on the left) to scale to 100% width and 100% height. I have set the text movie to be a fixed size. If anyone could explain how to get my image movie to scale as the browser window shrinks both horizontally and vertically I would greatly appreciate it. thanks Looks fine. Does not look fine. The first picture was fine because it was viewed with a 1024x768 resolution(which is the resolution that I'm working on my website with). However, any higher resolutions, and you'll see that the video goes out of place and moves too much to the right(second pic). I need to make it so that the video scales with all resolutions so it stays in place like in the first picture, no matter what the resolution is. Can anyone tell me how to fix this? Please be specific, i.e. what code? Thank you. hi i am building my site in flash cs3 , and when i test it in the browser,it is scaling depending how big is the browser,and I would like that the size of my web is fixed-not scaling .( because when someone resize the browser some images are getting really big and bad quality. So how can i make that my website is not scaling please? when i exported it from flash from the export options i choose NO scale,but its not working. so please help me what can i do? thanks Hey everyone, I've been redesigning this website I did for a local restaurant, trying some different takes on things (not designing the entire website using framesets and tables), and I'm still a bit confused. I'm currently on a 1280x800 resolution, Windows Vista and Firefox 3, and designing the website in I suppose what would be what looks best in THIS resolution. However, when I switch to 1024x768 which a lot of people are still using, the website is offset to the right due to my 'margin-left: 200px;' in the container. How else can I go about centering this page so that it is in the middle for most/all resolutions? The link is he http://www.totaros.com/indexnew.aspx So far the index, directions, and cuisine pages are fresh. All of the other links should point either dead or to the old website's pages. Thank you for taking the time to read my message, and thanks for any help in advance! hey all, sorry if you get alot of annoying questions on myspace so ill try to make this easy I have created an image with the scale of 1024x768 to put on my page. however, i have a monitor that runs on a 1440x900 resolution. of course i can change the image to fit my screen but then, it wouldnt fit the average users screen very well. Currently i have the image pushed to the left, but i can get it centered horizontally with the code Code: background-position: 200px 0px; but vertically im having a bit of trouble. heres an image of what im seeing. http://img409.imageshack.us/img409/1851/img1wz6.jpg the words on the right are suppose to read "Echoes From Malta" however the "ta" in "malta" is cut off the bottom of the page. thats what the problem is from my end of the picture. from my friends view, who is on a smaller screen (i dont know the size) sees the image as being to big for the screen compared to me seeing it so small. so in short, how can i get the image to fit the screen correctly for me, and get it to scale appropriately for viewers varying resolutions. thx for your help Hi all Im having this weird issue.. On my site, under pics http://www.2muchspiff.com/weedimg/ some of the image are large, and when you zoom in on them, and zoom out, it makes the image all weird. How can i fix this? thanks Hi, I'm doing some tweaks to my tumblr layout, and I'm really, really bad at this. What I need help with is the image scaling. The layout has standard 550 width for images posted. However, this makes all images this width automatically. For photos that are bigger than 550 px it's fine, they can be made smaller, but I wish to remove the feature that makes smaller photos being scaled up. F.ex. if I post an image with 200 or 300 px width, I don't want it to be scaled up to 550 px, I want it to stay in it's original, smaller size. How can I do this? Here's my code for images: {blockhoto} <div id="entry"> {block:IndexPage}<a href="{Permalink}">{/block:IndexPage} {blockermalinkPage}{LinkOpenTag}{/blockermalinkPage} <img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{blockermalinkPage}{PhotoURL-HighRes}{/blockermalinkPage}" alt="{PhotoAlt}" max-width="550"/><div style="margin-top:-4px; margin-bottom:-4px;"></div> {block:IndexPage}</a>{/block:IndexPage} {blockermalinkPage}{LinkCloseTag} {/blockermalinkPage} {block:Ifshowcaptions}{Caption}{/block:Ifshowcaptions}</div> Thanks in advance. /V Please see the following web page: http://moparch.com/moparch/architect...ucture/ds.html My question is: how do i get the flash movie (containing the pictures) to scale when the browser window gets smaller in the vertical direction? Right now it scales fine in the horizontal direction, but stays the same size when you make the window smaller in the vertical direction. Thank you in advance. hey i need some help to scale my webpage to fit all screens. a mate of mine told me to use this code, however it dosn't work Code: <html>
<head>
<style>
span.site {
margin-left:auto;
margin-right:auto;
text-align:left;
width:1680px;
}
</style>
</head>
<body>
<span id="site">
blablabla
</span>
</body>
</html>
how should i solve this problem? Hi there, I recently made a "mobile" version of my business' website, and am using some javascript to redirect screen sizes smaller than 480px. The problem is, the mobile page I designed looks tiny on iPhones, even though in a regular browser it looks very similar to other site's mobile pages (which look great on the iPhone.) If someone could give me some advice as to why this is happening, I would appreciate it very much. I found a site that looks and acts just like how I want mine to: http://mobile.walmart.com/m/home And here is mine: http://www.sandiegopcsupport.com/mobile/ Thanks I would like to know if there is such a thing as a tag within a table, that can collapse if the next table within that prior one gets too big to center? Here is an example of a part of my code: Code: <table style="width:757; border-style:solid; border-width:thin; margin:0 0 15px 0">
<tr><td class="spb-category" width="750" style="text-align:left;" colspan="3">Title of this category</td></tr>
<tr>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=103">large size book title with author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=187">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=197">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table> </td>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=101">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=188">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=120">Medium sized boot title</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table> </td>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=102">a very long title of a book which includes the author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table>
</td>
</tr>
</table>
1. I want to center each column so that the first letter of each book title is lined-up, but that the longest title on each column has equal space on both left and right. 2. If you look at each column, the width is about 245px. With regard to the first book title in the first column, I have 50px that is extra, therefore I'd like to automatically add 25px to the front of each one of the books for that column. 3. On the second column, there is about 80px extra, therefore I'd like to auto-add 40px to the front of each book in that column. My problem is that I don't want the column centered individually because then I will lose the straight line that I'd like each book to be on top of each other as it starts the line. I tried: style="margin-left:20px" and style="padding-left:20px" but when the title got too long it would not auto-collapse the left side, I want it to collapse! I want one tag that I can insert evenly on every section to get the push to the right an even amount of spaces for every book on each column. If it comes down to it, I wouldn't mind sacrificing that each column gets auto aligned to what is necessary for its own column. So if I have to use one number, say 30px, for the whole webpage, then ok, I'd do it. My problem is that sometimes the 30px empty filler space for the left, in order to push the title to the right, is not enough space for a very long title and it winds up sending half the title to the next line, which I don't want. This code is a list of books that spans about 20 categories and about 400 book titles. Thanks in advance for any help you might offer. The table itself is working fine, but the size of each cell is not correct in Firefox. Here is a screenshot of what is happening: http://img35.imageshack.us/img35/1938/tabletroubles.gif Here is the head of my page, the css for the table is he HTML Code:
<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center}
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;}
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;}
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;}
</style>
and here is the table code, located in the body of the page: HTML Code: <div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0"> <TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td> <div id="cat"> <table width=900; cellpadding:0px; cellspacing:0px> <tr align=center> <td width=20%> <font face=tahoma><a href="home.html">Home</a></font> </td> <td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> <td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> <td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> <td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> </tr> <tr> <td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> <td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> <td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td> <td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td> <td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> </tr> </table> </div> </td></tr></table> </div> A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else. If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks! I will be brief in hoping that the issue does not require a thesis to properly fix. I'm dealing with tables within tables..within tables. In one instance, I have a 2x1 (row by column) table inside another table. So, we'll call the inside table "B" and the outside table "A". Table B is centered inside a column in Table A. I'm trying to maximize the space, but nearly nothing works. Setting Table B height=100% does nothing. The only thing that works is setting the height=N px, where N is a number. This is no good, as I want to the site to work on all resolutions. I want it to be proportional. How can I fix this? Here's what I'm dealing with, visually: Any help would be welcome. Thanks. Here is an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code:
<html>
<head>
<style type="text/css">
table.nospace {
padding: 0; margin: 0;
border-collapse: collapse;
}
table.nospace tr {
padding: 0; margin: 0;
}
table.nospace td {
padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>
<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
</TR>
</TABLE>
</body>
</html>
I have a list within a table and much of the content has links to two different javascript codes. One is a popup javascript to so that I can control the window size and the other is a toggle.display javascript to show/hide specific details about my list. The scripts run fine, but for some odd reason the content in my table gets cut off randomly towards the end of the list. I went through to make sure that I didn't have any div tags nested.. etc.. and i'm now at a complete loss as to why my content within the table gets randomly cut off. Any help would me much appreciated. The link for the site is he http://netimpact.org/displaycommon.c...rticlenbr=2440. You'll notice at the very bottom of the table it randomly stops.. Hello, I am newbie, just has started my adventure with html. I tried to make an easy static site, without any additional thingd, but it occured a problem. 1. I mean, as I put table in table because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise) 2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?) -probably it is not this- because I have just changed into gif, and it is still the same 3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website? Here I post my website: http://members.lycos.co.uk/aniaacolgate/ Could someone take a look on the code, and will be so kind to correct me? It is a basic easy site of very begginger I just wanted to make a shape like this: - top: a banner - buttons in horizontal and vertical way - under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons Thank you so much in advance for reply Sorry for mistakes in language It's hard to explain, but basically I want to achieve creating a smaller file looking portion of my site, with a larger around and tabs. Basically this: I currenty just have the outer red table, using .gif's to round the corners. I tried copying the code again to place in the middle of the red table code and it doesn't work. Any help to achieve this effect would be great. Here is the code I am using: PHP Code: <table width="450" cellpadding="0" cellspacing="0" border="0" style="background-color: #086591"> <tr> <td width="14"><img src="images/top_left.jpg" width="14" height="14" border="0" alt="..." /></td> <td width="172"></td> <td width="14"><img src="images/top_right.jpg" width="14" height="14" border="0" alt="..." /></td> </tr> <tr> <td></td> CONTENT HERE <td></td> </tr> <tr> <td><img src="images/bottom_left.jpg" width="14" height="14" border="0" alt="..." /></td> <td></td> <td><img src="images/bottom_right.jpg" width="14" height="14" border="0" alt="..." /></td> </tr> </table> Thanks for any help. |
|||||||