My Unfinished Layout. [Archive]

Ff7Cloud0 99

02-22-2009, 03:59 PM

Made this "WebServer" layout about twenty minutes ago because I was bored. Also, I learned a bit about tables and three column layouts so I went ahead to see what I could whip up.

Screenshot:
http://i41.tinypic.com/2ntlbvl.jpg

HTML & CSS Source Code:

<html>
<head>
<title>
:: Singod's WebServer ::
</title>
<style type="text/css">
body {
text-align:center;
font-family:arial;
font-size:13;
background: #CCC;
}
table {
text-align:center;
margin-left: auto;
margin-right: auto;
}
div.logo {
border:1px solid black;
background:white;
}
div.menutop {
border:1px solid black;
float:left;
width: 200px;
background: white;
}
div.links {
float:left;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
width: 200px;
height: repeat-y;
}
div.news {
float:left;
border:1px solid black;
background:white;
margin-left:3px;
width: 600px;
}
div.newsbot {
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
margin-left:3px;
height: repeat-y;
}
div.afftop {
border:1px solid black;
background:white;
text-align:center;
width: 200px;
margin-top: 3px;
}
div.affbot {
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
padding: 0px 0px 75px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<table class="main" width="80%" cellpadding="2">
<tr>
<td class="logo">

<div class="logo">
"The Logo"
</div>
</td>
</tr>
<tr>
<td>
<table class="menu" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>

<td class="menutop">
<div class="menutop">
Menu
</div>
</td>
<td class="news" width="100%">
<div class="news">
:: News Module ::
</div>
<td>

</tr>
<tr>
<td class="links">
<div class="links">
Link<br>
Link<br>
Link<br>

Link<br>
Link<br>
</div>
</td>
<td class="newsbot" width="20%" valign="top">
<div class="newsbot">
News of importance will be shown here...<br>

News of importance will be shown here...<br>
News of importance will be shown here...<br>
News of importance will be shown here...<br>
News of importance will be shown here...<br>
</div>
</td>
</tr>

<tr>
<td class="affiliate">
<div class="afftop">
Affiliates
</div>
</td>
</tr>
<tr>
<td class="affiliateBot">

<div class="affbot">
Affiliates will go here.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>

</div>
</div>
</body>
</html>

If you want a copyright module at the bottom if you are going to use this as a basic layout for your site, then leave me a message I got lazy and didn't even bother with a footer.

~Singod

Shuza

02-22-2009, 04:03 PM

Ehh, it's kind of plain.

Ff7Cloud0 99

02-22-2009, 04:08 PM

Ehh, it's kind of plain.

Yeah I wasn't going to go all out and decorative. The point of me scripting this was to see what I could do with a mixture of Tables, Modules, and 3 Column Layouts, as well as DIV's.

I'll probably be making it look better later right now I was just releasing incase someone wanted to adjust it to their likings.

Arsenal

02-22-2009, 11:36 PM

If you need help, feel free to contact me via PMs.

Ff7Cloud0 99

02-23-2009, 01:26 AM

If you need help, feel free to contact me via PMs.

Alright thanks mate ;) - Nice template you made as well ;)

~Cloud

Arsenal

02-23-2009, 01:34 AM

Alright thanks mate ;) - Nice template you made as well ;)

~Cloud
The Just Babbelen one? We removed my site down a while ago. Bandwidth. Lol.

Ff7Cloud0 99

02-23-2009, 09:27 PM

The Just Babbelen one? We removed my site down a while ago. Bandwidth. Lol.

Yeah but I still liked your design =p

eRage

02-23-2009, 10:25 PM

you could have made a ***y looking 3 column layout in a few minutes..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>3 Column layout</title><style type="text/css"> body{ background:#333; /* The background colour */ font-family: Verdana, Geneva, sans-serif; /* The font family */ font-size: 10px; /* The font size */ } #wrapper{ margin-left: auto; /* This basically centers the div */ margin-right: auto; /* This basically centers the div */ width: 900px; } #leftbox{ background: #9C0; /* The background colour (a nice lime green) */ float: left; /* This makes the div float left */ padding: 3px; width: 150px; color:#333; /* The font colour (a dark gray) */ } #rightbox{ background: #9C0; /* The background colour (a nice lime green) */ float: left; /* This makes the div float left */ padding: 3px; width: 150px; color:#333; /* The font colour (a dark gray) */ } #mainbox{ background: #9C0; /* The background colour (a nice lime green) */ float: left; /* This makes the div float left */ padding: 3px; width: 550px; color:#333; /* The font colour (a dark gray) */ margin-left: 10px; /* Creates a 10 pixel margin to the left of the div */ margin-right: 10px; /* Creates a 10 pixel margin to the right of the div */ }</style></head><body> <div id="wrapper"> <div id="leftbox"> Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. </div> <div id="mainbox"> Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. </div> <div id="rightbox"> Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. </div> </div> </body></html>

Arsenal

02-23-2009, 10:54 PM

you could have made a ***y looking 3 column layout in a few minutes..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>3 Column layout</title><style type="text/css"> body{ background:#333; /* The background colour */ font-family: Verdana, Geneva, sans-serif; /* The font family */ font-size: 10px; /* The font size */ } #wrapper{ margin-left: auto; /* This basically centers the div */ margin-right: auto; /* This basically centers the div */ width: 900px; } #leftbox{ background: #9C0; /* The background colour (a nice lime green) */ float: left; /* This makes the div float left */ padding: 3px; width: 150px; color:#333; /* The font colour (a dark gray) */ } #rightbox{ background: #9C0; /* The background colour (a nice lime green) */ float: left; /* This makes the div float left */ padding: 3px; width: 150px; color:#333; /* The font colour (a dark gray) */ } #mainbox{ background: #9C0; /* The background colour (a nice lime green) */ float: left; /* This makes the div float left */ padding: 3px; width: 550px; color:#333; /* The font colour (a dark gray) */ margin-left: 10px; /* Creates a 10 pixel margin to the left of the div */ margin-right: 10px; /* Creates a 10 pixel margin to the right of the div */ }</style></head><body> <div id="wrapper"> <div id="leftbox"> Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. </div> <div id="mainbox"> Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. </div> <div id="rightbox"> Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. </div> </div> </body></html>
In CSS, use "em" rather then px.

Ff7Cloud0 99

02-24-2009, 12:19 AM

In CSS, use "em" rather then px.

Why, I was going to google it last night but you seem pretty familiar with CSS. How does "em" be more beneficial rather than using px ?

eRage

02-25-2009, 02:37 AM

In CSS, use "em" rather then px.
I've always used px and as far as im aware it's valid.

Singod20

02-27-2009, 06:00 PM

I've always used px and as far as im aware it's valid.

Yea well I never used em before I'm a px person, forget em.

Arsenal

02-27-2009, 06:05 PM

Why, I was going to google it last night but you seem pretty familiar with CSS. How does "em" be more beneficial rather than using px ?
No difference, just makes you seem cooler.

not def n00b

02-27-2009, 07:06 PM

it's kind of plain..

enriko033

02-28-2009, 03:08 AM

it's kind of plain..

dsgayeaghn

Ff7Cloud0 99

02-28-2009, 06:55 AM

dsgayeaghn

Do not spam my thread or I'll rape you, sincerely.

eRage

02-28-2009, 01:24 PM

No difference, just makes you seem cooler.
seems to me most people use px.. using em would make you look like somebody who just learnt to code and doesn't know how to use px.

Arsenal

02-28-2009, 03:44 PM

seems to me most people use px.. using em would make you look like somebody who just learnt to code and doesn't know how to use px.
EM is harder then PX. Lol. A lot of coders use em rather then px.

jabba

02-28-2009, 08:18 PM

Cool layout.

enriko033

03-01-2009, 03:20 PM

ntyyyyyy nmoto

Ff7Cloud0 99

03-04-2009, 05:38 PM

What I have made out of this base:
http://i41.tinypic.com/295wk6h.png

~Singod

Stealth

03-07-2009, 07:33 AM

Looks hot so far. Keep it up.

Mastav

03-07-2009, 07:58 PM

Not too bad, buddy. Keep it up...

Xzite

03-07-2009, 07:58 PM

Can't wait to see this when it's finished.