SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    H-tag display properties in style sheet

    Having finally arrived in the 21st century , I am now halfway through revamping my site from HTML4 to XHTML/CSS3, but unfortunately, it's only the easy half that I have done; the hard one is still in front of me.

    I'm now struggling with 2 related questions.
    1. Can I set the display for ALL H-tags in my stylesheet in such a way that every page displays the H-tags the same way?
    2. If that can be done, will it display the same over various systems and browsers?
    I am having a hard time getting things to display the same or at least very similar in IE, Opera, Chrome and the various Mozilla derivatives and I shudder at the thought of expanding to Apple desktop/laptop, tablets, Ipad, Iphone, androids etc.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by benbob View Post
    Can I set the display for ALL H-tags in my stylesheet in such a way that every page displays the H-tags the same way?
    Yes.

    If that can be done, will it display the same over various systems and browsers?
    Yes, pretty much.

    Perhaps show us an example of what you are doing if you are having problems.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph.
    Not quite at the stage of displaying things in the new format; I'm revamping a live site and can't afford to have it down, so the lot will have to be redone, tested and replaced overnight. At the moment, I am "designing" the master style sheet, and deciding what goes in there, what goes in the internal ss and what goes inline. It will be "auto-sizing" and if I can get that working properly, the current "3-column" centered will change to "2-column" floating left lined.

    Do you have a link to an example of how to define H-tags in a master style sheet?
    What I am trying to achieve, is choose the font (probably Verdana), colour, size, H1 H2 H3 stepping down in size, 4-6 the same size@ about 1.5-2 times the size of body text and override the font choice, sizing and colouring of the browser.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by benbob View Post
    Do you have a link to an example of how to define H-tags in a master style sheet?
    There's nothing to it, really. E.g.

    Code:
    h1, h2, h3, h4 {font-family: verdana, sans-serif; color: #222;}
    h1 {font-size: 2em;}
    h2 {font-size: 1.75em;}
    h3 {font-size: 1.5em;}
    h4 {font-size: 1.25em;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    Just as well I admitted to still needing to learn a lot.
    Thanks Ralph.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    No probs. You are welcome to ask any questions.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No probs. You are welcome to ask any questions.
    You may come to regret that generosity, but I'll try not to take it too literally.
    Bearing in mind that I am still in the early stages of the revamp and therefore all options fully open, should I make my site suitable for all display sizes, including minin screens like smartphones/iphones/androids, or set up a main site for anything from say 800x600 upward, and a redirect when small screens are detected?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by benbob View Post
    should I make my site suitable for all display sizes, including minin screens like smartphones/iphones/androids, or set up a main site for anything from say 800x600 upward, and a redirect when small screens are detected?
    It's up to you, really, but unless your site is a huge one, I'd say use CSS to resize the layout for different viewports, rather than redirect users to a different version of the site, which is more work. Responsive design is all the rage at the moment.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Ralph, you're a genius. flexible grid and "adjusting images" is just what I was looking for. Apart from putting the "normal text" on the left and buttons/images/links of the right, the Baker street enquirer structure is pretty much what I had in mind.
    My site is very text heavy (1000-2000 words on most pages) by necessity wich causes display problems to no end on fixed witdth format.
    Many thanks for the links.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Glad that helped. It's much nicer to have flexible pages, given the nature of the web, so I'm glad this is being recognized more now.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •