friendsterTalk - Friendster Forum

friendsterTalk - Friendster Forum

Welcome guest! Please Login or Register.

Pages: 1 2

 

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

ajhay12
» FriendsterAddict
ajhay12's display avatar
› Friendstertalk University
Registered: 2008-03-25
Posts: 544
Last visit: Today
Reputation: 12
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

MY LAYOUTS

-Offline-
 

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

-NiK-
» FriendsterFreak
-NiK-'s display avatar
› >{.!Pink mushroom!.}<
› .White Protector.
Registered: 2008-04-12
Posts: 1791
Reputation: 173

Re: Css Two Column and Three Column Layout

nyc tuts... kip it up,share more :D


its a great help to us.. unique codes hah ;)
 

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

ijahcamille
» FriendsterNewbie
ijahcamille's display avatar
› ..cute..
› Black Pinkers Clan
Location: philippines
Registered: 2008-04-27
Posts: 46
Last visit: 2008-11-02
Reputation: -1
Friendster

Re: Css Two Column and Three Column Layout

tnx for sharing... :p

-Offline-
 

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

weak123
» FriendsterNewbie
Registered: 2008-04-05
Posts: 33
Last visit: Today
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
» FriendsterTalker
nicolekid1116's display avatar
› friendstertalker
Location: secret!!
Registered: 2008-05-13
Posts: 202
Last visit: 2008-11-15
Reputation: -1
???

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
» FriendsterWhiz
joebz's display avatar
› Snapped Lead
› Class-S
Location: Printer
Registered: 2008-02-12
Posts: 2519
Reputation: 185
Friendster

Re: Css Two Column and Three Column Layout

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




There is something I see in YOU
It might kill me
I want it to be TRUE ♥
 

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

Lordheinz
» Banned
› ^ trashed
Registered: 2007-06-26
Posts: 5178
Last visit: 2008-09-11
Reputation: 242

Re: Css Two Column and Three Column Layout

:arrow: 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
ajhay12's display avatar
› Friendstertalk University
Registered: 2008-03-25
Posts: 544
Last visit: Today
Reputation: 12
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.

MY LAYOUTS

-Offline-
 

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

bobcbar
» SuperFriendster
bobcbar's display avatar
› Wrist it finally better!
Location: Texas USA
Registered: 2007-04-08
Posts: 9097
Last visit: Today
Reputation: 240
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. =)


Sorry but I only understand english

-Offline-
 

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

miztahz
» FriendsterAddict
miztahz's display avatar
› Hello! ^,~!
› Mga Masiyahing Pinoy!
Location: Manila,.
Registered: 2008-07-12
Posts: 349
Last visit: Yesterday
Reputation: 4
Friendster

Re: Css Two Column and Three Column Layout

nice gr8 tnx for sharing :thumbsup:



-Offline-
 

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

ericajoyce2003
» FriendsterManiac
ericajoyce2003's display avatar
› unhappy.
Location: 2400ft under
Registered: 2007-08-19
Posts: 635
Last visit: Yesterday
Reputation: 6

Re: Css Two Column and Three Column Layout

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

-Offline-
 

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

switpotato
» FriendsterWhiz
switpotato's display avatar
› dcrazier dbetter bxtreme
› Class X
Location: HubbieHubbieLand
Registered: 2007-05-23
Posts: 2952
Reputation: 283

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/
Ive juz realized.. many peepz r such a user..
to all affected with this have a lil delicadeza..remove
my works from ur site... u r selfish ... who knows how to get
but never know how to give.. puro sarili inintindi nyo!!
 

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

mhedge
» FriendsterElite
mhedge's display avatar
› Friends || Rivals
› Friendstertalk University
Location: pangasinan..
Registered: 2008-03-03
Posts: 3792
Reputation: 165
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
» FriendsterTalker
amirulzz's display avatar
Location: sabah
Registered: 2008-09-01
Posts: 199
Last visit: Today
Reputation: 9
Friendster

Re: Css Two Column and Three Column Layout

nice code...:thumbsup:
thanx 4 sharing....=):)=):)

-Offline-
 

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

ajhay12
» FriendsterAddict
ajhay12's display avatar
› Friendstertalk University
Registered: 2008-03-25
Posts: 544
Last visit: Today
Reputation: 12
Friendster

Re: Css Two Column and Three Column Layout

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

MY LAYOUTS

-Offline-
 

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

t0yangDU
» FriendsterTalker
t0yangDU's display avatar
› FiNOy PuH aKO!--lIL`homiE
Location: ArIzOnA_USA
Registered: 2007-09-17
Posts: 226
Last visit: 2008-11-10
Reputation: ~
Friendster

Re: Css Two Column and Three Column Layout

AWESOME!!! :penguin::penguin:

-Offline-
 

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

yas
» FriendsterTalker
yas's display avatar
› interpreter of condolence
› Naruto Fanz-ShinobiElite
Location: island of ohara
Registered: 2008-08-30
Posts: 208
Last visit: Today
Reputation: 6

Re: Css Two Column and Three Column Layout

nice..thanks for sharing=)

  oohh..gosh..i cant look ur so ugly..closed it now..:



http://profiles.friendster.com/61843362

-Offline-
 

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

banoCore
» FriendsterTalker
banoCore's display avatar
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
» FriendsterNewbie
niichan's display avatar
› school suckz!
Location: indonesia
Registered: 2008-08-31
Posts: 74
Last visit: 2008-11-04
Reputation: 4
Friendster

Re: Css Two Column and Three Column Layout

can u gimme some preview?

NARUHINA is the BEST couple

-Offline-
 

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

kidin
» FriendsterAddict
kidin's display avatar
› newbie here
› Rockstars
Location: in my dream
Registered: 2008-03-18
Posts: 487
Last visit: Today
Reputation: 15
Friendster

Re: Css Two Column and Three Column Layout

nice trick miss :thumbsup: :thumbsup:
thank for sharing :D :D



-Offline-
 

 

Pages: 1 2

Search Friendstertalk

Board footer

FriendsterTalk is not affiliated with Friendster.com
Copyright © 2002–2008 PunBB

[ 31 queries - 0.510 second ]

Pay Per Click Ads by pay per click advertising by Kontera

FriendsterTalk.com x

Welcome to FriendsterTalk! You'll need to login in order to fully use all the features and view all the sections of this site.

Please register if you're not yet a member. =)