Aller au contenu

souci d'affichage css


delph43

Sujets conseillés

Bonjour,



J'ai voulu mettre un menu à onglet, seulement je ne trouve pas comment limiter la barre grise en dessous des onglets ?


C'est dans le css c'est sûr mais je trouve pas comment faire pour limiter cette barre :



body {
font-size:1em;
width:800px;
height:100%;
margin:0 20px;
padding:0
}

.menu {
line-height:27px;
list-style:none;
width:100%;
height:27px;
border-bottom:#a7a7a7 solid 5px;
background-color:#fff;
margin:10px 0 0 0
}

.menu li {
float:left;
margin-left:10px
}

.menu li a {
color:#aaa;
font-size:.8em;
font-family:arial, verdana, sans-serif;
text-align:center;
text-decoration:none;
line-height:27px;
height:27px;
display:block;
float:left;
padding:0 0 0 7px;
cursor:pointer
}

.menu li a span {
float:left;
display:block;
padding:0 14px 0 7px
}

.menu li.actif a {
color:#fff;
background:url(../images/onglet.png);
}

.menu li.actif a span {
background:url(../images/onglet.png) no-repeat right top;
}

.menu li a:hover {
color:#fff;
background:url(../images/onglet.png);
}

.menu li a:hover span {
background:url(../images/onglet.png) no-repeat right top;
}

De plus, en haut de mon site cette barre réaparée, donc je pense que dans le style.css du site il y a quelque chose qui porte le même nom mais quoi pour que je le change ? et que je n'ai plus ce souci.



Ma feuille de style.css pour le design du site :



body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

td, tr, th {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#535a4e;
}

img {
border:0px;
}

img.border {
border:1px solid #b2bda8;
}

form {
margin:0px;
}

table.height {
height:100%;
}

td.menu {
background-image:url(images/menu_bg.gif);
background-position:left top;
background-repeat:repeat-x;
height:76px;
}

td.footer {
background-image:url(images/footer_bg.gif);
background-position:left top;
background-repeat:repeat-x;
padding-top:30px;
padding-right:103px;
padding-left:42px;
height:56px;
}

td.friend {
background-image:url(images/friend_bg.gif);
background-position:left top;
background-repeat:repeat-x;
padding-top:42px;
height:313px;
}

td.gallery {
background-image:url(images/gallery_bg.gif);
background-position:left bottom;
background-repeat:repeat-x;
}

td.left {
background-image:url(images/left_bg.gif);
background-position:left top;
background-repeat:repeat-x;
height:306px;
}

td.right {
background-image:url(images/right_bg.gif);
background-position:left top;
background-repeat:repeat-x;
height:306px;
}

td.customer {
background-image:url(images/customer_bg.gif);
background-position:right top;
background-repeat:no-repeat;
text-align:justify;
padding-right:20px;
padding-left:40px;
height:158px;
}

td.customer2 {
background-image:url(images/customer_bg.gif);
background-position:right top;
background-repeat:no-repeat;
text-align:justify;
padding-right:20px;
padding-left:50px;
height:158px;
}

td.right_pic {
background-image:url(images/right_pic.jpg);
background-position:left top;
background-repeat:no-repeat;
padding-top:20px;
height:306px;
}

td.right_pic2 {
background-image:url(images/cont_pic.jpg);
background-position:left top;
background-repeat:no-repeat;
padding-top:20px;
height:306px;
}

td.about_pic {
background-image:url(images/about_pic.jpg);
background-position:left top;
background-repeat:no-repeat;
height:326px;
padding-top:20px;
}

td.gal {
background-image:url(images/gallery_pic.jpg);
background-position:left top;
background-repeat:no-repeat;
height:326px;
padding-top:20px;
}

.green {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#2a695e;
}

.green_link {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#2a695e;
text-decoration:none;
}

.green_link:hover {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#2a695e;
text-decoration:underline;
}

.green_link2 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#2a695e;
text-decoration:underline;
}

.green_link2:hover {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#2a695e;
text-decoration:none;
}

.orange {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#fba81e;
font-weight:bold;
text-decoration:none;
}

.more {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#fba81e;
font-weight:bold;
text-decoration:underline;
}

.more:hover {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#fba81e;
font-weight:bold;
text-decoration:none;
}

.input {
background-color:#f0f5e6;
border:1px solid #c5d0bb;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color#535a4e;
padding-left:3px;
width:359px;
height:23px;
}

.area {
background-color:#f0f5e6;
border:1px solid #c5d0bb;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color#535a4e;
padding-left:3px;
width:359px;
height:63px;
overflow:auto;
}

.send {
background-image:url(images/send.gif);
border:0px;
width:78px;
height:28px;
cursor:pointer;
margin-top:4px;
}

.clear {
background-image:url(images/clear.gif);
border:0px;
width:79px;
height:28px;
cursor:pointer;
margin-top:4px;
}

Une image pour que vous puissiez voir :


http://www.casimages.com/img.php?i=121204041416560370.jpg


Lien vers le commentaire
Partager sur d’autres sites

.menu {

line-height:27px;

list-style:none;

width:100%;

height:27px;

border-bottom:#a7a7a7 solid 5px;

background-color:#fff;

margin:10px 0 0 0

}

le "width: 100%" défini qu'il prendra jusqu'a la fin de la zone de la page. Et vu que tu défini un border-bottom, la bordure s'affiche jusqu'a la fin, même sans menu :)

le te conseille de faire une autre dimension ou de gérer ça de manière dynamique.

Lien vers le commentaire
Partager sur d’autres sites


.menu {

line-height:27px;

list-style:none;

width:100%;

height:27px;

border-bottom:#a7a7a7 solid 5px;

background-color:#fff;

margin:10px 0 0 0

}

le "width: 100%" défini qu'il prendra jusqu'a la fin de la zone de la page. Et vu que tu défini un border-bottom, la bordure s'affiche jusqu'a la fin, même sans menu smile.gif

le te conseille de faire une autre dimension ou de gérer ça de manière dynamique.

Ah oui en effet, c'est bien ça :-) moi j'avais essayé mais dans le body. Je viens de mettre 70% au lieu de 100% et c'est parfait.

Par contre, toujours le souci pour la barre en haut grise qui ne devrait pas s'afficher : http://www.chien-de-france.fr/races-de-chiens/husky-siberien.php

Il n'y a pas le reste des images normal car je n'ai pas finit j'essais d'améliorer ça.

Lien vers le commentaire
Partager sur d’autres sites

c'est à cause de ceci, ligne 19 du code source final:



<td align="center" class="menu">

Vu que tu créer un élément de classe menu, il va aussi hériter des paramètres .menu, donc bordure + taille max etc



tu peux par exemple créer une autre classe (a ajouter au class="menu", ex: class="menu noborder") (dans ce cas ci, .noborder) qui supprime la propriété des borders.



ou encore plus "bourrin", directement dans le code html.



idée 1: dans le css



// Fichier CSS
.noborder
{
border:none;
}

// Fichier PHP, contenu de la balise <td> contenant les images diverses du header
class="menu noborder"


idée 2, à la bourrin:




<td align="center" class="menu" style="border:none;"> [...]




Walah Walah smile.gif



(Aperçu final)



aaa10.png


Lien vers le commentaire
Partager sur d’autres sites

Arf je viens de m'apercevoir quand touchant le



width:100%;

en mettant 70% et bien cela à aussi touché au design sur les côtés....



Je viens de voir aussi qu'il y a le même nom ici sur mon header.php (rel="stylesheet") le problème vient surment de là aussi :



<link href="style.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" media="screen" type="text/css" href="../races-de-chiens/style/global.css" />

J'ai mis ce que tu m'as dit et cela fonctionne pour la barre grise :


// Fichier CSS


menu.noborder { border:none; }



// Fichier PHP, contenu de la balise <td> contenant les images diverses du header


class="menu noborder"


Lien vers le commentaire
Partager sur d’autres sites

tu peux par exemple définir l'arborescence requise pour le css:



<div id="conteneur-menu">
<div class="menu">ton menu</div>
</div>


dans le css ça donnera:



#conteneur-menu .menu
{
// Valeurs CSS qui ne doivent être affichées que dans la classe "menu"
// se trouvant dans la id "conteneur-menu".
}


Et tout ce que tu aura mis dedans ne sera affecté au html QUE si la classe .menu se trouve dans une id parente nommée "conteneur-menu".


Lien vers le commentaire
Partager sur d’autres sites

Ok je comprends le principe mais je n'arrive pas à l'appliquer.



Dans style/globall.css j'ai mis ceci :



.menu {
line-height:27px;
list-style:none;
width:70%;
height:27px;
border-bottom:#a7a7a7 solid 5px;
background-color:#fff;
margin:10px 0 0 0
}

#conteneur-menu.menu
{
line-height:27px;
list-style:none;
width:70%;
height:27px;
border-bottom:#a7a7a7 solid 5px;
background-color:#fff;
margin:10px 0 0 0
}

Et ceci sur ma page php :




<div id="conteneur-menu">
<div class="menu">
<ul class="menu">
<li class="actif"><a href="#nogo"><span>Description</span></a></li>
<li><a href="#nogo"><span>Elevages</span></a></li>
<li><a href="#nogo"><span>+ de photos</span></a></li>
<li><a href="#nogo"><span>Commentaires</span></a></li>
</ul>
</div>
</div>

Cela ne change rien...un peu casse tête ce css lol !


Lien vers le commentaire
Partager sur d’autres sites

J'ai fait les 2 en faite et cela ne fonctionne pas quand même, même en mettant l'espace.



Pour voir la diférence entre les 2 pages : http://www.chien-de-france.fr/about.html


et là : http://www.chien-de-france.fr/races-de-chiens/husky-siberien.php ou le design sur les côtés a été touché, une marge blanche sur les côtés...


Modifié par delph43
Lien vers le commentaire
Partager sur d’autres sites

Arf je viens de voir que c'est dès que je rajoute ceci sur ma page header.php :



<link rel="stylesheet" media="screen" type="text/css" href="../races-de-chiens/style/global.css" />

si je l'enlève je n'ai plus de problème de marge, seulement après cela ne fonctionne plus pour mon menu onglet ici : http://www.chien-de-france.fr/races-de-chiens/husky-siberien.php



Arf...je cherche....je cherche...pissed.gif


Lien vers le commentaire
Partager sur d’autres sites

J'ai une autre question, j'ai donc découpé mon site en 3 parties : header.php, index.php, et footer.php


Le design suit bien sur toutes les pages mais à partir du moment où je créé un dossier et bien je dois remettre la feuille de style.css et le dossier avec les images du design à chaque fois dedans.


Si j'ai 30 ou 40 dossiers je trouve ridicule de devoir mettre dedans à chaque fois car le jour ou je vais vouloir modifier le design du site et bien je vais devoir modifier ça dans tous les dossiers...



Donc si je supprime la feuille de style.css que j'avais remise dans le dossier www/races-de-chiens et le dossier images, et bien cela ne suit pas comme sur la page index.php du site.



D'où ma question comment faire suivre le style.css et le dossier images sans avoir à y remettre à chaque fois dans chaque dossier ?



J'espère que vous comprendrez ce que je veux dire...sick.gif


Lien vers le commentaire
Partager sur d’autres sites

Je n'ai pas bien compris... tu a remis ton .css et dossier d'images a la racine, et tu ne veux pas le mettre dans chaque dossier du site?



Si c'est le cas, tu doit définir dans les dossiers que le .css se trouve au dossier parent, en ajoutant "../" devant le nom du fichier.


Lien vers le commentaire
Partager sur d’autres sites

Je n'ai pas bien compris... tu a remis ton .css et dossier d'images a la racine, et tu ne veux pas le mettre dans chaque dossier du site?

Si c'est le cas, tu doit définir dans les dossiers que le .css se trouve au dossier parent, en ajoutant "../" devant le nom du fichier.

Oui voilà tout est à la racine.

Je peux le mettre dans chaque dossier du site mais je ne trouve pas ça très pratique si je dois changer la charte graphique dans 1 an.

Je viens de mettre ../ mais je n'ai pas toutes les images qui suivent.

Regarde : http://www.chien-de-france.fr/races-de-chiens/husky-siberien.php

Lien vers le commentaire
Partager sur d’autres sites

d'accord, je vois.



ça me parait embêtant, en effet... peut-être en mettant les images (liens dans le css) en url absolue et non relative (http:// ... au lieu de images/...) mais ça ne fais pas très propre...

Lien vers le commentaire
Partager sur d’autres sites

C'était tout bête en faite.


C'était directement dans la page php elle même, exemple au lieu de <a href="index.php"><img src="images/button_home.jpg" alt="" width="151" height="76"></a>


et bien fallait mettre : <a href="index.php"><img src="../images/button_home.jpg" alt="" width="151" height="76"></a>



Donc pas besoin de toucher à la page CSS où cela n'aurait pas fait très propre en effet de mettre http://


smartass.gif

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...