Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 22

Thread: 100% height not working despite doing the obvious

  1. #11
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Not working?

    ...It should work, well, I mean, i've tested it. Anyways give it a Ctrl + F5, then see if it has effects

    ...If it seems not working, update your page, and we'll be looking about this havoc
    Last edited by rangana; 04-11-2008 at 04:11 AM.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  2. #12
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Wow, that's some markup you have there. My general recommendation in this sort of situation is start from scratch.

    A website isn't just about the design. It's obvious you're a very capable designer, but the markup has to be just as beautiful. It's important to plan well and execute even better.

    When I, as a fellow designer/developer, view the source of your website I should be to immediately grasp your layout. This happens when your markup is semantic and well organized.

    Your website is very common of what I see in the design world -- well meaning folk, who get caught up in HTML/CSS. Before I fix the problems you're having with your site, I'd like to make some suggestions:

    1) Validate your markup (i think you've done this).
    2) Use a strict Doctype whenever possible. It's true that the strict doctype is restrictive at times but most of the type you should try to keep your markup to the highest standards.
    3) Keep CSS out of HTML. Unless you need the CSS inline for some sort of script/dynamic effect, keep CSS external.
    4) Make your markup semantic. Name things using logical terms. You've named your divs things like contentcon and content1, content2, etc... That's fine. But for future reference, it's much easier if you name the contact details div contact-details instead of content2
    5) Try to minimize your markup wherever possible. Organization is good but over-compartmentalizing is not.


    The biggest problem with your markup are with points 4 and 5 above (along with an overzealous use of floats). Also, you have a lot of redundant CSS -- while not a problem it can easily become one. Instead of having three blocks with exactly the same styling, use a class instead.

    Next, regarding floats. When you float something, it's essentially removed from the flow of the document. So if you have a div with everything floated inside, it's height is (for all technical purposes) zero. In your markup, you were floating nearly everything below the main image, thus the result you were getting.


    Now that my lecture is over, here's your fix. You'll have to add your JS back in and make small CSS changes here and there to get the spacing exactly as you had it before. I've only tested in FF so might also be some IE bugs in there, but those can be easily solved.

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="main.css" rel="stylesheet" type="text/css" />
    <title>Vander Design</title>
    </head>
    
    <body>
    <div id="topcontainer">
    	<div id="logo">
    		<img alt="Vander Logo" src="http://www.vander.co.nz/Images/Logo.jpg"/>
    	</div>
    </div>
    
    <div id="box">
    	<div id="navigation">
    		<ul>
    			<li><img alt="Home" src="http://www.vander.co.nz/Images/ButtonOn/ButtonOn_01.jpg"/></li>
    			<li><a href="about.php"><img src="http://www.vander.co.nz/Images/Button_02.jpg" alt="About Vander" id="About" onmouseover="MM_effectAppearFade(this, 100, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 100, 0, 100, false)"/></a></li>
    			<li><a href="portfolio.php"><img src="http://www.vander.co.nz/Images/Button_03.jpg" alt="Portfolio" id="Portfolio" onmouseover="MM_effectAppearFade(this, 100, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 100, 0, 100, false)"/></a></li>
    			<li><a href="services.php"><img src="http://www.vander.co.nz/Images/Button_04.jpg" alt="Services" id="Services" onmouseover="MM_effectAppearFade(this, 100, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 100, 0, 100, false)"/></a></li>
    			<li><a href="contact.php"><img src="http://www.vander.co.nz/Images/Button_05.jpg" alt="Contact" id="Contact" onmouseover="MM_effectAppearFade(this, 100, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 100, 0, 100, false)"/></a></li>
    		</ul>
    	</div>
                                                    
    	<div id="middle">
    		<div id="photo">
    			<div id="popup" style="display:none;">
    				<img alt="Website Information" src="http://www.vander.co.nz/Images/popupweb.gif" id="popupweb" />
    			</div>
    			
    			<div id="deals">
    				<div class="deal" onmouseover="MM_effectAppearFade('popup', 200, 0, 80, false)" onmouseout="MM_effectAppearFade('popup', 200, 80, 0, false)">
    					<img src="http://www.vander.co.nz/Images/Deal_03.jpg" alt="" />
    				</div>
    										
    				<div class="deal">
    					<img alt="Logo" src="http://www.vander.co.nz/Images/Deal_05.jpg" />
    				</div>				
                                        
    				<div class="deal">
    					<img alt="Business Card" src="http://www.vander.co.nz/Images/Deal_06.jpg" />
    				</div>
    			</div>
    		</div>
    	</div>
    
    	<div id="contentcon">
    		<div id="content">
    			<div class="left">
    				<h1>Style &amp; Simplicity</h1>
    				<p>With professional Graphic Design &amp; Web Design for alot less than most,<br />Vander Design is the way to go.</p>
    				<p>We will start with a few concepts of your design and develop it until a clean finished product is reached. By communicating with you throughout the whole process we ensure you will walk away happy and that's our main aim.</p>
    				<p>For more information on what we can offer you see our <a href="Services.php">services page.</a></p>
    			</div>
    			
    			<div class="right">
    				<h1>Our Details</h1>
    				<p>Phone  -  021 144 3744</p>
    				<p>Email - brad@vander.co.nz</p>
    				<p>Post - 28A Jocelyn St, Casebrook, Christchurch, New Zealand</p>
    				<p><a href="contact.php">Online Contact Form</a></p>
    			</div>
    		</div>
    		<br style="clear:both;" />   
    		<h2>How our design process works...</h2>
    		
    		<div id="steps">
    			<div class="left">
    				<div id="step1" class="step">
    					<img alt="Step 1" src="http://www.vander.co.nz/Images/Step01.jpg" />
    					<p>We will whip up a few concepts based on what<br />you have told us in regards to your target<br /> audience, personal taste. purpose for the<br />design and your ultimate end goal.</p>
    				</div>
    				<div id="step2" class="step">
    					<img alt="Step 2" src="http://www.vander.co.nz/Images/Step02.jpg" />
    					<p>We will then move on and develop one or two design concepts with you, changing colours, size, positioning and any other design elements until the imagery is complete.</p>
    				</div>
    				<div id="step3" class="step">
    					<img alt="Step 3" src="http://www.vander.co.nz/Images/Step03.jpg" />
    					<p>You will then have a finished product and can walk away satisfied. We will also steer you and assist you throughout the printing process. <br /><br />We will provide you with FULL working files on disk along with keeping a copy ourselves so that any repeat work or adjustments can be made quickly and easily.</p>
    				</div>
    			</div>
    			
    			<div class="right">
    				<img alt="Websites" src="http://www.vander.co.nz/Images/webthumb.gif"/>
    				<img alt="Tees" style="margin-top:8px;" src="http://www.vander.co.nz/Images/teethumb.gif"/>
    				<img alt="Van Logo" style="margin-top:16px;" src="http://www.vander.co.nz/Images/vanthumb.gif"/>
    			</div>
    		</div>
    	</div>
    	<div id="footer">
    		<span class="h4">Home</span> &nbsp; &nbsp; &nbsp; &nbsp;<a class="h3" href="about.php">About</a>&nbsp; &nbsp; &nbsp; &nbsp;<a class="h3" href="services.php">Services</a>&nbsp; &nbsp; &nbsp; &nbsp;<a class="h3" href="portfolio.php">Portfolio</a>&nbsp; &nbsp; &nbsp; &nbsp;<a class="h3" href="contact.php">Contact</a>
    	</div>
    </div>
    
    </body>
    </html>
    CSS:
    Code:
    html,body{
    	height: 100%;
    	margin: 0;
    	padding: 0;
    	background:url(http://www.vander.co.nz/Images/BG.jpg);
    }
    
    /* Header */
    #topcontainer {
    	margin:0;
    	padding:0;
    	height:88px;
    	width:100%;
    	background: url(http://www.vander.co.nz/Images/BGTop.jpg) top center repeat;
    }
    
    #logo{	
    	padding:0px;
    	margin:0 auto;
    	background:url(http://www.vander.co.nz/Images/BGlighttop.jpg) top center repeat;
    	border-left:1px solid #999999;
    	border-right:1px solid #999999;
    	width:690px;
    	height:88px;
    }
    
    #logo img {
    	margin-left:2px;
    }
    
    /* Content Container */
    #box {	
    	padding:0px;
    	margin:0 auto;
    	background:url(http://www.vander.co.nz/Images/BGlight.jpg) top center repeat;
    	border-left:1px solid #999999;
    	border-right:1px solid #999999;
    	width:690px;
    }
    
    /* Navigation */
    #navigation {
    	padding-top:36px;
    	width:690px;
    	height:31px;
    	margin:0 auto 10px auto;
    }
    #navigation ul { list-style:none; margin:0; padding:0;}
    #navigation li { display:inline; float:left;}
    
    
    /* Deals */
    #photo {	
    	margin-top:7px;
    	margin-left:11px;
    	width:667px;
    	height:265px;
    	background: url(http://www.vander.co.nz/Images/Image_03.jpg) top center repeat;
    }
    
    #deals {
    	margin:21px 20px 0 0;
    	width:205px;
    	height:201px;
    	float:right;
    }
    
    .deal {	
    	margin-left:10px;
    	margin-bottom:10px;
    	width:205px;
    	height:67px;
    }
    
    /* Typography */
    h1 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    }
    
    h2 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-style: normal;
    	font-weight: normal;
    	color: #418dcd;
    	text-decoration: none;
    	margin:30px 0;
    }
    
    p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-style: normal;
    	font-weight: normal;
    	color:#444444;
    	text-decoration: none;
    }
    
    /* Text Blocks */
    #contentcon
    {	
    	width:667px;
    	margin:10px auto;
    }
    
    .left {
    	float:left;
    	width:380px;
    	border-right:1px solid #999999;
    	padding-right:24px;
    }
    
    .right {
    	float:right;
    	width:250px;
    	
    }
    
    
    /* Steps */
    .step { clear:both; }
    .step img { float:left; }
    .step p { padding-top:25px; }
    #step3 p { padding-top:10px; }
    
    /* Footer */
    #footer {	
    	border-top:1px solid #e6e5e4;
    	border-bottom:1px solid #e6e5e4;
    	background:#ffffff;
    	margin-left:0px;
    	text-align:center;
    	height:40px;
    	line-height:40px;
    	clear:both;
    }

  3. The Following User Says Thank You to Medyman For This Useful Post:

    brad_langdon (04-11-2008)

  4. #13
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Quote Originally Posted by Medyman View Post
    I've only tested in FF so might also be some IE bugs in there, but those can be easily solved
    ...There is a slight bug in both FF and IE...

    The fix, change navigation div's width from 690px to:
    Code:
    #navigation {
    	padding-top:36px;
    	width:708px;
    	height:31px;
    	margin:0 auto 10px auto;
    }
    ...Also, add this in your CSS:
    Code:
    img{border:0;}
    ...Just minors indeed
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. The Following User Says Thank You to rangana For This Useful Post:

    brad_langdon (04-11-2008)

  6. #14
    Join Date
    Nov 2006
    Posts
    20
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    plz send me the compleate page code

  7. The Following User Says Thank You to sreenivasulareddy For This Useful Post:

    brad_langdon (04-11-2008)

  8. #15
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by rangana View Post
    ...There is a slight bug in both FF and IE...
    Wow...I don't know how I missed those. They weren't showing up for some reason when I was testing, but when I try it now, they are.

    Hmm...weird. Maybe I'm just losing my mind, lol.

    Thanks for checking up on me rangana

  9. The Following User Says Thank You to Medyman For This Useful Post:

    brad_langdon (04-11-2008)

  10. #16
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Default

    Wow what can I say. Thanks.

    You have obviously put in a lot of effort for me sorting all of that out appreciate it.

    I cant actually check it until Monday though.

    One question (probably an obvious one) what does the <li> tag do?

  11. #17
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Default

    and also the <ul> tag?

    As you can see I am pretty scratchy on the tag side of things.

  12. #18
    Join Date
    Feb 2008
    Posts
    33
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    The <ul> tag is for Unordered List, and all the content in that tag will be part of that list, the <li> tag is indicating each separate item in the list. Hope this makes sense.

  13. The Following User Says Thank You to crimsonsmeagol For This Useful Post:

    brad_langdon (04-11-2008)

  14. #19
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by crimsonsmeagol View Post
    The <ul> tag is for Unordered List, and all the content in that tag will be part of that list, the <li> tag is indicating each separate item in the list. Hope this makes sense.
    Yeah, exactly.

    It the more common/semantic way of organizing horizontal menus.

    You could do it the way you had it earlier, but it gets messy very quickly. If you look at any of the CSS menus on DD (or any other properly coded site for that matter), you'll most likely see the use of an unordered list.

    More information: http://www.w3schools.com/tags/tag_ul.asp

    You *could* also move your step divs (step1, step2, step3) into an unordered list, removing some more divs with floats. But you don't have to.

  15. The Following User Says Thank You to Medyman For This Useful Post:

    brad_langdon (04-11-2008)

  16. #20
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Default

    Thanks guys.

    Like I said I cant actually do any of this until Monday but you have pretty much explained everything I need to know. I will let you how how I go on Monday.

    Thanks again, theres a lot of things here I will do differently next time I build a site.

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
  •