Me and my friend (Turbocom) have recently been fighting over whos a better coder, I'm on Eliterates side because I know hes better, hes on iszaks.
CSS off of a Layout coded by izsak
html
{
border: none;
overflow: auto;
}
body
{
background-color: #e3e3db;
}
#container
{
width: 700px;
margin: 0 auto;
padding: 0 6px 4px;
background-image: url("../images/container.gif");
}
#header
{
float: left;
width: 100%;
height: 128px;
background: url("../images/header.gif") repeat-x 0 28px;
}
#box1, #box3
{
float: left;
height: 15px;
width: 104px;
padding: 4px 0;
background-color: #e1e1e1;
border-bottom: 1px solid #d2d2d2;
}
#box2
{
float: left;
height: 15px;
width: 490px;
margin: 0 1px;
padding: 4px 0;
background-color: #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}
CSS off HabboHut coded by Eliterate
* {margin: 0px 0px; padding: 0px 0px;}
html, body {width: 100%; height: 100%; text-align: center;}
body {background: #94deef url('../../images/layout/backgrounds/02.gif') repeat-x bottom left fixed; font-family: verdana, havana, sans-serif; font-size: 11px;}
a img {border-width: 0px;}
a, a:visited {color: #6ba719;}
a:hover {text-decoration: none;}
#clouds {z-index: 5; position: absolute; top: 15%; height: 328px; width: 100%;}
#container {border-left: 2px #000 solid; border-right: 2px #000 solid; margin: 0px auto; background-color: #fff; text-align: left; width: 900px; min-height: 100%; z-index: 10; position: relative;}
#header {width: 100%; height: 142px; border-bottom: 2px #000 solid; background: url('../../images/layout/logo_background.png') repeat-x;}
#logo {float: left; width: 246px; height: 142px; background: url('../../images/layout/logo.png') no-repeat;}
#radio_stats {float: right; padding: 10px 10px;}
#radio_stats #show_stats {border: 2px #000 solid; background-color: #fff; width: 600px; min-height: 118px; max-height: 118px; overflow: auto;}
#radio_stats #show_stats #show_radio_stats {padding: 10px 10px;}
#radio_stats #show_stats #show_radio_stats .heading {border-bottom: 1px #bbb solid; background-color: #efefef; font-weight: bold; padding: 4px 4px; margin-bottom: 10px; color: #5b5b5b !important;}
#radio_stats #show_stats #show_radio_stats #radio_view {float: left; border-right: 1px #ccc dashed; padding-right: 10px; width: 350px;}
#radio_stats #show_stats #show_radio_stats #radio_info {margin-left: 360px; padding-left: 10px;}
#navigation {background-color: #efefef; border-bottom: 1px #bbb solid; padding: 10px 10px; text-align: center; font-weight: bold; clear: both;}
#navigation a, #navigation a:visited {text-decoration: none; color: #505050; padding: 4px 4px;}
#navigation a:hover {color: #000;}
.prototip {position: absolute;}
.prototip .navigation {width: 175px; text-align: left;}
.prototip .navigation .content {border: 1px #bbb solid; background-color: #efefef; border-top-color: #efefef;}
.prototip .navigation .content ul {list-style-type: none;}
.prototip .navigation .content ul li {display: block; padding: 5px 5px;}
.prototip .navigation .content ul li a, .prototip .navigation .content ul li a:visited {text-decoration: none; color: #606060;}
.prototip .navigation .content ul li:hover {background-color: #ccc;}
#content {padding: 10px 10px 17px; position: relative;}
#left {float: left; width: 200px;}
#right {margin-left: 210px;}
#sub-navigation, .sub-section {background-color: #00a2dd; border-bottom: 1px #007aaa solid; padding: 5px 5px; color: #fff; font-weight: bold;}
#left a, #left a:visited {display: block; padding: 5px 5px; border-bottom: 1px #ccc dashed; text-decoration: none; color: #444;}
#left a:hover {border-bottom: 1px #007aaa solid;}
h1 {margin-bottom: 10px; padding-bottom: 5px; color: #707070; border-bottom: 1px #ccc dashed;}
p {margin-bottom: 10px;}
ul {list-style-type: none;}
ul li {padding: 5px 5px;}
ul li.alt {background-color: #e5e5e5;}
I only did a snippet for the CSS.
HTML off a Layout coded by iszak
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="styles/reset.css" rel="stylesheet" type="text/css">
<link href="styles/print.css" rel="stylesheet" type="text/css">
<link href="styles/layout.css" rel="stylesheet" type="text/css">
<meta name="robots" content="index, nofollow">
<meta name="author" content="Author">
<title>Site Name - Site Slogan</title>
</head>
<body>
<div id="container">
<div id="header">
<p id="box1">Lorem Ipsum</p>
<p id="box2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras amet.</p>
<p id="box3">Lorem Ipsum</p>
</div>
<div id="subcontainer">
<p id="box4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis massa quam, volutpat ut, varius sed, scelerisque.
</p>
<div id="box5">
<iframe src="content/home.html" name="content"></iframe>
</div>
<div class="column">
<div class="box">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum mattis sem ac dui euismod vulputate. Sed imperdiet enim sed risus.
</p>
</div>
<div class="box">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum mattis sem ac dui euismod vulputate. Sed imperdiet enim sed risus.
Integer quam. Cras lacus eros, elementum eget, posuere at, imperdiet eu, odio. Vestibulum ultrices. Fusce vel sed.
</p>
</div>
<div class="box" id="blue">
<p></p>
</div>
</div>
<div class="column" id="right">
<div class="box">
<h1>Lorem Ipsum</h1>
<ul>
<li class="dark">Aliquam tempus nibh non est.</li>
<li class="light">Sed varius ipsum vel nisl.</li>
<li class="dark">Nam volutpat varius sapien.</li>
<li class="light">Vestibulum luctus odio sed sem.</li>
</ul>
</div>
<div class="box">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ornare ipsum a erat. Nunc tempor metus.
</p>
</div>
<div class="box">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer quam in nisl. Fusce diam sem, tristique vel, mollis vitae,
elementum ac, arcu. Ut tempor. In adipiscing justo ac dui amet.
</p>
</div>
</div>
</div>
<div id="clear"></div>
</div>
<p id="footer">
Copyright © <?php echo date("Y"); ?> SiteName.com
</p>
</body>
</html>
HTML off Habbohut coded by Eliterate
<!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>
<title>HabboHut</title>
<!-- Meta Content -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="title" content="HabboHut" />
<meta name="description" content="HabboHut is the first Habbo Hotel International Radio Fansite! HabboHut includes great content, awesome DJ's and lots more!" />
<meta name="keywords" content="habbo, habbo hotel, hotel, boards, hut, the hut, habbo au, habbo ca, official, fansite, habbo us, habbo sg" />
<!-- Stylesheets -->
<link href="/library/css/layout.css" type="text/css" rel="stylesheet" />
<!-- JavaScript -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAiLKrVU9YDqW1T0vE_aqk6hQRm1E5AJuf v6kDsoZoQkUCXJh79BQ-79ylGBKsugkmDm3yXPnWM38MzA"></script>
<script type="text/javascript" src="/library/javascript/prototype.js"></script>
<script type="text/javascript" src="/library/javascript/scriptaculous.js"></script>
<script type="text/javascript" src="/library/javascript/prototip.js"></script>
<script type="text/javascript" src="/library/javascript/global.js"></script>
<script type="text/javascript" src="/library/javascript/gfeedfetcher.js"></script>
<script type="text/javascript" src="/library/javascript/gajaxticker.js"></script>
</head><body>
<div id="black-underlay" style="display: none;">
<div id="content-overlay" style="display: none;"></div>
</div>
<div id="clouds">
<marquee direction="right" scrollamount="2">
<img src="images/layout/clouds.png" alt="" />
<img src="images/layout/clouds.png" alt="" />
</marquee>
</div>
<div id="container">
<div id="header">
<div id="radio_stats">
<div id="show_stats">
<div id="show_radio_stats"><span id="stats">Loading...</span></div>
<div class="spacer"></div>
<div align="center">
<object type="application/x-shockwave-flash" width="130" height="16" data="http://habbohut.com/content/radio/player/xspf_player_slim.swf?playlist_url=http://habbohut.com/content/radio/player/playlist.xspf&autoplay=true&volume_level=50">
<param name="movie" value="http://habbohut.com/content/radio/player/xspf_player_slim.swf?playlist_url=http://habbohut.com/content/radio/player/playlist.xspf&autoplay=true&volume_level=50" />
<param name="autoplay" value="true"/>
<param name="quality" value="high"/>
</object></div>
</div>
</div>
<a href="/"><div id="logo"></div></a>
</div>
<div id="navigation">
<a href="javascript:content('home.php');" id="home">Home</a>
<a href="/board" id="boards" target="_blank">Discussion Boards</a>
<a href="javascript:content('habbohut+about_us.php'); " id="habbohut">HabboHut</a>
<a href="javascript:content('radio+promotions.php');" id="radio">Radio</a>
<a href="javascript:content('community+events_timetab le.php');" id="community">Community</a>
<a href="javascript:content('magazine+about.php');" id="magazine">Magazine</a>
<script type="text/javascript">
new Tip('habbohut', '<ul><li><a href="javascript:content(\'habbohut+about_us.php\' );">About Us</a></li><li><a href="javascript:content(\'habbohut+jobs.php\');"> Jobs</a></li><li><a href="javascript:content(\'habbohut+staff.php\');" >Staff</a></li><li><a href="javascript:content(\'habbohut+news.php\');"> News and Updates</a></li><li><a href="javascript:content(\'habbohut+contact_us.php \');">Contact Us</a></li></ul>', { className: 'navigation', effect: 'blind', fixed: true, offset: { x: 0, y:27 }, hideOn: false, hideAfter: .2 });
new Tip('radio', '<ul><li><a href="javascript:content(\'radio+timetable.php\'); ">Timetable</a></li><li><a href="javascript:content(\'radio+requests.php\');" >Requests/Shoutouts</a></li><li><a href="javascript:content(\'radio+promotions.php\') ;">Upcoming Promotions/Shows</a></li></ul>', { className: 'navigation', effect: 'blind', fixed: true, offset: { x: 0, y:27 }, hideOn: false, hideAfter: .2 });
new Tip('community', '<ul><li><a href="javascript:content(\'community+events_timeta ble.php\');">Events Timetable</a></li><li><a href="javascript:content(\'community+rare_values.p hp\');">Rare Values</a></li><li><a href="javascript:content(\'community+faqs.php\');" >HabboHut FAQs</a></li></ul>', { className: 'navigation', effect: 'blind', fixed: true, offset: { x: 0, y:27 }, hideOn: false, hideAfter: .2 });
new Tip('magazine', '<ul><li><a href="javascript:content(\'magazine+about.php\');" >About the Magazine</a></li><li><a href="javascript:content(\'magazine+submit_article .php\');">Submit an Article</a></li><li><a href="javascript:content(\'magazine+issues.php\'); ">Issues</a></li></ul>', { className: 'navigation', effect: 'blind', fixed: true, offset: { x: 0, y:27 }, hideOn: false, hideAfter: .2 });
</script>
</div>
<div id="content"><script type="text/javascript">content('home.php');</script></div>
<div style="clear: both;"></div>
<div id="ticker"><script type="text/javascript">
var socialfeed=new gfeedrssticker("example2", "example2class", 3000, "")
socialfeed.addFeed("AU", "http://www.habbo.com.au/articles/rss.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("UK", "http://www.habbo.co.uk/articles/rss.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("CA", "http://www.habbo.ca/articles/rss.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("US", "http://www.habbo.com/articles/rss.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("SG", "http://www.habbo.com.sg/articles/rss.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label itemtitle snippet") //show the specified additional fields
socialfeed.setentrycontainer("div") //Display each entry as a DIV
socialfeed.filterfeed(25, "date") //Show 15 entries, sort by label
socialfeed.entries_per_page(1)
socialfeed.init() //Always call this last
</script></div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/*********"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-1157221-1
");
pageTracker._trackPageview();
</script>
</body>
</html>
Results 1 to 10 of 36
Thread: Which Codings better.
-
Which Codings better.
Me and my friend (Turbocom) have recently been fighting over whos a better coder, I'm on Eliterates side because I know hes better, hes on iszaks.
CSS off of a Layout coded by izsak
CSS off HabboHut coded by Eliterate
I only did a snippet for the CSS.
HTML off a Layout coded by iszak
HTML off Habbohut coded by Eliterate
Last edited by Alexz0r; 02-01-2009 at 09:29 PM.
-
Iszak is better. It's not all about CSS. CSS is a minor part in my opinion.
I hate Turbocom, but I do agree with him
Also, Iszak indents his code.. I have seen it. Copy & paste properly next time please babes.
-
There is indents, but there not showing up, same with eliterates coding.
Originally Posted by Jackboy
Iszak is better. It's not all about CSS. CSS is a minor part in my opinion.
I hate Turbocom, but I do agree with him
Also, Iszak indents his code.. I have seen it. Copy & paste properly next time please babes.Last edited by Alexz0r; 02-01-2009 at 09:35 PM.
-
Also I usually add padding: 0; and margin: 0; on my body. As for that, here's some inefficiencies in Eliterate's code.
can beCode:a img {border-width: 0px;} a, a:visited {color: #6ba719;}
furthermoreCode:a img {border: none;} a {color: #6ba719;}
is the same asCode:* {margin: 0px 0px; padding: 0px 0px;} #radio_stats {float: right; padding: 10px 10px;} .prototip .navigation .content ul li {display: block; padding: 5px 5px;} #radio_stats #show_stats #show_radio_stats {padding: 10px 10px;}
I'm sure I can find more.Code:* {margin: 0; padding: 0;} #radio_stats {float: right; padding: 10px;} .prototip .navigation .content ul li {display: block; padding: 5px;} #radio_stats #show_stats #show_radio_stats {padding: 10px;}
-
Okay. Don't change anything. Originally Posted by Alexz0r
OH WAIT. In a mintue we will get all the coders with huge egos posting about Iszak like usual
-
I'm still pretty sure Eliterates better. If not HTML then PHP I'm pretty sure.
-
Iszac is better.
Lets set the stage on fire, and hollywood will be jealous.
-
Alex mate. Stick to what you're good at, designing layouts, then learn PHP and start talking about who is better. x Originally Posted by Alexz0r
-
Actually, just to defend my thoughts in coding,
'border' is used to hold all characteristics of a border, ie: border: 1px #000 solid;
while border-width just defines the width. Therefore producing cleaner and easier to understand code.
As for paddings and margins, you should always define a unit of measure.
Just as a practice, I always use two measurements when defining because I could change at anytime, so it's already there.
Much of what you have been pointing out isn't wrong, it's just a different practice.
-
Reply With Quote
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts