www.webdeveloper.com
Results 1 to 4 of 4

Thread: photo-sizing/shaping questions

  1. #1
    Join Date
    May 2014
    Location
    ChicagoLand
    Posts
    2

    photo-sizing/shaping questions

    Hi gang,

    I'm building a simple website for a friend and I'm trying to figure out what to do to make it look nice on all devices. In particular I've got two problems for which I can't find a good enough solution:

    1) on the home page, I use a photo as background for the site title and tagline. What I want (or what she wants) is the title near the top of the photo and the tagline near the bottom. On a large screen the browser doesn't use the whole photo vertically because there isn't enough text in the div to need it. So I fudged, adding <p> elements to make it longer. I know, ugly, but it worked in most places. However, on a tiny screen that fudge makes the div too tall and the photo starts to repeat at the bottom. Is there a way to tell CSS to use the whole photo but scale it to the screen, and to put H1 at the top and H2 at the bottom?

    2) on another page I have a photo floating left next to a text list. Works great on a larger screen, but the photo isn't "tall enough" on a phone so the text continues below the photo, messing up the visual coherence of the list. Is there a way to make that photo stretch vertically to fill the space?

    Sorry for what are probably basic questions. I'm still learning (after many years away from coding) and while I've found many terrific ways of doing things by browsing the element references online and in books, I can't seem to figure out what to do for these two issues.

    Many thanks---

  2. #2
    Join Date
    May 2014
    Location
    bangalore
    Posts
    39
    2) if you want see your photo through mobile phone add this code to your css style page

    @media only screen and (max-width: 480px) {.....}

  3. #3
    Join Date
    May 2014
    Posts
    1,017
    You ever notice you don't see those types of image tricks done on REAL websites? Google? Amazon? E-Bay? IMDB? Wikipedia? Slashdot? These forums? You may wish to reflect on that as there's a VERY good question you may want to ask.

    Is there a REASON "real sites" don't do that?

    It sounds to me like you've backed yourself into a corner with a classic "Doctor, doctor, it hurts when I do this." -- you're using images that are causing problems -- solution? don't use a image, or remove the image with media queries where it doesn't do what you want. You could even swap it for a different one -- maybe, usually on small mobile displays photograph type images look like crap behind text anyways!

    There is also the new CSS3 background-size option.
    https://developer.mozilla.org/en-US/...ackground-size

    You want it to stretch to height preserving aspect ratio, you do:
    background-size:auto 100%;

    Stretch to width aspect preserving:
    background-size:100% auto;

    stretch to fit, to hell with aspect:
    background-size:100% 100%;

    You can also use:
    background-size:cover;

    To make it so that it always fits height or width as needed.

    Though, it also sounds like you are using presentational markup instead of using padding and margins... since your first part sounds like what should be a H1 with a SMALL tag inside it (master heading under which all other headings are subsections, which is why you should only have one H1, SMALL providing de-emphasis on the tag-line -- YES, small has a semantic meaning too). If it's JUST a tagline, and it's NOT starting a new subsection of the page, it has NO business in a H2.

    While common practice this:
    <h1>Site Title</h1>
    <h2>Tagline</h2>

    Is gibberish made up by people who never learned what a heading tag is, what heading levels MEAN, or how to use HTML properly. See the idiotic "HGROUP" tag from HTML 5, that was FINALLY stricken from it. Now if we can just get SECTION, NAV, ASIDE and FOOTER stricken as redundant to numbered headings and horizontal rules...

    In any case, you should concentrate on semantic markup FIRST, then bend that markup to your will with CSS. Adding a tag that has a semantic meaning -- like P -- to your markup JUST to create a gap between elements is... well... There's a saying I use a lot:

    "If you are choosing your tags based on their default appearance, you are choosing the wrong tags for alll the wrong reasons!"

    Though really to weigh in properly on this, it would really help if we could see the site (live and it's code) in action.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    May 2014
    Location
    ChicagoLand
    Posts
    2
    Thank you for the information. It looks like it will help solve the problem I posted.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles