28173 sujets
CSS et mise en forme, CSS3
Salut, si c'est faisable, pas compliqué, mais un peu long à expliquer.
J'ai un petit site sur lesquel je fais mes tests, si ça peut te servir:
http://lefelinherbivore.free.fr/aquabase/
sur cette page tout est fait en CSS.
Si tu ne l'as pas encore, télécharge firefox et installe son fameux module "webdeveloper" qui te permettra en toute simplicité d'accéder aux fichiers CSS, au code source... et bien d'autres options!
Je pense aussi que tu peux trouver cette information dans les tutoriaux d'alsacreation ( c'est un grand classique )
ou sinon, tu fais comme je l'ai fait, tu achètes "CSS pratique du design web de Raphaël Goetter" et tu trouveras l'info page 175. Je te le conseille vivement, c'est comme une bible...sinon t'auras pas fini de tourner en rond!
J'ai un petit site sur lesquel je fais mes tests, si ça peut te servir:
http://lefelinherbivore.free.fr/aquabase/
sur cette page tout est fait en CSS.
Si tu ne l'as pas encore, télécharge firefox et installe son fameux module "webdeveloper" qui te permettra en toute simplicité d'accéder aux fichiers CSS, au code source... et bien d'autres options!
Je pense aussi que tu peux trouver cette information dans les tutoriaux d'alsacreation ( c'est un grand classique )
ou sinon, tu fais comme je l'ai fait, tu achètes "CSS pratique du design web de Raphaël Goetter" et tu trouveras l'info page 175. Je te le conseille vivement, c'est comme une bible...sinon t'auras pas fini de tourner en rond!
je dois présenter une page basée l'exemple donné ci dessus :
Site d'un photographe.
Menu = activités du photographe.
qd on clique sur un bouton du menu on affiche une photo qui disparait qd on quitte le bouton :
Spécificité : chaque bouton est composé de 3 zone réactives différentes afin d'afficher une suite de 3 images par bouton.
Cela marche sur firefox mais pas dans IE.
ou ai-je l'erreur ?
ci dessous le code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MEW"S Studio</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
}
body {
background-color:#000000;
margin: 0;
padding: 0;
}
a:link {
color: #CCCCCC;
font-weight:900;
text-decoration: none;
}
a:visited {
text-decoration: none;
font-weight:900;
color: #CCCCCC;
}
a:hover {
text-decoration: none;
font-weight:900;
color: #FFFFFF;
}
a:active {
text-decoration: none;
font-weight:900;
color: #FFFFFF;
}
#cache {/*prechargement des images*/
position:absolute;
top: -5000px;
left:-5000px;
}
#global {
position:absolute;
left: 50%;
top: 50%;
width: 768px;
height: 576px;
margin-top: -288px; /* moitié de la hauteur */
margin-left: -384px; /* moitié de la largeur */
/*background-color:#999999;*/
}
#titre{
width: 768px;
height: 86px;
text-align: center;
/*background-color:#666666;*/
}
.titre_principal {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
font-style: normal;
line-height: normal;
font-weight: 900;
color: #ffffff;
}
.titre_secondaire {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: 600;
font-style: normal;
line-height: normal;
color: #ffffff;
}
#tableau{
position:relative;
width:766px;
height:474px;
padding-top:50px;
border: thin solid #FFFFFF;
background-color:#000000;
}
#menu{
position:relative;
width:256px;
float:left;
/*background-color:#ffffff;*/
}
/*#photo{
position:relative;
display:block;
width:300px;
height:450px;
float:left;
background-color:#333333;
}*/
.photo{
display:none;
}
a.texte_bouton_1_1{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_1_1:hover .photo{
position:absolute;
top:0px;
left:266px;
display:block;
width:300px;
height:450px;
}
a.texte_bouton_1_2{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_1_2:hover .photo{
position:absolute;
top:-30px;
left:266px;
display:block;
width:300px;
height:450px;
}
a.texte_bouton_1_3{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_1_3:hover .photo{
position:absolute;
top:-60px;
left:266px;
display:block;
width:300px;
height:450px;
}
a.texte_bouton_2_1{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_2_1:hover .photo{
position:absolute;
top:-90px;
left:266px;
display:block;
width:300px;
height:450px;
}
a.texte_bouton_2_2{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_2_2:hover .photo{
position:absolute;
top:-120px;
left:266px;
display:block;
width:300px;
height:450px;
}
a.texte_bouton_2_3{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_2_3:hover .photo{
position:absolute;
top:-150px;
left:266px;
display:block;
width:300px;
height:450px;
}
-->
</style>
</head>
<body>
<div id="cache">
<img src="images/montage_album.jpg" alt = ""/>
<img src="images/montage_album_nb.jpg" alt = ""/>
<img src="images/montage_bm.jpg" alt = ""/>
<img src="images/montage_bm_nb.jpg" alt = ""/>
<img src="images/montage_general.jpg" alt = ""/>
<img src="images/montage_mariee.jpg" alt = ""/>
<img src="images/montage_mariee_nb.jpg" alt = ""/>
<img src="images/montage_naissance_nb.jpg" alt = ""/>
<img src="images/montage_naissance_sepia.jpg" alt = ""/>
<img src="images/noir.gif">
</div>
<div id="global"><div id="titre"><span class="titre_principal">MEW"S</span><span class="titre_secondaire"> STUDIO</span></div>
<div id="tableau">
<span id="menu">
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1">MARIAGE<div class="photo"><img src="images/montage_mariee_nb.jpg" alt="mariage_1" title="mariage_1" /></div> </a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_2"><div class="photo"><img src="images/montage_mariee.jpg" alt="mariage_2" title="mariage_2" /></div></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_3"><div class="photo"><img src="images/montage_mariee_nb.jpg" alt="mariage_3" title="mariage_3" /></div></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_2_1">NAISSANCE<span class="photo"><img src="images/montage_naissance_nb.jpg" /></span></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_2_2"><span class="photo"><img src="images/montage_naissance_sepia.jpg" /></span></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_2_3"><span class="photo"><img src="images/montage_naissance_nb.jpg" /></span></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1">FETES</a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"></a>
<a href = "http://www.mewsphotovideo.com" target="_blank" class="texte_bouton_1_1">ESPACE ENTREPRISE</a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1">ALBUM</a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"> </a>
</span>
</div>
</div>
</body>
</html>
Site d'un photographe.
Menu = activités du photographe.
qd on clique sur un bouton du menu on affiche une photo qui disparait qd on quitte le bouton :
Spécificité : chaque bouton est composé de 3 zone réactives différentes afin d'afficher une suite de 3 images par bouton.
Cela marche sur firefox mais pas dans IE.
ou ai-je l'erreur ?
ci dessous le code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MEW"S Studio</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
}
body {
background-color:#000000;
margin: 0;
padding: 0;
}
a:link {
color: #CCCCCC;
font-weight:900;
text-decoration: none;
}
a:visited {
text-decoration: none;
font-weight:900;
color: #CCCCCC;
}
a:hover {
text-decoration: none;
font-weight:900;
color: #FFFFFF;
}
a:active {
text-decoration: none;
font-weight:900;
color: #FFFFFF;
}
#cache {/*prechargement des images*/
position:absolute;
top: -5000px;
left:-5000px;
}
#global {
position:absolute;
left: 50%;
top: 50%;
width: 768px;
height: 576px;
margin-top: -288px; /* moitié de la hauteur */
margin-left: -384px; /* moitié de la largeur */
/*background-color:#999999;*/
}
#titre{
width: 768px;
height: 86px;
text-align: center;
/*background-color:#666666;*/
}
.titre_principal {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
font-style: normal;
line-height: normal;
font-weight: 900;
color: #ffffff;
}
.titre_secondaire {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: 600;
font-style: normal;
line-height: normal;
color: #ffffff;
}
#tableau{
position:relative;
width:766px;
height:474px;
padding-top:50px;
border: thin solid #FFFFFF;
background-color:#000000;
}
#menu{
position:relative;
width:256px;
float:left;
/*background-color:#ffffff;*/
}
/*#photo{
position:relative;
display:block;
width:300px;
height:450px;
float:left;
background-color:#333333;
}*/
.photo{
display:none;
}
a.texte_bouton_1_1{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_1_1:hover .photo{
position:absolute;
top:0px;
left:266px;
display:block;
width:300px;
height:450px;
}
a.texte_bouton_1_2{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_1_2:hover .photo{
position:absolute;
top:-30px;
left:266px;
display:block;
width:300px;
height:450px;
}
a.texte_bouton_1_3{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_1_3:hover .photo{
position:absolute;
top:-60px;
left:266px;
display:block;
width:300px;
height:450px;
}
a.texte_bouton_2_1{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_2_1:hover .photo{
position:absolute;
top:-90px;
left:266px;
display:block;
width:300px;
height:450px;
}
a.texte_bouton_2_2{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_2_2:hover .photo{
position:absolute;
top:-120px;
left:266px;
display:block;
width:300px;
height:450px;
}
a.texte_bouton_2_3{
display:block;
position:relative;
height:30px;
width :256px;
text-align:left;
padding-left:10px;
/*background-color:#333333;*/
float:left;
}
.texte_bouton_2_3:hover .photo{
position:absolute;
top:-150px;
left:266px;
display:block;
width:300px;
height:450px;
}
-->
</style>
</head>
<body>
<div id="cache">
<img src="images/montage_album.jpg" alt = ""/>
<img src="images/montage_album_nb.jpg" alt = ""/>
<img src="images/montage_bm.jpg" alt = ""/>
<img src="images/montage_bm_nb.jpg" alt = ""/>
<img src="images/montage_general.jpg" alt = ""/>
<img src="images/montage_mariee.jpg" alt = ""/>
<img src="images/montage_mariee_nb.jpg" alt = ""/>
<img src="images/montage_naissance_nb.jpg" alt = ""/>
<img src="images/montage_naissance_sepia.jpg" alt = ""/>
<img src="images/noir.gif">
</div>
<div id="global"><div id="titre"><span class="titre_principal">MEW"S</span><span class="titre_secondaire"> STUDIO</span></div>
<div id="tableau">
<span id="menu">
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1">MARIAGE<div class="photo"><img src="images/montage_mariee_nb.jpg" alt="mariage_1" title="mariage_1" /></div> </a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_2"><div class="photo"><img src="images/montage_mariee.jpg" alt="mariage_2" title="mariage_2" /></div></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_3"><div class="photo"><img src="images/montage_mariee_nb.jpg" alt="mariage_3" title="mariage_3" /></div></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_2_1">NAISSANCE<span class="photo"><img src="images/montage_naissance_nb.jpg" /></span></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_2_2"><span class="photo"><img src="images/montage_naissance_sepia.jpg" /></span></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_2_3"><span class="photo"><img src="images/montage_naissance_nb.jpg" /></span></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1">FETES</a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"></a>
<a href = "http://www.mewsphotovideo.com" target="_blank" class="texte_bouton_1_1">ESPACE ENTREPRISE</a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1">ALBUM</a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"></a>
<a href = "http://www.mishdanart.net" target="_blank" class="texte_bouton_1_1"> </a>
</span>
</div>
</div>
</body>
</html>
Bonjour,
Rottenberg je te conseille d'aller faire un tour la : http://forum.alsacreations.com/help.php
pour essayer d'être en adéquation avec les règles du forum.
De plus tu pose un problème au beau milieu d'un post qui n'est pas le tien et qui n'est pas en rapport avec la question initialement posée par ce post.
Rottenberg je te conseille d'aller faire un tour la : http://forum.alsacreations.com/help.php
pour essayer d'être en adéquation avec les règles du forum.
De plus tu pose un problème au beau milieu d'un post qui n'est pas le tien et qui n'est pas en rapport avec la question initialement posée par ce post.