Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    Chicago
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AP Layout Junky Needs Advice

    After checking the FAQ and trying a couple search terms I couldn't find this though I'm sure it's been asked. I'm new here but have found (via Google) some good answers here from time to time (from other people's questions). Figured it's about time I join the fray.

    Question: is there any way, when using AP layouts, to prevent IE from destroying the layout when zooming in? Every time I test my sites on IE it "splits" the divs apart and starts inserting space where there is none in teh code. Frustrating as hell after putting a lot of effort into an otherwise seemingly bulletproof design. My AP designs work well with Firefox, Safari, Opera and other standards-based browsers. In fact, at default settings, it looks OK in IE too.

    I don't know what percentage of the web browsing public uses the Crtl + / - shortcut to zoom in and out, but once someone uses it, my site started to "explode".

    I can't believe -even with all the time they had to make IE7 work- why these types of obvious details are still bass-ackwards. Aside from Crtl + / - not doing what it does in every other browser on the planet (increment text), the incrementing still doesn't work with pixel-based text. MS pisses me off sometimes.

    Anyway, if I want the exploding IE layout syndrome to go away, I fear I probably have to bag the AP layout and go with static (default) positioned divs for everything else inside the container, right? I want use an auto-centering, relative positioned container as my starting point, and preferably pixels to define any widths or heights that require it (other than text obviously).

    I notice most sites that use this technique do not specify a height for any of the divs. It's all calculated page by page apparently, based on the text increment setting, font heights, amount of text present, line heights, etc. When I try to do this type of layout though, I always have problems getting sidebars to float to their intended side, and getting my footer DIV to always stay at the exact bottom of the content (since no height is specified anywhere, and thus margin-top is of no use).

    Basically trying to do something like this

    Code:
    <body>
    
    <container>
    (auto-centering, has a defined width in pixels, and contains the header graphic and then DIVS)
    
    <content>
    (defined width in pixels, contains all the text, image divs, etc, and starts 
    at a point based on "margin-top" in the css, where margin-top 
    relates back to height of the header)
      
    <subcontent box1></>
    (text box convering about 2/3 of the width, containing <h1><h2><p> etc)
    
    <subcontent box2></>
    (sidebar box designed to go along the opposite side as box 1 with 
    more text, small images, etc)
    
    </content>
    
    <footer></>
    (width  defined in pixels, background image usually)
    
    </content>
    </body>

    I would post a test URL but the client doesn't want the site available to the public until it's done. Any tips for getting my brain around these web 2.0 static positioned layouts where everything magically flows downward without jumbling the floated images, etc? And where the footers magically flow up and down with everything else? And all of which presumably don't explode when IE "magnifies" them.

    Thanks in advance for any suggestions.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The simplest thing to do would be to put the floats before the non floated element. You would also need to give it a width so the non floated element can move up. Think of floats as a book. You float the columns from left to right. To get your footer to go below the content and the floats you need to use clear:both on the footer.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jul 2007
    Location
    Chicago
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Aero... I'll give it a shot and report back. Sometimes I look at the code for cool sites like the one below, and try to compare it to the HTML markup to see what goes where and it just doesn't visually add up. My head spin...

    http://www.45royale.com/css/default.css

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    It all comes with practice. That site you've shown us there use a lot of images and backgrounds. It's basically a header, two columns and a footer.
    .
    .

  • #5
    New Coder
    Join Date
    Jul 2007
    Location
    Chicago
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yep. The odd thing about it though, as you look at the rendered page it looks very simple and straightforward design-wise, yet the CSS is very complex. Seems incongruous in some ways. I think it's the shear volume of IDs (on sites like that) coupled with all the shorthand markup that throws me. It's hard for me to visualize -from code- the flow of a document that uses a lot of static positioning and floats but it's clearly *cough* the way to go.

  • #6
    New Coder
    Join Date
    Jul 2007
    Location
    Chicago
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK. I am close but can't quite get the footer to work. Check this out. Maybe you guys can figure what I'm not doing right. The result of the code below is that Everything appears except the footer, and everything scales / flows down the page normally, as things are expanded. But I've tried four or five different combinations of "clear both floating", moving the footer div in and out of the container / content DIVs, etc.

    CSS
    Code:
    <!-- 
    body  {
    	background-color: #8d8a80;
    	background-image: url(../images/backgr.png);
    	background-repeat:repeat-x;
    	margin: 0; 
    	padding: 0;
    	text-align: center; 
    	}
    
    h1 {
    	font-family: Tahoma, Vedana, Arial;
    	font-size: .9em;
    	padding: 0px 10px 0px 0px;
    	}
    
    h2 {
    	font-family: Tahoma, Vedana, Arial;
    	font-size: .8em;
    	padding: 0px 0px 0px 10px;
    	}
    
    p {
    
    	font-family: "Trebuchet MS", Georgia, Serif;
    	font-size: .8em;
    	text-align: left;
    	line-height: 1.3em;
    	}
    	
    ul {
    	font-family: "Trebuchet MS", Georgia, Serif;
    	font-size: .8em;
    	text-align: left;
    	line-height: 1.5em;
    	padding: 0px 0px 0px 10px;
    	list-style: none;
    	}
    	
    
    	
    /* End Text Styling */
    
    
    
    #container {
    
    	position: relative;
    	text-align: left;
    	width: 760px;
    	margin-top: 14px;
    	margin-left: auto;
    	margin-right: auto;
    	background-color: #f9f5e7;
    	}
    
    #header {
    		
    	width: 760px;
    	margin-top: 0px;
    	margin-left: 0px;
    	}
    
    #content {
    	
    	width: 760px;
    	margin-top: 0px;
    	margin-left: 0px;
    	}
    	
    
    #textLeft {
    
    	width: 460px;
    	padding: 0px 15px 0px 30px;
    	border-right: 1px solid black;
    	}
    	
    	
    #textRight {
    	
    	width: 250px;
    	float: right;
    	padding: 0px;
    	}
    
    	
    #footer {
    	
    	width: 760px;
    	clear: both;
    	}
    
    
    -->

    XHTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title></title>
    
    <link href="css/mainstyle.css" rel="stylesheet" type="text/css" media="screen" />
    	
            <meta name="Description" content="" />
            <meta name="Keywords" content="" />
    
    <style type="text/css" media="screen">
    
    h1 {color: #b4352e;}
    
    h2 {color: #b4352e;}
    
    p {color: #272727;}
    	
    ul {color: #272727;}
    	
    </style>
    
    
    
    <body>
    <div id="container">
    
    	<div id="header"><img src="xyz.jpg" alt="xyz" width="760" height="300" /></div>
    
    
    	<div id="content">
    
    		<div id="textRight">
    		
    			<h2>News and Events</h2>
    		
    			<ul>
    				
    				<li>ABC</li>
    				
    				<li>DEF</li>
    				<br />
    				
    			
    			</ul>
    		</div>
    		
    		<div id="textLeft">
    			
    			<h1>Service Offering 1</h1>
    			
    			<p>Text Text Text</p> <p>Even more text,
    to the tune of about 2 short paragraphs</p>
    		
    			
    			<h2>This service is right for you if:</h2>
    			<ul>
    				
    				<li>ABC</li>
    				<li>DEF</li>
    				<li>GHI</li>
    				<li>JKL</li>
    				<li>MNO</li>
    			
    			</ul>
    			<br />
    			
    		</div>
    
    	</div>	
    
     <div id="footer">(for now this space holds the image
    and there is no background in the actual CSS until 
    I can get it to work. See post below for example of 
    background code I tried earlier.</div>
    
    </div>
    </body>
    Also, one problem with placing the textRight DIV above the main text (in code) is that this will probably hurt the Google page rank for this site because the bulk of the title and keyword matching text content is in the textLeft DIV. I should have the latter as high up in the HTML hierarchy as possible in that case. I guess I could try reversing the technique and floating the main text box left and seeing if I can get the sidebar to showup correctly even if placed lower in the "tree" but last time I it didn't work out so well.
    Last edited by IEisaplague; 07-08-2007 at 03:42 AM. Reason: Updated code (still placing footer image in the div to make it show up), textLeft still needs to go on top for Google...

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why are you floating your footer? Don't float your footer.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Jul 2007
    Location
    Chicago
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    On my initial attempt I didn't float it. I had only

    #footer {

    width: 760px;
    clear: both;
    background-image: url(../images/footer.jpg);
    }

    but nothing happened. Question: don't clear and float go together? IOW, if you haven't declared something to float, you can't declare it to clear either?

    I just stumbled upon a solution whereby I removed the background image and placed the image directly into the footer in HTML (no clears or floats) and it worked. I still wouldn't mind figuring out why the footer doesn't show up though.

    Thanks again for keeping up with the thread Aero. It's already been a help and I'm sure I'll learn even more as I try new things / post here.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Not sure where you heard that idea. You can clear any block level element if its not floated. The whole purpose of the clear:both on the footer is to clear the floats. If you don't clear the floats then your footer will move up behind them, so you won't see it. A good article explaining how to clear floats is here http://positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Jul 2007
    Location
    Chicago
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That actually makes more sense. Not sure where I got that either; might've misinterpreted one of the books I read or something. Anyway, As noted I've tried clear-both at to two different DIV positions in the HTML hierarchy and in none of the cases does the footer show up. It only seems to show up if I place the image directly in rather than as a background.

    Is it possible that because there is no content (no <p> etc) inside the actual DIV that it is not showing up, even though it has a background image?

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Post ALL of your code, not just snippets.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New Coder
    Join Date
    Jul 2007
    Location
    Chicago
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did post all of the code. All that's missing is the specific text instead of "ABC" "DEF"

    I'll edit the post to include the header code and encoding info, if it helps...
    Last edited by IEisaplague; 07-08-2007 at 03:44 AM.

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Description" content="" />
    <meta name="Keywords" content="" />
    <title></title>
    <style type="text/css">
    body {
    background:#8d8a80 url(../images/backgr.png) repeat-x;
    margin: 0;
    padding: 0;
    text-align: center;
    }
    
    h1 {
    font-family: Tahoma, Vedana, Arial;
    font-size: .9em;
    padding:0 10px 0 0;
    }
    
    h2 {
    font-family: Tahoma, Vedana, Arial;
    font-size: .8em;
    padding: 0 0 0 10px;
    }
    
    p {
    font-family: "Trebuchet MS", Georgia, Serif;
    font-size: .8em;
    text-align: left;
    line-height: 1.3em;
    }
    
    ul {
    font-family: "Trebuchet MS", Georgia, Serif;
    font-size: .8em;
    text-align: left;
    line-height: 1.5em;
    padding:0 0 0 10px;
    list-style: none;
    }
    
    /* End Text Styling */
    
    
    
    #container {
    text-align: left;
    width: 760px;
    margin:14px auto 0;
    background: #f9f5e7;
    }
    
    #textLeft {
    width: 460px;
    padding: 0 15px 0 30px;
    border-right: 1px solid black;
    float:left;
    margin-right:5px;
    }
    
    #textRight {
    width: 250px;
    float: left;
    }
    
    #footer {
    clear: both;
    }
    
    h1 {
    color: #b4352e;
    }
    
    h2 {
    color: #b4352e;
    }
    
    p {
    color: #272727;
    }
    
    ul {
    color: #272727;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="header"><img src="xyz.jpg" alt="xyz" width="760" height="300" /></div>
    	<div id="textLeft">
    		<h1>Service Offering 1</h1>
    		<p>Text Text Text</p>
    		<p>Even more text,
    			to the tune of about 2 short paragraphs</p>
    		<h2>This service is right for you if:</h2>
    		<ul>
    			<li>ABC</li>
    			<li>DEF</li>
    			<li>GHI</li>
    			<li>JKL</li>
    			<li>MNO</li>
    		</ul>
    		<br />
    	</div>
    	<div id="textRight">
    		<h2>News and Events</h2>
    		<ul>
    			<li>ABC</li>
    			<li>DEF</li>
    			<br />
    		</ul>
    	</div>
    	<div id="footer">(for now this space holds the image
    		and there is no background in the actual CSS until 
    		I can get it to work. See post below for example of 
    		background code I tried earlier.</div>
    </div>
    </body>
    </html>
    Study the code. Ask questions about if you like.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    New Coder
    Join Date
    Jul 2007
    Location
    Chicago
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Aero... will give it a try.

    One question I have is, when you type:

    margin:14px auto 0;

    how does that relate to the usual markup of

    margin: 0px 0px 0px 0px; (T, R, B, L in other words)?

    Is yours stipulating 14px Top, Auto Right, 0 bottom, 0 left?


    [Later...

    No luck. textRight gets stuck under textLeft in the rendering, and the footer does not show up.

    BTW, I'm using Coda 1.0.3 as my development platform for this site, and testing against the internal KHTML previewer, Firefox 2.0.0.4 and Opera 9.x When that all looks correct, I test against IE 7.
    Last edited by IEisaplague; 07-08-2007 at 09:29 PM.

  • #15
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Check the CSS 2.1 property definition for margin:

    This:
    Code:
    margin: 14px auto 0;
    is the same as this:
    Code:
    margin: 14px auto 0 auto;


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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