Besoin d'aide pour Finir mon Design ^^

Fermé
Oxery - 6 mai 2014 à 21:40
 Oxery - 9 mai 2014 à 22:27
Bonjours à tous et à toutes :)
Je suis le Webmaster de http://www.silver-winx.fr :)
Je viens ici, car j'ai besoin de votre aide. Voilà, j'ai mis en place un design,
J'ai fais une maquette Photoshop, et pour vous aider à visualiser, voilà à quoi j'aurais aimé que ça ressemble (A peu prêt.) :

http://http://nsa33.casimages.com/img/2014/05/06/140506092950855589.png


Voilà, le problème, c'est que j'ai essayé, et j'y ai passé un max de temps, de le faire, et je trouve que globalement, j'ai pas mal réussi, mais des bugs persiste toujours, et je n'ai aucune idée de comment les arranger. Je suis sur une plateforme, Kazéo, je ne sais pas si vous connaissez, qui implique un certain CSS, donc les . et tout ne peuvent pas être décalés car ça marche par Bloc.

Je vous énumère la liste des problèmes que je rencontre, et ensuite, je vous mets mon CSS, je compte sur vous vous êtes un peu ma dernière chance là xD ! Mercii :)


Alors, d'abord, les onglets du menu, je voudrais qu'ils soient séparés mais ils ne le sont pas :

http://nsa34.casimages.com/img/2014/05/06/140506094044863066.png

Je voudrais aussi que le menu déroulant soit séparé de l'onglet principal :

http://nsa33.casimages.com/img/2014/05/06/140506094150878665.png

Ensuite, je voudrais que l'ombre du titre de l'article, ne s'applique qu'au fond blanc, et pas que ça me fasse ce liserai rose autour du titre en lui même :

http://nsa33.casimages.com/img/2014/05/06/mini_140506094515557147.png

Voilà, je crois que c'est à peu prêt tout ;)

Voilà mon CSS, j'espère que ça vous aidera :

/**
 * Zone aspect general
 */
html, body {
 text-align: center;
 width: 100%;
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 font-family: arial;
 color: #ff008b;
 font-size: 12px;
}

a:link, a:visited {
 color: #ff008b;
 text-decoration: none;
 font-weight: normal;
 font-style: normal;
}

a:hover {
 color:#ff008b;
 text-decoration: none;
 font-weight: normal;
 font-style: italic;
}

input, textarea {
 margin: 5px 0 0 0;
 padding: 2px 3px 2px 3px;
}

select {
 margin: 5px 0 0 0;
 padding: 1px 2px 1px 2px;
}

form {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
}

#wrapper {
 text-align: left;
 position: relative;
 width: 990px;
 margin: 16px auto 16px auto;
 border: solid 1px transparent;
 border-width: 1px 1px 1px 1px ;
 background-color: ;
}

/**
 * Zone fond du blog
 */
body {
 background: transparent url(http://nsa34.casimages.com/img/2014/04/01/140401095224834536.jpg) no-repeat fixed center center;
}

/**
 * Zone date
 */
#date_zone {
 display: none;
 height: 35px;
 padding: 0 5px 0 5px;
 border: solid 1px #cacaca;
 border-width: 0 0 1px 0 ;
 line-height: 35px;
 background-color: #dddddd;
 font-family: arial;
 color: #666666;
 font-size: 12px;
 text-decoration: none;
 font-weight: normal;
 font-style: italic;
 text-align: right;
 letter-spacing: 0;
}

/**
 * Zone en-tete
 */
#header {
 position: relative;
 height: 320px;
 padding: 0 0 0 0;
 border: solid 0px transparent;
 border-width: 0 0 0 0 ;
 line-height: 320px;
 background: transparent url(http://nsa34.casimages.com/img/2014/04/01/140401110028497970.png) no-repeat  center center;
 font-family: arial;
 color: #ffffff;
 font-size: 32px;
 text-decoration: none;
 font-weight: bold;
 font-style: normal;
 text-align: center;
 letter-spacing: 0;
}

/**
 * Zone bloc central
 */
#content_wrapper {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 border: solid 0px ;
 border-width: 0 0 0 0 ;
 background-color: transparent;
}

/**
 * Zone colonnes
 */
#column1 {
 width: 250px;
 min-height: 250px;
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 border: solid 1px transparent;
 border-width: 0 0 0 0 ;
 background-color: transparent;
padding: 0px ;
text-align: center; width: 200px;
}

#column2 {
 width: 160px;
 min-height: 250px;
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 border: solid 1px transparent;
 border-width: 0 0 0 0 ;
 background-color: transparent;
}

.width_col1 {
 width: 250px;
}

.width_col2 {
 width: 160px;
}

/**
 * Zone menu principal
 */
.main_menu {
 padding: 4px 4px 4px 4px;
 border: solid 0px transparent;
 border-width: 0 0 0 0 ;
 background-color: transparent;

}

.main_menu td {
 width: 10%;
 height: 50px;
margin-right : 130px;
margin-left : 130px;
 border: solid 0px transparent;
 border-width: 0 0 0 0 ;
 line-height: 20px;
 text-align: center;
text-align: center;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: #b151aa 0px 0px 5px;
-moz-box-shadow: #b151aa 0px 0px 5px;
box-shadow: #b151aa 0px 0px 5px;
background: #FFFFFF;
}

.main_menu td.survol {
 height: 20px;
 margin: 10px;    
 border: solid 0px transparent;
 border-width: 0 0 0 0 ;
 line-height: 20px;
 text-align: center;
 padding: 0px;
text-align: center; 
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: #b151aa 0px 0px 5px;
-moz-box-shadow: #b151aa 0px 0px 5px;
box-shadow: #b151aa 0px 0px 5px;
background: #FFFFFF;
}

.main_menu td a:link, .main_menu td a:visited {
 font-family: georgia;
 color: #ff008b;
 font-size: 13px;
 text-decoration: none;
 font-weight: normal;
 font-style: italic;
 letter-spacing: 0;
}

.main_menu td.survol a:link, .main_menu td.survol a:visited {
 font-family: georgia;
 color: #ff008b;
 font-size: 13px;
 text-decoration: none;
 font-weight: normal;
 font-style: italic;
 letter-spacing: 0;
}

.main_menu td.survol a:hover {
 font-family: georgia;
 color: #ff008b;
 font-size: 13px;
 text-decoration: none;
 font-weight: bold;
 font-style: italic;
 letter-spacing: 0;
}

/**
 * Zone menu secondaire
 */
.second_menu {
 margin-right : 15px;
 padding: 6px 6px 6px 6px;
 border: solid 1px transparent;
 border-width: 1px 1px 1px 1px ;
 line-height: 20px;
 background-color: transparent;
 font-family: georgia;
 color: #ff008b;
 font-size: 12px;
 text-decoration: none;
 font-weight: none;
 font-style: normal;
 text-align: left;
 letter-spacing: 0;
}

.title_second_menu {
 height: 30px;
 padding: 3px 0 3px 0;
 line-height: 30px;
 font-family: georgia;
 color: #ff008b;
 font-size: 12px;
 text-decoration: none;
 font-weight: normal;
 font-style: italic;
 text-align: center;
 letter-spacing: 0;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: #b151aa 0px 0px 5px;
-moz-box-shadow: #b151aa 0px 0px 5px;
box-shadow: #b151aa 0px 0px 5px;
background: #FFFFFF;

}

.second_menu ul {
 text-align: left;
 list-style-type: none;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: #b151aa 0px 0px 5px;
-moz-box-shadow: #b151aa 0px 0px 5px;
box-shadow: #b151aa 0px 0px 5px;
padding: 4px 6px 4px 5px;
background: #FFFFFF;
}

.second_menu ul li {
 min-height: 20px;
 margin: 0 0 0 0;
 border:  1px transparent;
 border-width: 0 0 0 0 ;
 line-height: 20px;
 background-color: transparent;
}

.second_menu ul li.survol {
 min-height: 20px;
 line-height: 20px;
 background-color: transparent;
}

.second_menu ul li a:link, .second_menu ul li a:visited {
 font-family: georgia;
 color: #ff008b;
 font-size: 12px;
 text-decoration: none;
 font-weight: normal;
 font-style: italic;
 text-align: left;
 letter-spacing: 0;
}

.second_menu ul li a:hover {
 font-family: georgia;
 color: #ff008b;
 text-decoration: none;
 font-weight: normal;
 font-style: italic;
}

.footer_second_menu {
 height: 0px;
 background-color: transparent;
}

/**
 * Zone formulaires colonnes
 */
.second_menu input, .second_menu select {
 padding: 2px 3px 2px 3px;
 border: solid 1px #ff008b;
 border-width: 1px 1px 1px 1px ;
 background-color: #ffffff;
 font-family: georgia;
 color: #ff008b;
 font-size: 12px;
 text-decoration: none;
 font-weight: none;
 font-style: none;
 text-align: left;
 letter-spacing: 0;
}

.second_menu input.middle_button {
 margin: 5px auto 5px auto;
 padding: 3px 4px 3px 4px;
 border: solid 1px #ff008b;
 border-width: 1px 1px 1px 1px ;
 background-color: #ffffff;
 font-family: georgia;
 color: #ff008b;
 font-size: 12px;
 text-decoration: none;
 font-weight: bold;
 font-style: none;
 text-align: center;
 letter-spacing: 0;
}

/**
 * Zone de contenu
 */
.middle_content {
 margin: 0px;
 border: solid 1px transparent;
 border-width: 0 0 0 0 ;
 background-color: transparent;
}

.title_middle_content {

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: #b151aa 0px 0px 5px;
-moz-box-shadow: #b151aa 0px 0px 5px;
box-shadow: #b151aa 0px 0px 5px;
 min-height: 20px;
 margin: 15px;
 padding: 6px 6px 6px 6px;
 line-height: 20px;
 font-family: georgia;
 color: #ff008b;
 font-size: 12px;
 text-decoration: none;
 font-weight: normal;
 font-style: italic;
 text-align: center;
 letter-spacing: 0;
background: #ffffff;

}

.message_middle_content {
 margin-top: 15px;
 padding: 6px 30px 6px 30px;
 border:  0px transparent;
 border-width: 0 0 0 0 ;
 line-height: 16px;
 font-family: georgia;
 color: #ff008b;
 font-size: 12px;
 text-decoration: ;
 font-weight: ;
 font-style: ;
 letter-spacing: 0;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: #b151aa 0px 0px 5px;
-moz-box-shadow: #b151aa 0px 0px 5px;
box-shadow: #b151aa 0px 0px 5px;
background: #FFFFFF;

}

.comment_middle_content {
 height: 20px;
 padding: 6px 6px 6px 0;
 border: solid 1px transparent;
 border-width: 0 0 0 0 ;
 line-height: 20px;
 background-color: transparent;
 font-family: georgia;
 color: #ffffff;
 font-size: 12px;
 text-align: right;
 letter-spacing: 0;
}

.comment_middle_content a:link, .comment_middle_content a:visited {
 color: #ffffff;
 text-decoration: none;
 font-weight: normal;
 font-style: italic;
}

.comment_middle_content a:hover {
 color: #ffffff;
 text-decoration: none;
 font-weight: normal;
 font-style: italic;
}

.message_middle_content img {
 margin: 5px 8px 5px 8px;
 border: solid 1px ;
 border-width: 0 0 0 0 ;
}

.color_title_middle_content {
 color: #ff008b;

}

.color_message_middle_content {
 color: #ff008b;
}

.color_coms_middle_content {
 color: #ffffff;
}

.border_color_message_middle_content {
 border: solid 1px #ff008b;
 border-width: 1px 1px 1px 1px ;
}

/**
 * Zone des formulaires contenu
 */
.middle_content input, .middle_content textarea, .middle_content select {
 padding: 2px 3px 2px 3px;
 border: solid 1px #ff008b;
 border-width: 1px 1px 1px 1px ;
 background-color: #ffffff;
 font-family: georgia;
 color: #ff008b;
 font-size: 12px;
 text-decoration: none;
 font-weight: none;
 font-style: none;
 text-align: left;
 letter-spacing: 0;
}

.middle_content input.middle_button {
 margin: 5px auto 5px auto;
 padding: 3px 4px 3px 4px;
 border: solid 1px #ff008b;
 border-width: 1px 1px 1px 1px ;
 background-color: #ffffff;
 font-family: georgia;
 color: #ff008b;
 font-size: 12px;
 text-decoration: none;
 font-weight: bold;
 font-style: none;
 text-align: center;
 letter-spacing: 0;
}

/**
 * Zone bas
 */
#footer {
display: none;
 height: 35px;
 padding: 0 0 0 0;
 border: solid 1px #cacaca;
 border-width: 1px 0 0 0 ;
 line-height: 35px;
 background-color: #9e9e9e;
 font-family: arial;
 color: #ffffff;
 font-size: 12px;
 text-decoration: none;
 font-weight: bold;
 font-style: normal;
 text-align: center;
 letter-spacing: 0;
}

#footer a:link, #footer a:visited {
 font-family: arial;
 color: #ffffff;
 font-size: 12px;
 text-decoration: none;
 font-weight: bold;
 font-style: normal;
}

#footer a:hover {
 font-family: arial;
 color: #fff;
 font-size: 12px;
 text-decoration: underline;
 font-weight: bold;
 font-style: ;
}




Merci à tous ceux qui me répondront,
Cordialement,
Oxery - Webmaster de Silver Winx ;)

1 réponse

Utilisateur anonyme
7 mai 2014 à 02:51
Et avec la balise !important ça ne fonctionne pas ?
0
Le CSS fonctionne, c'est juste qu'il y a quelques dysfonctionnement dedans et qui m'empêche d'avoir ce que je veux :s
0
Personne pour aider ?
0