Comprends pas ces codes CSS

fentuz · Message par **fentuz** » 01 mars 2006, 21:10

Salut,

J'essaie de faire un menu un peu complique pour mieux savoir coder.... Et la, je comprends pas comment modifier un code pour ajoute des liens dans la partie cachee (defini par des span)... Il me semble que la balise span elle meme est un partie du lien car elle est comprise entre<a> </a> .

Si je l'enleve... ca glisse plus... Comment dois je modifie le CSS pour ensuite modifier le html??? Ou l'inverse

Le code html

Code : Tout sélectionner

<!-- Menu special-->
<div id="info">
  <div class="curved">
    <div class="boxcontent">
      <ul id="menu">
        <li> 
         <a class="m5 five" href="#bb">
         <b class="m2">bbbb</b><br>
         <b class="m3">bbbbb</b>
         <span> blablabla</span>       <!-- Je mettre des liens ici-->
         </a> 
        </li>
        <li> 
          <a href="#dfdf"> 
          <b class="m3">dstbsg</b>
          <span> ertgwr </span>
          </a>
        </li>
        <li> 
          <a href="#tru">
          <b class="m3">sdtgvsdrf</b>
          <span>josdaj </span>
          </a> 
        </li>
        <li> 
          <a href="#dsvd"> 
          <b class="m3">sge</b> 
          <span>     wefewfwe </span> 
           </a> 
         </li>
      </ul>
      </div>
      </div>
<!-- Menu special fin --> </div>

Le code CSS

Code : Tout sélectionner

/*general*/
body {
    font-family: tahoma;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    background-image: url(picture/background.gif);
    background-attachment: fixed;
    background-color: #cccccc;
}
h1 {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    color: #80070d;
    font-size: 16px;
}
h2 {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
}
m2 {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    font-weight: bold;
}
m3 {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    font-weight: normal;
}
p {
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}
menu1 {
    font-family: Arial,Helvetica,sans-serif;
    display: inline;
    max-width: 150px;
    min-width: 100px;
    max-height: 30px;
    font-size: 12px;
}
menu2 {
    border-style: none;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    min-width: 80px;
    max-width: 100px;
    max-height: 30px;
    display: inline;
    margin-left: 30px;
}

/*glissant*/
#menu {
    margin: 0pt;
    padding: 0pt;
    background: #f0f0f0 none repeat scroll 0%;
    height: 450px;
    overflow: hidden;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
}
#menu li {
    list-style-type: none;
    float: left;
    display: block;
    width: 100%;
}
#menu li a {
    margin: 0pt;
    display: block;
    text-decoration: none;
    color: #0000bb;
    width: 100%;
}
#menu li a span {
    display: none;
    color: #000000;
}
#menu li a.one span {
    margin: 0pt 10px;
    display: block;
    height: 150px;
}
#menu li a:hover {
    background: #f1f1f1 none repeat scroll 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
}
#menu li a:hover span {
    margin: 0pt 10px;
    display: block;
    height: 150px;
    cursor: pointer;
}
#menu a {
    margin: 0pt;
    display: block;
    text-decoration: none;
    color: #0000bb;
    width: 100%;
}
#menu a span {
    display: none;
    color: #000000;
}
#menu a.one span {
    margin: 0pt 10px;
    display: block;
    height: 15em;
}
#menu a:hover {
    background: #f1f1f1 none repeat scroll 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
}
#menu a:hover span {
    margin: 0pt 10px;
    display: block;
    height: 15em;
    cursor: pointer;
}
#menu .m2 {
    border: 0pt none ;
    margin: 0pt 5px;
    padding: 0pt;
    color: #880088;
    font-variant: small-caps;
    font-size: 11px;
}
#menu .m3 {
    margin: 0pt 5px;
    padding: 0pt;
    font-size: 10px;
    color: #0000bb;
}
#menu img {
    border: 1px solid #000000;
    margin: 5px 5px 5px 0pt;
    float: left;
}

.curved {
  width:21em;
  }
.curved .b1, .curved .b2, .curved .b3, .curved .b4  {
  font-size:1px; 
  display:block; 
  background:#88c;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ 
}
.curved .b1, .curved .b2, .curved .b3 {
  height:1px;
  }

.curved .b2, .curved .b3, .curved .b4 {
    border-left: 1px solid #8888cc;
    border-right: 1px solid #8888cc;
    background: #f0f0f0 none repeat scroll 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
}
.curved .b1 {
    margin: 0pt 4px;
    background: #8888cc none repeat scroll 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
}
.curved .b2 {
    border-width: 0pt 2px;
    margin: 0pt 2px;
}
.curved .b3 {
    margin: 0pt 1px;
}
.curved .b4 {
    margin: 0pt;
    height: 2px;
}
.curved .c1 {
    margin: 0pt 5px;
    background: #8888cc none repeat scroll 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
}
.curved .c2 {
    border-width: 0pt 2px;
    margin: 0pt 3px;
}
.curved .c3 {
    margin: 0pt 2px;
}
.curved .c4 {
    margin: 0pt 1px;
    height: 2px;
}
.curved .boxcontent {
    border-left: 1px solid #8888cc;
    border-right: 1px solid #8888cc;
    background: transparent none repeat scroll 0%;
    display: inline;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    font-size: 10px;
    text-align: left;
}

calimo · Message par **calimo** » 01 mars 2006, 21:31

Bon, déjà évite d'imbrique des divs inutiles

Code : Tout sélectionner

<div id="info">
  <div class="curved">
    <div class="boxcontent">

Il y en a visiblement deux en trop. Fusionne les déclarations CSS et ne laisse que le <div id="info">

Deuxièmement, évite ce genre de menus qui s'ouvrent comme ça, c'est très désagréable. Arrivé en bas de "bbbb" je survole "dstbsg" et là d'un coup hop, tout bouge parce que "bbbb" s'est refermé. Mieux vaut limiter les déplacements aux actions de clic.

Ensuite, je ne comprend pas trop la structure de ce menu. Pourquoi des balises <b> ? Pourquoi dans le <a> ?
Je te conseille, comme c'est généralement le cas, de commencer par coder le contenu. Demandes-toi «qu'est-ce que je vais mettre dans ce menu». Mets-le. Fais un menu dans déroulement, qui fonctionne, qui ait une structure logique.
Et seulement une fois que la structure HTML est là, et pas avant, alors tu peux commencer à te poser la question : comment coder ça en CSS

Parce que là avec des <b>, des <span> et des "dstbsg" tu n'arrivera à rien

fentuz · Message par **fentuz** » 01 mars 2006, 21:51

La structure Html est deja faite mais je voulais pas alourdir le post...

Sinon, oui c'est pas terrible en mvt Over...je vais modifier

calimo · Message par **calimo** » 01 mars 2006, 21:55

Ben si la structure existe, ce serait pas mal de la poster, parce que tout ça me paraît bien obscure, je ne vois pas trop où tu veux en venir avec ce code

fentuz · Message par **fentuz** » 01 mars 2006, 22:21

voila:

Code : Tout sélectionner

     
<div style="text-align: left;">
    <menu1><a href="home.htm">Home</a><br></menu1> 
    <menu1><a href="search.htm">search</a><br></menu1> 
    <menu1><a href="book.htm">Book</a><br></menu1>
    <menu1><a href="service.htm">Service</a><br></menu1> 
         <menu2><a href="service/beltbearing.htm">Belts & Bearing</a><br></menu2>
          <menu2><a href="service/cooling.htm">Cooling System</a><br></menu2> 
          <menu2><a href="service/clutchgearbox.htm">Clutch &Gearbox</a><br></menu2>
          <menu2><a href="service/electrical.htm">Electrical</a><br></menu2>  
          <menu2><a href="service/filter.htm">Filters</a><br></menu2>   
          <menu2><a href="service/other.htm">Other</a><br> </menu2>     
     <menu1><a href="chassis.htm">Chassis</a><br> </menu1>
          <menu2><a href="chassis/brakes.htm">Brakes</a><br></menu2> 
          <menu2><a href="chassis/suspension.htm">Suspension</a><br></menu2>
     <menu1><a href="body.htm">Body</a><br></menu1> 
            <menu2><a href="body/cleaningcare.htm">Cleaning
& Cares</a><br> </menu2> 
            <menu2> <a href="body/hood.htm">Hoods
& Hardtops</a><br></menu2> 
            <menu2><a href="body/other.htm">Other</a><br></menu2> 
     <menu1><a href="interior.htm">Interior</a><br></menu1>
            <menu2><a href="interior/steering.htm">Steering</a><br>
      </menu2> <menu2><a href="interior/trim.htm">Trim</a><br>
            <menu2><a href="interior/electrical.htm">Electrical</a><br>
      </menu2> 

       <menu1><a href="car4sale.htm">Cars for sale</a><br></menu1> 
       <menu1><a href="contactus.htm">Contact us</a><br></menu1> 
</div>

Donc voila, l'idee est d'avoir le partie menu1 tjrs visible et que la barre de menu glisse pour laisser apparaitre les menu 2

Dans search, je vais mettre un truc de research type google (probablement deja tout fait...)

calimo · Message par **calimo** » 02 mars 2006, 08:16

Arf !
<menu1> et <menu2> ne sont pas des balises HTML

Je te conseille vivement de faire valider ta syntaxe par le validateur du W3C : http://validator.w3.org/

Au lieu de ça, tu dois plutôt utiliser des listes imbriquées :

Code : Tout sélectionner

<ul id="menu">
	<li><a href="home.htm">Home</a></li>
	<li><a href="search.htm">search</a></li>
	<li><a href="book.htm">Book</a></li>
	<li><a href="service.htm">Service</a>
		<ul>
			<li><a href="service/beltbearing.htm">Belts & Bearing</a></li>
			<li><a href="service/cooling.htm">Cooling System</a></li>
			<li><a href="service/clutchgearbox.htm">Clutch &Gearbox</a></li>
			<li><a href="service/electrical.htm">Electrical</a></li> 
			<li><a href="service/filter.htm">Filters</a></li>   
			<li><a href="service/other.htm">Other</a> </li>    
		</ul>
	</li>
	<li><a href="chassis.htm">Chassis</a>
		<ul>
			<li><a href="chassis/brakes.htm">Brakes</a></li>
			<li><a href="chassis/suspension.htm">Suspension</a></li>
		</ul>
	</li>
	<li><a href="body.htm">Body</a>
		<ul>
			<li><a href="body/cleaningcare.htm">Cleaning & Cares</a></li>
			<li><a href="body/hood.htm">Hoods & Hardtops</a></li>
			<lo><a href="body/other.htm">Other</a></li>
		</ul>
	</li>
	<li><a href="interior.htm">Interior</a>
		<ul>
			<li><a href="interior/steering.htm">Steering</a></li>
			<li><a href="interior/trim.htm">Trim</a></li>
			<li><a href="interior/electrical.htm">Electrical</a></li>
		</ul>
	</li>
	<li><a href="car4sale.htm">Cars for sale</a></li>
	<li><a href="contactus.htm">Contact us</a></li>
</ul>

Et comme CSS :

Code : Tout sélectionner

ul#menu {
	text-align: left;
}
#menu li ul {
	display:none;
}
#menu li:hover ul {
	display:block;
}

Par défaut, tous les <ul> contenus dans un <li> dans ton menu sont cachés (display:none). Sauf lorsque tu survoles le li, là tu as display:block

Edit : j'ai oublié de préciser que IE ne supporte pas li:hover mais ça se contourne avec du javascript (voir IE7 de Dean Edwards)

Geckozone

Comprends pas ces codes CSS

Comprends pas ces codes CSS

Qui est en ligne ?