Web Analytics Made Easy -
StatCounter height= 100% and <p> problem - CodingForum

Announcement

Collapse
No announcement yet.

height= 100% and <p> problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • height= 100% and <p> problem

    Hi,

    I'm building this website for an organisation and i'v run into two problems:

    1. When I fill my page with text so it stretches vertical, the menu on the left doesn't stretch,... It sticks at 100% of the original page's height.
    without text: http://users.skynet.be/deathzan/ksa/ksaindex2z.html
    with text: http://users.skynet.be/deathzan/ksa/ksaindex2.html

    2. When I put a '<p />' in my text. In IE everything goes as normal but in FF it skips a piece of the background. You can test it if you download my .css and .html but i'll upload an example later. ( Router probs atm. )

    I really hope someone can help me because i'v posted on a smaller forum and nobody seems to know a solution.
    ( I'm sorry for my bad english... i'm dutch. )

    Thx, Deathzan.

  • #2
    You will need to combine the menubottombg2.jpg and contentstretch.jpg to make it one image. As for the paragraphs, don't use <p />, use <p></p> instead. I know its not required that paragraph have a closing tag but its good practice.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      The problem is I cant make them one image because then it wont stretch

      Ps. The 'p'-problem is fixed by adding overflow: auto.
      Last edited by DeathZan; Oct 8, 2006, 07:18 AM.

      Comment


      • #4
        Yeah it will stretch, just need transparent backgrounds in some areas. Most layouts require little or NO absolute positioning. You seemed to be over doing it. Try this, upload the attached image to your grafs folder. You will see that is possible for it to stretch.
        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">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <style type="text/css">
        html,body {
        background:url(/deathzan/ksa/grafs/bgpat.jpg);
        height:100%;
        font-size:12px;
        color:#000;
        font-family:veranda, "Times New Roman", Times, serif;
        margin:0;
        padding:0;
        }
        
        a,a:link,a:visited {
        color:#2A6E9D;
        text-decoration:underline;
        }
        
        a:hover,a:active {
        text-decoration:none;
        }
        
        #container {
        min-height:100%;
        position:relative;
        width:755px;
        background:url(/deathzan/ksa/grafs/contbg.gif) repeat-y;
        }
        
        * html #container {
        height:100%;
        }
        
        #menucontain {
        width:172px;
        float:left;
        margin-left:40px;
        margin-right:50px;
        display:inline;
        padding:2px;
        }
        
        #menustretchtrick {
        background:url(/deathzan/ksa/grafs/menubottombg2.jpg);
        height:431px;
        width:176px;
        position:absolute;
        bottom:0;
        left:40px;
        }
        
        #inhoudbox {
        width:489px;
        float:left;
        }
        
        #topmenu {
        height:23px;
        list-style:none;
        line-height:23px;
        background:url(/deathzan/ksa/grafs/topmenubg.jpg);
        text-align:center;
        margin:0;
        padding:0;
        }
        
        #topmenu li {
        display:inline;
        }
        
        #topmenu li a:link,#topmenu li a:visited {
        text-decoration:none;
        color:#000;
        font-weight:700;
        }
        
        #topmenu li a:hover {
        text-decoration:underline;
        }
        
        #topmenu li a:active {
        text-decoration:none;
        color:#000;
        }
        
        #banner {
        height:171px;
        background:url(/deathzan/ksa/grafs/bannerstuk.jpg);
        }
        
        #content {
        padding-bottom:68px;
        }
        
        #content p {
        text-align:justify;
        margin:0;
        padding:10px 0;
        }
        
        #text {
        margin:0 50px;
        }
        
        #footer {
        position:absolute;
        left:266px;
        bottom:0;
        width:489px;
        background:url(/deathzan/ksa/grafs/footer.jpg);
        font-size:10px;
        padding-top:55px;
        padding-bottom:5px;
        text-align:center;
        }
        
        .clear {
        clear:both;
        font-size:0;
        line-height:0;
        }
        </style>
        </head>
        <body>
        <div id="container">
        	<div id="menucontain">&nbsp;
        		<div id="menustretchtrick"></div>
        	</div>
        	<div id="inhoudbox">
        		<ul id="topmenu">
        			<li><a href="#">Leeuwkes</a></li>
        			<li><a href="#">Kaproenen</a></li>
        			<li><a href="#">Jongknapen</a></li>
        			<li><a href="#">Knapen</a></li>
        			<li><a href="#">Jonghernieuwers</a></li>
        			<li><a href="#">Aspiranten</a></li>
        			<li><a href="#">Leiding</a></li>
        		</ul>
        		<div id="banner"></div>
        		<div id="content">
        			<div id="text">
        				<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut bibendum, elit sit amet molestie ullamcorper, tortor augue elementum arcu, eu aliquam ipsum turpis sed tellus. Nunc volutpat leo ac orci. Nullam purus. Proin ac justo. Nulla et ligula. Proin euismod magna nec enim. Vestibulum venenatis lorem ut ligula. Nunc a est. Fusce pellentesque nonummy diam. Mauris nonummy, sapien id porta iaculis, nunc tortor ullamcorper sapien, sit amet mattis nisl leo nec neque. Sed enim arcu, tempor quis, vehicula vitae, semper et, odio. Sed imperdiet, lectus a elementum cursus, ligula urna vulputate arcu, a malesuada metus eros sit amet tortor. Ut quis tortor. Proin urna. Phasellus aliquam quam eget risus. Aenean ultrices enim adipiscing quam. Proin interdum consectetuer enim. Donec varius. </p>
        				<p> Curabitur rhoncus turpis a lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et metus sit amet dolor ultricies iaculis. Cras fermentum. Duis porta libero a ante. Fusce in leo nec ligula iaculis hendrerit. Fusce iaculis. Mauris adipiscing. Mauris lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus mauris. Cras id ligula ac lacus sollicitudin lacinia. In tellus. Morbi accumsan accumsan ligula. Fusce massa mi, faucibus quis, tincidunt a, tincidunt vel, est. Etiam luctus. In aliquam gravida mauris. </p>
        				<p> Proin mollis sem quis ipsum. Sed in elit sed metus ullamcorper consequat. Fusce non metus. Integer a odio. Vestibulum adipiscing arcu ac magna. Nullam sit amet nisi non urna semper euismod. Pellentesque ac leo. In elementum auctor tortor. Etiam sagittis auctor quam. Maecenas sollicitudin placerat mi. Morbi convallis. </p>
        				<p> Suspendisse tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent pretium lorem eget massa. Vestibulum gravida augue viverra ipsum. Suspendisse potenti. Morbi interdum enim et elit. Integer lacinia, purus eget semper consequat, metus arcu porttitor nisi, sed convallis elit diam at nisl. Ut tincidunt cursus elit. Duis eget ligula. Proin sodales. Duis feugiat. Praesent convallis, arcu quis congue pellentesque, purus felis tristique risus, sed iaculis odio risus mattis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sem nisi, tincidunt at, pharetra a, porttitor sit amet, magna. Integer consequat, ipsum vel sagittis facilisis, erat diam porttitor est, et sagittis magna metus a tortor. Etiam egestas sapien in ipsum. Phasellus dictum aliquet magna. </p>
        				<p> In faucibus, nisi et condimentum eleifend, risus arcu vehicula tellus, at viverra nibh neque eu eros. Nam quis dolor. Aenean in justo sed lectus interdum commodo. Maecenas fermentum volutpat neque. Nulla mollis imperdiet justo. Suspendisse mi. Aliquam dui quam, semper id, tempus id, porta vel, diam. Cras libero. In lectus tortor, ultricies ac, volutpat vitae, laoreet a, nisl. Ut tincidunt eros. Nulla turpis justo, aliquam at, posuere ut, mollis sit amet, tortor. Aenean imperdiet nibh non nibh. Nulla tortor neque, pulvinar id, pharetra vel, consectetuer vitae, magna. </p>
        				<p> Suspendisse urna. Donec faucibus, diam quis suscipit congue, purus erat accumsan purus, at dictum enim turpis eget eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer id risus sed ipsum vehicula ultrices. Cras lobortis tellus lobortis dolor. Vivamus bibendum imperdiet lectus. Suspendisse lectus justo, tempor quis, luctus ac, mollis quis, mi. Vestibulum nec metus. Donec ac ante. In varius nisl id dui. Fusce elit felis, lobortis quis, accumsan sit amet, pulvinar et, tellus. Nunc et pede. Ut ante lacus, scelerisque eu, blandit eget, tempor quis, nulla. </p>
        			</div>
        		</div>
        	</div>
        	<div class="clear">&nbsp;</div>
        	<div id="footer"> This site is best viewed with <a href="http://www.mozilla.org/products/firefox/">Firefox</a> on a resolution of 1024 by 768  |  DeathZan &copy; 2006 </div>
        </div>
        </body>
        </html>
        Attached Files
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment


        • #5
          Wow,

          This is the result i'd imagined...
          Actualy i'm ashamed, you just took it and redid the whole thing like it should be done and I couldn't...

          Thx from a very happy belgian



          Ps. what does this do:
          * html #container {
          height:100%;
          }

          ? It's just i'd like to understand the code on my own site

          Comment


          • #6
            Thats to feed a css property to IE6 only. IE6 doesn't support min-height but it treats regular height as min-height. The * html hack is useful but some people prefer conditional comments.
            The * html hack will not work in IE7 only when there is a full valid doctype however without the doctype it will still work. It does support min-height though.
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment


            • #7
              Thx alot.

              Comment

              Working...
              X