Skip navigation
dabe76
Currently Being Moderated

Resizable page for different screen sizes but with static image content. Shall I use media query?

Feb 25, 2013 3:22 PM

I’m making a page that has of mostly image content. It’s a large circle in the middle so I want it to be centered vertically and horizontally. I also want it to stay centered and resized proportionally for different screen sizes. I’ve read about media query but it seems to me that the elements just become fluid. Can I make the elements stay in place using the media query?

I’m working in Dreamweaver CS5.5

 
Replies
  • Currently Being Moderated
    Feb 25, 2013 3:40 PM   in reply to dabe76

    Responsive = different layouts for different device widths.

     

    The following is an example of a FluidGridLayout made in DW.  Resize your viewport to see what happens. 

    http://alt-web.com/FluidGrid/Fluid.html

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Feb 27, 2013 8:37 AM   in reply to dabe76

    Use % based width for your container that you'll use to hold your main body content to achieve the 'same position' thing you're after. But, do remember, this will 'resize' the content within the DIV when your viewport (browser width) is lesser than the original image size itself. In which case, your image will start pixelating - bad practice.

     

    Just out of curiousity, is there a specific reason you're trying to do this?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 1:12 PM   in reply to dabe76

    All images and no text?  That's a huge mistake. Without some keyword rich content inside HTML headings & paragraphs, your site is virtually invisible to search engines, language translators & screen readers.  You might want to rethink this concept.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 1:51 PM   in reply to dabe76

    You don't need media queries with % layouts. 

     

    If you intend to use an image map for your links, it won't work.  Hotspots don't rescale.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 2:13 PM   in reply to dabe76

    Image map = one large image with multiple linked regions on it (hotspots). 

    Example:

    http://alt-web.com/DEMOS/jQuery-maphighlight.shtml

     

    Image maps need to be a fixed height & width in pixels.  % won't work because link coordinates don't rescale with the image.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 28, 2013 11:05 AM   in reply to dabe76

    Hi db,

     

    ---------del: my answer is not needed  ---------

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 3:03 PM   in reply to Nancy O.

    The following is an example of a FluidGridLayout made in DW.  Resize your viewport to see what happens. 

    http://alt-web.com/FluidGrid/Fluid.html

    That's Adobe's fluid grid thingie? What would happen if you wanted to put borders around your columns or make them the same height - automatically? Seriously, Adobe's fluid grid system should be ripped out of the program and stomped on to prevent it from ever reforming :-)

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 3:14 PM   in reply to dabe76

    What you have is a nice print concept that doesn't translate well to Responsive Web Design.  Don't feel bad.  A lot of designers struggle with the limitations of RWD.  It's not everyone's favorite cup of tea.

     

    Abandon % width.  Find a size that works for the majority of users and build your site for that target group.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 3:20 PM   in reply to Al Sparber

    I don't have a lot of time right now, but this starter code might inspire a regular on this forum to complete it (if not, I'll see if I can this weekend). Here is the start:

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body {}
    #the-circle {
    width: 960px;
    margin: 40px auto;
    background-color: #222;
    border-radius: 100%;
    }
    .link-row {
    overflow: hidden;
    margin: 60px 0px;
    }
    .link-row-top,
    .link-row-bottom {
    text-align: center;
    }
    .link-row-left {
    float: left;
    }
    .link-row-right {
    float: right;
    }
    </style>
    </head>

    <body>
    <div id="the-circle">
    <div class="link-row-top">
      Top Link
    </div>
    <div class="link-row">
      <div class="link-row-left">Left</div>
      <div class="link-row-right">Right</div>
    </div>
    <div class="link-row">
      <div class="link-row-left">Left</div>
      <div class="link-row-right">Right</div>
    </div>
    <div class="link-row">
      <div class="link-row-left">Left</div>
      <div class="link-row-right">Right</div>
    </div>
    <div class="link-row">
      <div class="link-row-left">Left</div>
      <div class="link-row-right">Right</div>
    </div>
    </div>
    </body>
    </html>

     

    It would require at least 1 media query.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Feb 28, 2013 9:20 PM   in reply to dabe76

    It's just the circle that I'm not sure where to put.

     

    Z-index is your friend.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 1, 2013 9:49 AM   in reply to dabe76

    I meant use 'z-index' CSS selector to 'layer' your DIVs on the page: http://reference.sitepoint.com/css/z-index/demo

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points