Besoin d'aide avec doctype

StackOverflow https://stackoverflow.com/questions/1515030

  •  19-09-2019
  •  | 
  •  

Question

Je vais avoir du mal avec la conception d'un site d'essai. Quand j'ouvre ma page html avec IE, sans ma ligne doctype, il rend juste la façon dont je l'aime, mais pas dans FF (à cause de la façon dont il interprète le rembourrage, entre autres). Quand j'ajoute la ligne DOCTYPE, la page est pressé à une hauteur d'environ 230px. Mon intention est de régler la hauteur à la hauteur maximale de la page. Voici mes fichiers:

* index.html * 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /> 
   <!--[if IE]>
  <style type="text/css">
   body {
    text-align: center;
    /* Remove padding: */
    padding: 0;
   }
   #container {
    /* Mind the box model in IE.. */
    height: 100%;
   }
  </style>
  <![endif]-->
</head>  
<body>
<!--[if IE]><div id="container"><![endif]-->
<div class="container">
     <div class="header">  
         <h1>Logo</h1>  
     </div>
     <div class="nav widget-header ">
            <!-- main nav -->
            <a href=""><div class="nav-button state-default " ><img src="a.jpg" alt="a" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="b.jpg" alt="b" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="c.jpg" alt="c" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="d.jpg" alt="d" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="e.jpg" alt="e" /></div></a>
    </div >
    <div class="content">
        <!--content area-->
        <p>content</p>
    </div>
    <div class="footer">
        <!-- footer -->
        <p>&copy; Copyright</p>
     </div>
</div>
<!--[if IE]></div><![endif]-->
</body>
</html>

* stylesheet.css * 

/* reset */
html, body, div, span,   
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
img, ins, kbd, q, s, samp,  
sbutton_cl, strike, strong,   
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
    margin: 0;  
   padding: 0;  
   border: 0;  
   outline: 0;  
   font-size: 100%;
}  
.body{
    line-height: 1;  
    text-align: center;
}

.widget-header {
background:#333333 url(images/bg-state-default.png) repeat-x scroll 50% 50%;;
border:1px solid #333333;
color:#FFFFFF;
font-weight:bold;
}

.state-default {
    background: #CC0000 url(images/button-state-default.png) repeat-x scroll 50% 50%;
    border:1px solid #333333;
    color:#FFFFFF;
    font-weight:bold;
    font-size: 1em;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
}

.container  {

    border: 1px solid #999999;
    margin: 0 auto;
    width: 800px;
    height: 100%;
    background-color:#999999;
}

.header  {
    border: 1px solid #999999;
    height:10%;
    margin-top: 0;
    padding: 10px;
}

.nav{
    border: 1px solid #999999;
    height:10%;
    margin-top: 2%;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

.nav-button {

    float: left;
    height: 100%;
    margin-left: 3px;
    overflow: hidden;
    width: 150px;
}

.content{
    border: 1px solid #999999;
    height:60%;
    margin-top: 4%;
    padding: 10px;
    background-color:#FFFFFF;
}

.footer{
    border: 1px solid #999999;
    height:10%;
    margin-top: 4%;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    background-color: #FFFFFF;
}

Ce que je suis en fin de compte essayer de faire est une conception avec une largeur et une hauteur fixe en fonction de pourcentage, où divs enfants sont également basé sur un pourcentage positionné à leurs parents (je crois que c'est la bonne façon de traiter les différentes résolutions d'écran) .

Je serai très reconnaissant si quelqu'un peut me aider.

Était-ce utile?

La solution 3

Bien que j'apprécie ses efforts, la réponse de Meder a été utile, mais incomplète car je veux avoir une conception basée sur le pourcentage. La réponse de Dave est plus comme des lignes directrices. La meilleure solution à mon problème est quelque chose de semblable à ceci: http://matthewjamestaylor.com/blog/perfect-3-column.htm

Maintenant, mon problème est résolu, je vous remercie pour votre aide.

Autres conseils

<!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" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;}
#wrapper { background:red; }
html,body{height:100%;}
#wrapper{min-height:100%;}
</style>
<!--[if IE 6]><style>
#wrapper { height:100%; }
</style><![endif]-->
</head>
<body>
<div id=wrapper>
  <p>Hello from JS Bin</p>

  <p id="hello"></p>
  </div>
</body>
</html>

On ne sait pas quelle version de l'explorateur que vous utilisez (en dehors de 6), mais min-height est lu comme height par certaines versions ...

Cependant - c'est la façon de construire HTML / CSS professionnel (et plus facile):

  1. valider votre HTML (important, comme non valide HTML peut confondre les navigateurs de façon imprévisible!)

  2. faire fonctionner et en regardant la façon dont vous le souhaitez dans FF;

  3. ajouter des commentaires conditionnels pour IE6 et (le cas échéant) IE7 et 8.

Dans IE 6 se rappeler que le rembourrage etc. est pas ajouté à une boîte, donc diminuera toute la largeur ou de la hauteur. En outre, certains éléments sans certaines propriétés CSS, par exemple aucune largeur ou hauteur spécifique (ou auto), ne 'de hasLayout' dans IE .

Cela peut ne pas avoir résolu le problème directement, mais j'espère que cela aide les choses Immobilisation!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top