5568 sujets

Sémantique web et HTML

Dimension de ma page avec Safari et Opera

Bonjour,

Etant débutant plus plus, le site créé est comme je le souhaite en ie et Google mais sur Safari et opera la page est plus grosse alors que je souhaiterais garder la même dimension que sur les 2 autres navigateurs.

Pourriez vous m'aider ?

Ci-après les codes Html et CSS. Ces codes ont été vérifiés et validés.voici le lien https://jsfiddle.net/spoutnik67/b3k4hm9z/

En vous remerciant d'avance,




<!DOCTYPE html >
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>zzzz.com</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
 
<body>
    <div id="page">
        <div id="header">
        <div id="logo">
<img src="images/LOGOEQ3.png" width="569" height="210"  alt="logo zzzz"/>
</div>
            
        </div>
        <div id="menu">
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">dfhgdhfgjsdfsdj</a></li>
                <li><a href="#" >dsdgdjgqsjd</a></li>
                <li><a href="#">dfgsjhdgsgfjsdhjdf</a></li>
                <li><a href="#">fsfsfsfsf</a></li>
                <li><a href="#">fgsdfjhgjfsd</a></li>
            </ul>
        </div>
        <div id="main">  
            <div id="sidebar">
                <div id="login">
                 
                    <h2></h2>
                    <div id="cadrel">
                        <form method="post" action="#">
                            <p class="txtleft"><label for="user">Identifiant :</label></p>
                            <input type="text" name="user" id="user" class="text" /><br />
                            <p class="txtleft"><label for="password">Mot de passe :</label></p>
                            <input type="password" name="password" id="password" class="password" /><br />
                            <p class="rem">
                            <input type="checkbox" checked="checked" name="remember" id="remember" />      <label for="remember">Mémoriser</label></p>
                            <input type="submit" name="submit" id="submit" class="submit" value="Entrer" />
                             
                        </form>
                    </div>
                     
                </div><!-- login -->
                <div class="box">
                     
                    <div class="box2">
                        <ul>
                            <li><a href="#">uuugigiugiugiugiugui</a></li>
                            <li><a href="#">hjhgjgjgjhgjgjhgjhgjg</a></li>
                            <li><a href="#">jghghjghjgjhgjh</a></li>
                            <li><a href="#">gjjhghjgjhghgjgjh</a></li>
                            <li><a href="#">hhhhkhkjhkjhhk</a></li>
                            <li><a href="#">jkkjhjhkjhkjhkhhkj</a></li>
                            <li><a href="#">jljljljjjjlkjljljlk</a></li>
                            <li><a href="#">uyuyiuyuiyiyiyiu</a></li>
                        </ul>
                    </div>
                </div><!-- box -->             
                 
            </div><!-- sidebar -->                   
            <div id="content">
                <div id="contheader">
                    <h2></h2>
                </div>       
                <div id="content2">  
                    <div class="post">
                        <h2><a href="#"></a></h2>
                         
                        <div class="entry">
                            <p>hery tzyurtr et ruei rtutru etru itruetusfgdfj hgfgksjfg gfgfsjfgsjkfgsjgfjs.</p>
                            <p> fdfdgfgfjsgdfjsdfgkqfdgqkfgsdjfgqjsfdgsqjfgkqsfgskfjgsjfg.</p>
                            <p> ertyertuyetyiertyyetizyoytuyeityietieytieytiyiytiueytieytiyetiyeitete</p>
    <p>ezre zty rtieyt iotoye tyetoyeo tiyze iterthjgej tergt iegtke tgjhebt etejrt hgkjtgetg</p>
    <p>dfsf jgsdf hgjshf gsdfgjs dfgfdj sgfjqgfgqfkgfkj qgfjsqg
                     
                         
      </div>
                    </div><!-- post -->
                   <div class="divider"><img src="images/divider1.png" width="291" height="7"  alt=""/>
                   </div>
                    
                    
                  <div class="post">
                         
 
                        <div class="entry">
                            <p>Afhg gdfksf gqldfgq gfsgfjgfqfk gqflqgf qlgfqfdgs fkjqgfkjgfksgfks qjhgfkjhgfjfgkjgfsffkjqgfkjq.</p>
                            
                             
                             
                             
                        </div>
                    </div><!-- post -->
                    <div class="post">
                         
                        <div class="entry">
                             
                        </div>
                    </div><!-- post -->
                </div><!-- content2 -->                                          
            </div><!-- content -->                   
            <div class="clearing">&nbsp;</div>
            <div id="footer">
                <p>Copyright &copy; 2015, Créé par <a href="#">zzzzz.com.</a></p>
                 <p> <a href="#">Mention légale</a></p>          
            </div>
        </div><!-- main -->
    </div><!-- page -->
</body>
</html>




@charset "utf-8";
* {
    margin: 0;
    padding: 0;
 
}
 
body {
    padding:0;
    margin:0;
     
    padding-bottom: 30px;
    font: 21px Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color: #B9B3AD;
    background: #454444 url(images/pattern.jpg) repeat ;
     
}
 
h1 {
    padding: 120px 0 0 30px;
    font: normal 54px Georgia, Times, serif;
    color: #FFFFFF;
}
 
h1 a, h1 a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
 
h2 {
    font-weight: normal;
    text-shadow: -1px 1px 1px #36322F;
     
}
 
p {
    padding: .8em 0;
    line-height: 1.8em;
    text-align: justify;
}
 
 
 
a {
    color: #f4e5e4;
    text-decoration: none;
}
 
a:hover {
    color: #EF5548;
}
 
/* page */
 
#page {
    width: 960px;
    margin: 0 auto;
     
}
 
/* header */
 
#header {
    height: 350px;
    background:   url(images/paris-teifeL3.jpg) no-repeat right top;
    padding-bottom:40px;
 
}
 
/* menu */
 
#menu {
    margin-left:0px;
    height: 210px;
    margin-bottom: -47px;
    margin-top:0px;
    text-align: center;
    background: #454444 url(images/pattern.jpg) repeat ;
}
 
#menu ul {
    list-style: none;
}
 
#menu ul li {
    display: inline;
    font-size: 22px;
    line-height: 60px;
}
 
#menu ul li a {
    padding: 0 10px;
    text-shadow: 6px -4px 4px #c4140a;
    color: #EEEEEE;
}
 
#menu ul li a:hover {
    color: #20ef47;
}
 
/* main */
 
#main {
     
    width: 960px; 
}
 
/* sidebar */
 
#sidebar {
    float: left;
     
    width: 290px;
    font-size: 19px;
     
}
 
 
 #sidebar .box {
    margin-top:70px;
    margin-bottom: 15px;
    padding-bottom: 10px;
     
}
#sidebar .box2 {
    height: 1%;
    background: #3a3b3d  no-repeat top left;
    padding: 30px 30px 40px;
    border-right-style: ridge;
    border-right-color:#606162;
    border-width:30px 2px 6px 8px;
    border-left-style:ridge;
    border-left-color:#606162;
    border-top:#606162;
    border-top-style: groove ;
    border-bottom-style:ridge;
    border-bottom-color:#8b8d8e;
    border-radius:10px 10px;
         
}
.box2  {
     
margin-top: -46px; 
width: 225px;
 
     
}
#cadrel, #cadresecteur {
    margin-top: -58px; 
    width: 230px;
     
    background: #3a3b3d  no-repeat top left;
    padding: 30px 30px 10px 30px;
    border-right-style: ridge;
    border-right-color:#606162;
    border-width:30px 2px 6px 8px;
    border-left-style:ridge;
    border-left-color:#606162;
    border-bottom-style:ridge;
    border-bottom-color:#8b8d8e;
    border-radius:10px 10px ;
    border-top:#606162;
    border-top-style: groove ;
}
 
#sidebar ul li {
    padding: .25em 0 .25em 25px;
    line-height: 1.8em;
    background: url('images/arrow.gif') no-repeat 0 .75em;
}
 
/* login */
 
#login h2 {
    font-size: 18px;
    line-height: 52px;
    height: 58px;
    background:  url('images/loginh2grisbi.jpg') no-repeat top;
}
 
#login form {
    text-align: center;
}
 
#login form p {
    padding: 5px 0;
    text-align: center;
}
 
#login form p.txtleft {
    padding: 15px 0 5px 35px;
    text-align: left;
}
 
#login form p.rem {
    padding-top: 15px;
}
 
 
/* content */
 
#content {
    float: right;
    width: 625px;
    margin-top: 0px;
    padding-right:7px;
    margin-left: 30px;
     
    padding-bottom: 8px;
    margin-bottom: 0px;
     
}
 
#content2{
    height: 1%;
    margin:0px 0px 0px 10 px;
    padding: 8px 30px 10px 30px;
    padding-bottom:0px;
    background: #444646 url('images/contentgris.jpg') no-repeat top;
    border-right-style: ridge;
    border-right-color:#606162;
    border-left-style:ridge;
    border-left-color:#606162;
    border-width:30px 2px 6px 8px;
    border-top:#606162;
    border-top-style: groove ;
    border-bottom-style:ridge;
    border-bottom-color:#8b8d8e;
    border-radius:10px 10px ;
     
}
 
 
 
 
#content h2 a {
    color: #B9B3AD;
     
}
 
 
.clearing {
    clear: both;
    height: 1px;
    overflow: hidden;
}
 
/* footer */
 
#footer {
    padding: 80px 30px 80px 30px;
}
 
#footer p {
    font-size: 25px;
    text-align: center;
     
    color: #7C7C7C;
}

Modifié par spoutnik67 (08 May 2015 - 14:27)
salut,
une page en ligne sera bien plus utile qu'un code parachuté sur un forum. Tu peux utiliser des sites comme jsfiddle ou d'autres dans le genre.
Il faut à tout prix que tu réduise ton code en passant par les propriété abrégées 

padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;

équivaut à

padding: 30px 30px 40px;

et c'est pareil pour border-radius boder et margin.

Si non pour ton problème, question bête as-tu vérifié le zoom des navigateurs en question ?
J'ai mis les codes sur le site que tu m'as indiqué et voici le lien https://jsfiddle.net/spoutnik67/b3k4hm9z/
C'est bon comme cela ? J'ai abrégé le code mais mon problème toujours pas résolu ... C'est bizarre j'ai regardé les différents posts et je ne trouve pas la même problématique ... pourtant mon code me semble plutôt classique ...

En te remerciant d'avance ..
Modifié par spoutnik67 (08 May 2015 - 14:56)
J'ai exactement le même rendu sur tous les navigateurs. Donc le problème vient sûrement de chez toi.
Si tu as un autre pc, essaye de voir ce que ça donne.
Oui je viens d'essayer sur un autre ordi et effectivement la taille de la page est la même taille que Safari qu'avec google et IE . Encore qu'il s’agisse de vieilles versions ...

Ce qui voudrait dire que c'est le contraire et qu'il faudrait que je réduise la taille ...En effet, elle est à mon gout trop importante 25% de trop
J'avais mis 960 px en largeur n'est elle pas la taille traditionnelle ? que dois je faire pour réduire et avoir un site d'une dimension normale, que l'on trouve classiquement ?

En te remerciant,
Modifié par spoutnik67 (08 May 2015 - 15:31)
Sujet clos
Aller à