Add to Google

How do you make a 3 column with head and footer with css?

Pages: 1, 2
free web hosting

Read Latest Entries..: (Post #15) by skyglow1 on Jan 5 2005, 07:26 PM. (Line Breaks Removed)
Well, probably yes, but I ran it through the CSS checker and no warnings or errors turned up, so I guess its ok. skyglow1
Read the FIRST post of this Topic. - Express your Opinion! Contribute Knowledge :-).

Open Discussion > Have your say > General Talk

How do you make a 3 column with head and footer with css?

ngawangdorjee86
Can you please give me the code? I have a web site and i am in a need of layout. Not much people are coming to my site because of html tables. I know html very good but not css. That the i am really having trouble with so if you could help me and give me the code i would really appreciate and thank you for doing a generous act.

Comment/Reply (w/o sign-up)

skyglow1
I can write the code for you, I just need more information like the width, height, color, etc.

skyglow1

Comment/Reply (w/o sign-up)

ngawangdorjee86
I would like the main body table to be 800 in width and both of the side naviation table to be in 200 in width. Total width would be 1200. I want my header to be 1200 in length. I want the height at 1800 for all of the table. I want the footer to be 1200 in width too as same as the header. Thank you very much for replying. I really appreciate it. I thank you very much. Thanks! biggrin.gif

Comment/Reply (w/o sign-up)

abajan
Stu Nicholls dreams about CSS day and night! You'll probably find help on your layout at his site. 8)

Comment/Reply (w/o sign-up)

Winbots
ehh, this isnt CSS, it is HTML, but
CODE


<HTML>

<HEAD>

<TITLE>



MY COOL TITLE GOES HERE!



</TITLE>

</HEAD>

<BODY>

<CENTER>

<TABLE BORDER=1 HEIGHT="100%" WIDTH="100%">

<TR>

<TH COLSPAN=3>



MY COOL HEADER HERE!



</TH>

</TR>

<TR>

<TD WIDTH="33%">



MY COOL COLUM #1 TEXT GOES HERE



</TD>

<TD WIDTH="34%">



MY COOL COLUM #2 TEXT GOES HERE



</TD>

<TD WIDTH="33%">



MY COOL COLUM #3 TEXT GOES HERE



</TD>

</TR>

<TR>

<TD COLSPAN=3>

<H6>



MY COOL FOOTER GOES HERE!



</H6>

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>


just change the text smile.gif

 

 

 


Comment/Reply (w/o sign-up)

skyglow1
QUOTE
ehh, this isnt CSS, it is HTML, but
CODE


<HTML>

<HEAD>

<TITLE>



MY COOL TITLE GOES HERE!



</TITLE>

</HEAD>

<BODY>

<CENTER>

<TABLE BORDER=1 HEIGHT="100%" WIDTH="100%">

<TR>

<TH COLSPAN=3>



MY COOL HEADER HERE!



</TH>

</TR>

<TR>

<TD WIDTH="33%">



MY COOL COLUM #1 TEXT GOES HERE



</TD>

<TD WIDTH="34%">



MY COOL COLUM #2 TEXT GOES HERE



</TD>

<TD WIDTH="33%">



MY COOL COLUM #3 TEXT GOES HERE



</TD>

</TR>

<TR>

<TD COLSPAN=3>

<H6>



MY COOL FOOTER GOES HERE!



</H6>

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>


just change the text smile.gif


No he doesnt want 100% width, he wants 1200 in width. Your percentage values for the width are also wrong, the body is much wider than the side navigation. He wants 1800 altogether in height as well.

Here is the code you put in your CSS file called "layout.css":

CODE
#header { position:absolute; top:0; left:0; width:1200; height:200; border-style:solid; border-width:1; }

#footer { position:absolute; top:1600; left:0; width:1200; height:200; border-style:solid; border-width:1; }

#nav1 { position:absolute; top:200; left:0; width:200; height:1400; border-style:solid; border-width:1; }

#nav2 { position:absolute; top:200; left:1000; width:200; height:1400; border-style:solid; border-width:1; }

#body { position:absolute; top:200; left:200; width:800; height:1400; border-style:solid; border-width:1; }


In your index.html, or home page, put this:

CODE
<HTMl>

<HEAD>

 <LINK rel="stylesheet" type="text/css" href="layout.css" title="default">

</HEAD>



<BODY>



 <DIV id="header">

  Stuff for Header

 </DIV>



 <DIV id="nav1">

  Stuff for the left nav bar

 </DIV>



 <DIV id="body">

  Stuff for the body

 </DIV>



 <DIV id="nav2">

  Stuff for the right nac bar

 </DIV>



 <DIV id="footer">

  Stuff for the footer

 </DIV>



</BODY>



</HTML>


Here is what this code looks like, as a test:

http://www.skyglow1.freenukehosting.com/test.html

I am assuming the header is 200 in height, please tell me what it should be. Any changes you want, just ask. Also I need height of the footer at the bottom. If you don't like the border then tell me. Or if you don't want to seperate files then say that. ^^

skyglow1

Comment/Reply (w/o sign-up)

ngawangdorjee86
I mean thanks for helping me. I appreciate it man. I really thank you for helping me. Now visitors will come and visit my web site. You have made me happy. God bless you. Do you know how to log into our account. I just got my hosting and i don't know how to log into my account and start making my web site. Where do you go to log into our web site account?

Comment/Reply (w/o sign-up)

skyglow1
You might want to ask that question in another forum and other people will give oyu answer there.

skyglow1

Comment/Reply (w/o sign-up)

mortalmatt
thanks for the example with css, i have not done much with css before, this will be helpful to me as well smile.gif

Comment/Reply (w/o sign-up)

Unicorni
Hi,
You can find some nice examples here:
Paul O'Brien,
Cleva Treva
Redmelon

Comment/Reply (w/o sign-up)

Latest Entries

skyglow1
Well, probably yes, but I ran it through the CSS checker and no warnings or errors turned up, so I guess its ok.

skyglow1

Comment/Reply (w/o sign-up)

Minisheep
Hey ,don't you think that every element name must be lower case?
QUOTE
QUOTE
ehh, this isnt CSS, it is HTML, but
CODE


<HTML>

<HEAD>

<TITLE>



MY COOL TITLE GOES HERE!



</TITLE>

</HEAD>

<BODY>

<CENTER>

<TABLE BORDER=1 HEIGHT="100%" WIDTH="100%">

<TR>

<TH COLSPAN=3>



MY COOL HEADER HERE!



</TH>

</TR>

<TR>

<TD WIDTH="33%">



MY COOL COLUM #1 TEXT GOES HERE



</TD>

<TD WIDTH="34%">



MY COOL COLUM #2 TEXT GOES HERE



</TD>

<TD WIDTH="33%">



MY COOL COLUM #3 TEXT GOES HERE



</TD>

</TR>

<TR>

<TD COLSPAN=3>

<H6>



MY COOL FOOTER GOES HERE!



</H6>

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>


just change the text smile.gif


No he doesnt want 100% width, he wants 1200 in width. Your percentage values for the width are also wrong, the body is much wider than the side navigation. He wants 1800 altogether in height as well.

Here is the code you put in your CSS file called "layout.css":

CODE
#header { position:absolute; top:0; left:0; width:1200; height:200; border-style:solid; border-width:1; }

#footer { position:absolute; top:1600; left:0; width:1200; height:200; border-style:solid; border-width:1; }

#nav1 { position:absolute; top:200; left:0; width:200; height:1400; border-style:solid; border-width:1; }

#nav2 { position:absolute; top:200; left:1000; width:200; height:1400; border-style:solid; border-width:1; }

#body { position:absolute; top:200; left:200; width:800; height:1400; border-style:solid; border-width:1; }


In your index.html, or home page, put this:

CODE
<HTMl>

<HEAD>

 <LINK rel="stylesheet" type="text/css" href="layout.css" title="default">

</HEAD>



<BODY>



 <DIV id="header">

  Stuff for Header

 </DIV>



 <DIV id="nav1">

  Stuff for the left nav bar

 </DIV>



 <DIV id="body">

  Stuff for the body

 </DIV>



 <DIV id="nav2">

  Stuff for the right nac bar

 </DIV>



 <DIV id="footer">

  Stuff for the footer

 </DIV>



</BODY>



</HTML>


Here is what this code looks like, as a test:

http://www.skyglow1.freenukehosting.com/test.html

I am assuming the header is 200 in height, please tell me what it should be. Any changes you want, just ask. Also I need height of the footer at the bottom. If you don't like the border then tell me. Or if you don't want to seperate files then say that. ^^

skyglow1

Comment/Reply (w/o sign-up)

skyglow1
Yeah I was wondering that too why it was so big. Maybe becuase most of his viewers have a higher resolution?

skyglow1

Comment/Reply (w/o sign-up)

wildteen88
Isn't 1200 or sommit way too big! Especially for vistors with 800x600 screen resolutions! or 15" screens!

I recommend lowering the widths man! Althought you may have a bigger screen others may not have. Remember that dude!

Comment/Reply (w/o sign-up)

nate9000
Thanks a bunch!, i'v been wan'ting to make my own php portal system, but i don't have to much experiance with css, so you helped a bunch! happy.gif

Comment/Reply (w/o sign-up)



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

Pages: 1, 2
Similar Topics

Keywords : Footer Css


    Looking for make, 3, column, head, footer, css

Searching Video's for make, 3, column, head, footer, css




advertisement



How do you make a 3 column with head and footer with css?