|
HTML - Basic Question About Tables
I want to create a two column table that, in one of the rows, has a large picture in the second column. I wanted to "wrap" the picture in a <div> and give the div scroll bars so the user can scroll horizontally and vertically to see the entire picture, but still keep the width of the table as the same size as the width of the browser window.
The div part seems to work fine. The large picture appears in the smaller div and the div has the scroll bars that I want. But, the table is still sized to contain the ENTIRE width of the photo, so the other rows in the table go off the edge of the browser window (because the image is wider than the browser window). Is there a way that I can limit the table width to only be the width of the browser, and have a large photo contained in a scrolling div, within one of the table rows. I will include some basic HTML code to demonstrate the problem. Just insert a path to some large image you might have, for testing, into the image tag's src property. (the image I am using is 1600x1200) Thanks, in advance, for any help you can provide. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test a Large Image in a Table</title> </head> <body> <table style="border-bottom-width:thin"> <tr style="width:300px;"> <td style="width:20%; background-color:gray"> Title #1 </td> <td style="width:80%; background-color:red""> Why does this row go past the edge of the page? </td> </tr> <tr style="width:300px;"> <td style="width:20%; background-color:gray"> Title #2 </td> <td style="width:80%"> <div style="overflow:auto; max-width:60em; min-width:15em;"> <img src="" alt="some large image" /> </div> </td> </tr> </table> </body> </html> Similar Tutorialsedit: Problem solved, how do I delete this thread? I normally work in Flash which is much more intuitive for me. I am making and effort to design more in HTML. Here is the most basic of questions.. When doing designs in Photoshop or Illustrator, what is the best way to save slices. Gif or Jpeg. Are there tutorials or personal comment on the forum about the best practice for slicing sites. Thanks! Hi, I am creating a one page site that uses an iframe to display the other pages. So I create an index.html with an iframe in it and drawing an initial 'page': <iframe src="pages/welcome.php" name="carter-fairfax" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="900px" height="910px"></iframe> I then create another 'page' on the site and link to it using the following: <li><a href="pages/who-we-are.php" target="carter-fairfax" frameborder="0" scrolling="no" width="900px" height="500px">who we are</a></li> Everything displays fine except that there is a good deal of white space at the bottom, obviously because there is a difference in the height of the iframe - is there an elegant way to get round this problem. I do have the containing div height set to auto. Many thanks, Keith Hulse hi, I'd like to say that I'm extremely new to xhtml and CSS, so please bare with me. My question is simple, consider I have this code HTML Code: <table class="mainTable" border="0" cellspacing="30">
<tbody>
<tr>
<td>
<p><b><a class="button" href="l1.html"
target="_blank">Link1</a></b></p>
</td>
<td>
<p><b><a class="button" href="l2.html"
target="_blank">Link2</a></b></p>
</td>
<td>
<p><b><a class="button"
href="l3.html" target="_blank">Link 3</a></b></p>
</td>
<td>
<p><b><a class="button"
href="l4.html" target="_blank">Link 4</a></b></p>
</td>
</tr>
</tbody>
</table>
1) what does target="_blank" mean? 2) My intention is to place this table in the upper center of the screen. How can I center the table ? 3) The height on each cell in this table is huge, how can I decrease the height of the cells? Thanks Hi guys, I am trying to help my friend figure out what is going on with his (VERY BASIC) website. I believe that he created it using dreamweaver originally, and then tampered with the code a little. The problem is as follows: The website seems to display perfectly as intended on mac ( safari) however when viewed on PC wit internet explorer the frames do not not work properly, They are opening in different windows etc. I know that no-on ould ever recommend building a site like this with frames, but would recommend iframes etc, however i ws wondering if there is a flaw in the code that can be fixed to resolve his problem simply? Thanks for even taking the time to read this, any helpful advice would be most appreciated! the code is as follows: The code titled "main" the main piece of code, then the coodes titled "top", "middle" and "bottom" are the codes for the respective frames. MAIN: -------------------------------------------------------------------------------------------------------- HTML Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> </head> <frameset rows="67,*,74" framespacing="0" frameborder="no" border="0"> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="topframe.html" name="topFrame" scrolling="No" noresize="noresize" name="topFrame" /> </frameset> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="midframe.html" name="mainFrame" name="mainFrame" title=""mainFrame" target="_self" /> </frameset> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="bottomframe.html" name="bottomFrame" scrolling="No" noresize="noresize" name="bottomFrame" /> </frameset> </frameset> <noframes><body> </body> </noframes></html> TOP: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #A890AE;
background-image: url(Images/maze%20strip%20top.jpg);
}
.style1 {font-size: 8px}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
-->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'Images/image-g.gif'); MM_preloadImages('Images/discography-black.gif','Images/images-black.gif','Images/text-black.gif','Images/download-black 45pt.gif','Images/download-g.gif','Images/download-b.gif','Images/image-g.gif','Images/text-g.gif')">
<div align="center"><img src="Images/divider.gif" alt="." width="65" height="33" /><a href="download.html" target="mainFrame" onmouseover="MM_swapImage('download','','Images/download-g.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/download-b.gif" name="download" width="205" height="10" border="0" id="download" /></a><img src="Images/divider.gif" width="30" height="33" /><a href="images.html" target="mainFrame"><img src="Images/image-b.gif" name="images" width="124" height="10" border="0" id="images" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'images',/*url*/'Images/image-g.gif')" /></a><img src="Images/divider.gif" width="30" height="33" /><a href="text.html" target="mainFrame" onmouseover="MM_swapImage('text','','Images/text-g.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/text-b.gif" name="text" width="104" height="10" border="0" id="text" /></a><img src="Images/divider.gif" alt="." width="65" height="33" /><a href="midframe.html" target="mainFrame"></a></div>
</body>
</html>
MIDDLE: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>untitled</title>
<style type="text/css">
<!--
body {
background-image: url();
}
.style1 {
border-width: 0px;
}
-->
</style>
<base target="_self" />
</head>
<body>
<div align="center">
<p> </p>
<p><a target="mainFrame" href="download.html">
<img alt="" src="Images/doomsayercoverthumb.jpg" width="319" height="319" class="style1" /></a></p>
<p> </p>
<p> </p>
</div>
</body>
</html>
BOTTOM: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>untitled</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
background-image: url(Images/maze%20strip%20bottom.jpg);
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 13px;
font-weight: bold;
}
.style2 {font-size: 10px}
.style4 {font-size: 12px}
-->
</style></head>
<body>
<div align="center" class="style1">
<p class="style2"> </p>
<span class="style4">last updated 08/12/2011</span></div>
</body>
</html>
Hi! This is my first post here. I am a part time web designer, (I must admit, better with the graphics than the coding). I am designing a page and I want the background to be black for say 1000 pixels down, and then white after that. How do I accomplish this? Does anyone know an easy way to create backgrounds with several tones? Thanks... Cosmos I am in the process of writing a spell-checker in PHP, but repeatedly stumble due to my less than perfect knowledge of HTML basics. (1) What's the most straightforward way to open a second page on top of the currently active one? Is it via JavaScript, or can it be done using HTML itself? (2) If I need to update a text area on the original page at the time I close the overlying one, is this again best done by JavaScript? My aim in both of the above is to avoid adding any code to the underlying page, other than the addition of a "SpellCheck" button and the coding associated with that. Many thanks for any pointers. Hi, In microsoft word you can make the text go all the way across the page so that the beginning of each line and end of each line are inline with the one above and below, if you know what I mean. I can't remember what it is called. But it basically adds small amounts of space between each letter so it goes all the way across. How is this done in HTML/CSS if it can be done? Thank you as always, Ash Hi all im really new to html. I guess this question is really basic to the expert html ers but just need a bit of help. I want to add some text say i got a <p> tag and want to write just a sentance such as .. <p>I am learning html, it uses tags like this <a,b> which can load images etc. </p> of course a,b isnt a tag, but if i load this basic text in a web browser it would ignore the <a,b> and come up as validation error in the validator. So pretty much is there a way around of displaying <any letters or words> without the browser thinking its some sort of tag? thanks for the help! Im designing a new site and I was kind of wondering a few things that I was hoping to get some answers to. I wasnt sure where this should be posted so if its in the wrong spot please accept my appology. So I do know I want to do alot of css and make it look very professional. 1) I remember at one time that you should make the site big enough to accomidate an 800x600 resolution. But considering that 1024x768 and bigger is pretty common place should I be scaling up to that or still stay at 800x600? Can someone please help me? How do I move the entire image up on following index page: www.AndyG.com Note that there is a one inch gap between top of computer screen and top of image...I just want to move image way up to top... Thanks a lot! Andy Hi everyone. Here is my website: www.last-tube.com ....it is a web site to help londoners quickly find out what time the last london underground train is (the tfl website makes you download a pdf and complicated timetable!) ***I know none of the links work, they are stored locally at the moment, I'm still at an early stage*** Anyway you can see that I have the main content in the middle with five boxes on either side. Obviously the main content of the page is encapsulated in a single <td></td>. At the moment when you click a link it loads another page identical to the index but with different content. I have realised that I am going to need a few hundred pages to cover all the stations and this approach is impractical because if I need to make a chage to index I need to change every single page of the site which will be a long process! So is it possible to update the content within <td></td> rather the redirect to a new page every time? I am sure there is a workaround to this but I am not smart enough to work it out and have been out of the html game for a while! Any advice would be appreciated! Thanks. I'm having some trouble with a table and I don't know why. The only way I can get the result desired is with this code: Code: <tr> <td class="author" style="padding-top:5px;" height="16"><i>Last Updated: October 19, 2011</i> nbsp; <b>Mock Draft:</b> Picks 1-16 - Picks 17-32 - Round 2 - Round 3 </td> </tr> ...which obviously isn't desirable. I can't add a second column, like this: Code: <tr> <td class="author" style="padding-top:5px;" height="16"><i>Last Updated: October 19, 2011</i></td> <td class="author" style="padding-top:5px;" height="16"><i>Last Updated: October 19, 2011</i></td> </tr> ...it pushes the second column off the page. Here are screenshots: Desired - http://img717.imageshack.us/img717/4426/goods.jpg BAD - http://img12.imageshack.us/img12/3955/badfj.jpg Here's the page I'm working with, it's not live yet, looks fine on the page because it's got the long string of http://tinyurl.com/3o5xrhj Sorry for the coding mess, I try my best but I'm still learning a lot. Thanks for the help. hey guys, i'm faily new to html, i only have one semester of html so far. i am doing my final project for my html class and i was wondering if anyone could help me out with this. the spaces underneath my images in my table... they weren't there before i made the page xhtml complaint, but as soon as i added the doctype in, they popped up, can anyone help me fix this? I checked over all the tags, and everything seems to be closed off properly. thanks a lot. Is there a code to hide the scroll bar on the right altogether? I know there are some to change the colors, positioning, etc. Does anyone know how to fix this? as you can see, there's random content at the bottom left there. it's not supposed to be and is supposed to be located in the column that's very wide there, but for some reason is throwing it down below the left column. how can i fix this? http://erocsteady.freehostia.com/tes...ents/index.php ^you can see what im talking about here I've decided to make a personal photography portfolio on my computer, and have thought that the best way to do this would be HTML. My problem: See the above image? The items in red circles are just copied and pasted from the original in the top-left. What I want to know is how do I actually get them there in HTML? I think it's something to do with tables, but as I'm practically brand new to HTML I'm not sure. I have a ZIP file below with all the necessary files, just unzip the online folder and edit the 'index.htm' file if you want to do it all yourself for me. Otherwise, you can use it to have a look at the coding I've used (partly taken from a free HTML template website, I admit ). Thanks very much in advance for help. Hi, I would like to construct a table which has a unique link for each column. I am extremely new to HTML and other web technologies. I have tried to figure out if I can use colgroup and onClick="window.open('http://yahoo.com','_blank');" but I honestly have no idea what to do. Suggestions? Please and Thank you very much. Hey. Is it possible to have a line seperating the collums of a table but having no lines for rows. Bascially i want to do what i have poorly added in in Paint http://img526.imageshack.us/img526/3883/15247409oe7.jpg Is this possible to do? Thanks in advance Hi I am trying to code a website which is subdivided (using tables) into a navigation side bar and content area. How is it possible to allow my various html pages be displayed in the content area (without opening a new window) when i click on a link in the navigation bar? gary |
|||||||