Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

question about images in css versus html

I

inkgrrl

macrumors newbie
Original poster
Jul 2, 2008
10
0
Hi everyone-
I'm fairly new at this--just trudging along in building a website. My biggest question regards images. Each page has only one large image, so should i use css background or have it in the html page? also, one of the images i want to be positioned in the lower left corner (it kind of looks like it's coming into the page). Of course, i have figured out that if i absolute position it it has all this white space under it for larger browser windows--will a liquid layout solve this or is the corner image a bad idea? i just want it to look right no matter what size/browser. thanks so much for your help.
 
If the image is content, place it in the HML. If the image is for style, place it in CSS. Simple as that. If you have content images displayed as CSS, there's not alt text for it and search engines won't find the image as well as blind visitors won't know there's anything on the page. In your case it sounds like content so place the image in the HTML.
 
liquid layout

Thanks! That's what I did, so good to hear! Do you have any thoughts about the second part of my question--corner image and the liquid layout option?
 
inkgrrl said:
Thanks! That's what I did, so good to hear! Do you have any thoughts about the second part of my question--corner image and the liquid layout option?
Click to expand...

I wasn't really sure what you meant by it. I'd have to see some visuals or something to understand what you're wanting to do. If you could post some mockups that could help clarify what you're asking about.
 
Unfortunatly I don't have one available. Basically, one of the pages has an image in the left bottom corner with no margin or padding around it--just basically butt up against the corner of the screen. I want it to stay this way, if possible, no matter what the size of the viewer's browswer window. Because i initially did absolute positioning, if the size the window opens in is anything other than the standardish 800x 600 the image is no longer in the corner, it has space around it on the left and bottom sides, where it should be flush. Does that help? i appreciate your help, i wish i had a mock up with me.
 
You can do
Code: 
position: fixed;
bottom: 0;
left: 0;
though IE does not support it, I believe it puts it in the right position when the page loads, it just doesn't update when the page scrolls. Something to at least try out though.

Trying to do this with a fluid layout would be tricky. You'd probably want to look at CSS layouts that have a fixed footer area and work from that if you want to go that route.
 
the fixed footer layout sounds like a good idea, ill try that. I'm hesitant to try anything IE doesnt support, unless there's a hack to get around it. Thanks!
 
Can you just apply it as a background image to the <body> tag, and position it at bottom left? Or the same, but applied to a "container" div, if you have a different background needed for the body?

@Angelwatt - I don't think she's saying she wants it fixed while scrolling, but rather always in the bottom left of the window, even if that means scrolling down to it on longer content pages. inkgrrl, is that right?
 
yes, lion, that's what i mean. so if i position it as a background, no matter what size window the page opens in, it will stay in that corner? thanks so much for your help...it's frustrating when you have it all the way you want it only to discover its not!
 
Yes.

Just to get things strait, you are NOT talking about wanting the picture to stay visible in the bottom left corner at all times, even while scrolling long pages, right? You just want it to be in the very bottom and left when the user gets to the bottom of the page.

If so, using it as a background as I suggested will do that in all major browsers, even IE.
 
that's correct, none of my pages scroll down--i have some wierd aversion to that :). And along the same "different browser size" concern, how should the other things be positioned so they adjust to the browser window size? again, i absolute positioned everything, which i am finding may have been a mistake, so i was reading about "liquid layouts," which, from what i can gather from my web research, is more block and percentage oriented. it's a restaurant website, and the person wants it very clean and simple--it's just basically a large image, logo, nav bar, and text, with the text and image changing for each page. I thought it would be a quick thing. whoops. :eek:
 
InLikeALion said:
@Angelwatt - I don't think she's saying she wants it fixed while scrolling, but rather always in the bottom left of the window, even if that means scrolling down to it on longer content pages. inkgrrl, is that right?
Click to expand...

Yup, that's why I like visual mockups. I tend to think along different lines than others. Though I guess part of me was focusing on that the pages weren't going to be long enough to need scrolling (in most cases) so it would achieve the same effect.

Your idea of doing it as a background image can work, but as from my post at the top, this removes the image as content and as such cannot be indexed or have alt text provided. I find this to be an accessibility issue if the image is for content purposes. If it's for style then I'm fine and dandy with it.
 
angelwatt said:
Your idea of doing it as a background image can work, but as from my post at the top, this removes the image as content and as such cannot be indexed or have alt text provided. I find this to be an accessibility issue if the image is for content purposes. If it's for style then I'm fine and dandy with it.
Click to expand...

I forgot that initial question of yours hadn't been answered.

So, inkgrrl, is it for presentation, or content?
 
I hate to say this, but i'm not sure what you mean:eek:. it's just about the restaurant, has an opening page with just the logo and an image--which, now that i think about it, makes it necessary for the image for this page to be clickable, dont you think? (And of course, that's the only dreaded "corner image" i'm having trouble with). i don't know if it's ok to just have the logo bring you to the homepage but not the image--can i make the whole page clickable so i dont have to worry about that? Then there's the standard "about the restuarant," "menu," and "image gallery" pages. pretty standard and, seemingly, simple.

You all are being so helpful-- i really appreciate it.
 
inkgrrl said:
I hate to say this, but i'm not sure what you mean:eek:. it's just about the restaurant, has an opening page with just the logo and an image--which, now that i think about it, makes it necessary for the image for this page to be clickable, dont you think? (And of course, that's the only dreaded "corner image" i'm having trouble with). i don't know if it's ok to just have the logo bring you to the homepage but not the image--can i make the whole page clickable so i dont have to worry about that? Then there's the standard "about the restuarant," "menu," and "image gallery" pages. pretty standard and, seemingly, simple.

You all are being so helpful-- i really appreciate it.
Click to expand...

He's getting at is this corner image a part of the content the visitors will be looking at, or is the corner image a stylistic piece that's really just there for aesthetics. This just goes back to your initial question. From the sound of it though, it sounds like a content-based image.

Having the logo be clickable is optional. I've seen people offer good rationale for both ways. As if this corner image should be clickable, you'll have to judge as we don't know what the page looks like. I would advise against making the whole page a link, as it often involves using invalid HTML to do so (if you're taking the shortcut route of applying an anchor tag to everything inside the body tag).
 
the image is really just for aesthetics (sorry lion, i thought you were asking about the website :). i guess i could just make it so you click the logo to enter into the rest of the site--I'm honestly not crazy about the idea of having a page at the beginning that has no content, just for show, but they insist.
 
inkgrrl said:
the image is really just for aesthetics (sorry lion, i thought you were asking about the website :). i guess i could just make it so you click the logo to enter into the rest of the site--I'm honestly not crazy about the idea of having a page at the beginning that has no content, just for show, but they insist.
Click to expand...

People think they need "front doors" but they don't. That was a trend a while back and to some degree still is with all flash sites. They don't realize that it actually detracts from the user experience, as it is frustrating on return visits to a site to have to click through a page just to get to any actual content.

But clients (and even my boss, who isn't super web-savvy, but does the web layout) think that it is something they "need" to give it class. It's hard to convince them that they are useless because they remember how ubiquitous they were during their hayday.
 
i was able to talk them out of flash. I like it on some sites, but i find it unneccesary and a little annoying on a restaurant site because customers/potential customers go there for a few reasons: menu, location, hours.
 
Just as some info to give to your clients. This is based off if the page is at the root of the site (as in just the domain name). The main page for a domain is generally the most 'hit' page on a site. As a result, search engines will check this page more often than any other page on the site (some exceptions here of course). From this idea, by not having "true" content on the homepage, it lessens search engines rankings and thus lessens the number of visitors. By having more content on the homepage (as well as updated information that changes somewhat frequently) it increases the sites position in search results at the least. It essentially leads to better business for the owner as well as more profit. I'm sure they'd like that. Though I don't want it to sound like I'm suggesting overloading the home page with content. It is a balance.

With something like a restaurant it is hard to figure out what should be on the home page. You list the top 3 items visitors will care about and I'd personally try to make the site design reflect that (I know you have to make your customer happy though). If the restaurant is a single location, putting the hours on the home page would work as a sidebar type item. I'd probably make some menu items the main content using text and images to describe some popular menu items. This would make a good spot to use 'keywords' for the site (keywords in the search engine optimization (SEO) context). Also, if there is any, I would have a News section. Location could probably be on most pages, but directions would be best on its own page.

Back on topic though. Since the image will only be presentational, I would go with the background image technique. In addition though, if you can't get your customer to change their mind about having an "entry page" I would use some CSS to "hide" some textual content on the page that search engines could easily crawl and will provide information for browsers that don't support CSS and for disabled visitors who are using screen readers. Hiding text like this is sometimes frowned upon, but isn't really any different than those image replacement techniques. If you don't know how to hide the text just let me know. It's pretty easy.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back