My first tableless CSS layout

C

ChicoWeb

Guest
I spent a great deal of time learning how to manipulate CSS into making a layout. I have always been a bit skeptical about this whole "css" tabless phase we have been going through, but as designer I really wanted to learn it. So here is my first all CSS page :)

http://www.chicowebdesign.com/development/jeff/

Anyone else make an all css design?
 
Murlyn

Murlyn


Joined
Jun 11, 2003
Messages
4,915
Reaction score
68
Points
48
Location
Mount Vernon, WA
Your Mac's Specs
MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2
Looks real nice! Remember to make all your <br> like this <br /> If you're going to be coding using standards, got to make sure all your code is to standards :)
 
OP
C

ChicoWeb

Guest
Murlyn said:
Looks real nice! Remember to make all your <br> like this <br /> If you're going to be coding using standards, got to make sure all your code is to standards :)
Click to expand...

Thanks! I have to fix some CSS for stupid IE for PC. I'm having some troubles getting the padding to work correctly. It renders how I want in every browser but IE for PC, which of course happens to be the most popular browser :closed:
 
Murlyn

Murlyn


Joined
Jun 11, 2003
Messages
4,915
Reaction score
68
Points
48
Location
Mount Vernon, WA
Your Mac's Specs
MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2
Yeah IE bites for CSS support :( Luckily it's market share is still going down, but it's still over 90% :(
 
OP
C

ChicoWeb

Guest
Murlyn said:
Yeah IE bites for CSS support :( Luckily it's market share is still going down, but it's still over 90% :(
Click to expand...

Yeah, its to bad really. I'm almost done integrating it with Word Press now. That was a lot harder than expected.
 
Murlyn

Murlyn


Joined
Jun 11, 2003
Messages
4,915
Reaction score
68
Points
48
Location
Mount Vernon, WA
Your Mac's Specs
MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2
Hmm.. interesting wordpress shouldnt be that hard.. I havent done it though, I just know with my blog it didnt look hard, I just havent had the time ;)
 
OP
R

RobDreugan

Guest
I'm glad firefox is getting more attention now though; hopefully if they keep releasing quality browsers Mozilla can steal some of IE's thunder.
 
OP
C

ChicoWeb

Guest
Murlyn said:
Hmm.. interesting wordpress shouldnt be that hard.. I havent done it though, I just know with my blog it didnt look hard, I just havent had the time ;)
Click to expand...

It actually was pretty tough, but well worth it. The final is at

http://www.jefferymichael.com/x/ - I haven't figured out why it doesn't render in IE, so check it out in safari :closed:
 
Murlyn

Murlyn


Joined
Jun 11, 2003
Messages
4,915
Reaction score
68
Points
48
Location
Mount Vernon, WA
Your Mac's Specs
MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2
It is very nice, you did a great job on it! :)
 
OP
V

VastDeathmaster

Guest
For some reason I cannot view your website. The work firewall is probably blocking it. In any case, about the Windows IE thing. Why not just have a blurb somewhere like "this webpage designed for Mozilla or similar browsers if you don' have it, here's a link".

I seem to remember a lot of sites used to do this when they were designed exclusively on Netscape.
 
OP
C

ChicoWeb

Guest
VastDeathmaster said:
For some reason I cannot view your website. The work firewall is probably blocking it. In any case, about the Windows IE thing. Why not just have a blurb somewhere like "this webpage designed for Mozilla or similar browsers if you don' have it, here's a link".

I seem to remember a lot of sites used to do this when they were designed exclusively on Netscape.
Click to expand...
Thats odd. There is really no content on there that should be blocked. Strange. You are going here right?

http://www.jefferymichael.com/x/
 
OP
C

cerberos

Guest
You need to add "display:inline;" to elements with double padding in IE.

Using images directly for navigation in CSS defeats the purpose. Use an unordered list, and set the background image for each list item as the appropriate image. This way the page is actually accessible - a user will be given a list of navigation should the css rendering fail.
 
OP
C

ChicoWeb

Guest
cerberos said:
You need to add "display:inline;" to elements with double padding in IE.

Using images directly for navigation in CSS defeats the purpose. Use an unordered list, and set the background image for each list item as the appropriate image. This way the page is actually accessible - a user will be given a list of navigation should the css rendering fail.
Click to expand...

Yeah, I realized this a bit ago. I haven't changed the navigation images because I am going to make them into roll overs, but I've run out of time over the past few weeks. I was just happy to render anything on my first time.
 
OP
C

cerberos

Guest
ChicoWeb said:
Yeah, I realized this a bit ago. I haven't changed the navigation images because I am going to make them into roll overs, but I've run out of time over the past few weeks. I was just happy to render anything on my first time.
Click to expand...

Well it's a good looking site, first time or not :)

By the way, when you get around to updating the nav, check out this technique:

http://www.alistapart.com/articles/sprites/

Here is a good example of it in action:

http://www.cca.edu/

Done with the following (single) image:

http://www.cca.edu/images/nav.gif
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top