Topic: New Index, etc Pages that link to <a href="https://ozoneasylum.com/backlink?for=10401" title="Pages that link to Topic: New Index, etc" rel="nofollow" >Topic: New Index, etc\
 
Author Thread
skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

 IP logged posted posted 07-06-2003 08:24 Edit Quote

I have to redo my site. The main pages were nested tables, the server deleted the site, I uploaded from an out-of-date backup..yadda yadda..so I am redesigning in CSS..I am making four main navigation pages, an interlinking 4 main pages for the entire site. I am linking all four to one style sheet (or trying to link to one style sheet) so it is one design but I love color and graphics so each page is different but the same..Here is what I have..two pages..one is going to be HOME-Main, the second is ..I dunno yet..browser check? comments? It is simple but then, so am I..
http://skyetyger.com/pindex.html
http://skyetyger.com/bindex.html

Kartis Shone
Nervous Wreck (II) Inmate

From: Malmö, Sweden
Insane since: Mar 2002

 IP logged posted posted 07-06-2003 12:57 Edit Quote

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" rel="nofollow" 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&nbsp;by&nbsp;Design:</p></div>

It doesn't look exactly the way you have it. Take a look at http://www.malmo.bostream.se/richcris/test/ 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: http://www.malmo.bostream.se/richcris/test/pindexbrows.html

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?
skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

 IP logged posted posted 07-06-2003 17:22 Edit Quote

Thank you for all the work you did! I admire how fast you rewrote the code..
1) "exactly as you have it" In my pindex, there is a "space" between the Logo jpeg and the Logo Lettering but not in your example..is there a way to control that space and centering of the top box logo and lettering other than my fixes? Z index?..Absolute positioning? ... without a big top graphic I have seen lettering perfectly positioned next to top graphics but I don't know how to do it..and How do I center the footer box for the copyright..? The footer will expand as I add content but I want to keep it all centered in that one #box..inside #II
2) Anyone else have any thoughts about the "yellowish" middle main section where the writing is? How about a one color background with one font color?....the dark blue with the green font the same as what is used in the header? Any suggestions?
3) The Screen Shots of the other browsers are very helpful..
4) Some things you mention ..the jpg jpeg escaped my attention..thank you for mentioning that. The code itself must do for four pages..the fonts on the Main Page and the Sources Page may not be the same..so I am keeping it separate now..can combine it later rather than try to unravel what font goes to which page..but it is getting confusing..perhaps one style sheet page only works for very mono pages..
5) Thank You so much review. If the graphic is good..everything else is fixable..
skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

 IP logged posted posted 07-06-2003 19:28 Edit Quote

1) how to move the SKYETYGER away from the graphic? ..The logo lettering in the top box can be moved with the text indent command..easy!..Still working carefully on all your suggestions
skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

 IP logged posted posted 07-06-2003 19:35 Edit Quote

Darn I spoke too soon..using the indent to move the text away from the grapic puts the S far away from the border which is set to 3 for that little enclosure above the S..so how does one move the centered text away from the graphic in perfect alignment..the vertical align doesn't work for me..maybe I am writing it incorrectly..and it won't center..anyone know the command?
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 07-06-2003 19:55 Edit Quote

I agree with just about everytihing Kartis has said.

Most notably - reduce the size of that logo! It's gargantuan!

The code needs some *serious* cleaning up - there are so many odd and unneccesary bits that are really confusing things. I haven't looked at the site in IE, but here are a couple screen caps of what they look like in Mozilla - http://in-dented.com/temp/skye1.gif

http://in-dented.com/temp/skye2.gif

I would recommend trying to step back and simplify things - try breaking the site up into basic blocks, streamline the layout a little, and take out as many <div>'s and <p>'s as you can. Also remove as many classes as you can - there doesn't seem to be much need for most of them.

As for the decoration on the 'S' - look into the first-letter pseudo class.

I think you could really use some more basic info on CSS, as it seems you have an overly complicated view of it. It can, of course, be very complicated, but it doesn't need to be - especially for a simple layout like this.

The tutorials over at the GN are a great resource for this -
http://www.gurusnetwork.com/tutorials/css/cssintro/cssintro1.html
http://www.gurusnetwork.com/tutorials/css/cssintro2/cssintro2-1.html
http://www.gurusnetwork.com/tutorials/css/box_model/style.html

And of course, while we're on the subject, I always recommend moving over XHTML - http://www.gurusnetwork.com/tutorials/html/xhtml/xhtml1.html




[This message has been edited by DL-44 (edited 07-06-2003).]
skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

 IP logged posted posted 07-07-2003 00:38 Edit Quote

if you resize the browser window on http://www.malmo.bostream.se/richcris/test/

and then resize the window with this
skyetyger.com/pindex.html

Why doesn't the first one fold in properly? OR does the entire site have to be done in absolute before it folds in as it should.
Can a top box in absolute fold so fluidly...Mozilla is awful..that is graphics and I am not certain the HTML has much to do with it..
skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

 IP logged posted posted 07-07-2003 00:42 Edit Quote

Ooops ..this is the second one.. http://skyetyger.com/pindex.html

Kartis Shone
Nervous Wreck (II) Inmate

From: Malmö, Sweden
Insane since: Mar 2002

 IP logged posted posted 07-07-2003 02:50 Edit Quote

Ok, tyger... as I said before, learn the basics in html and CSS, what the different codes stand for and which ones are required. I will answer some of your questions, though.

quote:
1) "exactly as you have it" In my pindex, there is a "space" between the Logo jpeg and the Logo Lettering but not in your example..is there a way to control that space and centering of the top box logo and lettering other than my fixes? Z index?..Absolute positioning? ... without a big top graphic I have seen lettering perfectly positioned next to top graphics but I don't know how to do it..


position : absolute; = Puts the element (block) due to the coordinates you tell in top and left. It can contain other inline elements which follow if you change the coordinates. The default is static which places the element according to the natural order in which it occurs in a document. relative makes the element's position relative to its natural position in document flow. It could be confusing, so stick to absolute. fixed acts like absolute, but doesn't allow the object to move off screen, like a fixed background picture. inherit sets the positioning relative to the enclosing parent.
top : 50px; = this is the y coordinate position of the element in pixels. Increase this and the block will move downwards. In resolution 800x600 you have about 450-480px to play with that is visible without scrolling. If you want an object to start at the very top the number should be 0px.
left : 415px; = this is the x coordinate position of the element. Increase it and the element moves to the right. in 800x600 you have about 790px from left to right. Go farther than that and you get a scrolliethingie on the bottom.
width : 320px; = the width of your element. Is there only an image in the block, then the width should be the same as the picture's width. You can write text on top of it.
height : 249px; = same as above, but height.
padding : 10px; = the distance inside the element from the edges to the contained object (text, picture). You can set different padding on each side like this: padding : 2px 4px 6px 8px; where the order is: top, right, bottom, left. Setting only two values tells top-bottom for value1 and right-left for value2.
text-align : left; = puts the text in the element to the left. Others are right, justify and center - just like html.
background-color : #01104a = tells the colour of the background. If you have a transparent element you can say red here when checking where it starts and ends. Maybe you want to move the object, and then it is good to know how big it really is. Change back to transparent when you have placed the element where you want it. Remember that you HAVE TO tell the background color if you have told the text color and vice versa.
z-index : 1; = tells which order the elements will lay on top of eachother when they are overlapping. z.index 1 is in the bottom, 2, 3, 4, and so on will be put on top of eachother in order, where 4 is totally visible.

After this long explanation of the different positioning styles (there is lots more to say of course), the answer of your above question is: Use the top and left values to move around elements in your html. If you put your logo at position 0px 0px, then the next block to the right would start where the logo-image ends. Check how many pixels wide the picture is. It's a lot about math in this world, you know. But real simple such. Don't try to move around object with align or indent. those are only text-related inside the box.

quote:
and How do I center the footer box for the copyright..? The footer will expand as I add content but I want to keep it all centered in that one #box..inside #II


I haven't found any center command for elements. The best choice is to make a homepage for 800x600, since most people still use that resolution. As I said before, count with about 780-790px that you can use from left to right. The center of that is, let's say, 390. At 390px is the center of your text block as well as working area. If the text block is 400px wide, then the left coordinate for that block should be (390-200=)190px. That's how I do it. There are probably better ways. You could, of course make the block as wide as the working area (780-790px), and use right-left padding for example 200px, and see what happens...

quote:
2) Anyone else have any thoughts about the "yellowish" middle main section where the writing is? How about a one color background with one font color?....the dark blue with the green font the same as what is used in the header? Any suggestions?


Experiment. Test different colours. It is your site. Be proud of your own ideas!

quote:
The code itself must do for four pages..the fonts on the Main Page and the Sources Page may not be the same..so I am keeping it separate now..can combine it later rather than try to unravel what font goes to which page..but it is getting confusing..perhaps one style sheet page only works for very mono pages..



Use ONE style sheet for ALL your pages. Minimize blocks and fonts as much as you can, or it will get not only confusing for you, it will also be messy to look at when visiting. Beleive me, I learned from a similar mistake! Start over from the beginning, since you haven't come so far yet. Make four or five blocks, one h1, one p, one font with two or three sizes, and start playing around with what you have. You can do amazingly much with just a small number of tools.

quote:
Why doesn't the first one fold in properly? OR does the entire site have to be done in absolute before it folds in as it should.
Can a top box in absolute fold so fluidly...


What you have have set with "top", "left" and "width" stays = it doesn't fold in. I just noticed that I actually put   between the words in "Design by Design" like this Design by Design which makes the sentance not wrap. That's why those words didn't "fold in" when you resized your window. The other objects shouldn't have either.

quote:
Mozilla is awful..that is graphics and I am not certain the HTML has much to do with it..


I think the looks of the graphics are because of the low resolution of the screenshot, though. Netscape and Mozilla are about the same. However, there is a lot to say about those two engines and html-CSS. My opinion is that the rendering stinks. I am about to give up on trying to compromise with layouts, just to make it look about the same in Netscape and Mozilla as in other browsers. Bleh!

I talk too much. Again I tell you: Go learn at the tutorial that DL-44 gave you. Good luck.

Kasta sten i glashus? Jag?
[edit] bah! a few wrong codings [/edit]

[This message has been edited by Kartis Shone (edited 07-07-2003).]

[This message has been edited by Kartis Shone (edited 07-07-2003).]
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 07-07-2003 03:48 Edit Quote

1) Mozilla is actually a very good browser. The fact that your code is very poorly written is to blame for the layout problems. The poor graphics quality in the screen cap is because I don't want a huge file sitting on my server and compressed them an awful lot.

2) Things that are absolutely positioned will not "fold up" as you put it - that's the whole point of using absolute positioning.

3) Using a proper DOCTYPE and writing code that validates will often give you pages that work well across modern browsers. There are always going to be some minor differences of course...
skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

 IP logged posted posted 07-07-2003 05:07 Edit Quote

I am studying every word Kartis writes and I used DL-44 tutorial for the logo of the old skyetyger.com site..so I appreciate the comments very much..I am going to learn absolute positioning..but I like mobruls "folding" pages..there is a way to center an element:
http://www.skyetyger.com/toshall.html

click twice to drop the menu..

If To Shall doesn't have the element centering code, I will upload some of the other pages..

I have made many changes to pindex..the Logo size on pindex is may require a redesign and will take time..but I see what you mean...I lost my courtesy browers when I changed computers..so I am not certain if I can deal with cross-platform problems these days.
skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

 IP logged posted posted 07-07-2003 19:35 Edit Quote

Ok, DL-44, this is a new computer to me, and I checked Resolution..I am at 1200x 1000 range..and it looks great, I like it BUT that logo is HUGE at 800x600..but if I resize the grapic, it looks tiny and insignificant, not like a logo or top graphic at all, more of a tiny button at my new default resololution, and the page distorts..more than between 800x600 and whatever the default was in my old computer. I am going to have to redesign the logo to look good at both high and low res.
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 07-07-2003 20:19 Edit Quote

I run 1280 myself, and it is still huge =)

A logo/header graphic shouldn't be over whelming...
skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

 IP logged posted posted 07-08-2003 00:49 Edit Quote

Ok, redesigning using an 800x600 res, if it looks good there, it should look good at 1000x res..and will keep it around 200/100 max at any res..that seems to work best, Thanks for all your help here,..I have new comp, updated progs..so many settings have to be changed..
Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

 IP logged posted posted 07-08-2003 01:10 Edit Quote

Just so you know, about 50% of all net users have a screen rez of 800x600, about 35% have 1024x786 and the other 15% are either 640x480 or above 1280 x 960 with massive 21" monitors, in which case the larger resolutions still display quite large.
skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

 IP logged posted posted 07-08-2003 16:14 Edit Quote

I have taken the BIG graphic down for now..I have posted a page with some graphics so the link is still active. All of the graphics posted so far are made or modified using lighting settings I learned while trying to duplicate D-L44 skytaffy tutorial to adapt the effects to other images..even the big one uses the saved settings from that tutorial..I am still redesigning the page..Thank You..as I can only see what it looks like on My Computer At My Settings..only you can tell me the real truth..even if it hurts...lol..http://skyetyger.com/pindex.html
skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

 IP logged posted posted 07-08-2003 16:25 Edit Quote

O..I left the bindex.html with the big graphic so anyone new to this thread can see what all this thread refers to...but pindex has other graphics for now.


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu