18034 sujets

Questions générales et questions de débutants

Mise en forme CSS et affichage ''aléatoire'' sous chrome

Bonjour,

Je suis débutante en création de site avec codage en html et mise en page CSS.
Avant cela je me débrouillais avec des mises en pages avec des tableaux (la préhistoire ai-je découvert... Smiley cligne )

Ma question est la suivante:
J'ai créé des pages web avec une structure très simple:
1- top comprenant le logo
2- barre de navigation (accueil, etc,etc)
3-une image d'illustration
4-une bannière de titre
5-article
6-footer

Je souhaite que ces éléments soient disposés les un en dessous des autres dans le flux.
Pas de colonnes, pas de texte qui entourerait une image: tout simple.
J'ai simplement un ''sticky'' qui fait que lorsque l'on scrolle, l'image d'illustration n°3 passe en dessous de 1et2 qui ne bougent pas et la bannière de titre 4 vient s'accrocher à la barre de navigation: le texte de l'article passe ensuite sous l'ensemble (1,2,4) qui reste visible en haut de la fenêtre du navigateur.

Rien de bien compliqué je pense pour tous ceux qui ont l'expérience de développer des sites web.

A priori cela fonctionne bien: sous firefox niquel
quand j'ouvre dans chrome: niquel
SAUF dans ce dernier, lorsque je reviens sur une page qui s'affichait parfaitement après avoir navigué sur une autre page du site, cette même page ne s'affiche plus nickel: en l'occurence, mon image 3 reste en partie en dessous de la barre de navigation 2. Si j'actualise la page, elle se réaffiche correctement.

A quels paramètres cela peut-il être dû ?
Est-ce quelque chose d'évident ou avez-vous besoin que je vous donne d'autre détails de code ou de CSS employés ?

par avance, merci
Plus d'info si ça peut aider à me faire comprendre, voici le code:
Soyez indulgent, c'est un premier jet...

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>1C2 Savoir-Faire</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="../javascript/jquery.sticky.js"></script>
	<script> 
		$(document).ready(function(){
			$("#top").sticky({topSpacing:0});
			$("#banniere").sticky({topSpacing:146});
		});
	</script>
<link href="../styles/main-idmn.css" rel="stylesheet" type="text/css">
</head>

<body dir="ltr" lang="fr-FR">
<div id="wrapper">
  <header id="top"><img src="../Images/1C2-IDMN-top.png" alt:"1C2,Industrial design and manufacturing network"/>
    <nav id="IDMN-nav">
      <ul>
        <li><a href="../index.html" title="L'esprit 1C2" target="_top">Accueil</a></li>
        <li><a href="1c2-idmn.html" title="Compétences et Expérience" target="_top" class="pageactive">Notre Savoir-Faire</a></li>
        <li><a href="1C2-projets.html" title=" Des Projets, des Histoires et des Hommes" target="_top">Des projets,...</a></li>
        <li><a href="1C2-portfolio.html" title="1C2 Réalisations" target="_top">Portfolio</a></li>
      </ul>
    </nav>
 </header>
  <div id="img-index">
  	<img src="../Images/1c2-design-industriel-Hi.jpg" alt:""/>
  </div>
  <div id="banniere">
    <div id="titre">CREER - CONCEVOIR - REALISER
   </div>
  </div>
    
	<article id="main">

etc, etc

Et le CSS qui va avec...


body {
	margin: 0px;
	font-family: "Frutiger Extra", Arial, Verdana;
	background-color: #4b4d52;
}
#wrapper {
	width: 100%;
	height: 100%;
	max-width: 1024px;
	min-width: 740px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	box-shadow: 0 0 18px #333;

}

#wrapper #top {
	max-width: 1024px;
	width: 100%;
}

img {
	height: auto;
	width: 100%;
	max-width: 1024px;
	margin-top: 0px;
}
a img {
border: none;
}

#top {
	top: 0px;
	position: fixed;
	z-index: 9999;
	width: 100%;
	max-width: 1024px;
	background-color: #FFFFFF;

}

#IDMN-nav {
	font-family: Frutiger Extra, Arial, Verdana;
	width: 100%;
	max-width: 1024px;
	min-width: 740px
	display: block;
	height: 45px;
}
#IDMN-nav ul{
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	list-style: none;
	max-width: 1024px;
	height: 45px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	
}

#IDMN-nav ul li {
	display: block;
	float: left;
	width: 25%;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

#IDMN-nav ul li a {
	padding-top: 5px;
	padding-bottom: 5px;
	color: #AEADAD;
	font-family: "Frutiger Extra", Arial, Verdana;
	font-style: normal;
	font-weight: normal;
	font-size: large;

}
ul li a {
	padding-top: 5px;
	padding-bottom: 5px;
}

#img-index {
	clear: left;
	display: block;
	width: 100% !important;
	max-width: 1024 px;
	height: auto !important;
	overflow: hidden;
	margin-top: 0px;
}

#banniere {
	height: 45px;
	width: 100%;
	max-width: 1024px;
	min-width: 740px;
	border-top-color: #9E9B9B;
	border-bottom-color: #9E9B9B;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	background-color: #e2e1e1;
	position: relative;
	clear:left;
	margin-top:-5px;
	display: block;
}

#titre {
	margin-left: 100px;
	height: 43px;
	overflow: hidden;
	display: block;
	vertical-align: bottom;
	text-transform: none;
	font-size: 24px;
	font-weight: bold;
	padding-top: 8px;
	color: #464646;
	float: left;
	font-family: Frutiger Extra, Arial, Verdana;
}
#retour {
	position: relative;
	display: block;
	float: right;
	padding-right: 50px;
	padding-top: 10px;
	color: #FFFFFF;
	font-size: 15px;
}
h1 {
	font-size: 22px;
	color: #4E4D4D;
	display: block;
	font-style: normal;
	vertical-align: middle;	
}

#main {
	max-width: 100%;
	margin-left: 100px;
	margin-right: 100px;
	margin-bottom: 0px;
	overflow: auto;
	text-align: justify;
	font-family: Verdana, Arial;
	font-size: 16px;
	letter-spacing: 0,5px;
	line-height: 24px;
	max-height: 100%;
	display: block;
	padding-bottom: 5px;
	clear: both;
}

#article {
	max-width: 100%;
	margin-top: 5px;
	overflow: auto;
	text-align: justify;
	font-family: Verdana, Arial;
	display: block;

}
.centered {
	margin-left: auto;
	margin-right: auto;
}
Sujet clos
Aller à