Forum Moderators: not2easy
The design process seems to take a lot longer but is this just because of my lack of CSS knowledge?
I am nowhere an expert in CSS but would consider myself very competent at table based layouts. When I start designing a website I start off in photoshop.
With table based layouts I can 'see' the table structure and how it will work whilst still in photoshop. I know the limitations of table layouts and adjust/direct the design accordingly.
I know a lot of people must have gone through a similar frustaration where it feels like going back to school and forgetting a lot of what you have learnt. Does anyone have any tips or should I write this off as a particularly bad design block?
Step 1: Photoshop slice-and-dice
Step 2: Tables Layout
Step 3: CSS Formatting
Step 4: CSS Layout
IMHO there's no shame in going live at Step 2 or 3 while you work on Step 4 ;)
with hardwork, a little swearing, and some pointers from DrDoc et al, ive got the sites fully laid out in css and pretty solid cross browsers. i guess what im trying to say is dont let what you do and dont know about css-p influence you at the early design stage - there will be a css solution for what yuou want to do, and finding it is a good learning experience.
cheers
ben
Many types of layouts are unnecessarily hard to create with CSS positioning. Some are entirely impossible, especially if you want to have a fluid layout, but aren't ready to compromise on the sequence of text elements in the source. Just as an example: Most CSS layouts will force you to place the left navigation column before the main content in the text, which is very easy to avoid with tables. Using CSS positioning may well force you to violate other (and in my opinion more important) w3c design recommendations.
So no, despite what some people want you to think, it's not because you "don't know enough about CSS". It's because CSS doesn't know enough about the requirements of the layout designer.
Most CSS layouts will force you to place the left navigation column before the main content in the text
Not necessarily. There's an article by Ryan Brill out there (on A List Apart) about using negative margins to get the content first in the code, but displayed with a sidebar, all using CSS.
Personally, I learned design with CSS, and find myself confounded by trying to understand how exactly to line things up in a table format. I mean, all that tweaking and adding spacer gifs and whatnot. To my mind, it's so much easier to set up the basic HTML, then play with styles until i've got it right. Then I can make any number of pages with the exact same layout and alter ALL of them from one document.
The point being that what seems easiest to us is what we already know. For you, tables are a breeze and css is frustrating. It's the opposite for me because I cut my teeth on CSS.
There's currently a four-mile long thread going on the TABLES/CSS debate. Join us if you like!
[webmasterworld.com...]
[edited by: DrDoc at 5:13 pm (utc) on June 17, 2004]
[edit reason] Removed broken URL [/edit]
Most CSS layouts will force you to place the left navigation column before the main content in the text, which is very easy to avoid with tables.
I only read Ryan Brill's article today, but, actually, one of the first things I figured out when I switched from designing in tables to designing in CSS a year ago was how to avoid placing the left navigation column before the main content in the code... I never knew how to do this in tables, without having an empty cell in the first column followed by a rowspan="2" in the second column. Is there another way?
With CSS, whether you use floats or absolute positioning or even negative margins as Brill suggests, it's a piece of cake to have the content first and the menu second.
Ryan Brill's two column layout has the sidebar to the right, not to the left. And in the three column layout the left sidebar comes before the main content in the text flow.
I have yet to see a working example that meets this requirement with CSS positioning. I'm becoming more and more convinced that it simply isn't possible.
There are of course other problems with his approach. He has no choice but to completely ignore the concept of using structural HTML only. All those layout related divs introduce more non-structural HTML code than a table based layout would!
I have yet to see a working example that meets this requirement with CSS positioning. I'm becoming more and more convinced that it simply isn't possible.
Yes it's possible, but there and there are mnay ways to approach it depending on your initial priorities
Ryan Brills code was briefly discussed here back in February - In this thread [webmasterworld.com] there is info on how to use the same technique to swap the side of the navbar..
There are mnay other threads here with layouts that achieve this.. there's a summary thread [webmasterworld.com] running which should provide links to some of them..
Suzy
Two methods I can think of offhand, both of which I've used in the past:
1) Give the main content a left hand margin as wide as the left navbar. Slot the navbar into the available space using absolute positioning.
2) Put a container div around both the main content and the left navbar. Float the main content to the right, float the left navbar to the left.
A third method would be to use absolute positioning for both the content and the left navbar.
wibble> You'll find that as you use CSS in your designs more and more you'll get faster at it. If you're anything like me, you probably recall how difficult it once was to try to work out where you would need colspans and rowspans - later on you could look at a design and visualise in your head where all the colspans and rowspans would be in the layout.
CSS is a bit like that - it just takes time to get used to. Eventually you'll look at a design and think: "The normal flow of the document will be here, this section is best handled with absolute positioning, I can float this element to the left here..." and so on.
- open a container div
- float an inner container right
- within the inner container float the content div left
- also within the inner container float right the right-hand column div
- close the inner container div
- float the index div left
- close the outer container div
Only works in recent browsers of course :(
simple to have the code for the left navbar below the code for the main content
A fourth option to add to ronin's list (although, strictly speaking it doesn't belong here) is to use javascript to dynamically write the nav bar, styled to float:left inside the content's margin. In the source it's just a block of js, so the first semantic tags in the code are those holding the content.
Perhaps not the prettiest way of doing it, but it is another option.
Keep in mind, however, that I've only ever used this method on a site associated with a school, and therefor it did not need to interact with SEs or spiders. I have no idea what it would do to the spiderabilty (word?) of a commercial site.
