28234 sujets

CSS et mise en forme, CSS3

[RESOLU] - Positionnement étrange avec CHROME Google

Salut la compagnie, j'ai un petit souci, pourriez vous me dire si c'est normal que mon design de site.

Sous

IE8/9Preview: Pas de soucis
Firefox 3.5/3.6: Pas de soucis
Chrome 5.0: un décalage a gauche et en bas c'est pas collé au bas du navigateur. Smiley eek

Le souci:

http://novavision.studio.free.fr/board/decalagehtml.jpg

Si vous voulez tester l'affichage sous chrome ce serait sympa, histoire d'être sure que c'est pas une histoire de cache Smiley lol

voici l'adresse temporaire:

http://novavision.studio.free.fr/prod/index.php

Si vous rencontrez bien le souci je posterais le code source histoire de voir le souci avec vous.
Modifié par DR I (02 Jun 2010 - 14:13)
Bonsoir,

Il y a de gros problèmes dans ton code, le doctype de la page est déclaré plusieurs fois, ainsi que les balises html, head et body.

Il te faut, avant tout test de compatibilité, valider le code source ta page ainsi que le code CSS.
Ah ouais, ah bah pour le coup je vais voir ça.

pour le moment, l'index appel trois fichiers php qui n'en sont pas vraiment vue que ces fichiers sont en fait remplis d'html.

si je supprime les balises body et html il vas faire comment? ça vas fonctionner?
Bien, je viens de faire du menage dans le code, et j'ai toujours le meme probleme.

Je ne parviens pas à voir d'ou ça viens.

Voici le code:

Index.php:

<!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" />
<link rel="stylesheet" media="screen" type="text/css"  href="./css/header.css" />
<link rel="stylesheet" media="screen" type="text/css"  href="./css/body.css" />
<link rel="stylesheet" media="screen" type="text/css"  href="./css/footer.css" />
<title>NV-Systems</title>
</head>

<body>
<?php 
include "./pages/header.php";
include "./pages/body.php";
include "./pages/footer.php";
?>
</body>
</html>


header.php:

<!-- Header Section -->
<div id="Banner"></div>
<div id="Logo"></div>
<div id="MenuBar" class="MenuBarFX">
  <ul>
		<li><a href=#>Home</a></li>
		<li><a href=#>Technologies</a>
		  <ul>
				<li><a href=#>Paladin OS</a></li>
				<li><a href=#>Paladin Servers</a></li>
				<li><a href=#>Paladin Eyes</a></li>
			</ul>
		</li>
        
		<li><a href=#>Support</a>
		  <ul>
				<li><a href=#>Online Technical Support</a></li>
				<li><a href=#>Documentations</a></li>
				<li><a href=#>Order a licence</a></li>
				<li><a href=#>Ask a question</a></li>
			</ul>
		</li>
        	
		<li><a href=#>Communities</a>
		  <ul>
				<li><a href=#>Forums</a></li>
				<li><a href=#>Cool Stuff</a></li>
				<li><a href=#>Make a suggestion</a></li>
			</ul>
		</li>
        	
		<li><a href=#>Contact</a></li>
  </ul>
</div>


Body.php:

<!-- Body Main Page Section -->
<div id="globalbody">
	<div id="leftarrow"></div>
	<div id="rightarrow"></div>
    <div id="news">
    	<div id="imgthumbs"><img src="/prod/contents/Images/test-ok.png" /></div>
        <div id="txtarea"><?php include('/prod/contents/txt/introduction.php'); ?></div>
    </div>
</div>


footer.php:

<!-- Footer Section -->
<div id="globalfooter">
	<div id="contentfooter"></div>
</div>


--------------------------------

Maintenant les css correspondant:

header.css:

@charset "utf-8";

body {
	background-image:url(../images/NVS_Background.png);
	background-color:#ffffff;
	background-position:top;
	background-repeat:repeat-x;
}

/* CSS Header parts */

div#Banner {
	min-width:640px;
	width:100%;
	height:96px;
	top:0px;
	left:0px;
	background-color:#303338;
	background-position:top;
	background-repeat:repeat-x;
	position:absolute;
	z-index:0;
}

div#Logo {
	width:512px;
	height:61px;
	top:8px;
	left:8px;
	background-image:url(../images/NVS_Logo2.png);
	background-position:top;
	background-position:left;
	background-repeat:no-repeat;
	position:absolute;
	z-index:10;
}

div#MenuBar {
	background-color:#42464d;
	background-repeat:repeat-x;
	min-width:640px;
	width:100%;
	height:24px;
	top:72px;
	left:0px;
	position:absolute;
	z-index:2;
}

/* Header Menu Bar Special Effects */

.MenuBarFX {
	text-align:center;
	text-decoration:none;
	font-weight:normal;
	font-family:Arial;
	font-size:14px;
	color:#e5e5e5;
}

.MenuBarFX ul { /*Parametrage des style de puces, ici masquer les puces + Parametrage du bandeau principal*/
	margin:0px;
	padding:0px;
	width:auto;
	position:relative;
	list-style-type:none;
	text-align:left;
 }
 
.MenuBarFX li:hover {
	line-height:24px;
	width:auto;
	color:#4289ff;
	background-color:#585c62;
}
 
.MenuBarFX ul li { /*Parametrage des sous menu*/
	line-height:24px;
	width:auto;
	float:left;
	padding:0px;
	margin-left:4px;
	margin-right:4px;
	color:#e5e5e5;
}


.MenuBarFX ul li a { /*Parametrage des sous menu hyperlien*/
	margin-left:4px;
	margin-right:4px;
	padding:0px;
	line-height:24px;
	display:block;
	text-decoration:none;
	color:#e5e5e5;
}

.MenuBarFX ul li a:hover { /*Parametrage des sous menu hyperlien souris survol*/
	line-height:24px;
	width:auto;
	color:#4289ff;
	background-color:#585c62;
}

.MenuBarFX ul li ul { /*Masquage des sous menu*/
	display:none;
}

.MenuBarFX ul li ul {
	position:absolute;
	width:auto;
	float:none;
	border:0px;
	background-color:#585c62/*#42464d*/;
}

.MenuBarFX ul li:hover ul{
	display:block;
	width:auto;
	float:none;
	margin:0px;
	padding:0px;
	color:#4289ff;
}

.MenuBarFX ul li a:hover ul{
	display:block;
	width:auto;
}

.MenuBarFX ul li ul li{
	display:block;
	float:none;
}

.MenuBarFX ul li ul li a{
	line-height:18px;
	display:block;
	float:none;
	width:auto;
	margin-right:2px;
	padding:0px;
	color:#e5e5e5;
	font-size:12px;
	font-weight:normal;
}

.MenuBarFX ul li ul li a:hover{
	line-height:18px;
	display:block;
	float:none;
	width:auto;
	margin-right:2px;
	padding:0px;
	color:#4289ff;
	font-size:12px;
	font-weight:normal;
}


body.css:

@charset "utf-8";

div#globalbody {
	width:100%;
	bottom:96px;
	top:128px;
	left:0px;
	background-color:#303338;
	background-position:top;
	background-repeat:repeat-x;
	position:absolute;
	z-index:0;
}

div#news {
	top:0px;
	height:100%;
	width:100%;
	background-color:#303338;
	background-position:top;
	background-repeat:repeat-x;
	overflow:hidden;
}

div#leftarrow {
	width:16px;
	height:100%;
	background-color:#4289ff;
	left:0px;
	top:0px;
	float:left;
	position:absolute;
}

div#rightarrow {
	float:right;
	top:0px;
	right:0px;
	background-color:#4289ff;
	position:absolute;
	color:#FFF;
	width:16px;
	height:100%;
}

div#imgthumbs {
	height:128px;
	width:128px;
	margin-left:24px;
	margin-top:8px;
	float:left;
	overflow:hidden;
}

div#txtarea {
	top:8px;
	height:100%;
	margin-top:8px;
	margin-right:24px;
	overflow:hidden;
	color:#FFFFFF;
	font-family:Arial;
}


footer.css:

@charset "utf-8";
/* CSS Footer */

html, body {
	height:100%;
	width:100%;
}

div#globalfooter {
	min-height:100%;
	min-width:100%;
	position:relative;
}

div#contentfooter {
	width:100%;
	bottom:10px;
	height:64px;
	overflow:hidden;
	position:absolute;
	background-image:url(../images/NVS_Footer.png);
	background-color:#000000;
	background-position:top;
	background-repeat:repeat-x;
}


Je suis désolé c'est tres long mais je voulais vous donner le code complet pour eviter de louper une erreur dans le code.

Merci d'avance pour votre aide. Smiley lol
Modifié par DR I (02 Jun 2010 - 11:50)
Bien alors j'ai résolu le probleme:

Le hic c'est que j'ai tout de meme du indiquer dans le fichier css de mon footer que:


html, body {
   height:100%;
   width:100%;
   padding:0px;
   margin:0px;

Smiley biggol Smiley eek
Alors la question c'est:

Comment ce fait il que j'ai été obliger de préciser dans le CSS que les elements html et body ce doivent d'etre de 100% de hauteur et de largeur et de ne pas mettre de padding ni de margin?

Alors qu'avec mes autres blocs je n'ai pas eu besoin de le faire? Est ce que c'est du au fait que ce soit le footer et que le W3C n'a encore rien fourni la dessus?
Sujet clos
Aller à