Log In · Register

 
3 column layout ?
miszxjojo
post Jan 24 2009, 10:27 PM
Post #1


Senior Member
*****

Group: Member
Posts: 354
Joined: May 2007
Member No: 526,982
how do i make it so its 3 column ?
heres my current code...

the header
CODE
<HTML>
<head>

<script language="javascript">
var titletext="loveburst @ h3iresslyts.net ! <3";
var repeat=true;
var index=0;
function scrolltitle(){
if(index<=titletext.length){ document.title=titletext.substring(0,index);
index++;
setTimeout('scrolltitle()', 200);
}else{
index=0;
if(repeat)setTimeout('scrolltitle()',1000);
}}
window.onload=function(){
if(!document.layers)setTimeout('scrolltitle()',1000);
}
</script>

</head>

<style type="text/css">
body {
background :#a3a3a3 url("http://i43.tinypic.com/2ih6kc7.png") repeat-y;
}
td, p, body, a {
color : #000000;
font-family : arial;
font-size : 8pt;
text-align : center;
line-height : 10px;
}
a:active, a:visited, a:link, a:hover {
font-size : 11px;
color : #000000;
font-family : arial;
font-weight : normal;
text-decoration : none;
line-height : 9px;
}
a:link img {
border : none;
}
a:visited img {
border : none;
}
a:hover img {
border : none;
}
.SIDEBAR {
font-family :arial;
color : #8866b7;
background : #transparent;
font-weight : normal;
font-size :30px;
line-height :30px;
letter-spacing : -3px;
text-align :center;
border-bottom: 1pt dotted;
}
.CONTENT {
font-family :arial;
color : #8866b7;
background : #transparent;
font-weight : normal;
font-size :30px;
line-height :30px;
letter-spacing : -3px;
text-align :center;
border-bottom: 1pt dotted;
}
b {
color : #8866b7;
}
u {
color : #ff66b7;
}
i {
color : #333333;
}
s {
color : #000000;
}
textarea, input {
width : 140px;
}

a.nava, a.nava:link, a.nava:active, a.nava:visited {
text-decoration : none;
display : block;
}
a.nava:hover {
color: 380087;
background-color : none;
text-decoration : none;
display : block;
}
a.navb, a.navb:link, a.navb:active, a.navb:visited {
text-decoration : none;
display : block;
}
a.navb:hover {
color: ff0087;
background-color : none;
text-decoration : none;
display : block;
}
a:hover, a.man:hover, a.text:hover,a.redlink:hover
{font-weight:normal;font-family:arial;
text-decoration:none;font-size:11px;
line-height:9px;text-transform:none; color:4eecff;}
h1 {
font-family :arial;
color : #2a2a2a;
background : #transparent;
font-weight : normal;
font-size :18px;
line-height :25px;
letter-spacing : -1px;
text-align :right;
border-bottom: 1pt dashed;
}

#header {position:absolute; left:0px; top: 0px;}
#sidebar {position:absolute; top:10px; left:436px; width:169px;}
#content {position:absolute; top:283px; left:-407px; width:380px;}
</style>


<div id="header"><img src="http://i43.tinypic.com/53qo85.png"></div>


footer:
CODE
<style type="text/css">
#header {position:absolute; left:0px; top: 0px;}
#sidebar {position:absolute; top:10px; left:436px; width:169px;}
#content {position:absolute; top:290px; left:32px; width:380px;}
</style>

<div id="sidebar">
<div class="sidebar">site</div>
<A HREF="http://takemyhand.debutantlyts.com" class = "nava">home</A>
<A HREF="http://www.myspace.com/189956352" class = "navb">myspace</A>
<a href="http://debutantlyts.com" class = "nava">my host</a>
<a href="http://takemyhand.debutantlyts.com/contact.php" class = "navb">contact me</a>
<A HREF="http://takemyhand.debutantlyts.com/faq.php" class = "nava">faqs</A>
<a href="http://blogs.myspace.com/index.cfm?fuseaction=blog.view&friendID=189956352&blogID=381777099" class = "navb">10k+ train</a>
<a href="http://takemyhand.debutantlyts.com/chat.php" class = "nava">wanna chat?</a>
<a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-43779-8c" class = "navb">sign my guestbook</a>
<a href="http://takemyhand.debutantlyts.com/credits.php" class = "nava">credits</a>

<div class="sidebar">stuff</div>
<a href="http://takemyhand.debutantlyts.com/fonts.php" class = "navb">fonts</a>
<a href="http://takemyhand.debutantlyts.com/colorthemes.php" class = "nava">color themes</a>
<a href="http://takemyhand.debutantlyts.com/twilightgraphics.php" class = "navb">twilight graphics</a>
<a href="http://takemyhand.debutantlyts.com/premades.php" class = "nava">premades</a>
<a href="http://takemyhand.debutantlyts.com/photoshoptutorials.php" class = "navb">photoshop tutorials</a>
<a href="http://takemyhand.debutantlyts.com/psds.php" class = "nava">psds</a>
<a href="http://takemyhand.debutantlyts.com/buttons.php" class = "navb">buttons</a>
<a href="http://takemyhand.debutantlyts.com/editedpictures.php" class = "nava">edited pictures</a>

<div class="sidebar">fun 'n games</div>
<a href="http://takemyhand.debutantlyts.com/hotornot.php" class = "nava">hot or not?</a>
<a href="http://takemyhand.debutantlyts.com/kissordiss.php" class = "navb">kiss or diss?</a>
<a href="http://takemyhand.debutantlyts.com/embarrassingstories.php" class = "nava">embarrassing stories</a>
<a href="http://takemyhand.debutantlyts.com/wearortear.php" class = "navb">wear or tear?</a>
<a href="http://takemyhand.debutantlyts.com/favoritetwilightseries.php" class = "nava">favorite twilight series?</a>

<div class="sidebar">affiliates</div>
<table border="0">
<tr>
<td width="100">
<center>
<a href="http://breakaway.shinecakeslyts.com" class = "navb">breakaway</a>
<a href="http://mouth-shut.info" class = "nava">mouth shut</a>
<a href="http://fofessional-layouts.com" class = "navb">fofessional</a>
<a href="http://www.tinkalayouts.com" class = "nava">tinkalayouts</a>
<a href="http://loveshowerlyts.com" class = "navb">loveshower</a>
<a href="http://www.sparkle.strobelyts.com" class = "nava">sparkle</a>
<a href="http://www.rennababy.biz" class = "navb">comealive</a>
<a href="http://sltslays.com" class = "nava">slts</a>
<a href="http://manipulatedd.com" class = "navb">manipulated</a>
<a href="http://maniclyts.berryblitz.com" class = "nava">maniclyts</a>
<a href="http://lustrous.debutantlyts.com" class = "navb">lustrous</a>
<a href="http://stbmates.margarita-mix.net" class = "nava">spinthebottle</a>
<a href="http://lovebeatlyts.vishuz.com" class = "navb">lovebeatlyts</a>
<a href="http://ohdeedesigns.com" class = "nava">ohdee</a>
<a href="http://beutel4ys.net" class = "navb">sugarcrave</a>
<a href="http://lovedustlyts.com" class = "nava">lovedust</a>
<a href="http://www.alwaysforeverxoxo.com" class = "navb">afxoxo</a>
<a href="http://island-bomb.com" class = "nava">island bomb</a>
<a href="http://www.lunerlyts.com" class = "navb">luner</a>
<a href="http://lv.fatelayoutsx3.com" class = "nava">lovevoltage</a>
<a href="http://www.dollface.strobelyts.com" class = "navb">dollface</a>
<a href="http://maganda.switchlyts.com" class = "nava">maganda</a>
</center>
</td>
<td width="100">
<center>
<a href="http://livefortoday.lyts.me" class = "nava">live for today</a>
<a href="http://forizzle.studiolyts.com" class = "navb">forizzle</a>
<a href="http://glitzyglosslyts.centenial-lyts.com" class = "nava">glitzyglosslyts</a>
<a href="http://onechance.prephost.net" class = "navb">one chance</a>
<a href="http://lovepurr.com" class = "nava">lovepurr</a>
<a href="http://distantmemories.sweetshotlyts.com" class = "navb">distant memories</a>
<a href="http://shinecakeslyts.com" class = "nava">shinecakes</a>
<a href="http://btlyts.com" class = "navb">btlyts</a>
<a href="http://www.sweetdreamss.ch3x.com" class = "nava">sweetdreams</a>
<a href="http://shinyice.com" class = "navb">shinyice</a>
<a href="http://velocity.cherishlyts.com" class = "nava">velocity</a>
<a href="http://preciselyts.margarita-mix.net" class = "navb">precise</a>
<a href="http://www.vivid-avenue.net" class = "nava">vivid-avenue</a>
<a href="http://ai.so-pink.org" class = "navb">apple instinct</a>
<a href="http://dipcakes.beutel4ys.net" class = "nava">dipcakes</a>
<a href="http://headlightdisco.adairlyts.com" class = "navb">headlight disco</a>
<a href="http://www.desirlyts.com" class = "nava">désir</a>
<a href="http://h3iresslyts.net" class = "navb">heiress</a>
<a href="http://peacefulattack.com" class = "nava">peaceful attack</a>
<a href="http://prestigelyts.com" class = "navb">prestige</a>
<a href="http://fwcs.btlyts.com" class = "nava">funwithcodes</a>
<a href="http://icaughtmyself.net" class = "navb">icaughtmyself</a>

</center>
</td>
</table>
<a href="http://takemyhand.debutantlyts.com/apply.php">apply</a>/<a href="http://takemyhand.debutantlyts.com/affiliates.php">view all</a>

<div class="sidebar">support?</div>
<a href="http://takemyhand.debutantlyts.com/support.php"><img src="http://i42.tinypic.com/mlqcz6.gif"></a><br>
^ click to get codes :)

<div class="sidebar">used something?</div>
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="takemyhandx3" src="http://www5.shoutmix.com/?takemyhandx3" width="160" height="200" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?takemyhandx3">View shoutbox</a>
</iframe><br />
<!-- End ShoutMix -->

<div class="sidebar">statistics</div>
<a href="http://www.freeonlineusers.com"><font color=#999999><script type="text/javascript" src="http://freeonlineusers.com/on2.php?id=125600"> </script> lovers</font></a><br><div

align="center"><a href="http://www.amazingcounter.com"><img border="0" src="http://cb.amazingcounters.com/counter.php?i=2437039&c=7311430" alt="web page visitor stats"></a></div>
<div id="eXTReMe"><a href="http://extremetracking.com/open?login=tmhx3">
<img src="http://t1.extreme-dm.com/i.gif" style="border: 0;"
height="38" width="41" id="EXim" alt="eXTReMe Tracker" /></a>
<script type="text/javascript"><!--
var EXlogin='tmhx3' // Login
var EXvsrv='s11' // VServer
EXs=screen;EXw=EXs.width;navigator.appName!="Netscape"?
EXb=EXs.colorDepth:EXb=EXs.pixelDepth;
navigator.javaEnabled()==1?EXjv="y":EXjv="n";
EXd=document;EXw?"":EXw="na";EXb?"":EXb="na";
EXd.write("<img src=http://e2.extreme-dm.com",
"/"+EXvsrv+".g?login="+EXlogin+"&amp;",
"jv="+EXjv+"&amp;j=y&amp;srw="+EXw+"&amp;srb="+EXb+"&amp;",
"l="+escape(EXd.referrer)+" height=1 width=1>");//-->
</script><noscript><div id="neXTReMe"><img height="1" width="1" alt=""
src="http://e2.extreme-dm.com/s11.g?login=tmhx3&amp;j=n&amp;jv=n" />
</div></noscript></div>



the code right now is for 2 comlumn.. how do i make it for 3?
 
 
 Start new topic
Replies (1 - 11)
heyo-captain-jac...
post Jan 24 2009, 10:28 PM
Post #2


/人◕‿‿◕人\
*******

Group: Official Member
Posts: 8,283
Joined: Dec 2007
Member No: 602,927
If you add another column, you'll have an entirely different layout.
 
miszxjojo
post Jan 24 2009, 10:37 PM
Post #3


Senior Member
*****

Group: Member
Posts: 354
Joined: May 2007
Member No: 526,982
i want my page to look like this: http://i43.tinypic.com/53qo85.png
and right now i only have two columns. so how do i make it 3 ? :/
 
heyo-captain-jac...
post Jan 24 2009, 10:44 PM
Post #4


/人◕‿‿◕人\
*******

Group: Official Member
Posts: 8,283
Joined: Dec 2007
Member No: 602,927
I figured something out, give me a minute to botch the code.
 
miszxjojo
post Jan 24 2009, 10:51 PM
Post #5


Senior Member
*****

Group: Member
Posts: 354
Joined: May 2007
Member No: 526,982
okay thank you SO much <3
 
heyo-captain-jac...
post Jan 24 2009, 10:59 PM
Post #6


/人◕‿‿◕人\
*******

Group: Official Member
Posts: 8,283
Joined: Dec 2007
Member No: 602,927
CODE
<style type="text/css">
body {position: absolute; left:170px;}
div.column3 {position:absolute; top:10px; left:1px; width:169px;}
</style>


Try sticking that in your header code right after the </head> code.

And somewhere after your CSS, put <div class="column3"></div>
 
miszxjojo
post Jan 24 2009, 11:13 PM
Post #7


Senior Member
*****

Group: Member
Posts: 354
Joined: May 2007
Member No: 526,982
okay but on my footer, how can i make it so that i can put another sidebar in the first column?

like how it says
#sidebar {position:absolute; top:288px; left:639px; width:169px;}

and for the 3rd column it says something like
<div class="sidebar">site</div>

how do i make it so some stuff is on the 1st column too? :/
 
heyo-captain-jac...
post Jan 24 2009, 11:18 PM
Post #8


/人◕‿‿◕人\
*******

Group: Official Member
Posts: 8,283
Joined: Dec 2007
Member No: 602,927
Transfer it over to <div class="column3"></div>
 
miszxjojo
post Jan 24 2009, 11:22 PM
Post #9


Senior Member
*****

Group: Member
Posts: 354
Joined: May 2007
Member No: 526,982
but when i type something it doesnt show up?
i tried both codes in the header AND in the footer :/
 
heyo-captain-jac...
post Jan 24 2009, 11:28 PM
Post #10


/人◕‿‿◕人\
*******

Group: Official Member
Posts: 8,283
Joined: Dec 2007
Member No: 602,927
Yeah, I see that it's doing that now. That doesn't make sense.

Also, your layout is in Quirks mode.
Stick this at the very beginning of your code.

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
miszxjojo
post Jan 24 2009, 11:36 PM
Post #11


Senior Member
*****

Group: Member
Posts: 354
Joined: May 2007
Member No: 526,982
when i use that code my titles are gone?
 
theerinkal
post Jan 26 2009, 06:29 PM
Post #12


Irrisistable Cabbages.
*****

Group: Member
Posts: 549
Joined: Nov 2007
Member No: 589,355
You stick that before any of the other coding so it looks like this:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html><head><title>Title of your page here</title></head>

<style type="text/css">
Codes you need here.
</style><body>
text here
</body></html>


Here is one of my codes for a 3 column layout if you would like to use it. Please credit my site (sugar-blossom.info). I'm not the best but I can code 3+ column layouts. I can code that one for you. Just pm me if you would like me too. (please give me the image url and I'll have it done).
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic