Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > CSS help

CSS help
Thread Tools
surferboy
Mac Enthusiast
Join Date: Jul 2003
Status: Offline
Reply With Quote
Oct 13, 2004, 01:41 AM
 
OK,
I have been at this for a week now, and I must say it is very frustrating. I come up with a design that looks great on one screen- but on a different sized screen- it is either too big (you have to scroll to see it all) or the border stops short. I don't like liquid layouts because I want my graphics, etc. to stay in one place even if the window is being resized. What is the best way to apply css to make the basic layout look the same on different screens!!??
     
tsukurite
Fresh-Faced Recruit
Join Date: Jan 2003
Location: Colorado
Status: Offline
Reply With Quote
Oct 13, 2004, 02:30 AM
 
As you go along you'll find arguments in favor of both types of layouts. Fixed layouts are a favorite of designers, due to the control they allow. Usability and accessiblity proponents favor a liquid design as it allows for a more diverse audience.

If you want to have a fixed design, look into positioning rules, both for absolute and relative positioning.

It's tough to say what could be causing your issues with width. One handy troubleshooting tip I can offer is to start assigning a background color to all of your divs.

This lets you see exactly where your elements are stretching too, without changing their dimensions. Also, be aware of the f*cked up box model in IE/Win & IE5/Mac. Best rule of thumb I can offer is to build in Mozilla or Safari (Mozilla's a bit more compliant) and then hack up your css so it works in the IE's.

Without seeing your code, it's tough to say what the issue is. Keep at it. Using CSS can really pay off, it'll be worth the learning curve.
     
surferboy  (op)
Mac Enthusiast
Join Date: Jul 2003
Status: Offline
Reply With Quote
Oct 13, 2004, 09:37 AM
 
I really have a simple design in mind: a banner across the top with a logo, title, etc. and a sidebar on the left with it's own color with navigation links; and, possibly at the foot, an area for previous and next links.

I have tried numerous options- most look great on safari, but crappy in win ie.

My latest thought is to make an entirely fixed pixel and fixed positioning page- for ease of planning. I would include the background picture in this design (draw a horizontal picture and tile it vertically to give a faux column)- the background would be a fixed pixel size as well. Let's say I make the entire page fit an 800x600 design- including the background that is this size: what if I have a big screen and resize to a size larger than 800x600? Does the browser continue to resize with all my content stopping at 800x600? I know it seems like simple concept- but my peanut-non-web-developer brain can't figure it out.

Thanks for the advice.
     
TikTokk
Junior Member
Join Date: Sep 2000
Location: Michigan, USA
Status: Offline
Reply With Quote
Oct 13, 2004, 09:51 AM
 
Check out this site:
Layout-o-matic

You can use it to quickly create different kinds of layouts. From there, you can study the code and compare them in different browsers. Might save you some time.
     
surferboy  (op)
Mac Enthusiast
Join Date: Jul 2003
Status: Offline
Reply With Quote
Oct 13, 2004, 10:41 AM
 
Tik Tokk,
those are some of the most simple and elegant little solutions I have ever seen! Thanks so much! In general, I believe simple is better and that less is more.

Unfortunately, I have burned so much time trying to find a similar solution, it is cutting into my family time and work obligations- it's like an addiction. Very scary.

Anyhow, you got me on the right track.
     
surferboy  (op)
Mac Enthusiast
Join Date: Jul 2003
Status: Offline
Reply With Quote
Oct 13, 2004, 12:39 PM
 
I like the example that uses the left sidebar with the header and footer: but, I would like to achieve this whole look without the small white trim all around the entire document. Any thoughts on how to accomplish this?
     
TikTokk
Junior Member
Join Date: Sep 2000
Location: Michigan, USA
Status: Offline
Reply With Quote
Oct 15, 2004, 08:25 AM
 
Make the width 100% with 0 margin and padding. Then in the css, change the margin in the #container section from 10px to 0.
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 08:01 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,