New Index, etc — OZONE Asylum, home of the Mad Scientists

This page's ID: 10401

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Hi skye! (heh) This is the first site review I make, but I will give it a try, since I have been up to my ears with html and CSS lately. Consider I am not an expert though! I checked your pages and hmmm I got a little confused... I understand that they are first drafts for your coming site. The idea for it could be good, if it is a personal homepage. The logo colours are cool. It gives the visitor the impression that this is a "young" and flashy site, inspired by techno or rave, kinda, showing graphics or music in the same kind of wave as the logo tells you. Am I right? However, the logo is huge and taking over the entire site. Make it smaller and let it blend in to the blue colour you have next to it, where it says "Skyetyger Design by Design:". Next, the other blue colour you have for background doesn't fit, really. Use the same blue colour all over, or make a picture for the entire top where the logo is. Divide top and bottom with a line or something. The yellow colour is not good with the others. It's like "five year old girl with doll enters the coolio teenager's room". The thing to the left (in Explorer, at least. Coming back about browsers.) Is that the menu background, or just a... thing? So to the main critics: coding. (The pindex site is the example below, since the other one doesn't have much of content.) 1. Start your html document with <html>. It helps the browser, you know. There are tons of help files in the Asylum to let you know what codes you HAVE TO put in in the html document. Here is the minimum codes that I usually put in before I even start coding: <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <meta name="description" content="This site is......" /> <meta name="keywords" content="Keywords go in here" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="name_of_document.css" type="text/css"> </head> <body> Content here </body> </html> If you haven't got the above codes there will be people who can't see much of the content of your page. 2. You have two div-tags after each other in the beginning of the pindex-site with one div-tag closing. Skip one of them, or the browser will be confused. 3. Use the right name on images with right extensions. loggia.jpg has the extension .jpeg which doesn't show much if you say .jpg in the code. Calling an image only .gif in your CSS doesn't show anything. 4. You have so many different divs and p:s that it gets confusing. I bet you can clean up a lot here. You don't need a new type of div for each time you use it in the html, as well as the p tags. Use one (or two) div tag(s) for top, one for menu, one for the yellow area and one for the bottom, and four (or five) id:s in the CSS accordingly to these. Put in whatever fonts and colours you need in these in the CSS, and you can skip most of your p-classes that you use. 5. A somewhat correct CSS for the top part of your pindex site would be: /* The font for the entire page here, as well as background picture / body { font-family : "Arial narrow", Arial, sans-serif; color : #054b82; background : #01104a url(loggia.jpg) no-repeat fixed 0px 0px; margin-left : 0px; margin-right : 0px; margin-top : 0px; margin-bottom : 0px; } / This is the block with title text / #I { font-size : 36px; background-color : transparent; position : absolute; top : 50px; left : 415px; width : 320px; height : 249px; padding : 10px; text-align : left; } / This is the S. It is pushed down by vertical align. / .xt { border-width : 3px; border-color : #054b82; border-style : solid none none solid; font-size : 60px; color : #054b82; background-color : transparent; font-family : Times, serif; vertical-align : text-top; } / This is the KYETYGER pushed up a little / .sub { vertical-align : sub; } / This is Design... pushed forward */ p.indent { text-indent : 90px; } ...and the according html for the top would be: <body> <div id="I"><font class="xt">S</font><span class="sub">KYETYGER</span><p class="indent">Design by Design:</p></div> It doesn't look [i]exactly[/i] the way you have it. Take a look at [url=http://www.malmo.bostream.se/richcris/test/]http://www.malmo.bostream.se/richcris/test/[/url] to see the result. I have used the same colours and font sizes as you have, as well as picture size (but, hey, make it smaller!). And a few extra things to show you what you can play with. Or why even bother with all those different font styles? Make a picture of the whole top, so you get it the way you want it! 6. By not setting top, left and width for the different blocks in CSS will make them float around like mad flies in other browsers than Explorer. I made screenshots of your page in Netscape and Opera here: [url=http://www.malmo.bostream.se/richcris/test/pindexbrows.html]http://www.malmo.bostream.se/richcris/test/pindexbrows.html[/url] There are so much more to say. Some good advise besides all the above information: Buy a good book about HTML and CSS and learn the basic codings. And visit the tutorials in the Asylum. Good luck! Kasta sten i glashus? Jag? Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu