Layout issue please help

Discussion in 'CSS' started by Audiomad, Mar 15, 2009.

  1. #1
    I'm designing a new layout but having major problems in all browsers.

    page is here www.websiteforumz.com/blank2.php
    IE looks best of all the browsers but still not perfect.

     <style type="text/css">
    <!--
    #header-c {
    	width:100%;
    	padding:0;
    	margin:0 auto;
    }
    #logo-div {
    	left:0px;
    	top:0px;
    	width:141px;
    	height:121px;
    	z-index:1;
    	background-color: #FFFFFF;
    	float: left;
    }
    #header-top {
    	top:0px;
    	width:842px;
    	height:58px;
    	z-index:2;
    	background-image: url(web/images/nav-top-r.jpg);
    	background-repeat: no-repeat;
    	background-position: top right;
    	float: right;
    }
    #header-btm {
    	top:58px;
    	width:852px;
    	height:51px;
    	z-index:3;
    	float: left;
    }
    #nav {
    	left:0px;
    	width:800px;
    	height:83px;
    	z-index:4;
    	background-image: url(web/images/nav-top.jpg);
    	background-repeat: repeat-x;
    	background-position: bottom;
    	min-height: 83px;
    	max-height: 83px;
    	float: left;
    	margin-bottom: 10px;
    }
    #nav-2 {
    	left:0px;
    	width:800px;
    	height:22px;
    	z-index:5;
    	background-color: #EBEBEB;
    	min-height: 22px;
    	max-height: 22px;
    	float: left;
    	margin-bottom: 10px;
    }
    #about {
    	width:396px;
    	height:113px;
    	z-index:6;
    	background-color: #EBEBEB;
    	min-height: 113px;
    	max-height: 113px;
    	float: left;
    	padding-bottom: 10px;
    	margin-bottom: 17.5px;
    }
    #info {
    	width:193px;
    	height:256px;
    	z-index:7;
    	background-color: #0066FF;
    	min-height: 256px;
    	max-height: 256px;
    	float: right;
    }
    #info-2 {
    	width:193px;
    	height:256px;
    	z-index:8;
    	background-color: #FF0000;
    	min-height: 256px;
    	max-height: 256px;
    	float: right;
    }
    #fourn-info {
    	width:396px;
    	height:113px;
    	z-index:9;
    	background-color: #EBEBEB;
    	min-height: 113px;
    	max-height: 113px;
    	float: left;
    	padding-bottom: 10px;
    }
    #cnt-1 {
    	width:250px;
    	height:250px;
    	z-index:10;
    	background-color: #EBEBEB;
    	min-height: 250px;
    	max-height: 250px;
    	float: left;
    	margin-top: 10px;
    }
    #cnt-2 {
    	width:250px;
    	height:250px;
    	z-index:11;
    	background-color: #EBEBEB;
    	min-height: 250px;
    	max-height: 250px;
    	float: left;
    }
    #cnt-3 {
    	width:250px;
    	height:250px;
    	z-index:12;
    	background-color: #EBEBEB;
    	min-height: 250px;
    	max-height: 250px;
    	float: right;
    }
    #footer-top {
    	left:0px;
    	width:100%;
    	height:27px;
    	z-index:13;
    	background-color: #EBEBEB;
    	min-height: 27px;
    	max-height: 27px;
    	float: left;
    }
    #footer-btm {
    	left:0px;
    	width:100%;
    	height:90px;
    	z-index:14;
    	background-image: url(web/images/footer-btm.jpg);
    	background-color: #82AFC6;
    	min-height: 90px;
    	max-height: 90px;
    	float: left;
    }
    body {
    	background-color: #FFFFFF;
    	background-image: url(web/images/back.jpg);
    	background-repeat: repeat-x;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    #container-2 {
    	margin:0 auto;
    	width:800px;
    }
    #fcontainer {
    	width:100%;
    	margin:0 auto;
    	margin-top:20px;
    }
    </style>
    </head>
    
    <body>
    <div id="header-c">
    <div id="logo-div"></div>
    <div id="header-top"></div>
    <div id="header-btm"></div>
    </div>
    
    <div id="container-2">
    <div id="nav"></div>
    <div id="nav-2"></div>
    <div id="about"></div>
    <div id="info"></div>
    <div id="info-2"></div>
    <div id="fourn-info"></div>
    <div id="cnt-1"></div>
    <div id="cnt-2"></div>
    <div id="cnt-3"></div>
    </div>
    
    <div id="fcontainer">
    <div id="footer-top"></div>
    <div id="footer-btm"></div>
    </div>
    
    
    </body>
    Code (markup):
     
    Audiomad, Mar 15, 2009 IP
  2. Aatu

    Aatu Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hard to say exactly without knowing what you want, but try this:

    
    <style type="text/css">
    
    #header-c {
    	width:100%;
    	padding:0;
    	margin:0 auto;
    }
    #logo-div {
    	left:0px;
    	top:0px;
    	width:141px;
    	height:121px;
    	z-index:1;
    	background-color: #FFFFFF;
    	float: left;
    }
    #header-top {
    	top:0px;
    	width:842px;
    	height:58px;
    	z-index:2;
    	background-image: url(web/images/nav-top-r.jpg);
    	background-repeat: no-repeat;
    	background-position: top right;
    	float: right;
    }
    #header-btm {
    	top:58px;
    	width:852px;
    	height:51px;
    	z-index:3;
    	float: left;
    }
    #nav {
    	left:0px;
    	width:800px;
    	height:83px;
    	z-index:4;
    	background-image: url(web/images/nav-top.jpg);
    	background-repeat: repeat-x;
    	background-position: bottom;
    	min-height: 83px;
    	max-height: 83px;
    	float: left;
    	margin-bottom: 10px;
    }
    #nav-2 {
    	left:0px;
    	width:800px;
    	height:22px;
    	z-index:5;
    	background-color: #EBEBEB;
    	min-height: 22px;
    	max-height: 22px;
    	float: left;
    	margin-bottom: 10px;
    }
    #about {
    	width:396px;
    	height:113px;
    	z-index:6;
    	background-color: #EBEBEB;
    	min-height: 113px;
    	max-height: 113px;
    	float: left;
    	padding-bottom: 10px;
    	margin-bottom: 17.5px;
    }
    #info {
    	width:193px;
    	height:256px;
    	z-index:7;
    	background-color: #0066FF;
    	min-height: 256px;
    	max-height: 256px;
    	float: right;
    }
    #info-2 {
    	width:193px;
    	height:256px;
    	z-index:8;
    	background-color: #FF0000;
    	min-height: 256px;
    	max-height: 256px;
    	float: right;
    }
    #fourn-info {
    	width:396px;
    	height:113px;
    	z-index:9;
    	background-color: #EBEBEB;
    	min-height: 113px;
    	max-height: 113px;
    	float: left;
    }
    #cnt-1 {
    	width:250px;
    	height:250px;
    	z-index:10;
    	background-color: #EBEBEB;
    	min-height: 250px;
    	max-height: 250px;
    	float: left;
    	margin-top: 10px;
    }
    #cnt-2 {
    	width:250px;
    	height:250px;
    	z-index:11;
    	background-color: #EBEBEB;
    	min-height: 250px;
    	max-height: 250px;
    	float: left;
    	margin: 8px 0 0 25px;
    }
    #cnt-3 {
    	width:250px;
    	height:250px;
    	z-index:12;
    	background-color: #EBEBEB;
    	min-height: 250px;
    	max-height: 250px;
    	margin: 8px 0 0 0; 
    	float: right;
    }
    #footer-top {
    	left:0px;
    	width:100%;
    	height:27px;
    	z-index:13;
    	background-color: #EBEBEB;
    	min-height: 27px;
    	max-height: 27px;
    	float: left;
    }
    #footer-btm {
    	left:0px;
    	width:100%;
    	height:90px;
    	z-index:14;
    	background-image: url(web/images/footer-btm.jpg);
    	background-color: #82AFC6;
    	min-height: 90px;
    	max-height: 90px;
    	float: left;
    }
    
    .clearer { clear:both; }
    body {
    	background-color: #FFFFFF;
    	background-image: url(web/images/back.jpg);
    	background-repeat: repeat-x;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    #container-2 {
    	margin:0 auto;
    	width:800px;
    }
    #fcontainer {
    	width:100%;
    	margin:0 auto;
    	padding: 20px 0 0 0;
    }
    </style>
    
    </style></head><body>
    <div id="header-c">
    <div id="logo-div"></div>
    <div id="header-top"></div>
    <div id="header-btm"></div>
    </div>
    
    <div id="container-2">
    <div id="nav"></div>
    <div id="nav-2"></div>
    <div id="about"></div>
    <div id="info"></div>
    <div id="info-2"></div>
    <div id="fourn-info"></div>
    <div id="cnt-1"></div>
    <div id="cnt-2"></div>
    <div id="cnt-3"></div>
    <div class="clearer"></div>
    </div>
    
    <div id="fcontainer">
    <div id="footer-top"></div>
    <div id="footer-btm"></div>
    </div>
    
    
    </body>
    
    
    
    Code (markup):
     
    Aatu, Mar 15, 2009 IP
  3. Audiomad

    Audiomad Peon

    Messages:
    1,028
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    much better thank you, but i'm still left with three boxes at the bottom they are not inline
     
    Audiomad, Mar 15, 2009 IP
  4. Audiomad

    Audiomad Peon

    Messages:
    1,028
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Just checking firefox the header is off.
     
    Audiomad, Mar 15, 2009 IP
  5. Aatu

    Aatu Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Off in what way?
     
    Aatu, Mar 15, 2009 IP
  6. Audiomad

    Audiomad Peon

    Messages:
    1,028
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #6
    in fire fox the header comes down from the top. at the bottom I have three boxes they wont got to the same line I have a link above to the page.
     
    Audiomad, Mar 15, 2009 IP
  7. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #7
    replace
    
    #cnt-1 {
    	width:250px;
    	height:250px;
    	z-index:10;
    	background-color: #EBEBEB;
    	min-height: 250px;
    	max-height: 250px;
    	float: left; clear: left ;
    	margin-top: 10px;
    }
    
    Code (markup):
    It fixes the bottom 3 blocks in FF3. Didn't bother to check those in IE.
     
    shallowink, Mar 15, 2009 IP
  8. Audiomad

    Audiomad Peon

    Messages:
    1,028
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Did'nt work they where still out of shape
     
    Audiomad, Mar 15, 2009 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #9
    From what I'm seeing your entire layout approach is flawed from the start....

    1) You are declaring heights on elements without the content inside them - fixing the height of content area elements is usually made of /FAIL/ as you never know if in the future the content is going to change breaking your layout.

    2) You are making the layout without the content that goes inside them...

    3) You have some elements that are positioned in px while others are effected by the system metric - resulting in your layout being even MORE broken on large font/120 dpi systems.

    4) A few tabs to make the code clearer wouldn't hurt.

    5) you forgot to close your comment, so technically we SHOULD be seeing a blank page.

    First thing I would do is clean up the markup, then swap the CSS around so state your widths a bit less often.

    Though without seeing the content that's going into those div's, I'm not sure how much help you are going to get. All I can say for certain is that fixing the heights of everything in #container-2 is pretty much made of /FAIL/.
     
    deathshadow, Mar 15, 2009 IP
  10. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #10
    In addition, he is attempting to use XHTML 1.1 which is only to be served as XML yet he is serving HTML.
     
    drhowarddrfine, Mar 15, 2009 IP
  11. Audiomad

    Audiomad Peon

    Messages:
    1,028
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Fixed all but the header on firefox only.
    Looks like it padded but its not, any idea's?

    You know much about css coding? the way I code has never failed in the past nor will it.
    I set the font size on my design's they wont fall apart.
     
    Audiomad, Mar 15, 2009 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #12
    A good deal more than most.

    Is that why three of the four sites in your signature have broken layouts on my machine in Opera, are riddled with validation errors (even simple ones like duplicate ID's), and have code to content ratios in excess of 4:1? How about trying to deploy XHTML 1.1 which doesn't look to be ready for primetime on widespread deployment for at least a decade, and doing so with the wrong mime-type?

    Ah, so you throw accessability completely out the window for the giant pile of /FAIL/ that is fonts smaller than 12px? Fireblue.net for example got to love a website that I have to zoom in 60% to bring everything up to a legible size - must be real fun for the people still stuck on IE6 where they can't resize it at all. What is that, 10px on fireblue? Huh, it's 12... suprising since it looks even smaller than that.

    Questions I have from what you are working with - What are nav1 and nav2 going to be? I assume lists... are those unrelated or nested to each-other. If nested what use are the separate div's going to be in regards to creating the layout? The header, I see no image-replacement techniques planned there, nor semantic markup for what those elements are going to me, so how's your images-off or css off degredation? It also LOOKS like you are designing the footer for a 100% min-height layout given your element nesting, but not entirely.

    Pretty much without the content, how can you possibly design an adaptive accessable layout with graceful degredation? That's what I was asking... But then I consider the approach advocated by a lot of folks of starting with a PSD or layout to be back-assward. Shoe-horning content into a layout is putting the cart before the horse... Mark up the content with semantic markup divided into logical groups, then bend the markup to your will using CSS in a top-down approach to create the layout - then and ONLY then boot up the graphics program to hang images on the design.

    Otherwise you end up alienating a third or so of your potential visitors be it people on mobile, people in places like Idaho or North Dakota or on metered connections who turn images off to deal with the fact 33.6 is a good connection for them, or oldfarts like myself with the 1920x1200 24" display that runs their OS on the 'large fonts/120dpi' setting.
     
    deathshadow, Mar 15, 2009 IP
  13. Audiomad

    Audiomad Peon

    Messages:
    1,028
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Falling apart looking at it in opera???? everything is fine don't see anything wrong!?.
    websiteforumz.com is built in tables its a script! has its flaw's nothing I can do there.
    Fireblue.net was made in five minutes was not to be there that long. here's the starting of the new version like it or is it to small to look at? www.fireblue.net/index.php have you got your eye's checked lately?
     
    Audiomad, Mar 15, 2009 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #14
    Mostly overlapping elements that probably shouldn't be overlapping on the vertical - typical of declaring px a whole bunch of times and missing it in just one or two places... Since I'm running large fonts/120dpi I'm used to seeing most websites designed in PX with fixed height containers being broken, so it's nothing new. px for content fonts is made of /FAIL/ - end of story.

    I've got a few of those myself that turned into sitting there for three years - so yeah, I know the feeling... Though you've got some REAL head scratchers there like blockquotes around most of the content when there aren't any quotes on the page...

    I've got coke bottles from hell on my head and am in fact legally blind (which is not the same thing as totally blind - I can see just fine, they just won't give me a drivers license because anything outside 6 feet is illegible.) - but I have NO problem reading about 90% of the websites out there because the MAJORITY of websites, or at least the sites I visit, use DYNAMIC fonts for their content, starting out in an adequate text size in the first place, then having it auto-enlarge 25% for users like myself. It's only when people take the - no offense intended - what I consider the SLEAZEBALL SHORTCUTS of declaring a fixed width with fixed heights at absurdly undersized fixed font sizes (12px, what is this 1982 at 256x192?) that I have a problem. Such sites I usually blow right past as rubbish since there are plenty of sites out there that work just fine. In a way you could blame the 1920x1200 native resolution of my display and that I try to sit at a NORMAL distance from my three screens (about a yard) but should I be penalized for having GOOD hardware? Ask someone stuck using a 13" macbook at the native 1280x800 with apple's uber-blur font renderer what they think about your sites some time.

     
    deathshadow, Mar 16, 2009 IP