Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Two css tricks

  1. #1
    Join Date
    May 2005
    Beans
    694

    Two css tricks

    I'm learning how to design web pages, and I like the pure html+css standard. However there are two tricks I'd like to be able to do, but I couldn't find how with a bit of experiment. I gues they should be quite standard.

    1) I'd like to have a fixed layout for everything but themain text. So I'm thinking something like that. The header should be fixed when the page scrolls, as well as a left column with the navigation buttons. The text itself should be in a central column, and when you scroll it, it should go behind the header.

    2) I'd like to have some links over images. If a user doesn't want images, then he should be able to use textual links. In other words I want a link where images are over, and not behind, the text.

    Is there a way to do this?
    Please, feel free to correct my english, so that I can improve it.

    Click here to join Dropbox. Both you and I get free extra space.

  2. #2
    Join Date
    Sep 2006
    Beans
    Hidden!

    Re: Two css tricks

    Nonno Bassotto,

    1) There's probably a way to do this in CSS, but I can't think of any way to do it. It'd be much easier to use frames. (I didn't say that.)

    2) I know Netscape had a way to layer different parts of the page, and I believe that CSS implemented it as well. Click, this will probably help you. Google CSS and "z-index" for more info.

  3. #3
    Join Date
    Oct 2006
    Beans
    349
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: Two css tricks

    What do you mean by "In other words I want a link where images are over, and not behind, the text."? Are you trying to make pic links?
    thall

  4. #4
    Join Date
    Sep 2006
    Beans
    Hidden!

    Re: Two css tricks

    geek_Man,

    Yes, but with the image over the text. That way, if the user has images disabled (or they can't see them, like from a console web browser) there is text underneath that also serves as a link.

  5. #5
    Join Date
    Oct 2006
    Beans
    349
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: Two css tricks

    What if he gave it a title attribute or maybe... dang, there's some other attribute... it's like some backup in case the link to the pic is broken... whatever. I don't know if that will work though, but maybe.

    EDIT: A-HA! What if you gave it an alt attribute? THAT'S the one I couldn't remember!
    Last edited by geek_Man; January 20th, 2007 at 05:15 AM.
    thall

  6. #6
    Join Date
    Sep 2006
    Beans
    Hidden!

    Re: Two css tricks

    geek_Man,

    It wouldn't be wise to rely on the fact that because browser X substitutes the alt tag for the image, browsers Y and Z do as well. It's what it was created for, but unless Firefox and Internet Explorer both support replacing the image with the alt text, I would be hesitant to implement it. Then there's Opera, etc. Command-line browsers factor into the decision as well (at least they should in my book; if it looks good in lynx, roll it out!).

  7. #7
    Join Date
    Oct 2006
    Beans
    349
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: Two css tricks

    Well, I didn't say it would work for sure, it was just a suggestion.
    thall

  8. #8
    Join Date
    Jan 2005
    Location
    Portland, Oregon U.S.A.
    Beans
    1,050
    Distro
    Ubuntu Mate 15.04 Vivid Vervet

    Re: Two css tricks

    Quote Originally Posted by Nonno Bassotto View Post
    1) I'd like to have a fixed layout for everything but themain text. So I'm thinking something like that. The header should be fixed when the page scrolls, as well as a left column with the navigation buttons. The text itself should be in a central column, and when you scroll it, it should go behind the header.
    I think what you're asking for is something similar to what I set up on my site. Feel free, of course, to browse/borrow code (but none of the actual content, thank you). Also check out the master-css file and the navigationbar-css file. I hope this helps. It's a bit tricky.

    Good decision, sticking with CSS and avoiding giant table layouts, IMO. Good luck.

    EDIT: 2 delicious cappuccinos in my beancount!
    Last edited by DirtDawg; January 20th, 2007 at 09:08 AM. Reason: 4 score and 7 years

  9. #9
    Join Date
    Jul 2006
    Location
    Washington, DC
    Beans
    1,678
    Distro
    Kubuntu Development Release

    Re: Two css tricks

    Quote Originally Posted by po0f View Post
    geek_Man,

    It wouldn't be wise to rely on the fact that because browser X substitutes the alt tag for the image, browsers Y and Z do as well. It's what it was created for, but unless Firefox and Internet Explorer both support replacing the image with the alt text, I would be hesitant to implement it. Then there's Opera, etc. Command-line browsers factor into the decision as well (at least they should in my book; if it looks good in lynx, roll it out!).
    put alt and title as the same text, and you're safe in IE, FF, O, and Safari, from what I recall

    as to #1...
    set header and nav as z-index: 1, text as z-index:0, header and nav are fixed, text is absolute, i think

    LinuxChix | Linux User #432169 | Ubuntu User #8495 | IRC: maco @ irc.linuxchix.org or irc.freenode.net

  10. #10
    Join Date
    Sep 2006
    Beans
    Hidden!

    Re: Two css tricks

    macogw,

    Quote Originally Posted by macogw
    put alt and title as the same text, and you're safe in IE, FF, O, and Safari, from what I recall ...
    That's good to know, thanks.

Page 1 of 2 12 LastLast

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •