PDA

View Full Version : Web site layout using HTML/CSS?


tony09uk
10-13-2010, 11:13 PM
I have attached an idea of how I want the layout to be on my site. Will this layout be fairly easy to achieve using HTML/CSS? obviously it wont just be a black and white boring site, but its just the start im concerning myself with at the moment.

edbr
10-14-2010, 01:29 AM
yes is the simple answer, dont know what else to answer at the moment :)

tony09uk
10-14-2010, 07:30 AM
thats fine thank you. That's enough for me to still put the effort in to learn enough and go forwrd to make it

d a v e
10-14-2010, 01:55 PM
it would be interesting to see how 3-4 people from here might code that black and white example layout, just to see who would float what where etc.

i'd be willing to give one layout a bash if anyone else can be bothered?!

gentleone
10-14-2010, 02:05 PM
it would be interesting to see how 3-4 people from here might code that black and white example layout, just to see who would float what where etc.

i'd be willing to give one layout a bash if anyone else can be bothered?!

I'm also curious how others would code something like this, so I'm in :)

Corrosive
10-14-2010, 02:28 PM
Yeah, go on then guys. Sounds like a crack.

gentleone
10-14-2010, 02:51 PM
Yeah, go on then guys. Sounds like a crack.

Does that mean we can count you in? ;)

Corrosive
10-14-2010, 03:48 PM
Does that mean we can count you in? ;)

Ha, ha, Yes. I have some FTPing and a new album to listen to tonight so I might give it a shot.

gentleone
10-14-2010, 04:00 PM
Ha, ha, Yes. I have some FTPing and a new album to listen to tonight so I might give it a shot.

Cool! I have to play the chess final of the Island tonight, but the table is big enough to place my laptop next to the chessboard.

Corrosive
10-14-2010, 05:57 PM
OK, here's my effort; http://corrosiveonline.co.uk/_projects/dwc_challenge/page.html bear in mind I've done some stuff I wouldn't usually do like heights on columns but this is basically it.

d a v e
10-14-2010, 06:02 PM
that was quick! what about the downloads section though?

Corrosive
10-14-2010, 06:07 PM
that was quick!

Not know for hanging about! I got home, had dinner, washed up, listened to the wife and struggled with Filezilla for a bit as well. That was about 20 mins coding.

what about the downloads section though?

All three items can sit in that Media ID div. Make them the right size and just insert them. I wasn't going to do the PS work to demonstrate as it was a coding exercise.

gentleone
10-14-2010, 06:35 PM
I would just insert the three things here next to each other. get the px widths right and you are laughing

Do you mean that you can't handle the assignment? :)

Corrosive
10-14-2010, 06:39 PM
Do you mean that you can't handle the assignment? :)

Absolutely ;) Would you bother wrapping each in its own div?

gentleone
10-14-2010, 07:03 PM
Okay... I'm here too.

a lot of floats and also fixed heights but the assignment was like that, so here we go.

http://www.gentlemedia.nl/black-white/

gentleone
10-14-2010, 07:12 PM
Absolutely ;) Would you bother wrapping each in its own div?
You're right about that... if I new what the downloads would be then I might use something else for it instead of that div.

http://www.gentlemedia.nl/black-white/

Corrosive
10-14-2010, 07:19 PM
OK, already some interesting differences;

You use the clear fix method whereas I use overflow: hidden; to clear my floats.
You have wrapped the logo and the advert in two different divs. I used one div with the logo set as a BG image and then padding left to position the advert image.
Also you have used three divs for the area above the main content but I opted just to insert the items and would probably just do it with images.
You use display: inline; to 'flatten' your links where I tend to float mine.
You also styled your links and psuedo classes... I am clearly just lazy!
No comments in your HTML?

Can you spot anything else? This is quite an interesting exercise to see the differences. Good shout d a v e.

To the OP. Sorry to hijack your thread but we are doing the work for you.

gentleone
10-14-2010, 07:55 PM
OK, already some interesting differences;

You use the clear fix method whereas I use overflow: hidden; to clear my floats.
I used the clearfix method, because I set that 2px border on the wrapper div and no fixed height.

You have wrapped the logo and the advert in two different divs. I used one div with the logo set as a BG image and then padding left to position the advert image.
You're right and I wouldn't do it like taht normallybut I was to lazy to use a logo and ad image. If I did then I would have code that like so:


<a id="logo" href="index.php">company logo</a>

<a id="top-advert" href="ad-website.php">ad website</a>

a#logo, a#top-advert {
display: inline-block;
width: 399px;
height: 60px;
text-indent: -9999px;
}

a#logo {background: url(images/logo.gif) no-repeat 15px 15px;}
a#top-advert {background: url(images/top-advert.gif) no-repeat 15px 15px;}
So you're right about that, I could even use no divs at all for those two... only anchor tags set to inline-block so that they line-up next to each other.

Also you have used three divs for the area above the main content but I opted just to insert the items and would probably just do it with images.
To hold he video you need a div to float it left. The downloads I could if I new what it was for instance also use an ul as block element and float it left. The content advert I could indeed use the same method as the #top-advert anchor tag

You use display: inline; to 'flatten' your links where I tend to float mine.
It's because I use now text links. I use only float:left if I have to set the li a to display: block for background colors/images. Then display: inline won't work in IE. They will stack up vertically.

No comments in your HTML?
Now I was too lazy for that :)

Can you spot anything else? This is quite an interesting exercise to see the differences.
I will have a look now!

gentleone
10-14-2010, 08:18 PM
regarding clearing the wrapper I'm not sure why I choose for the clearfix method over yours, because you have also set a border on the wrapper div.

I will have to read that article again, but if I remember good then it had to do with IE 5 for the Mac and Windows.

I made the logo and advert now like mentioned above (only anchor tags):
http://www.gentlemedia.nl/black-white/index2

gentleone
10-14-2010, 08:26 PM
Ans what about you dave? Did you fell asleep behind your computer or are your hands too cold to type fast there in Finland? :)

d a v e
10-14-2010, 08:49 PM
well it is snowing here... nah i was testing my layout in ie6 and had some problems (embarassed). will try tomorrow again when i've looked at corrosives - oops i mean have time and done my own ;)

gentleone
10-14-2010, 08:57 PM
well it is snowing here... nah i was testing my layout in ie6 and had some problems (embarassed). will try tomorrow again when i've looked at corrosives - oops i mean have time and done my own ;)

I didn't test it in IE6... I know that mine will probably fail too like this... I need definitely a display:inline on my first floats... but I can't be bothered about IE6. ;)

d a v e
10-14-2010, 10:31 PM
decided not to bother with ie6 either

http://gekkoweb.com/testing/black-box/blackbox.html
i only set a height on the right hand-size advert

the nav is my modified version from one of the ones on http://css.maxdesign.com.au/listamatic/

oops and it's 1.30 am in finland now - time for bed i think

Corrosive
10-15-2010, 06:06 AM
I didn't test it in IE6... I know that mine will probably fail too like this... I need definitely a display:inline on my first floats... but I can't be bothered about IE6. ;)

Mine looks fine in IE6 but that wasn't intentional...Call it a fluke.

Corrosive
10-15-2010, 06:13 AM
Isn't it strange how you can see all our 'habits' in our coding? We should do this more often! I might go back and do my links later 'cause you guys have put me to shame.

You both use this;

:focus {
outline: 0;
}

Why? What am I missing?

gentleone
10-15-2010, 07:22 AM
You both use this;

:focus {
outline: 0;
}Why? What am I missing?

It's to get rid of the dotted active border on links in Firefox, but it's a important usability feature which I normally replace further on in my CSS by ones that match the design of the links/navigation.

Corrosive
10-15-2010, 07:53 AM
It's to get rid of the dotted active border on links in Firefox, but it's a important usability feature which I normally replace further on in my CSS by ones that match the design of the links/navigation.

Ah right, have noticed that in FF but just left it as assumed it was for usability, i.e. tabbing through a site rather than using a mouse. Hadn't thought about cancelling and then adding it later. Good shout :) I never stop learning with web design!

gentleone
10-15-2010, 08:03 AM
I found the article about the clearfix method and I see also that it's been updated with a newer clearfix which use less CSS rules. The reason why I use this over yours is explained in the comments by the author of the article (it's a reply on someones comment above this one):
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/#comment-75751

Corrosive
10-15-2010, 08:10 AM
Well I guess it is good to understand them all and be flexible in approach. The key as ever is doing it with the minimum amount of code and to try and avoid excess HTML markup but, as that poster suggests, complex layouts may throw your normal methods into confusion so you can move to the next one.

Good article, thanks dude.

d a v e
10-15-2010, 08:24 AM
my zeroed focus is from eric meyer's reset revisited
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

and i also change mine according to the site styles - but forgot this time ;)

mine works in everything pretty much but ie6. always get my sites working -in some sort of equally usable state - in ie but i din't have the time or energy to do it this time.

i shall have a good luck at that clearfix link as sounds like it does what it says on the tin ;)

gentleone
10-15-2010, 08:26 AM
Well I guess it is good to understand them all and be flexible in approach. The key as ever is doing it with the minimum amount of code and to try and avoid excess HTML markup.
Yes, definitely true. For simple layouts I use the overflow method and for complex layouts the clearfix method.

Good article, thanks dude.
Your welcome... I think it soooo cool that we can have simple access to all these useful information. I love the web :)

gentleone
10-15-2010, 10:57 AM
mine works in everything pretty much but ie6. always get my sites working -in some sort of equally usable state - in ie but i din't have the time or energy to do it this time.

I also have most of the time some little adjustments to do for IE which are pretty much the common known issues.

domedia
10-19-2010, 12:46 PM
It's to get rid of the dotted active border on links in Firefox, but it's a important usability feature which I normally replace further on in my CSS by ones that match the design of the links/navigation.
More importantly it completely breaks the accessibility for some users that don't use a mouse. Try to tab through a document when there's no outline on link elements.. :(

gentleone
10-19-2010, 02:04 PM
More importantly it completely breaks the accessibility for some users that don't use a mouse. Try to tab through a document when there's no outline on link elements.. :(

Yep, that's the most important reason not to mess with them.
Actually better to leave them out of the CSS reset, but if you don't want the default dotted outline in FF and the default blue outline form fields in Safari, then you can overrule these defaults like so.


a:focus {
styles here
}

input[type="text"]:focus,
textarea:focus {
styles here
}

domedia
10-19-2010, 04:56 PM
meyer:
Added a :focus rule to try to suppress link outlining. Why? So that you remember to define your own. You should make sure to define an outline, as it’s an important accessibility aid. If you have a universal default, one that applies no matter what the project, then replace my rule with your own.

Why would he want us to make our own instead of using the browser default?

d a v e
10-19-2010, 05:09 PM
maybe the default one doesn't fit in with the colour scheme you're using - so you can either make your own or set it back to the default, just like any of the other properties in the reset. you can get rid of the dotted outline and replace it with something more noticeable.
i'm thinking of something a little like the glow in safari

gentleone
10-19-2010, 06:41 PM
Yes, I also believe its just like that... to get a uniform design thing for the outline across the different browsers.

tony09uk
10-24-2010, 06:34 PM
Gentleone, thats excatly what I had in mind at the time I wrote the question....im impressed. Ive read your posts and got lost at the option available to me. I guess your pretty advanced at this?

gentleone
10-24-2010, 07:26 PM
I guess your pretty advanced at this?

No, I'm not. Maybe I'm a little underneath that, but I'm learning every day new things too and I'm also aware that I have to improve my knowledge to code things better, smarter and faster.

I'm sure that every one can be a good web designer without doing courses, because everything we need to know is available on the Internet. It only needs dedication and the will to take it further and further and further.

On topic:
Every design you'll have in in mind is possible with CSS... there's no doubt about that, so it's up to you to learn/to have the skills to realize it.