|
HTML - The Perfect 3 Column Layout
So I found this perfect layout my mathew taylor and Im dissecting it to understand the layout and css. My first questions off the bat are, how does he get the links at the top to be indented? I cant see where he placed the command so that their is an inch of indent and then the links start. Also, how does he make it so the links at the top intersect with a black line the spans the header? I really dont see this in the html where the black line is. And lastly, if i want to create a banner for my website in the header how do i go about doing that in the space above the links and spanning the header. I really want to create a clean title in photoshop and place it there but I dont know what dimension width and heighth to use. Thanks
http://matthewjamestaylor.com/blog/perfect-3-column.htm Similar Tutorialshttp://recwar.exofire.net/ i know the code is horrible, i used a mix of MS word, frontpage, and dreamweaver, so please dont bite my head off on that, this post is simply about a crossbrowser layout issue. I was able to position everything the right way in dreamweaver. I got a few screenshots from http://browsershots.org/ and its showing completely messed up in ie6, and slightly wonky in ie7 & ie8. the main problem is the text/image in the middle is somehow ending up in the bottom right corner of the page in IE. Also ie6 doesnt seem to like the transparent background on my title/banner/logo. Can anyone figure out a way to at least get the text box in the right spot for IE? Hi I am very new to website design and html code therefore I cannot spot what may be a very simple error in my webpage code. The page in question is http://www.stephanieholmes.co.uk/videos.html I have made the page in dreamweaver. The content is layed out in a table 7x8 with the two outer column's rows merged to contain the left and right floral border. However, in Firefox the centre columns are displaced vertically, but this problem does not occur in IE which confuses me. Please help! I am very new to HTML and cant figure out why my 3-column layout isnt working. I cant seem to get my columns to line up side-by-side without overlapping ... HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2006 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 9/9/2010 12:48:26 PM -->
<head>
<title>Zone Map</title>
<style type="text/css">
#head {
position: relative;
left: 0px;
width: 250px;
height: 20px;
font-family: times new roman;
line-height: 8px;
font-size: 14pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #c3bd24;}
#content {
left: 0px;
width: 250px;
font-family: times new roman;
line-height: 16px;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #938461;}
#dotted{
width: 225px;
border-top: 2px dotted #c3bd24;
}
#container {
width: 800px;
}
#col_right {
position: relative;
float: right;
width: 250px;
}
#col_center {
position: absolute;
float: center;
width: 250px;
}
#col_left {
position: relative;
float: left;
width: 250px;
}
</style>
</head>
<body>
<p align="center">
<img border="0" alt="" align="left" src="support/image/ZoneMap.png" width="650" height="400"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
<div id="container">
<div id="col_left">
<p id="head"><br>ZONE 1: $750 minimum</p>
<div id="dotted"></div>
<p id="content">
NJ*** all,<br>
NY***Long Island to Islip,<br>
MD** to Salisbury,<br>
PA** Pittsburgh-Williamsport-Wilkes Barre,<br>
VA** Richmond-Front Royal,<br>
WV* to Martinsburg, Fairmont,<br>
DE** all</p>
</div>
<div id="col_center">
<p id="head"><br>ZONE 2: $1,500 minimum</p>
<div id="dotted"></div>
<p id="content">
NY** Syracuse-Albany-Long Island,<br>
CT** Hartford-New Haven,<br>
PA** west of Pittsburgh-Erie,<br>
OH** Sandusky-Columbus, Ashland,<br>
VA** south of Richmond-Roanoke,<br>
WV* south and west of Fairmont to Bluefield,<br>
MA* Pittsfield-Buzzards Bay-Monomet</p>
</div>
<div id="col_right">
<p id="head"><br>ZONE 3: $2,500 minimum</p>
<div id="dotted"></div>
<p id="content">
VA** south and west of Roanoke,<br>
TN***Chattanooga-Nashville,<br>
KY** Hopkinsville-Madisonville,<br>
IN***Evansville,<br>
IL***Urbana, Chicago,<br>
MI</p>
</div>
</div>
</body>
</html>
This is both HTML and CSS-oriented. Current CSS code pertaining to the layout: Code: #listnav {
background: url('../images/listnav-bg.png') top left repeat-x;
width: 25%;
padding: 8px;
float: left;
}
#content {
width: 75%;
padding: 8px;
float: right;
}
#footer {
}
#main-wrapper {
width: 85%;
}
HTML: HTML Code: <div id="main-wrapper">
<div id="listnav">
<!-- some spacer stuff here so i can actually see stuff (no static height set) -->
</div>
<div id="content">
<!-- some spacer stuff here so i can actually see stuff (no static height set) -->
</div>
</div>
The result is that the listnav box shows up on the far right side and the content box shows up below it on the left hand side. Any ideas? :| Hi guys, I have a problem. Whenever the left column is larger than the right column, it stretches the div, but the background doesn't go on. The content just flows out. Is there any way I can fix this? http://automata.firephoenixnet.com/74s/ Thanks in advance guys. Hi! This is was my blog looks like at the moment: http://neverrgrowold.blogspot.com/ I would like to add a 3rd column to my 2 column layout. I know this will mean resizing the other two columns which I know how to do.. I just have no idea to add another column to the right. Here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>Never Grow Old</title>
<style type="text/css">
#navbar-iframe{height:0; visibility:hidden; display:none;}
body
{background-color: #000;
font: normal 10pt Trebuchet MS;
color: #e5e5e5;
cursor: crosshair;
line-height: 75%;
scrollbar-face-color: #ddd;
scrollbar-highlight-color: #fff;
scrollbar-3dlight-color: #ddd;
scrollbar-darkshadow-color: #ddd;
scrollbar-shadow-color: #fff;
scrollbar-arrow-color::#fff;
scrollbar-track-color: :#ddd;}
a:link, a:visited, a:active
{color: #e5e5e5; text-decoration: none; text-transform: none; font: normal 8pt Trebuchet MS; cursor: normal;}
a:hover
{text-decoration: ; text-transform: None; font: normal 12pt Trebuchet MS; cursor: normal; color: #FF4C79;}
blockquote {font: normal 8pt trebuchet ms; color:#e5e5e5; padding:5px; border-left:7px solid #ddd; background-color:#000;}
blockquote:hover {-moz-border-radius:4px; padding:5px; border:2px solid #000; }
blockquote:first-letter {background: #000; font: italic 15pt "Georgia"; color: #FF4C79;float: padding: 5px; text-transform: uppercase;}
.head
{text-align: center; font-family: impact; font-size:12pt; color:#CCFF66; text-align: left; text-transform: none; line-height: 9pt; font-style: none; background:#000; padding: 5px; }
.content
{font-size: 9pt; font-family: Trebuchet MS;color:#e5e5e5; background: #000; line-height: 14px; padding:10px; border: 2px solid #111; }
.headline1{font:normal 30pt Courier New; color:#e5e5e5; letter-spacing:-3px; text-transform:uppercase; line-height:100%; }
</style>
<script type="text/javascript">
/***********************************************
* Disable select-text script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reDisable(){
return false
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reDisable
}
</script>
<script language=JavaScript>
<!--
//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
<body>
<div style="position: absolute; top: 10px; left: 188px; width: 500px;">
<span class="headline1"><img src="http://i44.tinypic.com/bfoq69.png"/>
</span><br>
</div>
</div>
<div style="position: absolute; top: 440px; left: 525px; width: 600px;">
<Blogger>
<div class="head">@ <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> </div>
<div class="content"><$BlogItemBody$></div><p>
</Blogger>
</div>
<div style="position: absolute; top: 440px; left: 190px; width: 310px;">
<div class="head">Welcome! </div>
<div class="content">
<div><img src="http://24.media.tumblr.com/avatar_66b2c19ef795_64.png" align="left" /><font color=#e5e5e5>I believe we never truly grow old unless we let ourselves. You'll find anything and everything to do with your childhood if
yyou grew up anywhere between the late 80's to the early 2000's. So sit back, enjoy your stay, and take a trip down memory lane ;)
</font></div>
<p>
</div><p>
<div class="head">Memory Lane.</div>
<div class="content">
ghghghghh
</div><p>
<div class="head">Support</div>
<div class="content">
Place your tagobard here,
<a href="http://cbox.ws">Cbox</a> recommended<BR>
</div><p>
<div class="head">Links</div>
<div class="content">
Place all your links here,<br>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
</div><p>
<div class="head">Looking Backwards.</div>
<div class="content">
<BloggerArchives>
<BloggerArchives>
<a href="<$BlogArchiveURL$>"> <$BlogArchiveName$></a>
</BloggerArchives></a><br><br>
</div><p>
<div class="head">Credits</div>
<div class="content">
Designer @<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>,<br>
Basecode: <a href="http://www.blogskins.com/me/sacrificelove-">sacrifice</a><a href="http://love--bites.blogspot.com">love-</a><br>
</div><p>
</div>
</body>
I've been trying to figure it out with my basic html knowledge for a while now and I can't get it, I would be really appreciative if someone could help me out. Thanks!! HI all, Pretty new to web design and I was having some trouble centering my columns, or rather having my columns evenly space between each other in my wrap and from my warp borders. Also, I'm using a background image as my wrap border and for some reason there's a gap at the top and bottom of my pages. HMTL attached Any ideas? Thanks Hello, I need to create a 3 -column lay out with the left and right columns having 200px each and the middle column take the rest. Here is my html markup: HTML Code: <div style="width: 100%"> <div style="width: 200px; float:left;">Left column</div> <div style="width: 100%; float:left;">Middle Column</div> <div style="width: 200px; float:left;">Right Column</div> </div> It's not working for me . Please help. Hi There, Pulling my hair out over this. For the life of me, cant make it work: http://www.cowboytuffwebsitedesign.c...cialdeals.html I've used positive padding negative margin to stretch both div's heights to match each other. But the content div, when needed to be higher than the menu div, will overflow its content past the container divs bg. As well the footer will only clear past the menu div, not the content div. HELP! PLEASE! I can copy and paste HTML right into the thread if needed. Thanks Hi, I'm having trouble getting a few things to behave in IE. Please look at this page [the links don't work, coz none of the other pages are on the server yet]: http://napftest.org/ 1 -- On the upper left hand side, you'll see a 'Search' box. In FF, it lines up perfecly, it obeys the code which tells it to be in the 'middle' of the cell. But in IE, the search box goes to the 'top' of the cell. 2 -- At the bottom left, you'll see a drop down menu: 'Visit our Sister sites', In FF, the spacing between the text and the drop down is perfect. But in IE, there is an extra high space. Can anyone tell me why these anomolies are occurring. Usually, I've been able to figure out what's causing the difference, but here, I've tried everything, and nothing changes the behavior in IE. Thanks very much as the title suggests my web page just comes out blank when previewed in I.E but works perfectly for firefox. I have run validation tests with no error results so i have no idea what could be causing this. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Brew Records - Leeds Independent label</title> </head> <img src="images/logo/brew%20logo%20black.jpg" align="absmiddle"> <body> </html> when i put in align="right" it goes to the far right but absmiddle doesn't make it go in the middle of the page. driving mer nuts i'm certain its correct I hand coded my website myself, but whilst working perfectly in IE, there are some problems when viewing it using Firefox. Specifically, the table rows have double-spacings (scroll down to the 'Education' section he www.lombrozo.co.uk/resume.html), and also table borders have a 3D look (a black border to emphasise the shadow), again, this shadow is not visible in IE... Any ideas anyone? Any help would be most appreciated! Hi guys and girls out there on the forum My website has a problem with showing properly in Firefox Here is my url: http://lessons-4-success.com Can you tell me what i can do to get it to show properly like it do in IE ? Thanks much in advance for answers.. Michael Hi...I'm having trouble with 2 things right now with my website. First of all, I want to create a new column on the right side of my webpage. And second of all, I want to make my website container a bit wider. Could someone use firebug and tell me how to do this? Here, is my website: http://www.2teachreading.comyr.com Thanks in advance Hi: I would like to present to my users a 3-column table of 'House for Sale' advertisements. This is not a commercial venture but will only be for the use of my Senior Mobile Home Park residents. Each of the three columns should contain x number of rows with each column cell containing a tiny pic (from a house.jpg file) and underneath the pic would be a few general details of the price, address, agent selling, etc. The .pic would be clickable and would then bring up a more enlarged picture of the house and complete details of the house for sale. My first puzzle is how to make this list of rows of advertisements *variable*. I guess I have to 'build' the page in my server according to how many ads are currently active ?? Any first thoughts are welcome. Thanks, -Mel Smith I have a Web Page with a Form on it. How/where can I add a left hand column that will run all the way down the left side? Here is the page code, and I've attached an image of what it looks like now. Thanks. Code: <?php global $account; ?>
<link href="../style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<link href="../style.css" rel="stylesheet" type="text/css" /><style type="text/css"></style>
<table>
<table cellpadding="0" width="770" height="100%" cellspacing="0" bgcolor="#FFFFFF" style="border-right: solid 1px #6b6b6b">
<form method="POST" action="index.php">
<td width="140" rowspan="21" id="menu"> </td>
<td> </td>
<input class='field' type='hidden' name='command' value='account'>
<input class='field' type='hidden' name='param' value='signup'>
<tr>
<td class='pageTitle'><span class="hLine"> <font face="Arial" color=#A30100" size="3" Style="padding-left: 50px;"> <b>Create New Account</b></span></td>
<td class='pageTitle'> </td>
</tr>
<tr>
<td class='fieldLabel' width="30%"> <font face="Arial" color=#000000" size="2" Style="padding-left:50px;"> Membership Type</td>
<td align="right">[account_type_panel]</td></tr>
<tr>
<tr>
<td class='fieldLabel' width="30%"> <font face="Arial" color=#000000" size="2" Style="padding-left:50px;"> Email Address</td>
<td><input class='field' type='text' size='35' maxlength="30" name='user_name' value='<?=$account->user_name ?>'>
<span class='requiredField'>* </span><br> <span class='errorMessage'><?=$account->get_error('user_name') ?></span></td>
</tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Re-Confirm Email Address</td>
<td><input class='field' type='text' size='35' maxlength="50" name='email' value='<?=$account->email ?>'>
<span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('email') ?></span></td>
</tr>
<tr>
<td> </td></tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Password</td>
<td><input class='field' type='password' size='35' maxlength="30" name='password' value='<?=$account->password ?>'>
<span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('password') ?></span></td>
</tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Re-Enter Password</td>
<td><input class='field' type='password' size='35' maxlength="30" name='reenter_password' value='<?=$account->reenter_password ?>'>
<span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('reenter_password') ?></span></td>
</tr>
<tr>
<td> </td></tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;">First Name </td>
<td ><input class='field' type='text' size='35' maxlength="50" name='first_name' value='<?=$account->first_name ?>'>
<span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('first_name') ?></span></td>
</tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Last Name</td>
<td><input class='field' type='text' size='35' maxlength="50" name='last_name' value='<?=$account->last_name ?>'>
<span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('last_name') ?></span></td>
</tr>
<tr>
<td> </td></tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Address</td>
<td><input class='field' type='text' size='35' maxlength="70" name='address' value='<?=$account->address ?>'>
<span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('address') ?></span></td>
</tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Address 2</td>
<td><input class='field' type='text' size='35' maxlength="70" name='address_second' value='<?=$account->address_second ?>'></td>
</tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> City</td>
<td><input class='field' type='text' size='35' maxlength="50" name='city' value='<?=$account->city ?>'>
<span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('city') ?></span></td>
</tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> State/Province</td>
<td><input class='field' type='text' size='35' maxlength="35" name='phone' value='<?=$account->phone ?>'><span class='requiredField'> * </span></td>
</tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Zip/Postal Code</td>
<td><input class='field' type='text' size='35' maxlength="35" name='zip_postal_code' value='<?=$account->zip_code ?>'>
<span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('zip_code') ?></span></td>
</tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Country</td>
<td><input class='field' type='text' size='35' maxlength="35" name='mobile_phone_number' value='<?=$account->mobile_phone_number ?>'> <span class='requiredField'> * </span></td>
</tr>
<td> </td></tr>
<tr>
<td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> I Have Read and Agree With The <A href='legal.php'><font color=#000000" size="2";"><u>Terms & Conditions</u></a></td><td><input type="checkbox" name="terms" value="true"><span class='requiredField'> * </span></td>
</tr>
<tr>
<td>
</td></tr>
<tr>
<td> </td></tr>
<tr><td class='hLine' align="right"> </td>
<td class='hLine' align="right"> <span class='requiredField'> * </span><font color="red"> Required Field</font></span></td>
</tr>
<tr><td align="right"> </td>
<td align="right"><input name="submit" type='submit' class='button' value='create' /></td>
</tr>
<tr><td> </td>
<td> </td>
</td>
</form>
</table>
hi, i have a table, i freezed(locked) the first column and firs row of the table.whilw scrolling down, the freezed(locked) column camouflages the freezed row.but i don't want this.i want the freezed row to caoumaflage the freezed column.do you have any ideas? Regards. I don't know if this is supposed to be posted here or in the css forum - so correct me if I'm doing it wrong. I'm making a table with a variable number of colums. The first column should be allowed to have a width of 30 % if it is needed by the text, but less if it is not needed. (This can style="max-width:30%" do for me). The rest of the columns can use the space that the first columns doesn't use, but shouldn't be able to force the first column to be smaller. If I use max-width the first column might be smaller than 30% because of the rest of the columns forces it to be so, and if I use width=30% the width will be 30% even if the text in the first column doesn't need 30%. Can anyone help me? How can I put a blue border round this entire column. I tried but can't get it to work. http://www.bestsellersworld.com/text2.html |
|||||||