New messages Members Forum rules Search
  • Page 1 of 1
  • 1
Forum moderator: kostova, Brazen  
uCoz Support Forum by uCozers » Coding » HTML » Columns (sml[Default])
Columns
AloyashaDate: Tuesday, 2010 September 14, 6:10 AM | Message # 1
Font size: A | A |
Private
Group: User
Message: 5
[ ]
Offline
Am starting to learn HTML as a lot of people requested me to do it, but i need help with creating columns to make it a little something like this:

Code
<html>
<head>
<title>WEBSITE TITLE HERE</title>
<style>
/* Start CSS */

/* This changes your link colors */
A:link   
{ text-decoration: none; color: #003399; }
A:visited   
{ text-decoration: none; color: #003399; }
A:active
{ text-decoration: none; color: #003399; }
A:hover   
{ text-decoration: none; color: #6666FF; }

/* This changes the basic properties of your layout */
body
{ font-family: Verdana; sans serif; helvetica;
color: #333333;
font-size: 10px;
background-color: #FFFFFF;
background-image: url(' ');
text-align: justify;
margin-bottom: 5px;   
margin-right: 0px;   
margin-top: 5px;
}

/* This code centers the layout */
#container {
margin:0px auto 0px auto;
width:100%;
text-align:center;
}

/* Leave this be */
#container2 {
width: 800px;
text-align: left;
margin: 0px auto;
position: relative;
min-height: 300px;
}

/* This code controls the properties of your left menu */
#leftmenu
{ font-family: Verdana; sans serif; helvetica;
color: #333333;
font-size: 10px;
background-color: #E8E8E8;
background-image: url(' ');
text-align: left;
border: 0px solid #000000;
width:130px;
padding:10px;
}

/* This code controls the properties of your right menu */
#rightmenu
{ font-family: Verdana; sans serif; helvetica;
color: #333333;
font-size: 10px;
background-color: #E8E8E8;
background-image: url(' ');
text-align: right;
border: 0px solid #000000;
width:130px;
padding:10px;
}

/* This code is not mandatory, but sets a background for the menu headers */
#menuheader
{ font-family: verdana; helvetica; sans serif;
color: #333333;
font size: 10px;
background-color: #CCCCCC;
background-image: url(' ');
text-align: center;
margin-top: 5px;
padding:3px;
}

/* This code controls the properties of your content */
#content
{ font-family: Verdana; sans serif; helvetica;
color: #333333;
font-size: 10px;
background-color: #FFFFFF;
background-image: url(' ');
border: 0px solid #000000;
padding:10px;
}

/* This code controls the properties of your disclaimer */
#disclaimer
{ font-family: Verdana; sans serif; helvetica;
color: #333333;
font-size: 10px;
background: #CCCCCC;
background-image: url(' ');
border: 0px solid #000000;
text-align:center;
width:800px;
height:90px;
padding:10px;
}

/* This code controls the properties of your banner */   
#banner
{ background: #CCCCCC;
background-image: url(' ');
border: 0px solid #000000;
text-align:center;
width:800px;
height:200px;
}

/* This sets the properties for content headers */
h1
{ font-family: verdana; sans serif;
font-size: 15px;
font-weight: bold;
font-variant: small-caps;
align:center;
}

/* End CSS */

</style>
</head>
<body leftmargin="0" rightmargin="0" topmargin="10" bottommargin="10">
<div id="container">
<div id="container2">

<table cellspacing="0" cellpadding="0" border="0">
<tr><td valign="top" id="banner" colspan="3"></td></tr>
     <tr>
        <td valign="top" id="leftmenu">

<!-- Start Left Menu -->

           <div id="menuheader">HEADER</div>
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a>

           <div id="menuheader">HEADER</div>
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a>

           <div id="menuheader">HEADER</div>
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a>

           <div id="menuheader">HEADER</div>
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a>

<!-- End Left Menu-->

        </td>
        <td valign="top" id="content">
           <div align="justify">

<!-- Start Content -->

<h1>Layout Template #3 - How to Use</h1>

Well, it should be pretty self-explanatory. The numerous comments I left in the code won't show up on the layout but they will guide you when you are   
editing the code. All the colors are pretty plain and there are no images, but those are for you to edit.

<p><strong>Applying Background Images</strong></p>
Fill out the <font color="purple">background-image: url('')</font> areas in the code. There should be a different background code for all the areas of   
the layout. If you don't want an image bg, you can always change the bg color by editing <font color="purple">background: #HexColorCodeHere;</font>.

<p><strong>Changing the Layout Width</strong></p>
The default width is set to 800px, which fits into all computer resolutions. But nowadays, since higher resolutions are more popular, you are always   
free to make it bigger. Just replace everywhere that says 800px to whatever size you want. You may also want to adjust the widths of the menus to   
accompany it.

<p><strong>Where Credits are Concerned</strong></p>
I honestly don't care much if you move the credits, but I'd like them to be on your site. By that I don't mean stuffing it on a random page with 6 point   
font that no one will ever see. ^^' Please let it stay in the disclaimer or menu or credits page if you must and make sure that it <i>links</i> to Eonlight   
Valley, please.

<p>
Other than that, good luck with the layout!

<!-- End Content -->

           </div>
        </td>
        <td valign="top" id="rightmenu">

<!-- Start Right Menu -->

           <div id="menuheader">HEADER</div>
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a>

           <div id="menuheader">HEADER</div>
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a><br />
           <a href="#">Link Here</a>

<!-- End Right Menu -->

        </td>
     </tr>
     <tr>
        <td valign="top" id="disclaimer" colspan="3">

<!-- Start Disclaimer -->

This site is (c) [insert your name]... etc. etc.

<p>
Layout Template by <a href="http://www.eonlightvalley.com">Eonlight Valley</a>.

<!-- End Disclaimer -->

        </td>
     </tr>
</table>
</div>
</div>
</body>
</html>

From Eonlightvalley Template #3. see it has columns to hold stuff and somewhere to post Banner and Contents, Basically a place the holds the page togethere. I don't want to copy Eonlightvalley's Code..But Help Me Make Some..


 
BrazenDate: Tuesday, 2010 September 14, 9:01 PM | Message # 2
Font size: A | A |
Colonel
Group: Administrator
Message: 304
[ ]
Offline
Why not just copy and modify the code? It would be easier than just starting from scratch.

LOL With Us! l Game Blog l 3D Autos

"knowledge without wisdom is curse" Alex Seb

 
AloyashaDate: Wednesday, 2010 September 15, 1:04 AM | Message # 3
Font size: A | A |
Private
Group: User
Message: 5
[ ]
Offline
But copying the code would be copying ELV's code, i don't want to do that, plus i want to learn and remember it so i don't have to look at the codes again ands tuff.

 
PistolDate: Wednesday, 2010 September 15, 5:06 PM | Message # 4
Font size: A | A |
Lieutenant
Group: uCozer
Message: 60
[ ]
Offline
just edit the code so u can learn how it works

do u really think ur friend makes averything himself u can find thousand of free helpfull things on the net

Edited ByPistol - Wednesday, 2010 September 15, 5:07 PM
 
uCoz Support Forum by uCozers » Coding » HTML » Columns (sml[Default])
  • Page 1 of 1
  • 1
Search:


Copyrights uCozers 2009 - 2019 To TOP
Refresh Smileys Manager