Skip navigation
Currently Being Moderated

Rearranging of content on different size screens

Apr 30, 2012 1:24 AM

Tags: #cs5 #help #image #adobe #div #html #template #dreamweaver #images

Hello,

 

First of all this is the first time I have posted here and it's for a problem that I can't seem to fix. Let me get straight to the point. This is how my webpage had looked when designing it:

 

design.png

             This is on full size resolution (how i was designing my website). I am working on a fairly large monitor 23" 1920 x 1080.

 

When I click on a different size view/resolution in the bottom right, resize the window (make it smaller), or view it on a lower resolution or smaller monitor, the content gets rearranged like this:

 

 

design3.png

         When set to 1280 x 875
design4.png

               In a resized browser.

 

I am aware that there is a secton on AP <div> tags in this forum, but I am sure that do not have any AP elements. I am using the Two column liquid header and footer layout. Any ideas on how to fix or correct this so that it can be resized/viewed on a smaller monitor without it rearranging everything.

 

Thank you in advance.

 
Replies
  • Currently Being Moderated
    Apr 30, 2012 1:33 AM   in reply to soChastic

    soChastic wrote:

     

    ... I am using the Two column liquid header and footer layout. Any ideas on how to fix or correct this so that it can be resized/viewed on a smaller monitor without it rearranging everything.

     

    Thank you in advance.

     

    Hi soChastic - the reason why your page rearranges is because you are using a "liquid" layout.  Change this to "fixed" and your problem will go away.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2012 2:02 AM   in reply to soChastic

    soChastic wrote:

     

    So, how do i change it to fixed?

     

    Can you post your code and css here?

     

    According to my 2 col header, sidebar, footer liquid layout taken from Dreamweaver templates your construction should NOT act like that.

     

    Try putting a min-width: 700px; on the container: (see below)

     

     

    .twoColLiqLtHdr #container {

    width: 80%;  /* this will create a container 80% of the browser width */

    background: #FFFFFF;

    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

    border: 1px solid #000000;

    text-align: left; /* this overrides the text-align: center on the body element. */

    min-width: 700px;

    }

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 30, 2012 2:04 AM   in reply to soChastic

    Post your current HTML and CSS code here so we can let you know what to change to make it fixed layout

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2012 2:30 AM   in reply to soChastic

    Change your content css to as below:

     

    .content {

    padding: 10px 0;

    margin-left: 238px;

    text-align: left;

    font-family: Georgia;

    font-style: italic;

    font-weight: normal;

    border: ridge;

    border-color: #F93;

    background-color: #FFF;

    }

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 30, 2012 3:03 AM   in reply to soChastic

    Add a fixed width to your .header CSS

     

    width: 800px; or width: 80%;

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2012 3:10 AM   in reply to soChastic

    soChastic wrote:

     

    Thank you. That seems to have fixed my problem. Is it possible to have the header picture (I've put a picture in the header thats stretched out across it) get smaller just as the content box does?

     

    If you want an image which scales as the viewport is dragged narrower and wider then add the below css to your styles

     

    .header img {

    max-width: 100%;

    }

     

     

    Then get rid of the width and height attributes set on the image: (see below)

     

    <img src="../images/hills.jpg" alt="Hills" longdesc="file:///C|/Users/Pranav/Documents/Website Development/Education For Excellence/images/hills.jpg" />

     

    Incidentally your image is incorrectly linked.......file:////C blah blah is wrong and won't work once you go live. You need to re-link that so its correct.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2012 3:34 AM   in reply to soChastic

    soChastic wrote:

     

    The css that you asked me to insert still doesn't seem to work.

     

    Then you are doing something wrong. The image will automatically scale once the container width goes below 1260px wide.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2012 10:42 AM   in reply to soChastic

    I have a JQuery slider that I have set having a width of 1000 px and I want to set the max width as a percentage to make it autoscale as well.

    This would be like having a picture canvas of set dimensions inside a collapsing picture frame.  It won't work.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2012 12:16 AM   in reply to soChastic

    soChastic wrote:

     

    ...

    I also tried adding that same max-width property to .content div { }, without a result. Any Ideas?

     

     

    Well, there's always a way ... usually more than one and some harder than others.

    Like Nancy O, I doubt if there's a way to do it in the CSS.

     

    On the other hand, if you're willing and able to start writing javascript code - well, that opens up a bunch of possibilities

     

    Pseudo-code:

         On browser resize event

              jQuerySlider.Width = (client.Width * 0.8)

     

    Or something to that effect.  Replace the '0.8' with whatever percentage of the browser width you want.

    After you get that to work you may have to tinker with the 'height' dimension to keep the images scaled properly.

    I don't know how your slider handles image scaling.

     

    ~codeDawg

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2012 4:59 AM   in reply to soChastic

    I don't know what your jquery slider consists of? If it's just one image flicking over to another then just make the images max-width: 100%; in a <div> set as a percentage width.

     

    You can't set a <div> at a specific width of 1000px then expect it to scale when the browser viewport is widened and narrowed.

    you have to set the <div> as a percentage width then it will scale along with the images.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

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