souci d'affichage css

delph43 · 4 Décembre 2012

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

**captain_torche** · 4 Décembre 2012

Une page en ligne pour tester serait autrement plus efficace.

Aenoa · 4 Décembre 2012


.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.

delph43 · 4 Décembre 2012

.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.

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.

Aenoa · 4 Décembre 2012

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

(Aperçu final)

delph43 · 5 Décembre 2012

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"

delph43 · 6 Décembre 2012

L'attribut rel="stylesheet" précise que le document en question est une feuille de style externe.

Mouai donc rien à voir...

En gros, je veux que la feuille global.css ne s'applique qu' au menu onglet de la page http://www.chien-de-...ky-siberien.php pas au reste du site....

Aenoa · 6 Décembre 2012

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".

delph43 · 6 Décembre 2012

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 !

**Ernestine** · 6 Décembre 2012

Il faut mettre un espace entre #conteneur-menu et .menu :

#conteneur-menu .menu

**captain_torche** · 6 Décembre 2012

Effectivement, sinon ce style ne s'applique qu'à un élément ayant un id="conteneur_menu" ET un class="menu", ce qui n'est pas le cas dans ton code.

delph43 · 6 Décembre 2012

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é 6 Décembre 2012 par delph43

delph43 · 6 Décembre 2012

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...

**Ernestine** · 6 Décembre 2012

Dans global.css mets plutôt :

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

delph43 · 6 Décembre 2012

Dans global.css mets plutôt :
body {
font-size:1em;
height:100%;
margin:0;
padding:0
}

Ah oui en effet, c'est parfait cela fonctionne à présent : http://www.chien-de-france.fr/races-de-chiens/husky-siberien.php

Merci beaucoup pour votre aide à tous !!

delph43 · 6 Décembre 2012

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...

Aenoa · 6 Décembre 2012

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.

delph43 · 6 Décembre 2012

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

Aenoa · 6 Décembre 2012

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...

delph43 · 6 Décembre 2012

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://

Aenoa · 6 Décembre 2012

Ravi que le problème soit résolu

Connexion

souci d'affichage css

Sujets conseillés

delph43

captain_torche

Aenoa

delph43

Aenoa

delph43

delph43

Aenoa

delph43

Ernestine

captain_torche

delph43

delph43

Ernestine

delph43

delph43

Aenoa

delph43

Aenoa

delph43

Aenoa

Veuillez vous connecter pour commenter

Parcourir

Activité