7 replies [Last post]
magburner
Offline
Regular
Last seen: 14 years 45 weeks ago
Joined: 2005-12-09
Posts: 17
Points: 0

hi newbie here!

ive been thinking of creating a webpage of my own for a while now, but i have not done anything about it until now. i used to use tables and frames until i discovered css. im not an it professional by any means, but i enjoy web design, and id like to improve my knowledge and skills. ive created this site entirely by hand, using my limited self taught knowledge. i first got the idea of creating a three column css only layout after seeing many examples on the web. i thought that i could do the same if i put my mind to it, and i think i did!

the three colum layout i have created has a centrally collapsing division, that will shrink to fit a number of screen resolutions the lowest being 800x600, and the highest being 1280x1024 (my pc's maximum). the left and right navigation menus do not shrink at all, but stay in place as the window is scaled. i have coded it so that the right navigation menu will tuck behind the left if the window is resized to just fit the left navigation menu. im in the middle of trying to find a good solution for the colapsing central margin when it is resized in this way.

once i completed the basic layout i decided to get a little more technical, and created a fixed division that would stay at the top of the page all the time regardless if the main body was scrolled up or down. i first thought of using frames, but i soon settled on using css - i didnt realise how much of a headache that descision, was because IE at present cant even display fixed divisions.

the fix division problem took me a while to figure out until i discovered IE conditional statements, so i managed to dodge the problem. in IE - the fixed division displays inline with the page as it is scrolled, but it still took me a while to figure out why IE was throwing the rest of the page, but i sorted that too. before i created the workaround for IE, the page displayed perfectly in opera too, afterwards it didnt. i was stumped again! i eventually tracked the problem down, and i think i found a bug (or good programming), in opera. i didnt know that opera would not display anything with the ID tag if it was not referenced in the stylesheet. again i found a work around - i used the CLASS tag instead.

finally i have the look i want, there is still work to be done; but the layout, i believe is sound. the CSS for the page needs to be streamlined too, and i plan to have it validate as XHTML - transitional at first, then onto strict etc. i will also get round to getting the correct DOCTYPE (i think the one i have is correct anyway), and i am also in the process of removing all imagery from the html code and have them only referenced through css. there are a few minor display problems that are present between the different browsers that need sorting too, but i plan to fix them in time.

please could you look at what i have done so far, and see if there are any problems that i have not noticed. i would also like it if you could say how good my skills are. i think i maybe be somewhere between novice and intermediate, but i not sure - thats why im asking you guys! be honest with me if you think ive made some whopping mistakes, let me know. i will take on board all advice i am given.

webpage: http://www.magburner.talktalk.net/indexb.htm
css: http://www.magburner.talktalk.net/cssb.css
ie only css: http://www.magburner.talktalk.net/cssbie.css

i have just run my pages through the W3C validators, and the page is valid xhtml 1.0 transitional, but the css checker has thrown up a raft of changes that i will have to sort out, it still validates as css though. what i have done is still very much work in progress, but i hope you can see what im trying to achieve.

my apologies for the long first post. :oops:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: newbie webpage (work in progress)

magburner wrote:
my apologies for the long first post. :oops:

That's alright, I didn't read most of it. Wink
It's not looking too bad. My comments would be that your font size is too small and your paragraphs could do with some more spacing between them.
Also, you'll need to rethink the use of the PNG for your banner - check it out in IE.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

drhowarddrfine
Offline
Leader
Last seen: 12 years 24 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

newbie webpage (work in progress)

Now here's a guy who took the time to figure it out and did a good job in the process.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

magburner
Offline
Regular
Last seen: 14 years 45 weeks ago
Joined: 2005-12-09
Posts: 17
Points: 0

newbie webpage (work in progress)

tyssen said:

"Also, you'll need to rethink the use of the PNG for your banner - check it out in IE."

i am aware of the PNG. and the paragraphs are just filled with random text. i was hoping for comments on the css as opposed to the content, which will change before the page is finished.

thanks for your comments guys.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

newbie webpage (work in progress)

magburner wrote:
and the paragraphs are just filled with random text. i was hoping for comments on the css as opposed to the content, which will change before the page is finished.

Well, my comment about your paragraphs is related to CSS cos I think you need more padding or margin on those elements.
But if you want comments about your CSS, I'll give you some pointers as to how you can tighten it up:
This:

a:link {
   color: #fff;
   text-decoration: none;
}

a:visited {
   color: #fff;
   text-decoration: none;
}

a:hover {
   color: #f00;
   text-decoration: none;
}

a:active {
   color: #f00;
   text-decoration:underline;
}

can be abbreviated to:

a {
   color: #fff;
   text-decoration: none;
}

a:hover, a:active { color: #f00; }

Using shorthand CSS you can do:

background: #000 url(indeximg5b.png) center center fixed no-repeat; instead of:

background-image:  url(indeximg5b.png);
   background-position:center;
   background-attachment:fixed;   
   background-repeat:no-repeat;  
   background-color:#000000;

(Keeping in mind that fixed attachment only works for the body element in IE.)

Things like padding:0px 0px 0px 0px can be abbreviated to padding: 0 0 because you don't need to specify a unit for values of 0 and because bottom mirrors top and left mirrors right. So if they're the same, you only need to specify the first two values.
Another example: padding: 1px 0 2px is the same as padding: 1px 0 2px 0.

Your main CSS file includes the Tantek (voice-family) hack for IE but this should only be needed for versions of IE earlier than 6 (which don't implement the box model properly) for which you provide a separate sheet so you shouldn't need it in your main stylesheet.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 8 years 3 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

newbie webpage (work in progress)

Your images suit your layout very well, great job! Laughing out loud Really nice... very "magazine-looking", lots of gloss and recall. An increase of font size will do you wonders still. Congratulations. Laughing out loud

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

absolon
Offline
newbie
Wroclaw, Poland
Last seen: 11 years 16 weeks ago
Wroclaw, Poland
Timezone: GMT+1
Joined: 2004-10-20
Posts: 2
Points: 0

newbie webpage (work in progress)

I would like to add that in my opinion layout is too wide. 100% wide is not good idea in this case - but it's only my opinion. Look at main "content" column - is too wide. Also small fonts is something which I'd change (someone mentioned about it earlier).

magburner
Offline
Regular
Last seen: 14 years 45 weeks ago
Joined: 2005-12-09
Posts: 17
Points: 0

newbie webpage (work in progress)

thanks for the advice guys, it has not gone unheard. i am in the middle of creating a different format, because as has been noted the design is too wide and the font too small. to be honest, i dont have that much content to fill this design, so im opting for a minimalist approach, hope it works! i will post my new and improved design in the next week or two, until then, take care.

thanks again for the good advice.