SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS Page Layout

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Page Layout

    Site: www.propertieswithstyle.com

    On my laptop (1366 x 768) My pages render well I suppose.

    On my desktop (larger wider screen) my charts are cut on at the right side of the pages.

    Select a city on the "City List - Value Trends - Data & Charts" Scroll down and you'll see the three charts.

    Also, in all of my pages, if I zoom out on the page the menu and data on the pages mesh together with the menu on top.

    CSS:
    Code:
    #pageWrapper {
    	min-width:752px;
    	max-width:98em;
    	
    }
    
    #masthead {
    	margin-top:4px;
    	width: 100em;
    	
    	}
    
    #sideBar {
    	float:left;
    	width:320px; 		/*actually sets the width of the sideBar content div*/
    	padding-top:.75em; 	/*was 2em */
    	margin-left: .5em;
    
    }
    
    h1		{
    	padding-left:28px;
    	font: 48px/52px tangerine,arial,helvetica,sans-serif;
    	color:#239BF3; /* #4DF; */
    	text-shadow:0 0 8px #ADF;
    }
    Is there a quick fix for this?

    Thanks . . . Rick

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,361
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Your need to add a new CSS declaration so images adjust size relative to their container

    Code:
    img { max-width: 100%; height; auto; }

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, R Schreiber (a.k.a. Mr. Quick Fix )

    You have a max-width in ems assigned to the page wrapper. If one zooms the font size, the images remain their natural size but the width of this container changes. It's better to allow the container to "go with the flow" when possible. In this case, you may want to try width or max-width:1320px. See if that is more to your liking.
    Code:
    #pageWrapper {
        max-width: 96em;    /* try ~1320px */
        min-width: 752px;
    }
    The next item is the position:fixed menu. It's container has a fixed width, but the menu has no width. Give it a width and it will stay within its apparent area.
    Code:
    #mainMenu {
        line-height: 80%;
        list-style: none outside none;
        margin: 0.2em;
        position: fixed;
        width: 300px;    /* add me */
    }
    FYI: If the font size is zoomed large enough, the position:fixed menu can overflow the viewport and will not be viewable until the user reduces his font size. Be aware that this is a limitation of position fixed objects.

    Hope this is quick enough.


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
  •