SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Quick question about headers and CSS3

    I am trying to design a site using nothing but pure HTML5 and CSS3. Now I realize that CSS3 is not set in stone yet but I am working on the header and what I used to do on the HTML page was have the <h1>Name of Site or whatever</h1> then in CSS have header {text-align: -90000px;}. This would cause the text to be moved WAY over to the left so basically it would not show behind a header image. Is there another way to do this in CSS3 or should I still use this method? Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    In reality, CSS3 is a lot more ready that HTML5, which is also prenatal, so you are really jumping the gun with it. At the moement, 'pure' HTML5 is not possible, as it is not yet supported by any browser, so needs to be supported with some CSS and JS hacks.

    Anyhow, image replacement is still a CSS2 domain. If your image is not transparent, a better image replacement method is the 'Gilder Levin' strategy, demonstrated here:

    http://www.pmob.co.uk/temp/headerreplacement3.htm

    If the image is transparent, then you are best off doing what you've descried above.

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. You have come through for me again. The header is not transparent so I will continue to use the old standby way of styling it. I will also keep reading and learning about what HTML5 and CSS3 have in store for the future. Besides the books here, do you have any other recommendations for reference type books? What I mean by that is a book I can pick up, look for what I want to do and flip to a page that has a code snippet for what I am trying to accomplish? Thanks again.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,720
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    The Ultimate HTML and CSS references book(s) are great. There are no code snippets but it has al the properties and lists the support. It's very useful .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cgacfox View Post
    what I want to do and flip to a page that has a code snippet for what I am trying to accomplish?
    To be honest, these days I find the internet is better for that purpose. There are, however, lots of HTML5/CSS3 books around. But they fall out of date quickly, because the ground keeps shifting daily. Proposed elements etc. come and go rapidly ... which is another reason why online sources can be more reliable, as many of the better sites that track HTML5 and CSS3 closely keep track of these changes.

  6. #6
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan and Ralph. Any good sites you can recommend that keep up with the constant changes? Of course, besides Sitepoint!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cgacfox View Post
    Any good sites you can recommend that keep up with the constant changes?
    For CSS3, http://www.css3.info/

    For HTML5, check out something like http://html5doctor.com/

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,720
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cgacfox View Post
    Thanks Ryan and Ralph. Any good sites you can recommend that keep up with the constant changes? Of course, besides Sitepoint!
    Go to W3C.org.

    Read everything there.

    Everything.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •