August 05, 2004

Curious, George: CSS guru help needed! I am trying to learn the basics of layout with CSS and am having a devil of a time understanding it. Specifically, I'd like to... (mi)

I have a MetaPhilter run site that I'd like to modify the layout. The problem that is bugging me the most is that when the browser window is made narrow, the menu links are overlaid on top of the logo. (The behavior is the same for MoFi.) What I'd like is for the links to flow to a new line if the window becomes too narrow. Ideas?

posted by morris 20 years ago
  • gah...forgot that the (mi) is spurious here.
  • Have you skimmed through the Css Zen Garden thread? I will second what I said in that thread: An invaluable took for people messing around with web design is editcss,
    an extension for Firefox which places an item in the right click context menu that pops up the css of any site and allows you to edit the css of any page (even if it isn't your own!)on the fly. This is such a time saver because you can right click, view the css, change a few things, instantly see what it did and all without making any permanent changes. It is also usefull in see what other people's css is. I would also add that I think the easiest way to do what you want is to replicate the code from lower down the page that keeps the sidebar from overlapping the main content. An article over on alistapart.com about Creating Liquid Layouts might help in figuring it out. On my site, I created a seperate test template and tore out all the stuff I knew didn't apply to the problems I was having and slowly added stuff back in untill I got it like I wanted it. Good luck!
  • That is a function of the flexible width you are putting on that element (in MoFi's case, the header <div> tag). The alternative to the overlapping at narrow widths is scrollbars (which you get with fixed width layouts at narrow widths). You can try to use a float on some elements, so that instead of an overlap, they will force one to go below the other (here it can be illustrated by the main content area and the recently posted box).
  • Oh, and one of my fave CSS sites: CSS-Discuss Wiki.
  • I've been living, breathing, eating, and drinking CSS for the past three days as I revamp my websites (particularly my blog. Some helpful sites I've been to recently include: MaxDesign -- absolutely essential, and actually done as a real tutorial (not just some tech geek dumping out all his knowledge in a jumble of jargon).. W3 Schools -- a good way to get the basics.. Well, those are the two biggies. In general, having text stay on the line it's on is preferable (to me, anyway) to having it flowing down to a new line. Is there a third way? (Like my French teacher used to say -- if you don't know the words, just say it in another way..) Good luck! Vive CSS!
  • I also meant to say that I was inspired by the recent CSS Zen Garden thread... Thanks for the suggestions. I'm getting better, but layout in CSS still seems to be a black art for me.
  • The only thing I've ever used has been Steve Mulder's Stylesheets Tutorial from Webmonkey. Might not be specific enough for you, but it really helped me learn CSS from total scratch.