criticism please

Tact · 25-Feb-2007, 01:23 AM #1

lol i accidently typed that word correctly while i was trying to use google to spellcheck the word "criticism" for me. lol

anyway. I wanted some help with a site I made for a friend. I only did the coding part. images provided by super talented artist. and idea/concept by my friend the owner of the site.

this is the VERY VERY first website i ever made where i decided to actually go tableless and be a hardcore strict validate everything type of coder. normally i never cared about my sites. but since it's not MY site, it's my friends, i wanted to make sure he gets the best.

to start with. (sorry if i'm not brief. long explenation ahead O_o)

i used this link as my guide while learning all this css junk.

http://www.glish.com/css/

i decided to use "static width and centered" as the base of my code and simply made extra copies of whatever was already there to suit my needs.

along with other random links. but this is what i based my layout on looking for a replacement for the old slice and dice method.

here are my results.

http://www.legionofangels.net

were still not officially open yet. still working on it as you can tell by the ugly iframe.

here is my code. everything has been validated and is perfect. and i tested everything in ie6, avant, and firefox. i couldn't be happier. however, i don't know if the way that i APPLIED what i learned was used correctly. i wanna know if my method was correct. if i used the best most logical way of accomplishing what i wanted to do.

here's the code so you can understand it better hopefully.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Legion of Angels</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
	
	body {text-align:center;margin: 0px; padding:0px; background-color:#032A53; }

	
	#frame {width:1000px; margin-right:auto; margin-left:auto; margin-top:0px; padding:0px; text-align:left; 
		border-bottom-width:thin; border-bottom-style:solid ; border-bottom-color:#AEC9DA; 
		border-left-width:thin; border-left-style:solid ; border-left-color:#AEC9DA; 
		border-right-width:thin; border-right-style:solid ; border-right-color:#AEC9DA; }
	

	#contentheader {background:url("http://forums.techguy.org/images/loa_01.jpg");width=1000px;height:24px;}

	#contentheader2 {background:url("http://forums.techguy.org/images/loa_02.jpg");width=1000px;height:210px;}
		
	#loa03 {width:301px;height:342px;padding:0px;float:left;background:url("http://forums.techguy.org/images/loa_03.jpg");}
	
	#loa04 {width:399px;height:342px;padding:0px;float:left;background:url("http://forums.techguy.org/images/loa_04.jpg");}
	
	#loa05 {width:300px;height:342px;padding:0px;float:left;background:url("http://forums.techguy.org/images/loa_05.jpg");}

	#loa06 {width:301px;height:501px;padding:0px;float:left;background:url("http://forums.techguy.org/images/loa_06.jpg");}

	#centerbox {width:399px;height:501px;padding:0px;float:left;background:url("http://forums.techguy.org/images/loa_07.jpg");}

	#loa08 {width:300px;height:501px;padding:0px;float:left;background:url("http://forums.techguy.org/images/loa_08.jpg");}

	#loa09 {width:298px;height:579px;padding:0px;float:left;background:url("http://forums.techguy.org/images/loa_09.jpg");}

	#loa10 {width:404px;height:579px;padding:0px;float:left;background:url("http://forums.techguy.org/images/loa_10.jpg");}

	#loa11 {width:298px;height:579px;padding:0px;float:left;background:url("http://forums.techguy.org/images/loa_11.jpg");}
		
	p,h1,pre {margin:0px 10px 10px 10px;}
		
	h1 {font-size:14px;padding-top:10px;}
		
	#contentheader h1 {font-size:14px;padding:10px;margin:0px;}
	
	#contentright p { font-size:10px}

	#imap {position:relative; margin:0; padding:0px; border: 1px solid #AEC9DA; }

	a#home, a#forum {display:block; width:100px; height:0px; padding-top:30px; overflow:hidden; position:absolute; border: 0px dotted red; }

	a#home { left:194px; top:483px;}
	a#forum { left:163px; top:554px;}

	#blog {position:relative; left: 0px; top:0px;}
	
</style>

</head>
<body>

<div id="frame">

<dl id="imap">
<dd><a id="home" title="Home" href="http://www.legionofangels.net">Home</a></dd>
<dd><a id="forum" title="Forum" href="http://www.legionofangels.net/forum">Forum</a></dd>
</dl>
	<div id="contentheader"></div>
	<div id="contentheader2"></div>
	<div id="loa03"></div>
	<div id="loa04"></div>
	<div id="loa05"></div>
	<div id="loa06"></div>
	<div id="centerbox">
		<div id="blog">
			<iframe src="angelblog.htm" frameborder="0" width="399" height="501"></iframe>
		</div>
	</div>
	<div id="loa08"></div>
	<div id="loa09"></div>
	<div id="loa10"></div>
	<div id="loa11"></div>


	<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->

</div>





</body>
</html>

what i learned thanks to the glish site, is that i could just make a box. and make more boxes in it. that's how glish achieved their layouts i think. and i just changed it to accomplish what i wanted. but what bothers me is that if i were to..for example, make a border just 1 pixel wide on any of those div boxes, (i call em boxes. sorry if not correct term) the whole thing will just mess up. imo, this is just plain fragile. for a lack of a better word. and i can only imagine that other browsers will display certain thicknisses diffrently and prolly won't see it right.

so my other question is, how can i make it so it isn't so "weak" like that. I need it to be "firm" and not mess up and to hold its place where i set them. in a table, there would be no fear of this because the table is unmoving no matter what. cells remain where they are. here however, i created the "illusion" of cells which in reality are more like boxes stacked on top of eachother and prone to falling.

so i'm wondering what is a better way to accomplish what i'm trying to do. in a sense. what is a better "slice and dice" replacement?

thank you for your time.

knight_47 · 25-Feb-2007, 02:01 AM #2

I think that looks really amazing! There is one thing I think should be fixed though.

Under Blog Title, that white box would look better if it was to the left instead of to the right.

Tact · 25-Feb-2007, 02:54 PM #3

thank you. the empty black sqaure will house an avatar of whoever ends up posting a blog for that day.

that's why the name/date thing is to the right

so the code is ok? the way i used it?

knight_47 · 25-Feb-2007, 03:52 PM #4

Yup it's perfect, good job.

http://validator.w3.org/check?uri=ht...fangels.net%2F

diggingforgold · 25-Feb-2007, 07:58 PM #5

Looks awesome and I would say your method is great. The only errors that invalidate your CSS would be lines 68 and 70, which should read width:1000px instead of width=1000px. Other than that, everything is absolutely perfect.

Also, try to come up with an alternative to iframes (search engines can't see them). Look into scrolling divs instead, if that's possible.

Tact · 26-Feb-2007, 01:24 PM #6

yah i was also researching scrolling divs but they didn't do what i wanted them to. you see, in the end, my friend is going to want a post from a vbulletin forum to go into it. and i heard its very difficult to get another html page into one like that. i heard of the <embed> tag but it was just too complicated and it wasn't working out.

and besides. the way i designed the site, i'm basically saying "get out" to screen readers, search engines, and anyone who disables images. i can't please everyone. and it's just the iframe that can't get read anyway. no big woop imo.

i'm glad i did everything ok. i was really worried because there are still some things about divs that confuse me. especially how to make them go where you want. like float left? float right? is there a float center? fixed position. things like that.

i know my site validates. but my method was just "little boxes" inside "big box". and i noticed that if i suddenly decided to give every little box a border of 1px each, my entire layout would get destroyed. and so i was worried that, if it was that easy to mess up, is it really the right way to accomplish my goal?

or maybe i just miss tables.

diggingforgold · 28-Feb-2007, 01:55 AM #7

You might be able to put content in scrolling divs using php include:

<?php include ("forums.php"); ?>

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)