Question background/contenu et question compatibilité CSS3

Question

Neron

14 Jan 2011 à 16:16

Bonjour à tous,
je suis en train de créer un nouveau théme, mon background est une trés grande image et le contenu est centré.
Sur un grand écran avec une haute résolution (1600) mon contenu et mon background colle parfaitement.
J'ai testé mon théme sur un écran 17" avec un résolution de 1024, et lorsque qu'on ouvre la page, au lieu d'afficher le centre avec le contenu cela affiche la partie de gauche, on doit aller vers la droite pour voir le contenu.
Je cherche depuis hier, ça doit pas étre grand chose à modifier mais je séche.... Smiley sweatdrop

Une autre petite question, mon menu ainsi que les liens du footer sont en css3, sur Opéra, Firefox et Chrome c'est nikel.
Sur IE, ça se gatte, pour résoudre mes problémes d'affichage j'ai testé la méthode "border-radius.htc" que l'on peut trouver ici: http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html mais sans succés. Cela ne fonctionne pas parce qu'il y'a du javascript? (jquery)

D'avance je vous remercie. Smiley cligne

Vous pouvez voir mon théme ici: http://teamtlp.net/template/index.html

Voilà mon index.html:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/style_menu.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery2.js"></script>
</head>

<body>
        <div id="content">
            <div class="navigation" id="nav">
                <div class="item home">
                    <img src="images/bg_home.png" alt="" width="199" height="199"  class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Home</h2>
                    <ul>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="item shop">
                    <img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Shop</h2>
                    <ul>
                        <li><a href="#">Catalogue</a></li>
                        <li><a href="#">Orders</a></li>
                        <li><a href="#">Offers</a></li>
                    </ul>
                </div>
                <div class="item camera">
                    <img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Photos</h2>
                    <ul>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Prints</a></li>
                        <li><a href="#">Submit</a></li>
                    </ul>
                </div>
            </div>
        </div>
	  <div id="main_text">
	  <h2>Title:</h2>
	  <br />
	  <p>
	  Sed egestas massa et enim convallis tristique. Duis vestibulum felis fermentum est dictum molestie. 
	  Cras mollis euismod erat, laoreet consectetur arcu viverra ultrices. Phasellus a turpis sit amet sapien sodales volutpat. In hac habitasse platea dictumst. 
	  Pellentesque at sollicitudin orci. Sed viverra iaculis libero, sit amet interdum elit tristique ut.
	  Sed egestas massa et enim convallis tristique. Duis vestibulum felis fermentum est dictum molestie. 
	  </p>
	  </div>
	  
	  <div id="right_text">
	  <h2>Title:</h2>
	  <br />
	  <p>
	  Quisque et leo eros. Maecenas aliquet pulvinar elementum. Duis vitae enim risus. Nam mattis leo in felis fringilla mattis. 
	  Suspendisse placerat fermentum est in tincidunt. Vivamus ac lectus orci, vel auctor felis. Nam vel lobortis leo. 
	  Fusce dignissim auctor augue id varius. Curabitur vitae felis felis, ut tristique justo. 
	  In consectetur eleifend dolor vel facilisis. Sed sit amet tellus a tortor iaculis scelerisque at quis est. Maecenas malesuada viverra volutpat.
	  </p>
	  </div>
	  
	  <div id="bottom_text">
	  <h2>Title:</h2>
	  <br />
	  <p>
	  Phasellus eros sem, commodo et tristique sagittis, egestas id orci. Curabitur non orci in purus varius fringilla a ut orci. In dolor justo, 
	  elementum et pellentesque sed, volutpat non dui. Maecenas gravida, sem in iaculis dictum, metus nisi luctus nibh, vitae scelerisque neque mauris ultricies velit.
	  </p>
	  </div>

	  <div id="footer">
	  <br />
	  <p>
	              <div class="navigation2" id="nav2">
                <div class="item2 home2">
                    <img src="images/bg_footer.png" alt="" width="0px" height="0px" class="rectangle"/>
                    <a href="#" class="icon"></a>
                    <h2>Links</h2>
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">SiteMap</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
						
                </div>
				</div>
	  </p>
	  </div>
		
</body>
</html>

Le style de ma page:



*{
margin:0;
padding:0;
}

body{
background: url(images/bg1.png) no-repeat center top;
width: 100%;
height:980px;
}
           
#content{
margin:0 auto;
}

#main_text h2 {
     font-size: 25px;
	 font-family: "Trebuchet MS", "Times New Roman", sans-serif ;
	 text-align: center;
}

#main_text {
     margin: 250px 0 0 300px;	 
     width: 400px; 
	 height: 420px;
	 border-color: #DEDEDE;
     border-style: solid;
     border-width: 1px;
	 background-color: rgba(255,255,255,0.5);
}

#main_text p{
     font-family: "Trebuchet MS", "Times New Roman", sans-serif ;
	 font-size:20px;
	 margin-left:5px;
	 margin-right:5px;
}


#right_text h2 {
     font-size: 25px;
	 font-family: "Trebuchet MS", "Times New Roman", sans-serif ;
	 text-align: center;
}

#right_text {
     margin: -300px 0 0 850px;	 
     width: 350px; 
	 height: 520px;
	 border-color: #DEDEDE;
     border-style: solid;
     border-width: 1px;
	 background-color: rgba(255,255,255,0.5);
}

#right_text p{
     font-family: "Trebuchet MS", "Times New Roman", sans-serif ;
	 font-size:20px;
	 margin-left:5px;
	 margin-right:5px;
}

#bottom_text h2 {
     font-size: 25px;
	 font-family: "Trebuchet MS", "Times New Roman", sans-serif ;
	 text-align: center;
}

#bottom_text {
     margin: -150px 0 0 300px;	 
     width: 450px; 
	 height: 240px;
	 border-color: #DEDEDE;
     border-style: solid;
     border-width: 1px;
	 background-color: rgba(255,255,255,0.5);
}

#bottom_text p{
     font-family: "Trebuchet MS", "Times New Roman", sans-serif ;
	 font-size:20px;
	 margin-left:5px;
	 margin-right:5px;
}

#footer h2 {
     font-size: 25px;
	 font-family: "Trebuchet MS", "Times New Roman", sans-serif ;
	 text-align: center;
}

#footer {
     margin: 50px 0 0 300px;	 
     width: 900px; 
	 height: 100px;
	 border-color: #DEDEDE;
     border-style: solid;
     border-width: 1px;
	 background-color: rgba(255,255,255,0.5);
}

#footer p{
     text-align: center;
     font-family: "Trebuchet MS", "Times New Roman", sans-serif ;
	 margin-left:5px;
	 margin-right:5px;
}

Et le style de mon menu et footer:


.navigation{
    margin: 0px auto;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1.4px;
}
.navigation2{
    margin: 0px auto;
    font-family: "Trebuchet MS", sans-serif;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1.4px;
}

.navigation .item{
    position:absolute;
}

.navigation2 .item2{
    position:absolute;
}

.home{
   top:50px;
   left:360px;
}

.home2{
   top: 1060px;
   left: 625px;;
}

.shop{
   top:90px;
   left:625px;
}
.camera{
   top:230px;
   left:835px;
}
a.icon{
    width:52px;
    height:52px;
    position:absolute;
    top:0px;
    left:0px;
    cursor:pointer;
}
.home2 a.icon{
    background:transparent url(../images/user.png) no-repeat 0px 0px;
}
.home a.icon{
    background:transparent url(../images/home.png) no-repeat 0px 0px;
}
.shop a.icon{
    background:transparent url(../images/shop.png) no-repeat 0px 0px;
}
.camera a.icon{
    background:transparent url(../images/camera.png) no-repeat 0px 0px;
}
.fav a.icon{
    background:transparent url(../images/fav.png) no-repeat 0px 0px;
}
.navigation .item a.active{
    background-position:0px -52px;
}
.navigation2 .item2 a.active{
    background-position:0px -52px;
}
.item2 img .rectangle{
    position:absolute;
    width: 300px;
	height:100px;
    opacity:0.1;
	top: -20px;
}

.item img.circle{
    position:absolute;
    top:0px;
    left:0px;
    width:52px;
    height:52px;
    opacity:0.1;
}
.item h2{
    position:absolute;
    width:147px;
    height:52px;
    color:#222;
    font-size:18px;
    top:0px;
    left:52px;
    text-indent:10px;
    line-height:52px;
    text-shadow:1px 1px 1px #fff;
    text-transform:uppercase;
}
.item h2.active{
    color:#fff;
    text-shadow:1px 0px 1px #555;
}
.item ul{
    list-style:none;
    position:absolute;
    top:60px;
    left:25px;
    display:none;
}
.item ul li a{
    font-size:15px;
    text-decoration:none;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#222;
    padding:3px;
    float:left;
    clear:both;
    width:100px;
    text-shadow:1px 1px 1px #fff;
}
.item ul li a:hover{
    background-color:#fff;
    color:#444;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}

.item2 ul li a:hover{
    background-color:#fff;
    color:#444;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}

.item2 h2{
    position:absolute;
    width:147px;
    height:52px;
    color:#222;
    font-size:18px;
    top:0px;
    left:50px;
    text-indent:10px;
    line-height:52px;
    text-shadow:1px 1px 1px #fff;
    text-transform:uppercase;
}
.item2 h2.active{
    color:#fff;
    text-shadow:1px 0px 1px #555;
}
.item2 ul{
    list-style:none;
    position:absolute;
    top:-10px;
    left:220px;
    display:none;
}


.item2 ul li a{
    font-size:15px;
    text-decoration:none;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#222;
    padding:3px;
    float:left;
    clear:both;
    width:100px;
    text-shadow:1px 1px 1px #fff;
}
.item2 ul li a:hover{
    background-color:#fff;
    color:#444;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}

Modifié par Neron (14 Jan 2011 - 16:34)

groshapas

14 Jan 2011 à 16:44

Bonjour,
Essaies de ne pas spécifier les dimensions de ton body en CSS

body { 
background: url(images/bg1.png) no-repeat center top; 
}

et re dimensionnes ton image de fond à 980px de haut
Modifié par groshapas (14 Jan 2011 - 16:49)

Neron

14 Jan 2011 à 16:54

Ca n'a pas l'air de fonctionner.
Quand j'ouvre ma page je tombe tout à gauche, et je dois aller tout a droite pour voir mon contenu.
Pour un bien, il faudrait que lorsqu'on ouvre la page on tombe directement sur le coté droit de la page.

joska

14 Jan 2011 à 17:05

avant d'aller plus loin : tu charges jquery combien de fois ?

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery2.js"></script>

De plus, tes blocs ont des marges fixe c'est donc normal, qu'avec une résolution plus petite, ton contenu apparaisse décalé à droite. Utilise plutôt des marges en %.
Modifié par joska (14 Jan 2011 - 17:10)

groshapas

14 Jan 2011 à 17:08

Vu d'ici difficile à dire...

Pour les coins arrondis sur IE

Tu dois d'abord télécharger le fichier border-radius.htc et l'inclure dans ton dossier.
Ensuite pour reprendre ta CSS :


.item ul li a:hover{ 
    background-color:#fff; 
    color:#444; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px;
-khtml-border-radius: 5px; 
    border-radius:5px;
behavior: url(border-radius.htc);
 
    -moz-box-shadow:1px 1px 4px #666; 
    -webkit-box-shadow:1px 1px 4px #666; 
    box-shadow:1px 1px 4px #666; 
}

Modifié par groshapas (14 Jan 2011 - 17:09)

Neron

14 Jan 2011 à 17:08

Ce sont tous des fichiers différents. On ne peut pas ?

Neron

14 Jan 2011 à 17:18

Pour les coins arrondi, ça ne marche pas.
J'avais déjà testé, je viens de rententer histoire d'étre sûr mais ça ne fonctionne toujours pas.
Testé sur IE6, 7 et 8 avec IEtester.

Neron

14 Jan 2011 à 21:19

En ce qui concerne mon probléme d'arriére plan et d'affichage en petite résolution je pense avoir trouver une piste.
J'ai modifié tout mes éléments, mettre des % au lieu des px , arf pourquoi j'y ai pas pensais plus tôt!
Par contre mon bloc de droite chevauche mon bloc de gauche sur un petit écran (17") de résolution 1024. Mais ça avance, la suite demain, je mettrais en ligne mes fichiers modifiés. Smiley cligne

Un exemple de mes modifs:

Ca:

#main_text {
     margin: 250px 0 0 0;
	 margin-left:17%;
     width: 400px; 
	 height: 420px;
	 border-color: #DEDEDE;
     border-style: solid;
     border-width: 1px;
	 background-color: rgba(255,255,255,0.5);
}

A la place de:

#main_text {
     margin: 250px 0 0 300px;	 
     width: 400px; 
	 height: 420px;
	 border-color: #DEDEDE;
     border-style: solid;
     border-width: 1px;
	 background-color: rgba(255,255,255,0.5);
}

Neron

15 Jan 2011 à 19:18

Bon je pense que je vais laisser comme ça le rendu est pas trop mal sur un petit écran.

A voir ici: http://teamtlp.net/template/index.html

Sinon pour les coins arrondi sur IE j'ai testé plusieurs choses y'a rien à faire ça veut pas. Dommage aussi le genre de bordure sur mes ronds bleu de menus.

J'espére qu'on aura moins de soucis avec IE9.

Sylvain245

16 Jan 2011 à 08:04

Bonjour,

Pour les arrondis sous iE, tu peux tenter via http://css3pie.com/ c'est avec des fichiers .htc, et pour moi, ca fonctionne bien

Neron

16 Jan 2011 à 11:09

Salut,
merci pour ton lien je mets ça de coté.

Par contre ça ne marche toujours pas, à mon avis ces méthodes fonctionnent sur des box déjà apparent sur la page, tandis que chez moi je veux des arrondis sur des box qui apparaissent lors du passage de la souris sur mes icones, dans le cercle bleu.

Sujet clos

CSS et mise en forme, CSS3

Question background/contenu et question compatibilité CSS3