CSS/HTML Questions

Discussion in 'Mac Help/Tips' started by simX, Jul 10, 2003.

  1. simX macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #1
    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.
     
  2. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #2
    Re: CSS/HTML Questions

    Add this statement:
    display: block;

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

    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.

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

    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. :)
     
  3. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #3
    Re: Re: CSS/HTML Questions

    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.



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

    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.]


    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.
     
  4. Nermal Moderator

    Nermal

    Staff Member

    Joined:
    Dec 7, 2002
    Location:
    New Zealand
    #4
    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.
     
  5. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #5
    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.
     
  6. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #6
    Re: Re: Re: Re: CSS/HTML Questions

    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 :) ).
     
  7. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #7
    Re: Re: Re: Re: Re: CSS/HTML Questions

    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

    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.
     
  8. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #8
    Re: Re: Re: Re: Re: Re: CSS/HTML Questions

    The second one is what I wanted. Thanks.

    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.

    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.)
     
  9. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #9
    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.
     
  10. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #10
    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:
     
  11. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #11
    Any idea how to fix that problem with the center-aligned, but fixed width? I'm sure you know far more CSS here. :\
     
  12. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #12
    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".
     
  13. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #13
    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.]
     
  14. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #14
    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...
     
  15. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #15
    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;
    }

    PHP:
    <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>
     
  16. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #16
    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.
     
  17. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #17
    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.
     
  18. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #18
    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. :)
     
  19. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #19
    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. :)
     
  20. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #20
    Oops, sorry about that. Just missed the / and was copying and pasting it through the examples. I fixed it and it still works. :D
     
  21. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #21
    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.
     
  22. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #22
    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.
     
  23. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #23
    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?

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

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

    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?
     
  24. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #24
    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

    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.
     

Share This Page