min-height doet het niet...

**Lenny'tje** · 3 december 2011, 20:21

Hallo, ben ik weer,

Ik heb een probleempje met min-height en het begint me een beetje te frustreren :P

Mijn pagina opbouw (html5)

Ik heb voor de content een section die 904px breed is en een min-height van 500px heeft.
Daarin zit een left en een right section die een auto waarden hebben voor de height.
Daarin zitten kaders die ook een auto waarde hebben voor de hoogte (als er meer tekst in een artikkel komt te staan kan het kader dus vergroten in de hoogte, maar dan moet de rest ook mee vergroten in hoogte, dat is mijn idee en vandaar dus de min height voor de content kader en alles erin auto van hoogte)

nu als de hoogte van zo een kader vergroot dan komt die gewoon buiten het kader van de kontent die een min height heeft (dus normaal/logisch zou die moeten mee vergroten maar dat kreng doet dat dus niet, blijft lekker zen eigen ding doen)

En daaron, onderaan de content staat ook een footer, en dat kader neemt de vorm aan van het vergrote kader en het kleinere kader aan de rechterkant... dus de tekst gaat helemaal naar rechts zitten, korton die kader vervormt gewoon...)

Ik heb er een HTML5 hach stylesheet opgezet, via google code die zet ik hier helemaal onderaan.
Nou ja, alles reageerd op een rare manier... Helemaal onlogisch, vervormd, eigenwillig...
Hoe los ik dit op?

Hier de ( code ).

HTML(5)->

HTML-code:

<!DOCTYPE HTML><html lang="nl-NL">  <head>    <link rel="Stylesheet" type="text/css" href="css/reset.css">    <link rel="Stylesheet" type="text/css" href="css/stylesheet.css">    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <title>Planet-Earth</title>    <!--[if lt IE9]>      <script src="Javascript/reset.js"></script>      <link rel="Stylesheet" type="text/css" href="css/iehack.css">    <![endif]-->  </head>  <body>    <header id="main_header">      <section id="place_header">        <section id="logo_section">          <article id="logo">            <img title="Planet-Earth Logo" src="images/planetearth.png">          </article>        </section>        <section id="slogan_section">          <article id="slogan">            <p>              Planet-Earth.nl            </p>          </article>        </section>      </section>    </header>    <section id="main_section">      <section id="left_section">        <section id="company_section">          <header class="head_header">            <p>Over het bedrijf</p>          </header>          <article id="company">          </article>        </section>        <section id="links_section">          <header class="head_header">            <p>Onze services</p>          </header>          <article id="links">            <ul>              <li>                <img src="images/Planet-Earth-Webcreations.png" title="Planet-Earth Webcreations">                <a href="http://planet-earth.nl/webcreations/" title="Planet-Earth Webcreations" target="_blank">                  Planet-Earth Webcreations                </a>              </li>              <li>                <img src="images/Planet-Earth-E-commerce.png" title="Planet-Earth E-commerce">                <a href="http://planet-earth.nl/shop/" title="Planet-Earth E-commerce" target="_blank">                  Planet-Earth E-commerce                </a>              </li>              <li>                <img src="images/Planet-Earth-Photographic.png" title="Planet-Earth Photographic">                <a href="http://planet-earth.nl/photographic/" title="Planet-Earth Photographic" target="_blank">                  Planet-Earth Photographic                </a>              </li>            </ul>          </article>        </section>      </section>      <section id="right_section">        <section id="news_section">          <header class="head_header">            <p>Nieuws</p>          </header>          <article id="news">            <p>Hier komt nieuws</p>          </article>        </section>        <section id="vacature_section">          <header class="head_header">            <p>Vacatures</p>          </header>          <article id="vacature">            <p>Hier komen vacatures</p>          </article>        </section>        <section id="contact_section">          <header class="head_header">            <p>Contact</p>          </header>          <article id="contact">            <p>Hier komen de contact gegevens</p>          </article>        </section>      </section>    </section>    <footer id="main_footer">      <article id="footer_article">        <p>Designed & Created by         <a href="http://www.planet-earth/webcreations/" title="Planet-Earth Webcreations">          Planet-Earth Webcreations        </a> |         Planet-Earth &copy; All Rights Reserved 2011 - 2012</p>      </article>    </footer>  </body></html>

en dit is css(3) ->

Code:

/*CSS Document*/ @Charset "UTF-8";


body{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background-color:#0F0F0F;
	font-family:Verdana,Arial;
	text-shadow:1px 1px 3px #0F0F0F;
}
.head_header{
	width:auto;
	height:23px;
	padding-top:3px;
	padding-left:5px;
	background-color:#0F0F0F;
	border-bottom:1px solid #000000;
}
.head_header p{
	color:#7A9A1A;
	font-size:18px;
	font-weight:bold;
}
header#main_header{
	width:902px;
	height:130px;
	background-color:#2A2A2A;
	margin:0px auto 0px auto;
	border-left:1px solid #1A1A1A;
	border-right:1px solid #1A1A1A;
}
section#place_header{
	margin:0px auto 0px auto;
	width:902px;
	height:130px;
}
section#slogan_section{
	float:left;
	width:450px;
	height:130px;
}
article#slogan{
	width:450px;
	height:95px;
	padding-top:35px;
}
article#slogan p{
	font-size:50px;
	font-weight:bold;
	color:#7A9A1A;
}
section#logo_section{
	float:left;
	width:150px;
	height:130px;
}
article#logo{
	width:140px;
	height:130px;
	padding-left:10px;
	text-align:left;
}
article#logo img{
	width:130px;
	height:130px;
	text-decoration:none;
}


/*
<--CONTENT-->
*/
section#main_section{
	width:904px;
	min-height:500px;
	margin:0px auto 0px auto;
	background-color:#2A2A2A;
	border:1px solid #1A1A1A;
}
/*
<--LEFT SECTION-->
*/
section#left_section{
	float:left;
	width:600px;
	height:auto;
	background-color:green;
}
section#company_section{
	width:599px;
	height:auto;
	border:1px solid #0F0F0F;
}
article#company{
	width:590px;
	height:auto;
	padding:5px 5px 5px 5px;
}
article#company p{
	color:#BFBFBF;
	font-size:13px;
}
article#company h4{
	color:#7A9A1A;
	font-size:16px;
}
section#links_section{
	width:599px;
	height:auto;
	border:1px solid #0F0F0F;
	position:static;
}
article#links{
	width:590px;
	height:auto;
	padding:5px 5px 5px 5px;
	color:#BFBFBF;
}
article#links ul{
	list-style:none;
}
article#links li{
	padding:10px 0px 10px 0px;
	font-size:27px;
	font-weight:bold;
}
article#links li img{
	width:50px;
	height:50px;
	vertical-align:middle;
}
article#links li a:link{
	text-decoration:none;
	color:#7A9A1A;
}
article#links li a:visited{
	text-decoration:none;
	color:#7A9A1A;
}
article#links li a:hover{
	text-decoration:underline;
	color:#7A8A1A;
}
article#links li a:active{
	text-decoration:none;
	color:#8A9A1A;
}
/*
<--RIGHT SECTION-->
*/
section#right_section{
	float:right;
	width:300px;
	height:auto;
	background-color:red;
}
section#news_section{
	width:298px;
	height:auto;
	border:1px solid #0F0F0F;
}
article#news{
	width:293px;
	height:auto;
	padding:5px;
	color:#BFBFBF;
}
article#news p{
	font-size:14px;
}
section#vacature_section{
	width:298px;
	height:auto;
	border:1px solid #0F0F0F;
}
article#vacature{
	width:293;
	height:auto;
	padding:5px;
	color:#BFBFBF;
}
article#vacature p{
	font-size:14px;
}
section#contact_section{
	width:298px;
	height:auto;
	border:1px solid #0F0F0F;
}
article#contact{
	width:293;
	height:auto;
	padding:5px;
	color:#BFBFBF;
}
article#contact p{
	font-size:14px;
}


/*--Footer--*/
footer#main_footer{
	width:902px;
	height:30px;
	margin:0px auto 0px auto;
}
article#footer_article{
	width:902px;
	height:24px;
	padding:6px 0px 0px 0px;
	text-align:center;
}
article#footer_article p{
	color:#BFBFBF;
	font-size:14px;
}
article#footer_article a:link,article#footer_article a:visited{
	text-decoration:underline;
	color:#BFBFBF;
}
article#footer_article a:hover{
	text-decoration:none;
	color:#4A4A4A;
}
article#footer_article a:active{
	text-decoration:none;
	color:#6A6A6A;
}

En dan onze beroemde HTML5 hack van uit google code :P (die trouwens reset heet) ->

Code:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}


body {
    line-height:1;
}


article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}


nav ul {
    list-style:none;
}


blockquote, q {
    quotes:none;
}


blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}


a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}


/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}


/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}


del {
    text-decoration: line-through;
}


abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}


table {
    border-collapse:collapse;
    border-spacing:0;
}


/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}


input, select {
    vertical-align:middle;
}

Toch bedankt om het iig na te kijken...
Ik heb al alles geprobeerd, mss dan toch weer terug naar de html4

**Butterflyice** · 4 december 2011, 08:30

Als je aan je footer dit toevoegd dan zal het correct werken

Code:

/*--Footer--*/
footer#main_footer{
 width:902px;
 height:30px;
 margin:0px auto 0px auto;
 clear:both; /* deze regel komt erbij */
 }

Je was vergeten de float uit te zetten dit kan je doen met clear.
En daarom werkte het niet.

Dit staat trouwens ook op http://www.w3schools.com/cssref/pr_class_clear.asp

**Lenny'tje** · 5 december 2011, 01:10

Hoy Butterflyice ,

Ik heb dit toegepast maar het werkt nog steeds niet...

Ik heb een linker en een rechter kolom in de content,

De linker en de rechter kolom staan op auto en de content heeft een min-height van 500px als nu de linker of de rechter kolom groter word en de 500px van de content overschrijd dan moet die content zich daarop aanpassen omdat die een min-height heeft maar dat doet deze niet...

Hoe los ik dit het best op?

**Butterflyice** · 5 december 2011, 20:02

Voeg in dit toe aan je css

Code:

section#clear {
    clear:both;
}

En voeg dit toe aan de onder in de mainsection

Code:

    <section id="clear">
    </section>

dan komt het er zo uit te zien

Code:

<!DOCTYPE HTML>
<html lang="nl-NL"> 
<head>  
<link rel="Stylesheet" type="text/css" href="reset.css"> 
<link rel="Stylesheet" type="text/css" href="style.css"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Planet-Earth</title> 
<!--[if lt IE9]>   
<script src="Javascript/reset.js"></script> 
<link rel="Stylesheet" type="text/css" href="css/iehack.css"> 
<![endif]--> 
</head>
<body>  
<header id="main_header">   
    <section id="place_header">   
        <section id="logo_section">   
            <article id="logo">        
            <img title="Planet-Earth Logo" src="images/planetearth.png">     
            </article>      
        </section>      
        <section id="slogan_section">  
            <article id="slogan">        
                <p>Planet-Earth.n</p>     
            </article>    
        </section>   
    </section>  
</header>   
<section id="main_section"> 
    <section id="left_section">    
        <section id="company_section">   
            <header class="head_header">     
                <p>Over het bedrijf</p>        
            </header>       
            <article id="company">  
            </article>       
        </section>       
    <section id="links_section">    
        <header class="head_header">    
            <p>Onze services</p>        
        </header>       
        <article id="links">
            <ul>         
                <li>           
                    <img src="images/Planet-Earth-Webcreations.png" title="Planet-Earth Webcreations">        
                    <a href="http://planet-earth.nl/webcreations/" title="Planet-Earth Webcreations" target="_blank">  
                    Planet-Earth Webcreations       
                    </a>          
                </li>           
                <li>          
                    <img src="images/Planet-Earth-E-commerce.png" title="Planet-Earth E-commerce">          
                    <a href="http://planet-earth.nl/shop/" title="Planet-Earth E-commerce" target="_blank"> 
                    Planet-Earth E-commerce           
                    </a>           
                </li>         
                <li>          
                    <img src="images/Planet-Earth-Photographic.png" title="Planet-Earth Photographic">    
                    <a href="http://planet-earth.nl/photographic/" title="Planet-Earth Photographic" target="_blank">      
                    Planet-Earth Photographic       
                    </a>     
                </li>         
            </ul>     
            <ul>         
                <li>           
                    <img src="images/Planet-Earth-Webcreations.png" title="Planet-Earth Webcreations">        
                    <a href="http://planet-earth.nl/webcreations/" title="Planet-Earth Webcreations" target="_blank">  
                    Planet-Earth Webcreations       
                    </a>          
                </li>           
                <li>          
                    <img src="images/Planet-Earth-E-commerce.png" title="Planet-Earth E-commerce">          
                    <a href="http://planet-earth.nl/shop/" title="Planet-Earth E-commerce" target="_blank"> 
                    Planet-Earth E-commerce           
                    </a>           
                </li>         
                <li>          
                    <img src="images/Planet-Earth-Photographic.png" title="Planet-Earth Photographic">    
                    <a href="http://planet-earth.nl/photographic/" title="Planet-Earth Photographic" target="_blank">      
                    Planet-Earth Photographic       
                    </a>     
                </li>         
            </ul>         
            <ul>         
                <li>           
                    <img src="images/Planet-Earth-Webcreations.png" title="Planet-Earth Webcreations">        
                    <a href="http://planet-earth.nl/webcreations/" title="Planet-Earth Webcreations" target="_blank">  
                    Planet-Earth Webcreations       
                    </a>          
                </li>           
                <li>          
                    <img src="images/Planet-Earth-E-commerce.png" title="Planet-Earth E-commerce">          
                    <a href="http://planet-earth.nl/shop/" title="Planet-Earth E-commerce" target="_blank"> 
                    Planet-Earth E-commerce           
                    </a>           
                </li>         
                <li>          
                    <img src="images/Planet-Earth-Photographic.png" title="Planet-Earth Photographic">    
                    <a href="http://planet-earth.nl/photographic/" title="Planet-Earth Photographic" target="_blank">      
                    Planet-Earth Photographic       
                    </a>     
                </li>         
            </ul>         
        </article>   
    </section>     
</section>    
<section id="right_section">     
    <section id="news_section">   
        <header class="head_header">    
         <p>Nieuws</p>       
        </header>        
        <article id="news">
            <p>Hier komt nieuws</p>  
        </article>    
    </section>      
    <section id="vacature_section"> 
        <header class="head_header">    
            <p>Vacatures</p>   
        </header>        
        <article id="vacature">  
            <p>Hier komen vacatures</p>  
        </article>     
    </section>    
    <section id="contact_section"> 
        <header class="head_header">      
        <p>Contact</p>       
        </header>        
        <article id="contact">  
        <p>Hier komen de contact gegevens</p> 
         <p>Hier komen de contact gegevens</p> 
        </article>      
    </section>   
    </section> 
<!-- dit is erbij gekomen -->
    <section id="clear">
    </section>
<!-- tot hier -->

</section>  
<footer id="main_footer"> 
    <article id="footer_article">  
        <p>Designed & Created by     
        <a href="http://www.planet-earth/webcreations/" title="Planet-Earth Webcreations">    
        Planet-Earth Webcreations     
        </a> |         Planet-Earth &copy; All Rights Reserved 2011 - 2012</p>    
    </article> 
</footer> 
</body>
</html>

Dan zal het wel correct werken.

**Lenny'tje** · 5 december 2011, 21:38

Thx het werkt nu :d

Pagina komt binnenkort online :P
Of moet ik voor de zekerheid bij IE bij 'min-height' -> '-height' zetten?
Ik heb er IE 8 op staan dus weet niet hoe die reageerd op oudere browsers... of is er ergens een tooltje waar je je pagina in kan laden om te zien hoe die reageerd in andere versies van IE FF enz?

Toch bedankt iig, al weer ^^

**compuchrisje** · 5 december 2011, 22:41

Ik weet niet of Ice een beter adres kent, maar dit kan je alvast es bekijken.

**Butterflyice** · 5 december 2011, 23:27

Ik heb getest in ff ie 9 en opera en chrome

**Lenny'tje** · 6 december 2011, 00:27

ok thx, dan is hier binnenkort de website te zien.

Discussie: min-height doet het niet...

Discussietools

Discussie doorzoeken

Weergave

min-height doet het niet...

De volgende gebruiker bedankt Butterflyice voor deze nuttige post:

De volgende gebruiker bedankt Butterflyice voor deze nuttige post:

De volgende gebruiker bedankt Lenny'tje voor deze nuttige post:

De volgende gebruiker bedankt compuchrisje voor deze nuttige post:

De volgende gebruiker bedankt Butterflyice voor deze nuttige post:

Discussie informatie

Users Browsing this Thread

Soortgelijke discussies

site getransferd naar 1-eurohost maar doet het niet!

CD-lezer doet het niet meer

Ie doet het niet meer

Nintendo DS wifi usb stick doet het niet...

printer aangesloten via scanner doet het niet goed

Favorieten/bladwijzers

Favorieten/bladwijzers

Regels voor berichten