Ok, I have a question regarding design practices in CSS.
Lets say I have a website template that is non-liquid in all directions - either all the content fits perfect, or we have divs with overflow properties.
Would it be considered bad design practice to take a container div, put the layout template image in the background of it, and just position other divs over areas such as where links would be, or where the content areas are? With the link divs, they would have no content - they would just have the link tags surrounding them (think image mapping, but not).
The reason I ask is because I'm doing a themable website, and am going to be changing the theme+layout by changing the CSS file by itself. I've already done it with a design, just curious if it's considered a no-no or not. I can't understand why it would be a bad thing - It means clean and easy to manage code.Yeah, that would be bad, if you just had an image as the content then users would not be able to resize the text (unless they use Opera). Also, users with screen readers and search engines would get no content at all, just an empty page with some links on it.
If you want to have an image map without the image map, then read this (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/imagemap/">http://www.alistapart.com/articles/imagemap/</a><!-- m -->).No, I'm not talking about the image being the content - just the graphical part of it. The text would be in divs that float above the areas that content goes.non-liguid layout is a bad practice to begin with.Yeah, but liquid layouts really aren't necessary for sites such as artwork portfolio sites (like mine; I offer very little text content).
Anyway, I was just giving an easy-to-understand example. This same technique can be applied to (some parts of) liquid sites, too.Whatever little text you have, the element containing it should scale with the font size. At least vertically. If you are presenting an artwork portfolio, your primary concern should be bandwidth (Download time), therefore graphical background behind presented image is, generally, a bad practice as well.I'm a bit confused. Are you talking about Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) type of things, or about an Image Replacement (<!-- m --><a class="postlink" href="http://wdhaven.com/article/12/bir/">http://wdhaven.com/article/12/bir/</a><!-- m -->) type of thing?Take a look at this:
<!-- m --><a class="postlink" href="http://creativity.the-engine.org/concepts/bluecurves.jpg">http://creativity.the-engine.org/concep ... curves.jpg</a><!-- m -->
Now, what I'm talking about doing is positioning divs over the link areas in the header, and over the arrows in the body (for mouseover scroll buttons).
The "Welcome" and "Update" sections will be actual text, since they will change and whatnot. The "Welcome" section will display artwork listings when you load a corresponding section, and the "Update" section will display info about the artwork once clicked, as well as give links to a full size version, as well as zoomed and other things related to that piece.
Get what I'm talking about?
Or, check out this layout (yeah, it's not wide enough - I know, that'll change).
<!-- m --><a class="postlink" href="http://creativity.the-engine.org/concepts/modernretro.jpg">http://creativity.the-engine.org/concep ... nretro.jpg</a><!-- m -->
That one is semi-liquid, in that it's height will change to correspond content (width, however, will be non-liquid, and fixed at around 750px wide). The menu part at the top could do the same overlaying div technique I described earlier. My reasons for doing this are simple - I can change the entire design just by changing the css file, and it loads fast (because I'm loading only a few images, instead of a bunch of images from a chopped up design, I'm having to load fewer image file headers).Okay, what I think you're talking about, unless I'm misreading it, is something talked about in the Faux Columns article. You have a container, let's say #container. You give it a background containing your design template. Inside of it, you've got your other elements, with text in them, and you position them over the background image you've got. Is that what you're talking about? Because something like that is fine, it's a technique I've used before as well.Yeah, exactly.
Glad to hear I wasn't making a big boo boo in doing it.. It's reduced the amount of code needed in the site, and also increased visual-consistancy across browsers (well, except for links/lynx, but they handle it all like a champ anyway
).
Lets say I have a website template that is non-liquid in all directions - either all the content fits perfect, or we have divs with overflow properties.
Would it be considered bad design practice to take a container div, put the layout template image in the background of it, and just position other divs over areas such as where links would be, or where the content areas are? With the link divs, they would have no content - they would just have the link tags surrounding them (think image mapping, but not).
The reason I ask is because I'm doing a themable website, and am going to be changing the theme+layout by changing the CSS file by itself. I've already done it with a design, just curious if it's considered a no-no or not. I can't understand why it would be a bad thing - It means clean and easy to manage code.Yeah, that would be bad, if you just had an image as the content then users would not be able to resize the text (unless they use Opera). Also, users with screen readers and search engines would get no content at all, just an empty page with some links on it.
If you want to have an image map without the image map, then read this (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/imagemap/">http://www.alistapart.com/articles/imagemap/</a><!-- m -->).No, I'm not talking about the image being the content - just the graphical part of it. The text would be in divs that float above the areas that content goes.non-liguid layout is a bad practice to begin with.Yeah, but liquid layouts really aren't necessary for sites such as artwork portfolio sites (like mine; I offer very little text content).
Anyway, I was just giving an easy-to-understand example. This same technique can be applied to (some parts of) liquid sites, too.Whatever little text you have, the element containing it should scale with the font size. At least vertically. If you are presenting an artwork portfolio, your primary concern should be bandwidth (Download time), therefore graphical background behind presented image is, generally, a bad practice as well.I'm a bit confused. Are you talking about Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) type of things, or about an Image Replacement (<!-- m --><a class="postlink" href="http://wdhaven.com/article/12/bir/">http://wdhaven.com/article/12/bir/</a><!-- m -->) type of thing?Take a look at this:
<!-- m --><a class="postlink" href="http://creativity.the-engine.org/concepts/bluecurves.jpg">http://creativity.the-engine.org/concep ... curves.jpg</a><!-- m -->
Now, what I'm talking about doing is positioning divs over the link areas in the header, and over the arrows in the body (for mouseover scroll buttons).
The "Welcome" and "Update" sections will be actual text, since they will change and whatnot. The "Welcome" section will display artwork listings when you load a corresponding section, and the "Update" section will display info about the artwork once clicked, as well as give links to a full size version, as well as zoomed and other things related to that piece.
Get what I'm talking about?
Or, check out this layout (yeah, it's not wide enough - I know, that'll change).
<!-- m --><a class="postlink" href="http://creativity.the-engine.org/concepts/modernretro.jpg">http://creativity.the-engine.org/concep ... nretro.jpg</a><!-- m -->
That one is semi-liquid, in that it's height will change to correspond content (width, however, will be non-liquid, and fixed at around 750px wide). The menu part at the top could do the same overlaying div technique I described earlier. My reasons for doing this are simple - I can change the entire design just by changing the css file, and it loads fast (because I'm loading only a few images, instead of a bunch of images from a chopped up design, I'm having to load fewer image file headers).Okay, what I think you're talking about, unless I'm misreading it, is something talked about in the Faux Columns article. You have a container, let's say #container. You give it a background containing your design template. Inside of it, you've got your other elements, with text in them, and you position them over the background image you've got. Is that what you're talking about? Because something like that is fine, it's a technique I've used before as well.Yeah, exactly.
Glad to hear I wasn't making a big boo boo in doing it.. It's reduced the amount of code needed in the site, and also increased visual-consistancy across browsers (well, except for links/lynx, but they handle it all like a champ anyway
).