1°)Pourquoi quand je compose un style CSS à l interieur d'une page HTML et que j utilise les memes codes dans une feuille CSS séparée, l'affichage différe ?
2°) peut on définir la taille d'une image en "%" et non pas en "px" ?
3°) Qlq1 connait il un bon manuel (fr) sur le XHTML et le CSS. (niveau débutant) ?
3 questions.(édité voir plus loin)
3 questions.(édité voir plus loin)
Dernière modification par offpol le 28 déc. 2003, 11:39, modifié 1 fois.
Comment ruiner un homme ?
1) par les femmes (agréable)
2) par le jeu (pratique)
3) par l'ordinateur (le meilleur des moyens!)
FF 3 fr+ TB 2 fr + openoffice + linux + XP pro
1) par les femmes (agréable)
2) par le jeu (pratique)
3) par l'ordinateur (le meilleur des moyens!)
FF 3 fr+ TB 2 fr + openoffice + linux + XP pro
Exemple html et html + css
Tout dans html
Le html seul<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test01</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: auto;
background: #fff;
font: 1em verdana, sans-serif;
}
#contenu {
float: right;
height: 73%;
width: 85%;
margin: 0;
padding: 0;
overflow: auto;
background-color:#C0C0C0;
}
#entete {
float: left;
background-color: #9C9;
width: 100%;
height: 20%;
text-align: center;
color: #3300CC;
}
#logo1 {
position: absolute;
left:1%;
top:0;
}
#logo1 img {
border:0;
}
#logo2 {
position: absolute;
right:1%;
top:0;
}
#menu1 {
float: left;
width: 15%;
height: 80%;
overflow: auto;
background-color:#FFFF33;
}
#pied {
float: right;
text-align: center;
background-color: #00FFFF;
width: 85%;
height: 7%;
}
</style>
</head>
<body>
<div id="entete"><h1>ENTETE</h1>
<div id="logo1">logo1</div>
<div id="logo2">logo2</div>
</div>
<div id="menu1">menu1</div>
<div id="contenu">
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
</div>
<div id="pied">
<a href="http://validator.w3.org/check/referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0!" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="vcss.png" alt="Valid CSS!" /></a>
</div>
</body>
</html>
et le CSS<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test02</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" href="teststyle.css" media="screen" type="text/css" title="Normal" />
</head>
<body>
<div id="entete"><h1>ENTETE</h1>
<div id="logo1">logo1</div>
<div id="logo2">logo2</div>
</div>
<div id="menu1">menu1</div>
<div id="contenu">
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
contenu<br />
</div>
<div id="pied">
<a href="http://validator.w3.org/check/referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0!" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="vcss.png" alt="Valid CSS!" /></a>
</div>
</body>
</html>
Merci@charset "iso-8859-1";
/* auteur: User */
/* Date de création: 26/12/03 */
body { height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
background: #fff;
font: 1em verdana, sans-serif;
}
#contenu {
float: right;
height: 73%;
width: 85%;
margin: 0;
padding: 0;
overflow: auto;
background-color:#C0C0C0;
}
#entete {
float: left;
background-color: #9C9;
width: 100%;
height: 20%;
overflow: auto;
text-align: center;
color: #3300CC;
}
#logo1 {
position: absolute;
left:1%;
top:0;
}
#logo1 img {
border:0;
}
#logo2 {
position: absolute;
right:1%;
top:0;
}
#menu1 {
float: left;
width: 15%;
height: 80%;
background-color:#FFFF33;
}
#pied {
float: right;
text-align: center;
background-color: #00FFFF;
width: 85%;
height: 7%;
}
Comment ruiner un homme ?
1) par les femmes (agréable)
2) par le jeu (pratique)
3) par l'ordinateur (le meilleur des moyens!)
FF 3 fr+ TB 2 fr + openoffice + linux + XP pro
1) par les femmes (agréable)
2) par le jeu (pratique)
3) par l'ordinateur (le meilleur des moyens!)
FF 3 fr+ TB 2 fr + openoffice + linux + XP pro
Pour le CSS2, http://www.yoyodesign.org/doc/w3c/css2/ ... ml#minitoc n'est pas mal non plus.LezeuS a écrit :Pour le 3 : http://www.laltruiste.com
C'est ce que je potasse en ce moment. C'est pas trop mal fait
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité