|
HTML - Quick Question: Turning Tables Layout To Divs
i used to use tables for the layout, now i'm trying divs..the thing is i'm not sure how should i think about the layout, i mean like tables i have rows, every row have cells, now with the divs i should think about it the same way? a container div to replace the main table, then another div to take place of a row, then divs as cells..an so on
does that make any sense? i don't know if that was clear, but the question is: how should i think about it? i know the question sounds stupid but it seems that i just got used to tables & can't accept divs yet Similar TutorialsHey. 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 Hello, this is my first post in this forum. Nice place you got here =P I may stay around to learn something about html for once XD Anyway, I just need a quick solution. My tumblr (nocleansocks.tubmlr.com) has a slightly edited html in it. I know the bare basics, and I was able to edit an existing theme to fit in some minor altercations, and I got it to where i wanted it except for ONE little detail. On the left sidebar, the two "lines" that are on the top and bottom of the text have a border. The theme's layout's preview shows no border (they blend flawlessly into the background) but when I installed the theme WITHOUT my changes, they were like that. How might I go about removing those borders? As far as I can tell, the HTML says border: none; where it is supposed to. Hi everyone i am having trouble with an image. I am trying to get my link clickable and have it so i can define the dimensions. This is the code i have. Code: <a href="http://www.smokethosetires.com/mustang.jpg"><img src ="mustang.jpg"></a> How can i alter that code so i can use this width="200" height="200"> i want to change this html that instead of the text element the script "copy" will copy to the clipboard the current URL. I've tried to call it with location.href but with no luck. Code: <form name="formtocopy" action=""> <textarea name="texttocopy"> A whole bunch of text here that will be copied. </textarea> <br> <a href="javascript:copy(document.formtocopy.texttocopy);">copy</a> </form> thanks just wondering..I guess if i think about it for a few more minutes i'll realize the answer.. but i'm done thinking for the day question.. when you make a function why do you put variables in the () right after the function.. what purpose does it serve? whats the difference in putting them in the () vs putting them just in the function or something? I feel like i'm missing something thanks everyone hi there ive just created some buttons in photoshop and inserted them into my website i want the buttons to be together but there is space between them. this isnt a photoshop problem. is there a way i can get them together? please see http://geocities.com/stuartlittle13/home5.html to see my example any help would be greatly appreciated stu I have an ebay store and i want to make it custom but i'm too much of a noob to figure it out.I basically want the html code from http://stores.ebay.com/iCollected I need the part in the middle where it shows "all items" and the list of items below it.Is there anyway this can be done easily?I can do the rest but i just need that code.If anyone can help i would greatly appreciate it Do you guys know if the amount of traffic that a website receives will have any effect on it's search engine rankings? HI I CREATED A WEBSITE USING FRAMES AND I USED THE DOCTYPE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IT ALL APPEARS FINE ON INTERNET EXPLORER 6, BUT WHEN ON INTERNET EXPLORER 7 IT APPEARS DIFFERENTLY.. AND I WAS WONDERING AM I USING THE INCORRECT DOCTYPE? SHOULD I BE USING A FRAMESET DOCTYPE? ANY HELP APPRECIATED.. THANKS IN ADVANCE JACK I have a wordpress blog I need a little help with. In my navbar I have a link called "Dog Food Review". I want it so when people put their mouse over that link a drop down menu comes down and list my links under my Blogroll.. specifically the ones under Dog Food Reviews. http://www.freewebs.com/stevenwang/ That is tables... Someone had mentioned I should create the website with divs. Any tips for doing this? Or is there a real simple way to do it real quick? And what are the added benefits to divs as opposed to tables? Or vise versa.. Any help, or info would be greatly appreciated. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<noframes></noframes><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="floating-1.7.js"></script>
<title>WEB PAGE TITLE GOES HERE</title>
<style type="text/css">
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #e7e7e7;
color: #000000;
float: center;
width: 100%;
font-family: 'arial',verdana,sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.3em 3.3em;
background-color: #e7e7e7;
color: #000000;
text-decoration: none;
float: center;
border-top: 1px solid #323232;
border-bottom: 1px solid #323232;
}
#navcontainer ul li a:hover
{
background-color: #ffffff;
color: #000000;
}
td.padding
{
padding: 0px 0px 0px 30px;
}
</style>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'arial',verdana,sans-serif;">
<div id="floatdiv" style="
position:absolute;
background:#323232;
border-top: solid 3px #ffffff;
border-left: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
border-right: solid 3px #ffffff;
height: 165px;
width: 32px;
top:35px;
right:30px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
z-index:100">
<p align=center><img src="follow_right.png" alt="" border="0">
<a href="http://www.facebook.com/litofficial" target="_blank"><img src="facebook.png" alt="" title="We're on Facebook!" border="0"></a><br>
<a href="http://www.twitter.com/#!/litofficial2" target="_blank"><img src="twitter.png" alt="" title="Follow us on Twitter!" border="0"></a>
</p></div>
<script type="text/javascript">
floatingMenu.add('floatdiv',
{
// Represents distance from left or right browser window
// border depending upon property used. Only one should be
// specified.
// targetLeft: 0,
targetRight: 30,
// Represents distance from top or bottom browser window
// border depending upon property used. Only one should be
// specified.
targetTop: 35,
// targetBottom: 0,
// Uncomment one of those if you need centering on
// X- or Y- axis.
// centerX: true,
// centerY: true,
});
</script>
<table width="100%" style="height: 100%;" border="0">
<!-- ============ HEADER SECTION ============== -->
<tr>
<td colspan="3" style="height: 10px;" bgcolor="#323232">
</td></tr>
<tr>
<td class="padding" colspan="3" style="height: 225px;" bgcolor="#e7e7e7"><a href="http://www.litofficial.com" target="_blank"><img src="lit_logo_001.gif" alt="" title="" border="0"></a>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">home</a></li><li><a href="#">about</a></li><li><a href="#">blog</a></li><li><a href="#">collection</a></li><li><a href="#">contact</a></li><li><a href="#">order</a></li></ul>
</div>
</td></tr>
<!-- ============ NAVIGATION BAR ============== -->
<tr>
<td colspan="3" valign="middle" height="0" bgcolor="#ffffff">
</td></tr>
<!-- ============ MIDDLE COLUMN ============== -->
<tr>
<td class="padding" width="38%" valign="top" bgcolor="#ffffff">
<h2>recent posts</h2>
The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).
</td>
<td class="padding" width="36%" valign="top" bgcolor="#ffffff">
<h2>about</h2>
The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).
<td class="padding" width="26%" valign="top" bgcolor="#ffffff">
<h2></h2>
</td>
</td></tr>
<!-- ============ FOOTER SECTION ============== -->
<tr>
<td class="padding" colspan="3" align="left" height="120" bgcolor="#323232">
<a href="http://www.facebook.com/litofficial" target="_blank"><img src="facebook.png" alt="" title="We're on Facebook!" border="0"></a>
<a href="http://www.twitter.com/#!/litofficial2" target="_blank"><img src="twitter.png" alt="" title="Follow us on Twitter!" border="0"></a>
</td></tr>
</table>
I think this is a html question, though if it needs to be moved to CSS please let me know. Basically, I'm using divs for the first time. I've got the same rough layout for each page on the site, but in one of them I need to insert a table. When I insert the table it puts a great big gap in the div just above where the table starts. Why is it doing that? Can I stop it? How do I get around this? Help! Nim Hi Folks, I am pretty new to web page development. I want to layout a page as follows: a) Header fixed height, width 100% b) left column fixed width c) Main content variable dependent on screen resolution d) right column fixed width E) footer always visible at bottom of screen I have been experimenting with div's to do this and I am having problems getting things to line up the way I want. I know I could easily achieve this using a table but I have the impression that it's frowned upon to do it this way. So my questions a a) Is it considered bad practice to use a table to control the layout of a page ? b) If so why ? TIA, JC i'm an idiot novice and i have a set of checkboxes i want to display... <table> <tr> <td> <input name="1" type="checkbox" value="1" />PROVISIONAL<br/> <input name="2" type="checkbox" value="2" />COMPLETE<br/> <input name="3" type="checkbox" value="3" />PARTIAL<br/> <input name="4" type="checkbox" value="4" />FINAL<br/> <input name="5" type="checkbox" value="5" />PROGRESS<br/> <input name="6" type="checkbox" value="6" />ADVANCE </td> </tr> </table> however, when it displays on the page...they are staggered like this... one two three etc. i can add another break after each checkbox but that puts too much space between each checkbox....is there anything i can do? thanks in advance! <HTML> <HEAD> </HEAD> <frameset border=0 noresize=yes COLS="400,*"> <frame src="http://facebook.com" name="myframe1" scrolling=yes> <frame src="http://twitter.com" name="myframe2" scrolling=yes> </frames>et> <noframes> <body> This page uses frames, but your browser doesn't support them. </body> </noframes> </HTML> To make this real quick...I want to have twitter and facebook in two frames on one page...whenever I do it, both sites don't seem to allow it to happen. The entire thing just redirects me to Twitter's website automatically, and if I click on the Facebook frame it does the same. Any way around this? Thanks in advance! Hey guys, I'm trying to figure out how to do something that is probably pretty simple, but I'm not quite sure how to make it work. In the following link, the text that says "1", "2", and "3" is clickable. http://thebestinfo.org/test123.html What I'd like to do is make the entire red area of each of the 3 parts clickable. For example, the entire top red area should hyperlink to 1.html, the entire middle red area should hyperlink to 2.html, and the entire bottom red area should hyperlink to 3.html. Does anyone know what I would have to change to make this work? Here is the entire HTML code for that page... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body {
background: white;
}
#nav ul {
list-style: none;
}
#nav li {
background: Red;
width: 50%;
margin: auto;
height: 2em;
text-align: center;
padding-top: 1em;
}
#nav li a {
text-decoration: none;
color: White;
}
</style>
</head>
<body>
<div id="nav">
<br />
<ul>
<li><a href="1.html">1</a></li><br />
<li><a href="2.html">2</a></li><br />
<li><a href="3.html">3</a></li><br />
</ul>
</div>
</body>
</html>
Thanks! My form includes two checkboxes: Code: Remember password? <input type="checkbox" name="rememberPassword" value="on" checked/> <b><i><font color="#35A02C"> (deselect if using a public computer)</font></i></b><br/> Automatic login? <input type="checkbox" name="autoLogin" value="on" checked/><br/> How can I make it so that if the user deselects the first checkbox, the second will be automatically deselected aswell? Thanks, James Hi all, first timer. I was wondering... When you type in the address bar www.google.com/maps It loads the page just fine. For my advertising this it would be nice if I could get my page loading without ".html" It just looks cleaner. I was wondering how does one achieve this? ( No it isn't my first page its a secondary ) Regards, Mike. Hi all - I bet this is a quick one, but it's new to me I tried to validate a page I just built in xhtml transitional and got errors on the use of   on my page. I've researched this afternoon and found other recommended code to use -   and/or 00A0 for a non breaking space instead but I'm still not able to validate. I am using the code as a space between several pictures I have on a page all in a row. Is there other code I should be using that will validate instead of  ? Maybe I'm just not using the code correctly - should I have it in quotes? " " or "00A0"? Thanks - MN How would I go about making one link open three windows/urls? I'm trying to make things easy at work and there are times when if I click a link that generated the three pages I need I would be golden, any tips? Thanks! |
|||||||