CSS/HTML Questions

[simX]

I've got a few questions about some CSS formatting for web pages.

First, when specifying the alignment of an image, how do you get it so that nothing else appears on the same line as the image? Specifically, I'm aligning an image to the right as a header image, but things always like to encroach to the left of the image if there's space -- the only solution I can come up with is putting in a bunch of BR tags, but that solution is hardly elegant. I've also tried specifying "clear=all" directly in the IMG tag, and enclosing the image in a set of DIV tags. Neither of those solutions works either.

Second, is it OK to nest DIVs and SPANs in order to apply two classes to some elements? If so, which tag has precedence when they both specify a different value for the same attribute?

Third, is there any way to prevent a set of elements from wrapping? I have a few different images on one line, and I don't want them to wrap if there's not enough space -- I just want a scrollbar to appear (or perhaps they just are cut off). I know I can do this via a table, but is there a better way to do it?

Lastly, I have two images that I want to use as headers, but I want one aligned left and one aligned right (on the same line), and have them overlap in the middle if there's not enough space. Is there any way to do that?

Thanks.

 

[Rower_CPU]

Re: CSS/HTML Questions

Originally posted by simX
First, when specifying the alignment of an image, how do you get it so that nothing else appears on the same line as the image? Specifically, I'm aligning an image to the right as a header image, but things always like to encroach to the left of the image if there's space -- the only solution I can come up with is putting in a bunch of BR tags, but that solution is hardly elegant. I've also tried specifying "clear=all" directly in the IMG tag, and enclosing the image in a set of DIV tags. Neither of those solutions works either.

Add this statement:
display: block;

As long as you haven't specified a width, the image will get it's own row.

Originally posted by simX
Second, is it OK to nest DIVs and SPANs in order to apply two classes to some elements? If so, which tag has precedence when they both specify a different value for the same attribute?

Nesting is perfectly OK as long as you're careful about the inheritance of the styles. Usually whichever style comes latest in the style sheet will take precedence, but sometimes I've seen things like font sizes get multiplied/divided by multiple styles.

Originally posted by simX
Third, is there any way to prevent a set of elements from wrapping? I have a few different images on one line, and I don't want them to wrap if there's not enough space -- I just want a scrollbar to appear (or perhaps they just are cut off). I know I can do this via a table, but is there a better way to do it?

By setting a width for the container DIV you can achieve the same effect as a table width.

Originally posted by simX
Lastly, I have two images that I want to use as headers, but I want one aligned left and one aligned right (on the same line), and have them overlap in the middle if there's not enough space. Is there any way to do that?

Thanks.

This is a cool one. Set one image as the background of the DIV (whichever you want to go behind) and set it to be pinned to one side and no repeat. Place the second image in the DIV via HTML and position it where necessary.

Good questions. Glad to see someone taking an interest in CSS on here.

 

[simX]

Re: Re: CSS/HTML Questions

Originally posted by Rower_CPU
Add this statement:
display: block;

As long as you haven't specified a width, the image will get it's own row.?

This doesn't seem to work. I made a ".block" class with just the display:block declaration, but the image still isn't getting its own row. Anything I could be doing wrong? I even tried it leaving the "clear=all" statement in the IMG tag.

Nesting is perfectly OK as long as you're careful about the inheritance of the styles. Usually whichever style comes latest in the style sheet will take precedence, but sometimes I've seen things like font sizes get multiplied/divided by multiple styles.

So the only way to consistently and reliably override a declaration in a CSS file is to specify the property directly in HTML tags?

By setting a width for the container DIV you can achieve the same effect as a table width.

This also doesn't seem to work, although it's probably me who's doing something wrong. Do you specify this directly in the DIV tag, or do you do it in the CSS file?

[EDIT: Hmm, it seems to work in Safari, but curiously not in OmniWeb 4.5, which is based on WebCore. Weird.]

This is a cool one. Set one image as the background of the DIV (whichever you want to go behind) and set it to be pinned to one side and no repeat. Place the second image in the DIV via HTML and position it where necessary.

Good questions. Glad to see someone taking an interest in CSS on here.

Haven't tested this one out yet, but I'll let you know.

UPDATE: The background image thing worked perfectly. Cool!

[EDIT: This seems to hit upon a bug in Safari, though... when you resize the window to be smaller than the image aligned on the left, the background image disappears entirely and a really long scrollbar appears. :shrug: ]

I have one other question.... what's the best way to get images to center align (as well as text) via CSS? The "text-align" property seems to only apply to, obviously, text. Thanks.

UPDATE 2: I have one MORE question. Is there any way to have an image aligned to the bottom of the browser window (not using JavaScript). If so, how? That would be really handy.

 

[Nermal]

If something appears correctly in the browser, but you're not sure whether you've coded it properly, then run your HTML file through the W3C Validator. It'll check your code for correctness.

 

[Rower_CPU]

Re: Re: Re: CSS/HTML Questions

OK, rather than reply to your questions directly, I thought I'd make an example page to show some of these things in action.

It would also help if I could see your page(s), that way I can troubleshoot your code a lot quicker/easier.

CSS Example Page

Can you be more specific about the bottom aligned image question? What kind of behavior are you after?

Nermal's CSS validation tip is an excellent one, too. I often find something I've input incorrectly but is being displayed the way I intended on my development browser.

 

[simX]

Re: Re: Re: Re: CSS/HTML Questions

Originally posted by Rower_CPU
OK, rather than reply to your questions directly, I thought I'd make an example page to show some of these things in action.

It would also help if I could see your page(s), that way I can troubleshoot your code a lot quicker/easier.

CSS Example Page

Can you be more specific about the bottom aligned image question? What kind of behavior are you after?

Nermal's CSS validation tip is an excellent one, too. I often find something I've input incorrectly but is being displayed the way I intended on my development browser.

About the bottom-aligned question. I have three images inside a frame on the left which are links to other pages (that open in a new window). I want them always to be visible no matter how short your browser window is (up to a point). You can see them at http://ssrl.slac.stanford.edu/~smangane/smbxas/ (see the left frame).

Does that make more sense?

For the image not getting it's own row, mouse over "instrumentation" in the left and click on "Beam Line 9-3". The problem is with the top image in the frame on the top (yes I know it's riddled with frames -- if you can suggest a good way to get rid of them, that would be good too ).

 

[Rower_CPU]

Re: Re: Re: Re: Re: CSS/HTML Questions

Originally posted by simX
About the bottom-aligned question. I have three images inside a frame on the left which are links to other pages (that open in a new window). I want them always to be visible no matter how short your browser window is (up to a point). You can see them at http://ssrl.slac.stanford.edu/~smangane/smbxas/ (see the left frame).

Does that make more sense?

More or less.

There are a couple of ways to do this. One way is to absolutely position the element to the bottom of the browser window and let them flow up and down as the page scrolls. The other is to fix them in place, so that they do not move when the rest of the window scrolls. Here are the examples:

Position bottom, scroll

Position bottom, fixed

Originally posted by simX
For the image not getting it's own row, mouse over "instrumentation" in the left and click on "Beam Line 9-3". The problem is with the top image in the frame on the top (yes I know it's riddled with frames -- if you can suggest a good way to get rid of them, that would be good too ).

Take a look at my code here:
http://organicallydigital.com/css/image.html

By simply putting the navigation images in a container DIV, you can get the same effect without worrying about making that one image display as a block level element. You have a class called "width" on your page, which I assume you had to keep the images from wrapping (fixed width table-like behavior you asked about before). Unfortunately, it seems to ignore the width settings when the body is setting the center alignment. I tried a few things, but it's getting late. Let me know if that's still an issue and I'll tackle it again tomorrow.

I also threw in some other tweaks to make the code lighter and the navigation images accessible (yes, I preach web accessibility, too - ideally those images would be text, but if you insist on using images use alt text as well).

Getting rid of frames is sometimes a daunting task once people discover some of their benefits (reuse the same page for repeated elements, fixed nav bar and scrolling content, etc.). Fortunately, CSS can help with one of these - fixed position nav bar, which uses the same positioning properties as the second image example above.

Take a look at this mockup: http://organicallydigital.com/css/noframes.html

As for reusing content, there are a couple of options: Dreamweaver templates, server side includes, or PHP/ASP. Let me know if you'd like more info and any/all of these technologies.

 

[simX]

Re: Re: Re: Re: Re: Re: CSS/HTML Questions

Originally posted by Rower_CPU
More or less.

There are a couple of ways to do this. One way is to absolutely position the element to the bottom of the browser window and let them flow up and down as the page scrolls. The other is to fix them in place, so that they do not move when the rest of the window scrolls. Here are the examples:

Position bottom, scroll

Position bottom, fixed

The second one is what I wanted. Thanks.

Take a look at my code here:
http://organicallydigital.com/css/image.html

By simply putting the navigation images in a container DIV, you can get the same effect without worrying about making that one image display as a block level element. I also threw in some other tweaks to make the code lighter and the navigation images accessible (yes, I preach web accessibility, too - ideally those images would be text, but if you insist on using images use alt text as well).

Hmm, I thought I did that, but maybe it was OmniWeb acting up again.

As for web accessibility... yeah, I know about that. I'm actually kinda learning as I go, here, especially with all this CSS stuff.

Getting rid of frames is sometimes a daunting task once people discover some of their benefits (reuse the same page for repeated elements, fixed nav bar and scrolling content, etc.). Fortunately, CSS can help with one of these - fixed position nav bar, which uses the same positioning properties as the second image example above.

Take a look at this mockup: http://organicallydigital.com/css/noframes.html

As for reusing content, there are a couple of options: Dreamweaver templates, server side includes, or PHP/ASP. Let me know if you'd like more info and any/all of these technologies.

Yeah, I figured you could do that (fixed navigation bar). However, I'm not really keen on using server-side technologies, and I assume Dreamweaver templates requires Dreamweaver, which I don't have.

Isn't there some way to just create an HTML file of the content you want to reuse, and then just put a reference to that file (that essentially replaces the reference with the HTML)? The main reason I use frames is so that I don't have to copy the navigation code into each new page. I thought somewhere I saw this, but maybe I was just dreaming.

(I assume that I could similarly make a top-aligned navigation bar as opposed to a left-aligned... maybe both? I wouldn't be opposed to some redesigning, but it'd be nice if I could redo the existing layout in CSS without changing it.)

 

[Rower_CPU]

Not sure if you saw my last edit regarding the fixed width issue, since you posted as I was editing...

Which version of OW are you using, pre-WebKit or the latest betas? Older versions of OW have bad CSS support.

As for HTML includes, I'm not sure that anything like that exists. I've used Dreamweaver templates in the past, and PHP includes these days for any modular content in my pages. Maybe someone else has an answer here, but short of server side solutions and DW you may be stuck updating pages manually if you want to ditch frames.

 

[simX]

Originally posted by Rower_CPU
Not sure if you saw my last edit regarding the fixed width issue, since you posted as I was editing...

Which version of OW are you using, pre-WebKit or the latest betas? Older versions of OW have bad CSS support.

As for HTML includes, I'm not sure that anything like that exists. I've used Dreamweaver templates in the past, and PHP includes these days for any modular content in my pages. Maybe someone else has an answer here, but short of server side solutions and DW you may be stuck updating pages manually if you want to ditch frames.

Yeah, that's the problem I was having, since it was center-aligned. That's the other annoying thing -- there's no easy way to override a class easily, without hard-coding a new style.

As for OmniWeb, yeah, I'm using OW 4.5b3. :shrug:

 

[simX]

Any idea how to fix that problem with the center-aligned, but fixed width? I'm sure you know far more CSS here. :\

 

[Rower_CPU]

Originally posted by simX
Any idea how to fix that problem with the center-aligned, but fixed width? I'm sure you know far more CSS here. :\

I did some quick digging and found a couple of ways of properly implementing centering with CSS.

http://organicallydigital.com/css/image.html

Use "auto" for your left and right margins and set a fixed width or change the display mode of the element to "table".

 

[simX]

Originally posted by Rower_CPU
I did some quick digging and found a couple of ways of properly implementing centering with CSS.

http://organicallydigital.com/css/image.html

Use "auto" for your left and right margins and set a fixed width or change the display mode of the element to "table".

It seems to work fine in your case, but it refuses to work on my end, for some reason. Safari still likes to wrap things down to another line if the images go outside of the browser width. Check out the source of the beam line 9-3 navbar heading at the URL I gave you above. Sometimes Safari even likes to just put the Software image onto the second line, while the others don't. I'm really confused here. Am I doing something wrong?

[EDIT: After a bunch of futzing, I seem to have gotten it to work... using display:table doesn't work that well. That's really weird since it works in your case. Do you know any reason why I can't refer to the "center" class in my extrenal style sheet in order to get that beam line image to center? I had to use an inline style -- if I didn't it wouldn't center.]

[EDIT 2: Grr. After changing it so it was two separate DIVs, and not a nested DIV inside a parent DIV, referring to the external stylesheet works now. This gets kind of annoying, but I guess I'll understand it more with experience.]

 

[Rower_CPU]

Odd, it looks fine in Safari and Camino, and IE5/Mac doesn't center the top image, but the rest is OK.

You don't have a local style sheet overriding anything do you? As long as 600 pixels is wide enough for all the images it should be fine...

 

[Rower_CPU]

OK, based on your edit and looking at your CSS file here's what I would suggest.

Create a new class or change the center class with the auto right and left margins and the width and with text-align: center.

Wrap the banner image and the navigation div in the new or center classed div. Unless you have a conflicting style in your external file, you should be OK.

.width {
width: 600px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

<div class="width">
	<img src="beamline93graphic.gif" alt="Beamline 9-3">
	<div>
	<a href="overview.html" target="BeamBody"><img src="overview.gif" alt="Overview"></a><img src="opticsperformance.gif" alt="Optics performance"><img src="instrumentationtechniques.gif" alt="Instrumentation Techniques"><a href="software.html" target="BeamBody"><img src="softwaresub.gif" alt="Software"></a>
	<div>
</div>

 

[simX]

Originally posted by Rower_CPU
Odd, it looks fine in Safari and Camino, and IE5/Mac doesn't center the top image, but the rest is OK.

You don't have a local style sheet overriding anything do you? As long as 600 pixels is wide enough for all the images it should be fine...

Yeah, it works fine now. Originally I had it <div>beam line 9-3 image<div>other images</div></div>, and Safari wasn't centering the image even though I told the outside div to be of class "center", referring to my external stylesheet. And using "display:table" instead of "width:600px" doesn't like to keep the Software image on the same line. I was hoping table would work since I wouldn't have to figure out an explicit width, but whatever.

 

[simX]

Originally posted by Rower_CPU
OK, based on your edit and looking at your CSS file here's what I would suggest.

Create a new class or change the center class with the auto right and left margins and the width and with text-align: center.

Wrap the banner image and the navigation div in the new or center classed div. Unless you have a conflicting style in your external file, you should be OK.

.width {
width: 600px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

<div class="width">
	<img src="beamline93graphic.gif" alt="Beamline 9-3">
	<div>
	<a href="overview.html" target="BeamBody"><img src="overview.gif" alt="Overview"></a><img src="opticsperformance.gif" alt="Optics performance"><img src="instrumentationtechniques.gif" alt="Instrumentation Techniques"><a href="software.html" target="BeamBody"><img src="softwaresub.gif" alt="Software"></a>
	<div>
</div>

For some reason, that doesn't center the top image. I've been getting weird results like this all day, and I don't know why they do that. Grr.

Anyway, thanks a lot for helping me out with all of this.

 

[Rower_CPU]

Originally posted by simX
For some reason, that doesn't center the top image. I've been getting weird results like this all day, and I don't know why they do that. Grr.

Anyway, thanks a lot for helping me out with all of this.

I don't give up that easily. Check this out.

http://organicallydigital.com/css/image.html

I took your stylesheet and added the class to the bottom. Works for me.

 

[simX]

Just one question: how come you always use "<div></div>" at the end? Shouldn't it be "</div></div>"? You seem to have done this in all of your examples, and I'm curious if its an error throughout all your examples or not.

Anyway, thanks again for all your help. If I have any more CSS questions, I'll know to whom to turn.

 

[Rower_CPU]

Originally posted by simX
Just one question: how come you always use "<div></div>" at the end? Shouldn't it be "</div></div>"? You seem to have done this in all of your examples, and I'm curious if its an error throughout all your examples or not.

Anyway, thanks again for all your help. If I have any more CSS questions, I'll know to whom to turn.

Oops, sorry about that. Just missed the / and was copying and pasting it through the examples. I fixed it and it still works.

 

[simX]

A better way to implement a table-like layout

OK, I've got another question with which to pick your brain, if you don't mind.

If you go to the same site, and click on "XAS Powder Sample Weight Calculator" under the Software heading, you'll see a layout that's created by tables.

What's the best way to do that in CSS, instead of using the table HTML stuff? I want the fields and the radio buttons to all line up like they are now, with the description text off to the left (and also similarly aligned). Is the best way to just use the "left" property to absolutely assign the position of the left edge of all the elements? What happens when the window is resized if you do that -- do the text fields just get clipped?

Also, see how the window smartly resizes the text and stuff to accomodate the text fields when using tables, so that (unless you're really making the window size small) you can always use the form? Can CSS do that?

I'm just trying to scope out what CSS can do -- maybe using tables is better, anyway.

 

[Rower_CPU]

OK, for something like that you have a couple of options.

You could create 2 separate divs, one for the text and one for the form elements, and use the left positioning like you mentioned. To get the contents to reflow like that, use a % for the width.

You could also use floats within a container div.

For accessibility reasons, it's a good idea to use label tags for the input descriptors, and then link the labels to the text inputs with unique ids.

Ideally, tables should only be used for displaying tabular data, but occasionally you'll have to fall back on them if you run into a layout issue you can't solve any other way, or gets too messed up by mishandled CSS.

 

[simX]

Originally posted by Rower_CPU
OK, for something like that you have a couple of options.

You could create 2 separate divs, one for the text and one for the form elements, and use the left positioning like you mentioned. To get the contents to reflow like that, use a % for the width.

Correct me if I'm wrong, but if I put 2 DIVs one after another, won't the text fields appear below the descriptions? So does that mean I'll also have to set the vertical position to get them to line up (vertically) with the descriptions?

You could also use floats within a container div.

This is something new to me -- any references that I could use to help?

For accessibility reasons, it's a good idea to use label tags for the input descriptors, and then link the labels to the text inputs with unique ids.

This is also something with which I'm not familiar.

Ideally, tables should only be used for displaying tabular data, but occasionally you'll have to fall back on them if you run into a layout issue you can't solve any other way, or gets too messed up by mishandled CSS.

I figured as much... so (from what I understand) you can basically accomplish what you can do with tables by simply using DIVs and positioning them with CSS?

 

[Rower_CPU]

Originally posted by simX
Correct me if I'm wrong, but if I put 2 DIVs one after another, won't the text fields appear below the descriptions? So does that mean I'll also have to set the vertical position to get them to line up (vertically) with the descriptions?

Here's the thing about absolute positioning and floating: the element gets removed from the "flow" of the document. Once you float or absolutely position an element, the elements following it act as if it's not even there, in terms of document order. So, absolutely positioned elements with only the left value set will be right next to each other.

Check out the example:
http://www.organicallydigital.com/css/columns.html

Here is a resource on using the float property:
http://www.webreference.com/html/tutorial20/3.html

Here is a resource on label tags and accessible forms:
http://www.webaim.org/howto/forms/index

Originally posted by simX
I figured as much... so (from what I understand) you can basically accomplish what you can do with tables by simply using DIVs and positioning them with CSS?

That's pretty much it. The catch is that CSS is more powerful and therefore more complex than just setting colspans and table cells in a table. Eventually, as browser support becomes ubiquitous, CSS positioning should become more common in web design and structure and content can become more distinct from each other.