|
HTML - Replacing <table> With <div>
I have this problem - I want to use this tree
http://www.destroydrop.com/javascripts/tree/ on my page. On the left part of the page there would be the tree menu, on the right part there would be some data (tables, navigation etc.). First I had table with 2 cells, one with tree, one with data. Unfortunatelly the tree behaved badly (was cut when unwrapped). Then i replaced the table with <div tags>. This was ok at frst Code: <div style="float:left">Tree part</div><div style="float:left">Data part</div> Problem was, that when data was too wide, they were placed below the tree and not next to the tree This is better (wrapping wide data is ok): Code: <div style="white-space : nowrap ;"> <div style="display : inline ;">Tree part</div><div style="display : inline ;">Data part</div> </div> , but there's problem too - every other choice than display:block makes the tree again behave wrongly. I don't want to relinquish that tree - it's simple to construct, has many configuration choices, remembers state by cookies etc... Does exist another choice how to replace 2 cells (side-by-side) with <div> tags ? Or do you know another good (and free) tree such as above? Thanks. Similar TutorialsHi, I have a website where i am reselling. They use fixed templates so its easy to use but they include header and footer html boxes so that you can put in your own code. I have used these boxes to change my background and font colour however there are a couple of images on there that are now the wrong colour and i cant seem to figure out code to change these images, just add to them. Does anyone know of any code that replaces one image with another? thanks! Chris I listened to the advice a member here gave me a day ago and I ditched tables and just went with CSS. It's been working great so far, the page made with CSS looks exactly like the one made with tables - except for one thing: the submenu. In this picture you can see the problem: I want the red and orange submenu on the left to extend all of the way down to the footer. Here's my CSS for the footer, header, and submenu: Code:
.subnav {position: relative; text-align: center; width: 140px; height: 100%; padding: 0px; float: left; vertical-align: middle; background-color: #FF7F00; border: 1px solid #fdaf61; border-right: 8px solid #ff0000; }
.content {margin-top: 10px; width: 560px; height: 100%; margin-left: 140px; padding: 0px; border: 0px;}
.footer {font-family: arial; color: #000000; background-color: #ff0000; font-size: 10pt; width: 100%; height: 20px; position: relative; padding-top: 5px; float: left;}
I don't want to make the .subnav (submenu)'s position to absolute because then the orange and red will extend all the way down to the page when I want it to end at the footer. Thanks in advance I need a bit of help working out the best way to replace the frames on my website. It's been fine with frames until now, but I'm plannning to add a WordPress blog page to it and want it to show proper URLs at the top if someone links to the blog from another site. I have the blog working in the right frame offline, but I don't quite know how to solve the link problem. The menu on the left (in the left frame) needs to be there all the time for navigation around the rest of the site. At the moment it targets links into the right frame. It also needs to retain it's CSS/javascript functionality so I'm thinking refreshing the whole page each time with a new index.html won't allow the submenus to stay open. I don't think I can use CSS to have a linked page opening up on the right side as it would mean embedding the WordPress php in a CSS box somehow... I thought about iframes which might be the best idea, but am getting muddled wondering how to incorporate everything. I hope this makes sense and someone can help. The webiste is http://phybron.com Thanks. This thread; plain and simple.. I want the following tags: HTML Code: background-image:url(blokje.png); background-image:url(onderkant%20curve.png); Replaced with something like this: HTML Code: <img id="pic" src="top.png" alt=""> Why? Because the top.png image is the only image that loads correctly when mail template is sent to mail recipients. Please advice, thank you. Source: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://asitisinheavenagain.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#container{
width:711px;
margin:auto;
font-family:verdana,sans serif;
font-size:16px;
background-image:url(blokje.png);
}
#pic {
display:block;
}
#content {
padding:0 0 60px 50px;
background-image:url(onderkant%20curve.png);
background-repeat:no-repeat;
background-position:0 bottom;
}
#p-one {
font-weight:bold;
color:#410d3e;
}
#pic-one {
text-align:center;
}
#pic-one img {
width:170px;
height:190px;
}
#link {
font-size:12px;
}
</style>
</head>
<body>
<div id="container">
<img id="pic" src="top.png" alt="">
<div id="content">
<p id="p-one">
Nieuwsbrief Februari 2010
</p><p><br>
Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p><br>
<p id="pic-one">
<img src="koord.jpg" alt=""><br>
<a href="http://www.asitisinheavenagain.com">www.asitisinheavenagain.com</a>
</p><p>
Ik nodig je van harte uit om <a href="http://www.asitisinheavenagain.com">mijn website</a> te bezoeken.<br>
Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
<a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p><br>
</p><p>
Mocht je geen belangstelling hebben om op de hoogte te blijven van<br>
mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>
</p>
</p>
</div>
</div>
</body>
</html>
I have a small image (icon) which when clicked will take you to one of x number of sites via a random link generator. Here is my html where randomlink refers to a javascript routine in the head. <form> <p><input type="button" name="B1" value="Random Link >>" onclick="randomlink()"></p> </form> This works fine in returning a random website (actually one from a list). But I would like to replace the button with an image. I tried this but no joy: <form> <input type="image" onclick="randomlink()" value="Random Link >>" src="../images/icon.jpg"> </form> What am I doing wrong? Hugh i have a flv movie on my webpage. it plays when you click on it. prob is that its black when the page loads since the first frame of the movie is black. i wanted to counter this by creating a jpg of same size which displays instead of the movie. visitor's would have to click on the jpg to then see the movie. how can this be acheived??? css? I recently transferred my blog from 1and1 to hostgator, and all my apostrophes have been replaced with � How can this be fixed? Hi anyone who could help ! In the following code by clicking on the right bottom corner of the image, a link to the destination site occurs. <img src="images/4ticket.jpg" border="0" usemap="#Map" width="203" height="90"> <map name="Map"> <area href="www.destination/play.php" shape="rect" coords="72, 56, 185, 77"> </map Now I would like to replace the link with a form submit button, as I need the value of the submit button (Play FREE!) to be posted to the destination site. Thanks for any help or hint Hello, I am trying to achieve something in html that im not sure is possible, but i have been told it is. If I have a line of text with a link, is it possible when someone clicks the link, the line of text changes out and a new line of text pops up? for example. if i have this: <p>hello, please click <a href="#">here</a> to change this text</p> when the user clicks the link, the line pops out and the following line pops in in its place: <p>hello, this is the new text, please click <a href="#">here</a> to change back to the old text</p> Is this possible to do with just html (html5?) and css/javascript? if so, how would i go about doing it? I appreciate any help. thank you. Ben. edit: i no longer need the text to fade, it just has to swap the lines of code on click. If you view my site: www.vivalefrench.com you can see that I have a few dead image links. And there are a few here and there and it would take a long time to adjust...is there an easy way to add a short piece of code at the top of my index page to detect 404 images and replace them with a standard (noimage.png) file.? I have seen somthing that you can do for each individual image but I'd like to put the code at the top to save time Hey Guys, I am a graphic designer and don't know much about HTML (but am taking a class and about to start a few books). I am using tumblr right now and I am try to replace the automated header ("black atom studio") with a jpg banner. Anyone know where in the HTML I would do this and what code I would need to swap in? (the website I am working at is www.blackatomstudio.com ) (not a plug, just incase you guys need to see what I am talking about) Here is the code I need help on. http://snipplr.com/view/8582/blackatoms-tumblr/ Hi Learning HTML Stuff.... I have a text box on my webpage. In code it is textarea tag. I want to replace this textbox with a rich-text text box. I have complete code for rich-text textbox. How can go about replacing the existing textarea code with the rich-text textbox code? I mean after replacing, will my entire code still work or i will need to do something else also? When text is entered in the box, i click the OK button, the information goes to the database. so when i replace textbox with code of rich-text textbox code, the OK button will still work ok? 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. 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! 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 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. 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 the bold stuff is what i added in to try and make it sortable and it didn't work. Code: <?xml version="1.0" encoding="UTF-8"?><!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"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title />
<link rel="stylesheet" type="text/css" href="example.css"/>
<meta name="author" content="my name" />
<link href="http://www.joostdevalk.nl/" rev="made" />
<script type="text/javascript" src="sortable.js"></script><meta name="generator" content="StarOffice/OpenOffice.org XSLT (http://xml.openoffice.org/sx2ml)" /><meta name="author" content="my name" /><meta name="created" content="2007-04-03T18:49:47" /><meta name="changedby" content="Ryan Gleason" /><meta name="changed" content="2007-05-04T16:38:49" /><base href="." /><style type="text/css">
@page { }
table { border-collapse:collapse; border-spacing:0; empty-cells:show }
td, th { vertical-align:top; }
h1, h2, h3, h4, h5, h6 { clear:both }
ol, ul { padding:0; }
* { margin:0; }
*.ta1 { }
*.ce1 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-style:none; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; }
*.ce2 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-width:0.0133cm; border-left-style:solid; border-left-color:#000000; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; }
*.Default { font-family:Arial; }
*.Heading { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; }
*.Heading1 { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; }
*.Result { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; }
*.Result2 { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; }
*.co1 { width:1.3516in; }
*.co10 { width:0.7854in; }
*.co11 { width:0.5681in; }
*.co12 { width:0.8925in; }
*.co2 { width:0.9925in; }
*.co3 { width:0.6984in; }
*.co4 { width:0.622in; }
*.co5 { width:0.372in; }
*.co6 { width:0.3827in; }
*.co7 { width:0.9055in; }
*.co8 { width:0.6661in; }
*.co9 { width:0.6772in; }
*.ro1 { height:0.1783in; }
</style></head>
<body dir="ltr">
<table class="sortable" id="anyid" cellpadding="0" cellspacing="0">
<table border="0" cellspacing="0" cellpadding="0" class="ta1">
<colgroup><col width="150" /><col width="110" /><col width="78" /><col width="69" /><col width="41" />
<col width="42" /><col width="101" /><col width="110" /><col width="74" /><col width="78" /><col width="75" /><col width="75" /><col width="75" /><col width="87" /><col width="63" /></colgroup>
that should be what you need..i exported an excel file as an xhtml file and read the source code and that's how it was, real unorganized and such. basically it's got stats of baseball players and i want to make them easily sortable. i created a sortable table using another piece of code but have to manually enter everything in if i do it that way. I have a table and after I select the question (the ball) I would like the answer to come up in another column in that table. Is that too much? Keep'er simple please. Thanks. |
|||||||