FriendsterTalk / Css Two Column and Three Column Layout

#1 2008-09-05 10:48:40

ajhay12: » FriendsterAddict; Registered: 2008-03-25; Posts: 572; Last visit: 2008-12-31; Reputation: 22; Friendster

Css Two Column and Three Column Layout

The actual divs can be positioned in any order you want. If you want your content to load first, add that div first in the body of your html, for example:

<div id="content">content goes here</div>

<div id="menu">navigation goes here</div>

In the above example, the content would load first, and then the menu.

Basic Two Column Layout with Left Menu:

Code:

<html>
<head>
<title>Two Column CSS Layout</title>
<style type="text/css">

body
{ margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

#menu {
  position: absolute;
  left: 5px;
  padding: 0px;
  width: 150px;
}

#content {

  margin-left: 200px;
  padding: 0px;
  margin-right: 15px;
}

</style>
</head>
<body>

<div id="menu">

Your menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this layer you can change the #menu selector in the style sheet that is located on this page between the head tags.

</div>


<div id="content">
All of your content goes in this div.  This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>


</body>
</html>

Basic two column layout with right menu:

Code:

<html>
<head>
<title>Two Column CSS Layout with Right Menu</title>
<style type="text/css">

body
{ margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

#menu {
  position: absolute;
  right: 5px;
  padding: 0px;
  width: 150px;
}

#content {

  margin-left: 0px;
  padding: 0px;
  margin-right: 200px;
}

</style>
</head>
<body>

<div id="menu">

Your menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #menu selector in the style sheet that is located on this page between the head tags.

</div>


<div id="content">
All of your content goes in this div.  This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>


</body>
</html>

Basic two column layout with header:

Code:

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

body 
{ margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

#header {
  margin: 20px;
  padding: 10px;
  height: 100px;
}
#left {
  position: absolute;
  left: 15px;
  top: 160px;
  width: 200px;
}
#center {
  top: 0;
  margin-left: 230px;
  margin-right: 15px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

<div id="left">

Your left menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>


<div id="center">
All of your content goes in this div.  This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

</body>
</html>

Basic three column layout:

Code:

<html>
<head>
<title>Three Column CSS Layout</title>
<style type="text/css">

body 
{ margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

#left {
  position: absolute;
  left: 5px;
  padding: 0px;
  top: 0px;
  width: 150px;
}

#center {
  margin-left: 200px;
  padding: 0px;
  margin-right: 200px;
  top: 0px;
}
#right {
  position: absolute;
  right: 15px;
  padding: 0px;
  top: 0px;
  width: 150px;
}
</style>
</head>

<body>

<div id="left">

Your left menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>


<div id="center">
All of your content goes in this div.  This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

<div id="right">

Your right menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.

</div>

</body>
</html>

Basic three column layout with header:

Code:

<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body 
{ margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

#header {
  margin: 20px;
  padding: 10px;
  height: 100px;
}
#left {
  position: absolute;
  left: 15px;
  top: 160px;
  width: 200px;
}
#center {
  top: 0;
  margin-left: 230px;
  margin-right: 230px;
}
#right {
  position: absolute;
  right: 15px;
  top: 160px;
  width: 200px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

<div id="left">

Your left menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>


<div id="center">
All of your content goes in this div.  This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

<div id="right">

Your right menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.

</div>

</body>
</html>

CREDiTS TO:
LiSSA EXPLAiNS iT ALL

-Offline-

#2 2008-09-05 11:10:06

-NiK-: ^Cottonbear04; » FriendsterFreak; › Lost Kid Ü; › .White Protector.; Registered: 2008-04-12; Posts: 1819; Reputation: 195; Friendster

Re: Css Two Column and Three Column Layout

nyc tuts... kip it up,share more

its a great help to us.. unique codes hah

|帐户|博客皮肤|互联网查寻|
um grupo com membros menos CONTÍNUOS é muito melhor do que um grupo cheio do " gaseous" & " liquified" membros. - Kuya Jie

#3 2008-09-05 11:19:19

ijahcamille: ^{elicia camille}; » FriendsterTalker; › -mmm!!!; › Black n Pink Guild; Location: philippines; Registered: 2008-04-27; Posts: 123; Last visit: Yesterday; Reputation: 2; Friendster

Re: Css Two Column and Three Column Layout

tnx for sharing...

-Offline-

#4 2008-09-05 11:21:31

weak123: » FriendsterNewbie; Registered: 2008-04-05; Posts: 39; Last visit: 2009-01-04; Reputation: ~

Re: Css Two Column and Three Column Layout

where's the preview? the SS is error

-Offline-

#5 2008-09-06 05:36:26

nicolekid1116: ^{nicole andalajao}; » FriendsterTalker; › friendstertalker; Location: secret!!; Registered: 2008-05-13; Posts: 220; Last visit: 2009-01-01; Reputation: ~; ???

Re: Css Two Column and Three Column Layout

wer can i put this code..?? how can i used it..

-Offline-

#6 2008-09-06 05:44:34

joebz: ^{omg my real name is supposed t…}; » FriendsterWhiz; › Midnight Prowler; › Class-S; Location: Printer; Registered: 2008-02-12; Posts: 2543; Reputation: 194; Friendster

Re: Css Two Column and Three Column Layout

Can you update the screenshots? It's not showing.

"My life was an unending, unchanging midnight. It must, by necessity, always be midnight for me. So how was it possible that the sun was rising now, in the middle of my midnight?"

#7 2008-09-06 06:35:06

Lordheinz: ^{Heinz R.Fangonil}; » Banned; › ^ trashed; Registered: 2007-06-26; Posts: 5178; Last visit: 2008-09-11; Reputation: 242

Re: Css Two Column and Three Column Layout

Please provide any preview or screenshot of your trick or i may closed this one..

Thank you so much FRIENDSTERTALK...

-Offline-

#8 2008-09-06 14:19:07

ajhay12: » FriendsterAddict; Registered: 2008-03-25; Posts: 572; Last visit: 2008-12-31; Reputation: 22; Friendster

Re: Css Two Column and Three Column Layout

hey.
i put a screenshot in this tutorial.
but i don't know why it's lost now..
anyway,i'll just make another screenshot.

-Offline-

#9 2008-09-06 14:24:57

bobcbar: ^Bob; » SuperFriendster; › Gee Back to Work; Location: Texas USA; Registered: 2007-04-08; Posts: 9903; Reputation: 292; Friendster

Re: Css Two Column and Three Column Layout

ajhay12 wrote:
put a screenshot in this tutorial.

The links to ur images are not working, try using fileden or geocities for the images host site.

#10 2008-09-06 14:40:06

miztahz: ^Miztah; » FriendsterAddict; › Hello! ^,~!; Location: Manila,.; Registered: 2008-07-12; Posts: 418; Last visit: 2009-01-08; Reputation: 8; Friendster

Re: Css Two Column and Three Column Layout

nice gr8 tnx for sharing

-Offline-

#11 2008-09-06 15:47:20

ericajoyce2003: ^erica.17; » FriendsterManiac; › live..love then LAUGH! xD; Location: 2400ft under; Registered: 2007-08-19; Posts: 646; Last visit: Yesterday; Reputation: 9; Friendster

Re: Css Two Column and Three Column Layout

i think this trick is nice. please provide a screenshot, i'll wait for it. thanks!

-Offline-

#12 2008-09-07 05:18:35

switpotato: ^.M.O.N.I.X.; » FriendsterWhiz; › dcrazier dbetter bxtreme; › Class X; Location: HubbieHubbieLand; Registered: 2007-05-23; Posts: 3071; Reputation: 303

Re: Css Two Column and Three Column Layout

this are basic div making... u can use this for overlay or... for loading tricks...

my official site>> http://switpotato.ucoz.com/
theres nothing wrong at making mistakes..
whats wrong is letting it stay as a mistake without the effort of making it right

#13 2008-09-07 05:30:52

mhedge: ^{mhedge catalan}; » FriendsterElite; › LOL ..; › Friendstertalk University; Location: location.href; Registered: 2008-03-03; Posts: 4318; Reputation: 194; Friendster

Re: Css Two Column and Three Column Layout

anyways.. nice kind of trick.. but pls update your screen shot..

#14 2008-09-07 07:30:05

amirulzz: ^{Noor Amirul Aizat}; » FriendsterTalker; Location: sabah; Registered: 2008-09-01; Posts: 208; Last visit: 2008-12-26; Reputation: 9; Friendster

Re: Css Two Column and Three Column Layout

nice code...
thanx 4 sharing....

-Offline-

#15 2008-09-08 13:24:07

ajhay12: » FriendsterAddict; Registered: 2008-03-25; Posts: 572; Last visit: 2008-12-31; Reputation: 22; Friendster

Re: Css Two Column and Three Column Layout

guys.please wait for the screenshots.
I'm just kinda busy..

-Offline-

#16 2008-09-08 16:04:12

t0yangDU: ^briannah; » FriendsterTalker; › FiNOy PuH aKO!--lIL`homiE; Location: ArIzOnA_USA; Registered: 2007-09-17; Posts: 226; Last visit: 2008-12-29; Reputation: ~; Friendster

Re: Css Two Column and Three Column Layout

AWESOME!!!

-Offline-

#17 2008-09-08 16:16:29

yas: ^{the trouble maker}; » FriendsterTalker; › Seventh-day Adventist; › Naruto Fanz-ShinobiElite; Location: island of ohara; Registered: 2008-08-30; Posts: 270; Last visit: Yesterday; Reputation: 11

Re: Css Two Column and Three Column Layout

nice..thanks for sharing=)

http://profiles.friendster.com/61843362

-Offline-

#18 2008-09-10 09:40:28

banoCore: ^aLvin; » FriendsterTalker; Location: Philippines; Registered: 2008-07-07; Posts: 103; Last visit: 2008-10-13; Reputation: 1; Friendster

Re: Css Two Column and Three Column Layout

cool i love it:wow:

-Offline-

#19 2008-09-23 09:16:46

niichan: ^{n i s r i n}; » FriendsterNewbie; › i always thingking him♥; Location: indonesia; Registered: 2008-08-31; Posts: 90; Last visit: 2009-01-07; Reputation: 4; Friendster

Re: Css Two Column and Three Column Layout

can u gimme some preview?

_________________________________________
♥i love senyum pepsodent♥

-Offline-

#20 2008-09-23 09:33:17

kidin: ^kevin; » FriendsterAddict; › newbie here; › Rockstars; Location: in my dream; Registered: 2008-03-18; Posts: 493; Last visit: 2009-01-08; Reputation: 15; Friendster

Re: Css Two Column and Three Column Layout

nice trick miss
thank for sharing

-Offline-

friendsterTalk - Friendster Forum

#1 2008-09-05 10:48:40

Css Two Column and Three Column Layout

Code:

Code:

Code:

Code:

Code:

#2 2008-09-05 11:10:06

Re: Css Two Column and Three Column Layout

#3 2008-09-05 11:19:19

Re: Css Two Column and Three Column Layout

#4 2008-09-05 11:21:31

Re: Css Two Column and Three Column Layout

#5 2008-09-06 05:36:26

Re: Css Two Column and Three Column Layout

#6 2008-09-06 05:44:34

Re: Css Two Column and Three Column Layout

#7 2008-09-06 06:35:06

Re: Css Two Column and Three Column Layout

#8 2008-09-06 14:19:07

Re: Css Two Column and Three Column Layout

#9 2008-09-06 14:24:57

Re: Css Two Column and Three Column Layout

ajhay12 wrote:

#10 2008-09-06 14:40:06

Re: Css Two Column and Three Column Layout

#11 2008-09-06 15:47:20

Re: Css Two Column and Three Column Layout

#12 2008-09-07 05:18:35

Re: Css Two Column and Three Column Layout

#13 2008-09-07 05:30:52

Re: Css Two Column and Three Column Layout

#14 2008-09-07 07:30:05

Re: Css Two Column and Three Column Layout

#15 2008-09-08 13:24:07

Re: Css Two Column and Three Column Layout

#16 2008-09-08 16:04:12

Re: Css Two Column and Three Column Layout

#17 2008-09-08 16:16:29

Re: Css Two Column and Three Column Layout

#18 2008-09-10 09:40:28

Re: Css Two Column and Three Column Layout

#19 2008-09-23 09:16:46

Re: Css Two Column and Three Column Layout

#20 2008-09-23 09:33:17

Re: Css Two Column and Three Column Layout

Search Friendstertalk

Board footer

FriendsterTalk.com x