Bonjour,
Je débute en CSS grâce au très bon livre "Pratique du design web".
J'ai donc essayer de créer un header reprenant mon logo et 5 images cliquables (c'est donc mon menu principal. Je souhaiterai que ces 5 images (qui n'ont pas la même largeur) se placent à intervalles réguliers.
Voici mon code html
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
-->
</style></head>
<body>
<div id="header">
<a href="index.htm" title="Princesse d'un Jour">
<img id="logo" src="logo.gif" alt="Princesse d'un Jour" /></a>
<a href="accessoires-colliers-mariage.htm" title="Colliers mariage">
<img id="colliers" src="colliers.gif" alt="colliers mariage" /></a>
<a href="accessoires-mariage-bracelets.htm" title="Bracelets mariage">
<img id="bracelets" src="bracelets.gif" alt="Bracelets mariage" /></a>
<a href="accessoires-mariage-pics-a-cheveux.htm" title="Pics à cheveux mariage">
<img id="pics" src="pics%20cheveux.gif" alt="Pics à cheveux mariage" /></a>
<a href="accessoires-mariage-boucles-doreilles.htm" title="Boucles d'oreilles mariage">
<img id="boucles" src="boucles%20doreilles.gif" alt="Boucles d'oreilles mariage" /></a>
<a href="accessoires-mariage-tiares.htm" title="Tiares mariage">
<img id="tiares" src="tiares.gif" alt="Tiares mariage" /></a>
<a href="index_eng.htm" title="English version">
<img id="english" src="english%20version.gif" alt="English version" width="100" height="22" /></a>
</div>
Et mon fichier styles2.css
body {
margin-left: 0px;
margin-top: 0px;
}
div#header {
position: relative;
width: 1024px;
height: 66px;
background: yellow;
}
img#logo {
top: 0;
right: 0;
}
img#colliers {
position: absolute;
top: 25px;
left: 250px;
}
img#bracelets {
position: absolute;
top: 25px;
left: 325px;
}
img#pics {
position: absolute;
top: 25px;
left: 410px;
}
img#boucles {
position: absolute;
top: 25px;
left: 525px;
}
img#tiares {
position: absolute;
top: 25px;
left: 660px;
}
img#english {
position: absolute;
top: 25px;
left: 730px;
}
Mes questions:
- est ce que vous pensez que ma CSS est correcte avec l'usage de "absolute" pour placer chacune des mes images par rapport à mon logo ?
- "absolute" ou "relative" ? (j'ai cru comprendre que "relative" était déconseillé pour les images)
- Y a t'il une solution plus simple ?
Merci pour vos conseils et soyez indulgeant pour un débutant
Modifié par pp51 (12 Dec 2005 - 20:16)
Je débute en CSS grâce au très bon livre "Pratique du design web".
J'ai donc essayer de créer un header reprenant mon logo et 5 images cliquables (c'est donc mon menu principal. Je souhaiterai que ces 5 images (qui n'ont pas la même largeur) se placent à intervalles réguliers.
Voici mon code html
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
-->
</style></head>
<body>
<div id="header">
<a href="index.htm" title="Princesse d'un Jour">
<img id="logo" src="logo.gif" alt="Princesse d'un Jour" /></a>
<a href="accessoires-colliers-mariage.htm" title="Colliers mariage">
<img id="colliers" src="colliers.gif" alt="colliers mariage" /></a>
<a href="accessoires-mariage-bracelets.htm" title="Bracelets mariage">
<img id="bracelets" src="bracelets.gif" alt="Bracelets mariage" /></a>
<a href="accessoires-mariage-pics-a-cheveux.htm" title="Pics à cheveux mariage">
<img id="pics" src="pics%20cheveux.gif" alt="Pics à cheveux mariage" /></a>
<a href="accessoires-mariage-boucles-doreilles.htm" title="Boucles d'oreilles mariage">
<img id="boucles" src="boucles%20doreilles.gif" alt="Boucles d'oreilles mariage" /></a>
<a href="accessoires-mariage-tiares.htm" title="Tiares mariage">
<img id="tiares" src="tiares.gif" alt="Tiares mariage" /></a>
<a href="index_eng.htm" title="English version">
<img id="english" src="english%20version.gif" alt="English version" width="100" height="22" /></a>
</div>
Et mon fichier styles2.css
body {
margin-left: 0px;
margin-top: 0px;
}
div#header {
position: relative;
width: 1024px;
height: 66px;
background: yellow;
}
img#logo {
top: 0;
right: 0;
}
img#colliers {
position: absolute;
top: 25px;
left: 250px;
}
img#bracelets {
position: absolute;
top: 25px;
left: 325px;
}
img#pics {
position: absolute;
top: 25px;
left: 410px;
}
img#boucles {
position: absolute;
top: 25px;
left: 525px;
}
img#tiares {
position: absolute;
top: 25px;
left: 660px;
}
img#english {
position: absolute;
top: 25px;
left: 730px;
}
Mes questions:
- est ce que vous pensez que ma CSS est correcte avec l'usage de "absolute" pour placer chacune des mes images par rapport à mon logo ?
- "absolute" ou "relative" ? (j'ai cru comprendre que "relative" était déconseillé pour les images)
- Y a t'il une solution plus simple ?
Merci pour vos conseils et soyez indulgeant pour un débutant
Modifié par pp51 (12 Dec 2005 - 20:16)