2k Art: New Design! (finally, Its Better!)

KansukeKojima

Jan 21 2008, 07:34 PM

http://2kart.trap17.com

Comments and suggestions please... I tried very hard to make it better than its predecessors... I think I suceeded....

csp4.0

Jan 23 2008, 12:49 AM

huh... I doesn't seem to work that well with firefox. But you also didn't do a doctype which is most likely the reason for it not working. Other wise the colours and layout is pretty good. Your logo for some reason reminded me of blood splattered across a window... But good site. Should do more support for other browsers and should put in a doctype.
Doctypes aren't really required but to make the site look professional you must have a doctype. When you do add a doctype go to www.w3.org and validate your site so that you can make sure that your site has absolutely no coding errors...

KansukeKojima

Jan 23 2008, 12:54 AM

ok thanks.... I'm working on fixing it thanks...

KansukeKojima

Jan 23 2008, 01:12 AM

Ok well... I tried to validate it... it showed me how to fix it... buit it never worked....

sonesay

Jan 23 2008, 01:21 AM

Valid code on validator doesnt mean it will display poperly but it helps narrow down the possible problems. It just comes with knowledge and practice to be able to build a good CSS and HTML layout from scratch. Thats why most people use basic templates with the structure already put out.

http://www.code-sucks.com/css%20layouts/

go here to find a similar style layout you want and build it off there. take a look at the source code and thats how your surpose to structure the layout otherwise you get all sorts of problems when its not structured a certain way.

KansukeKojima

Jan 23 2008, 03:30 AM

Thanks, but I want to use what I made... just because........

Well... I'm posting my code... could you help me look for some bugs?

Here is my css... its completely valid (I checked) but it will still help

CODE

CSS

body {
padding : 0;
background-color : #1e1e1e;
}
a:link, a:visited {
font-family : verdana, tahoma, arial, sans-serif;
font-size : 8pt;
color : #3b3b3b;
text-decoration : none;
font-weight : bold;
}
a:hover {
color : #3b0004;
text-decoration : none;
border-bottom : 1px dashed #3b0004;
font-weight : bold;
}
.container {
background-color : #ffffff;
font-family : verdana, tahoma, arial, sans-serif;
font-size : 8pt;
color : #000000;
text-decoration : none;
width : 780px;
text-align : left;
border : 1px solid #1e1e1e;
}
.container2 {
background-image : url('images/cont2_bg.gif');
font-family : verdana, tahoma, arial, sans-serif;
font-size : 8pt;
color : #000000;
text-decoration : none;
width : 780px;
text-align : left;
border-top : 1px dashed #000000;
border-bottom : 1px dashed #000000;
}
.content_left {
margin-left : 0;
margin-right : 0;
background-color : #ffffff;
font-family : verdana, tahoma, arial, sans-serif;
font-size : 8pt;
color : #000000;
text-decoration : none;
width : 495px;
text-align : left;
float : left;
}
.content_right {
background-color : #ffffff;
font-family : verdana, tahoma, arial, sans-serif;
font-size : 8pt;
color : #000000;
text-decoration : none;
width : 284px;
text-align : left;
float : right;
}
.banner {
top : 20px;
text-align : left;
height : 200px;
width : 780px;
background-image : url('images/banner3.gif');
border-bottom : 1px solid #1e1e1e;
}
.banner-bottom {
background-color : #f8f8f8;
font-size : 8pt;
height : 10px;
width : 780px;
}
span.highlight {
color : #3b0004;
border-bottom : 1px dashed #000000;
text-align : left;
font-weight : bold;
font-size : 20pt;
}
span.highlight2 {
color : #3b0004;
border-bottom : 1px dashed #000000;
text-align : left;
font-weight : bold;
font-size : 10pt;
}
span.highlight3 {
color : #3b0004;
text-align : left;
font-weight : bold;
font-size : 15pt;
}
.footer {
font-family : verdana, tahoma, arial, sans-serif;
font-size : 8pt;
color : #000000;
text-decoration : none;
width : 780px;
text-align : center;
background-color : #ffffff;
}
.spacer {
font-size : 1pt;
height : 4px;
width : 780px;
}
.padding {
background-color : #ffffff;
font-family : verdana, tahoma, arial, sans-serif;
font-size : 8pt;
color : #000000;
text-decoration : none;
text-align : left;
padding-left : 10px;
padding-right : 5px;
max-width : 765px;
min-width : 765px;
}

Here is my HTML

CODE

HTML

<html>
<head>
<title>
w w w . 2 k a r t . t r a p 1 7 . c o m
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name='description' content='2K ART is a website devoted to art, and webdesign/programming.' />
<meta name='keywords' content='2K ART, 2k, art, portfolio, programming, PHP, CSS, HTML, free, downloads, design, web, blog, Davis, Hay, Kansuke, KansukeKojima, bryce, photoshop, ' />
</head>
<body topmargin="5">
<link rel="stylesheet" href="css.css" type="text/css">
<center>
<a name="top"></a>
<div class="container">
<div class="banner">
</div>
<div class="banner-bottom">
<marquee>Welcome to w w w . 2 k a r t . t r a p 1 7 . c o m</marquee>
</div>
<div class="container2">
<div class="content_left">
$content_select
</div>
<div class="content_right">
<span class="highlight2">Navigation</span>
<br><div class="padding">
<b>1.</b> $link[1]<br><br>
<b>2.</b> $link[2]<br><br>
<b>3.</b> $link[3]<br><br>
<b>4.</b> $link[4]<br><br>
<b>5.</b> $link[5]<br><br>
</div>
<span class="highlight2">Associates</span>
<div class="padding">
<a href="http://blog.zedsi.com" target="_blank">Zedsi Developers Blog</a>
</div>
</div>
</div>
<span class="spacer" />
<div class="footer">
<a href="#top">Going Up?</a><br>
| $link[1] |
$link[2] |
$link[3] |
$link[4] |
$link[5] |<br><br>
Copyright © 2008. All rights reserved.
<span class="spacer" />
</div>
</div>
</center>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2884448-1";
urchinTracker();
</script>
</body>
</html>

jlhaslip

Jan 23 2008, 04:20 AM

First,

Remove the min-width and max-width from the .padding class.

CODE

.padding {
background-color : #ffffff;
font-family : verdana, tahoma, arial, sans-serif;
font-size : 8pt;
color : #000000;
text-decoration : none;
text-align : left;
padding-left : 10px;
padding-right : 5px;
}

the width for the div is already set in the css for the div which contain these elements, so you are overwriting the width from inside the div. Not a correct thing to do, even though it might validate.

Second,

add:

CODE

clear:both;

in the footer css code.

CODE

.footer {
font-family : verdana, tahoma, arial, sans-serif;
font-size : 8pt;
color : #000000;
text-decoration : none;
width : 780px;
text-align : center;
background-color : #ffffff;
clear:both;
}

These changes will affect the page presentation, however, there are some things in your page which should be changed.
CSS works best with semantically correct html. The list of links in the right hand column should be an ordered list (or unordered list) to be semantically correct. Also, the br tags are unneccesary if you use margins or padding to space the page elements.

KansukeKojima

Jan 23 2008, 04:37 AM

jhaslip.... you are amazing! thank you.... this is amazing... thank you thank you thank you!!!!!!!

Seriously... I owe you so much right now... thank you!

jlhaslip

Jan 23 2008, 05:24 AM

You are welcome. Glad it worked.

Also, check out this link: http://jlhaslip.trap17.com/samples/templat...ight/index.html and do a view source of the code to see a more semantic layout for your page. Copy it if you want to, but it is a full width design, not fixed and centred like yours. It should have a few pointers in there to get your page coded more semantically correct. (specifically the link list in the sidebar)

Don't be discouraged if things don't work the first (or 12th) time. There is lots to learn about html and it takes time and practice. More practice than time, actually, so offer your skills to friends and Forum members to develop the skills you need.

Good Luck with the site, of course...

KansukeKojima

Jan 23 2008, 10:20 PM

I've added a forum today!
It can be found on the website, Enjoy!

Latest Entries

KansukeKojima

Jan 24 2008, 06:46 PM

Thanks for you comments!

Also, I would appreciate it if a few people would join the forum.... I mean... they are kind of hard to get started when there is no one to talk to... lol

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE