This is quite demoralizing.
I've been trying to convert my site to CSS layout and I'm extremely frustrated. I've been at it for nearly a week and I'm not any closer than I was then. I've been reading O'Reilly's Cascading Style Sheets Definitive Guide; I've been through dozens of websites (as I type I'm looking at 17 open tabs) and I've bookmarked even more. I thought I understood the box model (pretty simple) and relative/absolute positioning. I thought I got the float (it's like positioning images in HTML, right?)
But I can't, for the life of me, design the damnable layout. Nothing works and I've tried so much. If I can even by sheer luck get one browser to behave, another one shuts me down cold. I hate CSS now. I hate it more because I need it and it's making me feel so utterly stupid. I'm not stupid, but this just sucks.
I'm going to go cry now and hope that someone comes along to walk me through applying all this information and conflicting browser crap to my design. Because I give up. If CSS wants me back, maybe they'll come up with a way to layout sites as easy as tables.
Listen, CSS, you buttmunch: If I can handcode HTML and find a missing </td> in a mass of nested tables; if I can troubleshoot a perl script; if I can design a site that doesn't look like I just discovered the web 10 minutes ago; surely you can cut me some slack already can't ya? I may not be schooled, but I didn't just fall off some podunk anigif truck.
To those who are offended in any way: please pardon my rant. My head just hurts from beating it on my desk. I really needed to blow off some steam and I didn't see a "Rant to your heart's content" forum. Maybe I missed it. My eyes have become crossed. I'm about to enter scream therapy... *sigh*
I can't do this!!
I think most of us have felt that way at some time or another with CSS.
Then hopefully something falls into place and it all seems so easy
One thing to remember is the perfect solution or doesn't exist.
Post a link to the site you are working on and we will help out in whatever way we can.
I can't do this!!
cinnamongirl you have my deepest empathy, I truly feel what your going through. If I had spent the time I have with CSS on learning say PHP I would be quite skilled yet with CSS I still feel at times totaly adrift with the specs this sadly is the nature of CSS, it has not been well formed or thought out, yet the concept is pure and valid and I have to keep reminding myself that it is the right and only way forward.
There are times still when I feel that I am not really making any progress and the constant need for notes and reference to techniques I find a real confidence destroyer; I'm used to mastering subjects not to feeling subjugated by them!
Rantings fine in my opinion and there ought to be more of it, just to let of steam. Maybe a sub forum for ranting?
As Tony says post some code some one will allways help out .
I can't do this!!
I can't let this post go without throwing in my two pennies worth of empathy too. If it wasn't for the likes of "DIGITALLY - IMPORTED - European Trance, Techno, Hi-NRG" on iTunes to keep me sane I don't know where I'd be [nods head to sound of heavy beat whilst eyes widen in a slightly manic way]. I am self-taught in everything I do now as there's not much call for avionics technicians who like being creative. I learnt HTML, VBS and ASP, then PHP and SQL, then DNS and how to look after clustered Unix servers via the shell.
I've been tinkering with CSS for styling for a few years but only now have I decided that the time is right to move away from tables (i.e. most people now use at least a v.6 browser). So two weeks ago I started my latest complex web application project in XHTML/CSS on the assumption that an ounce of logic and a spoonful of experience would see me through to baking a tasty CSS cake ( :? ) as I tend to pick things up quite quickly.
How wrong I was. I feel like an expert next to some of the posters in this forum, but just WHAT DO YOU HAVE TO DO to get a complex layout working pixel-perfect in all common browsers (I'm a perfectionist for my sins)? Geez; even working properly in FF_Mac and IE_PC would be a start! I've read most of the well-known tutorials more than once each and every time, I think: yep, I can do that - that's logical. Then I try to put it into practice and: "What the f**ks going on here???"
You have my empathy cinnamongirl. Here, take it. But if I'm going to stick with it until I can code as quickly as I can in PHP then you should too. So there! Go on - push those boundaries. Learn CSS then do something really clever with it that your peers will be in awe of. That's my goal anyway.
Now where was I; oh yes: hacking around the three pixel jog... ](*,)
I can't do this!!
Thanks guys. A little Dave Chappell, a little bit of sleep, a big cup of coffee and two days off: I think I'm ready to tackle this beast. Thanks for the empathy. This is so embarrassing because I didn't want to beg for help until I'd at least come up with something you all could tweak but I'm truly lost here. I am self-taught (via many books & web tutorials in most of what I can do on a computer). I'm by no means an expert on everything, but proficient enough to make lesser mortals ( ) think I am. Ah, such hubris was bound to become my undoing eventually. Enter CSS.
First off, here's the site I'm working with in version 2.0 (pretty basic overnight redesign to get them something a bit more consistent than their first version had been). Really, I hadn't ever intended on them using this so please pardon it's utterly crappy code and untested bugginess.
Here's a mockup in tables of my new design. The main nav has actually been changed in the last week. Links and contact will be supplemental navigation above the main nav in favor of adding a gallery and a link to their shop.
Perhaps y'all can enlighten me on what seems to be mystifying me. For awhile I worked on my header and main navigation. I was working with listutorial's horizontal list (brilliant!). Even ditched my nav images for text. Here's a version of my numerous attempts butchered beyond recognition. I might try the sliding doors trick if I can come up with a better design for the nav as opposed to shadowed text which doesn't seem to work any way I look at it (shame). My original nav bar didn't work as I couldn't get rid of the gapping between the borders and hover bg color. I also couldn't get the hover bg to vertically span the red block from top to bottom consistently across browsers. I'm only testing right now in IE6 and FF (I've yet to install Opera). I also at some point (but it seems to be lost now) tried image replacement on the logo, but I can't see how to do it and have my logo linked to home. I'd also prefer to not have the logo img sliced, but can't figure out how to clip out the lower right corner that overlaps the nav bar.
That's the hard part I guess. After messing with the header longer than should have been necessary, I decided to move on to something easier like the body. Hah! What I Want[tm] is two columns: sidebar (at left) is fixed at 200/220px with absolute text sizing (no bg); then 2px width #f60 border; then, content area (includes breadcrumbs above content, redundant links and footer below) is flexible w/ #000 bg; then, another 2px #f60 border (this one is continued from the same border in nav bar; then, a fixed 25px margin. The trouble I'm having is trying to get the borders (and content bg) to extend to the bottom of both columns regardless of the vertical size of each AND I want the whole layout to be floated right taking up about 95% of the viewport. I must be insane. Here's the best of my many attempts. I've butchered it beyond recognition though. I tried so many things to get the columns to line up, I can't even remember what I started with. FF likes this mess better than IE6. I can't seem to get my content div above my sidebar either, otherwise the sidebar drops below the length of the content.
I know this sucks. I'm sorry. I'm desperate. I thought I could handle this and I was so very wrong. Not that it's much, but a new CD* and coffee beans (from my regular job) to anyone who wants to hold my hand on the path to the CSS promised land.
*Their music is very good. Not garage band stuff, IMHO.
I can't do this!!
One famous method for solving problems is to divide and conquer.
Break the problem up into smaller pieces and solve one piece at a time.
That's my way to justify only helping you with one of the problems
So lets start with the menu.
To align a list vertically there is two methods. One is to set the list to display inline, the other is to float the list-items.
Your currently using the display:inline method.
Floating an element has the sometimes benefit of causing it to display block. When an element is displaying as a block element it can take on box properties like height, borders etc much easier.
Using float on the list items and setting the links within them to display block should get the menu started on the right track.
There will be a little fine tuning and testing, so how about you have a go at that before we look at the next question.
I can't do this!!
cinnamon girl : For a robust CSS positioning template with decent cross / legacy browser performance written using web standards you are prolly going to need something like http://www.atthe404.com/patchwork this I would think. Not a table or gif spacer in sight