WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » Widgets-Collumns

View previous topic View next topic Go down  Message [Page 1 of 1]

1Widgets-Collumns Empty Widgets-Collumns Tue May 18, 2010 1:01 am

Guest


Guest
Can somebody provide me the code for me to make 3 collumns(1 left,1 middle,1 right) for an HTML page?
thanks

2Widgets-Collumns Empty Re: Widgets-Collumns Tue May 18, 2010 1:11 am

Sanket

Sanket
Administrator
Administrator
http://www.lissaexplains.com/css3.shtml

That should help.

http://www.webartzforum.com

3Widgets-Collumns Empty Re: Widgets-Collumns Tue May 18, 2010 1:38 am

Guest


Guest
thanks!

i want them to have border however.
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>

how should i edit it?

4Widgets-Collumns Empty Re: Widgets-Collumns Tue May 18, 2010 1:59 am

Sanket

Sanket
Administrator
Administrator
Code:
border-width: .2em;
border-style: solid;
border-color: #900;
Add this under the header, left, right or center css.

http://www.webartzforum.com

5Widgets-Collumns Empty Re: Widgets-Collumns Tue May 18, 2010 2:30 am

Guest


Guest
ermm at the end of my CSS?I did and nothing happens..

6Widgets-Collumns Empty Re: Widgets-Collumns Tue May 18, 2010 9:43 am

Sanket

Sanket
Administrator
Administrator
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;
border-width: .2em;
border-style: solid;
border-color: #900;
}
</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>
Check this code?

http://www.webartzforum.com

7Widgets-Collumns Empty Re: Widgets-Collumns Tue May 18, 2010 4:09 pm

Guest


Guest
there is border only at the right collumn.

8Widgets-Collumns Empty Re: Widgets-Collumns Tue May 18, 2010 11:17 pm

Sanket

Sanket
Administrator
Administrator
Yes because i only added it in the right one.

http://www.webartzforum.com

9Widgets-Collumns Empty Re: Widgets-Collumns Wed May 19, 2010 1:26 am

Guest


Guest
ok ermm can you add me the others Smile

10Widgets-Collumns Empty Re: Widgets-Collumns Wed May 19, 2010 1:40 am

Sanket

Sanket
Administrator
Administrator
I already told you how to do it for one? Why aren't you trying to work it out? Not that hard, is it?
We at WebArtz believe in learning, so we expect you to atleast try rather than just get readymade codes. We are here to help if you are stuck somewhere.

http://www.webartzforum.com

11Widgets-Collumns Empty Re: Widgets-Collumns Wed May 19, 2010 2:57 am

Guest


Guest
yes,but you know,i have much work these days.Its not that i cant,its that i dont have time.I will do that when i have time.

12Widgets-Collumns Empty Re: Widgets-Collumns Wed May 19, 2010 10:19 am

Sanket

Sanket
Administrator
Administrator
It hardly takes any time. What kind of a excuse is that? Shocked

http://www.webartzforum.com

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » Widgets-Collumns

Permissions in this forum:
You cannot reply to topics in this forum