CSS limitations?

  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

Am I correct in believing that one of the limitations of CSS is that backgrounds do not tile well? Not background images, but background colors.

Specifically, lets say I had a site with two columns, one for navigation, one for the body (which I do, but we'll keep it hypothetical for now 8) ). If I set a background-color for the navigation column and set height to 100%, it would draw that color the entire length of the screen. However, if the column containing the body material ran beyond the length of the screen, upon scrolling down one would find the navigation background ending at the original point it was drawn to rather than continuing to span the entire height of the screen? The navigation column would not re-draw to 100% of the screen until the page was re-sized or something along those lines.

an example of the above behavior (in case my description isn't very descriptive) is at http://www.nriyounglife.org/csstest.htm

Some methods to overcome this would be to create a background image of the desired appearance and simply set the image to repeat along the y axis of the navigation column, either in the body or in the navigation column?

Is this a correct way to think about this issue?

Mark
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

Hi Mark,

You're on the right track. Using DIV tags to replicate traditional table columns for page formating can be a PITA. Unfortunately, CSS fell short of replacing the almightly TABLE formatting.

Your repeating y-axis image would work, but is rather cumbersome. Unfortunately, I don't have a better suggestion.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I agree with rjmthezonenet. The percentage based dimensions (generally, not strictly) work with the 'viewable' area of the parent container. In your case, the parent container is the page.

I believe you can employ strategies to have the page content push height of sibling containers so it appears the way you want it. Otherwise, it's really a different mindset from the methods you would use with a tabled layout.
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

If table based layout are evil (and, to a certain extent, they are), and the box model doesn't cut it, what are you supposed to do?

That question has been bugging me since CSS 1. :-(
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I really think you could devise a CSS strategy to handle this. If it were me, personally, I'd work around this with a page background.

As I said before, using CSS is a different mindset than the way most of us learned to make pages. Many mistakenly think CSS === "easier"; but like tables, it's only easier when you've gotten the hang of it, after you've done your homework.

I find using CSS forces you to do more up-front planning to reap the benefits in the end. Planning an implementation while in the course of developing pages hasn't been a very good approach, for me. When it all works right, though, it's golden.

**Also, a point which is lost on many is: CSS doesn't preclude the use of tables. It allows you to use them for what they were designed for - tabular data (which includes extensive forms, in my world).
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

I tried the "tile the background image" approach, and it didn't work. The only approach I've seen to accomplish this is to tile the left column background as part of the body background. The downside to this is that this is precluded if you already have a background that you want to use as your body background for the rest of your page.

Some work-arounds that I've thought of (but not tried) is to modify your original background image in such a way that it produced the desired effect (seems unlikely to work well, but should work), or create background color for the body, insert your background image for the body, and simply have the background image begine tiling however many pixels from the left. downside is that this precludes any sort of borders on the navigation column you're trying to simulate.

And thanks for the input and feedback everyone! You're completely right, dM. I had gotten the impression that CSS was able to do everything that tables could do, but now that I'm learning about it I'm starting to see some of the limitations of the format. However, I can defenitely see that it has many more advantages than disadvantages over tables, even with the little bit I've learned thus far.


Mark
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Ok...

Now let's see if this pays off, I am gonna steal all your code and play with it, then get back to you in a few :-D
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

The closest thing I could come up with was using
Code: [ Select ]
position:fixed
in your nav bar's div. This makes it and everything in it move with the scroll.

I tried to seperate the navi text from the bar and position it above the navi bar but didn't have any luck.

*yawnszZZzzzz*
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

b_heyer wrote:
The closest thing I could come up with was using
Code: [ Select ]
position:fixed
in your nav bar's div. This makes it and everything in it move with the scroll.

I tried to seperate the navi text from the bar and position it above the navi bar but didn't have any luck.

*yawnszZZzzzz*


i thought position: fixed caused that element to maintain a static position on the screen, regardless of where the page is scrolled to.

mark
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

yes so if it is located at 0px top 0px left, it'll be located there on your browsers viewable area if you scroll down five pages.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Mark

There's always a workaround. I believe this is the effect that you were after (all done with CSS and your HTML layout)

works at 1280x1024, 1024x768 and 800x600 (although the background image is a little large for 800x600)

http://atnopro.com/ozzu/csstest.html

View the source code and enjoy!
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

I'd assume the big image in the background scrolls with smaller resolutions? 1600x1200 it all fits perfectly on one screen (gets the idea of shrinking the window but is too lazy)
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Yeah -- it scrolls. I didn't set background-attachment for fixed because I wanted to demonstrate it could be done the way he was trying. Just needed the correct CSS -that's all. For what it's worth, I didn't change the HTML at all -- just the CSS.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I should also add that I'm viewing on a 17 inch monitor. The pixel height for the nav_panel class may need to be increased for larger monitors.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Oh, what the heck. I expect allgoodpeople probably knows how to see the CSS source, but for those who don't know how here's the style code I used for the layout:

Code: [ Select ]
/* $TopStyle:URL=http://www.nriyounglife.org/default.css$ */

body {
    background: White url(logo2faint4.jpg) 165px;
    
    font-family: Verdana, Arial;
    margin: 0px;
    background-repeat: no-repeat;
}

.main {
    color: #000088;
    left: 165px;
    padding: 10px 10px 10px 10px;
    position: relative;
    right: 10px;
}


.nav_panel {
    background: Teal;
    border: 1px solid Black;
    height: 990px;
    left: 0px;
    padding: 10px 10px 10px 10px;
    position: absolute;
    top: 0px;
    font-size: xx-small;
    width: 165px;
    
    
    }
  1. /* $TopStyle:URL=http://www.nriyounglife.org/default.css$ */
  2. body {
  3.     background: White url(logo2faint4.jpg) 165px;
  4.     
  5.     font-family: Verdana, Arial;
  6.     margin: 0px;
  7.     background-repeat: no-repeat;
  8. }
  9. .main {
  10.     color: #000088;
  11.     left: 165px;
  12.     padding: 10px 10px 10px 10px;
  13.     position: relative;
  14.     right: 10px;
  15. }
  16. .nav_panel {
  17.     background: Teal;
  18.     border: 1px solid Black;
  19.     height: 990px;
  20.     left: 0px;
  21.     padding: 10px 10px 10px 10px;
  22.     position: absolute;
  23.     top: 0px;
  24.     font-size: xx-small;
  25.     width: 165px;
  26.     
  27.     
  28.     }
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

You have to do a lot of jostling to get position:fixed to work properly in IE

;)
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

I wouldn't know :-P
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

yes, I know.

8)
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

ATNO/TW wrote:
Mark

There's always a workaround. I believe this is the effect that you were after (all done with CSS and your HTML layout)

works at 1280x1024, 1024x768 and 800x600 (although the background image is a little large for 800x600)

http://atnopro.com/ozzu/csstest.html

View the source code and enjoy!


So essentially you just set the nav panel column to a fixed height in order to cover the entire length of the screen? This is what it looks like to me.

The downside I see to this is how to handle different pages of differing heights? The class would need to be adjusted for pages of differing sizes. i.e. if you had a page that was 2 pages long, and a page that was 5 pages long, then differing height measurements would have to be set for the nav column in each page. However, this could be accomplished fairly easily. I'm not sure the of vocabulary (child classes?) but I've read about it being done before.

Or, could you use an ID to accomplish this?

Mark
  • OzDave
  • Newbie
  • Newbie
  • User avatar
  • Posts: 12
  • Loc: Australia

Post 3+ Months Ago

Attn: ATNO/TW:

Re the below:
Oh, what the heck. I expect allgoodpeople probably knows how to see the CSS source


Is it possible for you to explain how this is done?

Regards,
OzDave
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I use HTML-kit as an editor primarily OzDave. I just type in the URL for the css file and it opens it up. Same thing with TopStyle Pro. I suppose most editors will let you do that.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

OzDave wrote:
Attn: ATNO/TW:

Re the below:
Oh, what the heck. I expect allgoodpeople probably knows how to see the CSS source


Is it possible for you to explain how this is done?

Regards,
OzDave


I'm not sure how much detail you need in order to see the CSS file, so if you already know this, then I apologize for telling you something you already know :oops:

You would view the source for the page in question in order to get the name of the CSS file. once you have that name, you would then simply type it into the URL area.

For instance, at my site http://www.markrhodes.us, if you viewed the source code you would see the name of the CSS file is default.css. You would then type http://www.markrhodes.us/default.css into your address bar, and it would open the file in your default application for viewing CSS files.

Be sure that you type in the entire directory address in case the CSS file is in a subdirectory on the server, and not just the name of the CSS file. For example, if my CSS file was in /CSSfiles/default.css, you would want to enter http://www.markrhodes.us/CSSfiles/default.css.

Hope that helps!

Mark
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

ATNO/TW wrote:
There's always a workaround. I believe this is the effect that you were after (all done with CSS and your HTML layout)
...
http://atnopro.com/ozzu/csstest.html

View the source code and enjoy!


The biggest problem with this is: it doesn't work! :lol:

Also it's a work-around, the thing about CSS is we are still using work-arounds and hacks to solve problems, some of which were solved easily with <tables>s.

I agree with the W3C about using HTML for semantics, and seperating content from style. BUT they gave us a half-baked solution!

I get the impression that the W3C said "don't use tables for layout, here is CSS - use this instead!" That was the general message, and it sounds like CSS will replace <table>s for our layout requirements and more, but in reality, they expect us to change our layouts and design ideas to suit 'The New Code'. :roll: :evil:


As for a quick solution try this....
Code: [ Select ]
body {
    background: White url(logo2faint4.jpg) 165px;
    font-family: Verdana, Arial;
    margin: 0px;
    background-repeat: no-repeat;
}

html, body {
    height: 100%;
    overflow: hidden;
}
.main {
    color: #000088;
    padding: 10px 10px 10px 10px;
    height: 100%;
    overflow: auto;
}
.nav_panel {
    background: Teal;
    border: 1px solid Black;
    height: 100%;
    padding: 10px 10px 10px 10px;
    font-size: xx-small;
    width: 165px;
    float: left;
    overflow: hidden;
}
  1. body {
  2.     background: White url(logo2faint4.jpg) 165px;
  3.     font-family: Verdana, Arial;
  4.     margin: 0px;
  5.     background-repeat: no-repeat;
  6. }
  7. html, body {
  8.     height: 100%;
  9.     overflow: hidden;
  10. }
  11. .main {
  12.     color: #000088;
  13.     padding: 10px 10px 10px 10px;
  14.     height: 100%;
  15.     overflow: auto;
  16. }
  17. .nav_panel {
  18.     background: Teal;
  19.     border: 1px solid Black;
  20.     height: 100%;
  21.     padding: 10px 10px 10px 10px;
  22.     font-size: xx-small;
  23.     width: 165px;
  24.     float: left;
  25.     overflow: hidden;
  26. }
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Those are some good points LazyJim, and I think you're right. Using CSS does require you to design differently. But, then again, the layouts we had previously done were designed because of things TABLES were good at, and because of the differences in the 4.x browsers.

I can't wait to see what CSS3 has in store for us.

:)
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Curious what browser it didn't work on LazyJim? Worked for me on IE6, NS7.1 and Firefox
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

IE6 and FF (firefox)

I was browsing at 1280x1024

I think CSS is the best thing since sliced <table>s :D but it's still not made to be easy to use by the majority of web designers and/or developers.

(oh yeah and obviously the browser manufactures are partly to blame for the diffuclties developers face as well)

I agree that current/past popular designs were in part shaped by what <table>s allowed us to do, and there's nothing wrong with exploring the new way our desgns are shaped by CSS.
However, who really want's to lose the style of layouts we could do with <table>s?
And more importantly, who wants to limit their designs by the code they use, rather than their imagination?
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

digitalMedia wrote:
I can't wait to see what CSS3 has in store for us.


Yeah same here.

Currently you can use
Code: [ Select ]
display: table-cell;
etc to emulate the table-based layouts and it works great, but not on IE. :roll:

The addition of those display types to CSS was a good idea, but they should be concentrating on providing a universal solution rather than another way to code the <table> layouts which have their own limitations.

Yes I can't wait for CSS3 and SVG and XML to perculate into mainstream browsers.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

(had to edit that last one for ya LazyJim - the code you had in there messed up the whole thread without separating it out with the bbCode.)
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

lol sorry, if i ticked "ignore HTML" would that have helped?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Yes, but probably safer to use the bbCode. Besides it helps the code stand apart from normal text.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 34 posts
  • Users browsing this forum: No registered users and 43 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.