28221 sujets

CSS et mise en forme, CSS3

Bonjour à tous et bravo pour ce super forum Smiley cligne
Je développe actuellement un site full <table>, mais g décidé de voir un peu comment ca donneré avec du div du moins pour la strcuture générale. G donc récupéré des modéles dAlsaCréation (merci) et l'ai rapidement adapté a mon gout. Sous IE le resultat est celui que je souhaite. Mais pas sous Firefox, que faut il changer?

Voici mon index.php

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test Div</title>
<LINK rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
<div class="conteneur">
<div class="header">contenu du header <a href="http://www.alsacreations.com/articles/modeles">(voir tous les modèles)</a> - <a href="http://www.alsacreations.com/articles/modeles/4zones_scroll_fluide.css">(voir
    la feuille de style CSS)</a>
</div>

		<div class="menu"><p>menu gauche de largeur fixe : 150px</p>
			<ul class="menugauche">
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			</ul>
		</div>
		
		<div class="frame">
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		</div>

	<div class="footer">contenu du footer </div>
</div>
</body>
</html>


et mon index.css

/* CSS issu des tutoriels  www.alsacreations.com/articles  */
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
background-color: #000000; /*couleur de fond noir*/
overflow: auto;
}
.conteneur { /*le conteneur global du site, qui sera centré */
width: 100%;
height: 100%;
position: absolute;
background-color: #ccccff;
}

.header {
width: 100%;
height: 50px;
background-color: #99CCCC;
}
.menu {
position: absolute;
left:0;
width: 15%;
background-color:#CCCCFF;
}
.frame {
margin-left: 150px;
background-color:#9999CC;
width: 85%;
}
p {margin: 0 0 10px 0;}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}

.footer{
width: 100%;
height: 30px;
background-color:#e0ebfe;
}


Au passage, que faut il utiliser com technique pour conserver une mise en page correcte quelque soit la résolution??

Merci pour vos réponses
Bonjour et bienvenue vince_xtrem81

a écrit :

Sous IE le resultat est celui que je souhaite. Mais pas sous Firefox, que faut il changer?


Ton mode de travail Smiley smile ... Si si, sérieusement, en fait, il faut faire en sorte que tout soit nickel sous Firefox et ensuite, l'adaptation pour IE est beaucoup plus facile.

Regarde éventuellement sur la FAQ, tu y trouveras certainement d'autres éléments de réponse Smiley cligne

a écrit :

Au passage, que faut il utiliser com technique pour conserver une mise en page correcte quelque soit la résolution??


ça dépend du site, et de ce que tu veux faire. Tu peux opter pour un 800x600 fixe ou créer un site qui s'adapte à la taille de la fenêtre du navigateur.

Il y a un tuto qui parle de ça Smiley cligne

Edité

Quelques points de détail :

- Attention au style sms, ce n'est pas très lisible à la longue, voir les Règles du forum

- et si tu le souhaites, tu peux te présenter ... c'est un post-it du bar Smiley cligne
Modifié par dominique (17 Feb 2005 - 14:58)
a écrit :
Dominique a écrit:
il faut faire en sorte que tout soit nickel sous Firefox et ensuite, l'adaptation pour IE est beaucoup plus facile


Pas si simple. Un gros problème est la différence de box model entre IE et FF. "Nickel" sur l'un sera alors "pas nickel" sur l'autre, sauf si on prend certaines précautions.

Des articles:
http://www.alsacreations.com/articles/compatibilite/
http://openweb.eu.org/articles/dimensions_boites_css/

et la lecture de la FAQ:
http://forum.alsacreations.com/faq/