olivier/site_depotoire
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[MàJ] Fichier CSS pour les éléments pour un affichage plus cohérent, notamment au passage de la souris sur l'image contenue dans le cadre

Browse Source
This commit is contained in:
Olivier DOSSMANN 2011-11-18 21:49:48 +01:00
parent f13430e57f
commit d897c7bef8
5 changed files with 32 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
composants/element.html
View File

@ -1,9 +1,8 @@
<a class="cadre" href="@@URL_ELEMENT@@" title="@@DESC_ELEMENT@@">
<div class="element"> <div class="element">
<div class="titre"> @@TITRE_ELEMENT@@ <br />
<a href="@@URL_ELEMENT@@" title="@@DESC_ELEMENT@@">@@TITRE_ELEMENT@@</a>
</div> <img src="@@URL_IMAGE@@" alt="@@TITRE_IMAGE@@" title="@@DESC@@IMAGE@@" />
<div class="image"> </div>
<img src="@@URL_IMAGE@@" alt="@@TITRE_IMAGE@@" title="@@DESC_IMAGE@@" /> </a>
</div>
</div>

43
exemple/element.css
View File

@ -1,43 +0,0 @@
.element {
display: block;
height: 9em;
width: 11em;
margin: 0 5px 10px 5px;
float: left;
border: thin solid #000000;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 1px 1px 8px #000000;
box-shadow: 1px 1px 8px #000000;
-webkit-box-shadow: 1px 1px 8px #000000;
text-align: center;
}
.element a {
display: block;
height: 9em;
width: 11em;
margin: 0;
float: left;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
text-align: center;
}
.element img {
background-color: red;
display: block;
position: relative;
width: 3em;
height: 3em;
top: -4em;
left: 4em;
}
a:hover {
background-color: lightblue;
}

36
exemple/element.html
View File

@ -1,36 +0,0 @@
<html>
<head>
<title>sdklfj</title>
<style>
a {
display: block;
height: 9em;
width: 19ex;
margin: 0 5px 10px 5px;
float: left;
border: thin solid #000000;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 1px 1px 8px #000000;
box-shadow: 1px 1px 8px #000000;
-webkit-box-shadow: 1px 1px 8px #000000;
overflow: hidden;
}
a img {
}
a:hover {
background-color: red;
}
</style>
</head>
<body>
<div class="element">
<a href="http://localhost/" title="Some description">Microblog</a>
<img src="http://nutritive.org/image/identica.png" alt="Some img" title="img" />
</div>
</body>
</html>

26
style/bicolore_avec_menu.css
View File

@ -88,9 +88,9 @@ div#corps div.ensemble_element {
min-height: 10em; min-height: 10em;
} }
div#corps div.element { div#corps a.cadre {
height: 9em; height: 9em;
width: 19ex; width: 11em;
margin: 0 5px 10px 5px; margin: 0 5px 10px 5px;
float: left; float: left;
border: thin solid #000000; border: thin solid #000000;
@ -101,31 +101,29 @@ border-radius: 15px;
box-shadow: 1px 1px 8px #000000; box-shadow: 1px 1px 8px #000000;
-webkit-box-shadow: 1px 1px 8px #000000; -webkit-box-shadow: 1px 1px 8px #000000;
overflow: hidden; overflow: hidden;
text-align: center;
text-decoration: none;
} }
div#corps div.element:hover { div#corps a.cadre:hover {
background-color: #000000; background-color: #000000;
color: #ffffff; color: #ffffff;
} }
div#corps div.element div.titre { div#corps a.cadre div.element {
height: 3em; height: 9em;
margin-top: 1em; margin-top: 1em;
text-align: center;
} }
div#corps div.element div.image { div#corps a.cadre div.element img {
height: 48px; margin-top: 2em;
margin: 1em 0 2em 0; margin-right: auto;
text-align: center; margin-left: auto;
}
div#corps div.element div.image img {
border: 0; border: 0;
} }
div#corps div.espace { div#corps div.espace {
clear: both; clear: both;
} }
div#cartable { div#cartable {

27
style/bicolore_sans_menu.css
View File

@ -88,9 +88,9 @@ div#corps div.ensemble_element {
min-height: 10em; min-height: 10em;
} }
div#corps div.element { div#corps a.cadre {
height: 9em; height: 9em;
width: 19ex; width: 11em;
margin: 0 5px 10px 5px; margin: 0 5px 10px 5px;
float: left; float: left;
border: thin solid #000000; border: thin solid #000000;
@ -101,31 +101,29 @@ border-radius: 15px;
box-shadow: 1px 1px 8px #000000; box-shadow: 1px 1px 8px #000000;
-webkit-box-shadow: 1px 1px 8px #000000; -webkit-box-shadow: 1px 1px 8px #000000;
overflow: hidden; overflow: hidden;
text-align: center;
text-decoration: none;
} }
div#corps div.element:hover { div#corps a.cadre:hover {
background-color: #000000; background-color: #000000;
color: #ffffff; color: #ffffff;
} }
div#corps div.element div.titre { div#corps a.cadre div.element {
height: 3em; height: 9em;
margin-top: 1em; margin-top: 1em;
text-align: center;
} }
div#corps div.element div.image { div#corps a.cadre div.element img {
height: 48px; margin-top: 2em;
margin: 1em 0 2em 0; margin-right: auto;
text-align: center; margin-left: auto;
}
div#corps div.element div.image img {
border: 0; border: 0;
} }
div#corps div.espace { div#corps div.espace {
clear: both; clear: both;
} }
div#cartable { div#cartable {
@ -186,3 +184,4 @@ padding: 0;
font-size: 10px; font-size: 10px;
text-align: center; text-align: center;
} }