28172 sujets

CSS et mise en forme, CSS3

Un peu d'ordre dans mon code css / blog typepad / Education canine

Bonjour

Je déplace ma demande dans le topic du css.

J'ai créée un site/blog commercial d'éducation canine. Je recherche un peu d'aide si vous avez un peu de temps à me consacrer:

http://florentdubray.typepad.com/education_canine_lyon/

Concernant la rubrique témoignage qui se balade et le survol des liens, auriez-vous une solution technique ?

Pour le formulaire de newsletter qui dépasse, il faut que j'essaye de trouver un widget plus configurable mais avec ma largeur de colonne gauche et droite c'est pas facile !

Je met mon code CSS en copie, si une âme charitable veut bien y mettre un peu d'ordre ce serait sympa, car c'est vraiment du bricolage que je fais, n'ayant pas les connaissances techniques suffisantes, je copie par ci par là des bouts de codes css en espérant que ca marche, donc ca doit être le fouilli:

<head> 
<link rel="openid.server" href="http://www.openidfrance.fr/index.php" />
<link rel="openid.delegate" href="http://www.openidfrance.fr/florent_dubray" /> 
<\head>

#page { border: 1px solid #fff; }
#div1 { border: 1px solid #999; }
#div2 { border: 1px solid #888; }
#div3 { border: 1px solid #777; }
#div4 { border: 1px solid #666; }
#div5 { border: 1px solid #555; }
#div6 { border: 1px solid #444; }
#div7 { border: 1px solid #333; }
#div8 { border: 1px solid #222; }
#div9 { border: 1px solid #111; }  

.nav-list
{
background-color: #7acb16;
border-top: 0px solid #ffffff;
border-bottom: 1px solid #ffffff;
}

.nav-list-item
{
background-color: #7cca05;
border-right: 0px solid #e9ecd6;
}

.nav-list-item a
{
text-decoration: none;
color: #000000;
font-weight: bold;
font-family: Verdana;
font-size: 9pt;
font-weight: normal;
}
.nav-list-item a:hover
{
text-decoration: none;
background: #ffffff;
color: #034f2c;
font-weight: normal;
font-family: Verdana;
font-size: small;
font-weight: normal;
}

body {
background:#EAEBE5 url(http://florentdubray.typepad.com/Images/body_main.png) repeat-y scroll center top;
line-height:1;
margin:0;
}
.layout-three-column #container {
margin:0 auto;
padding:0;
position:relative;
width:900px;
}

.entry-header{
background:transparent url(http://florentdubray.typepad.com/Images/icone.gif) no-repeat scroll 0 0;
padding:0px 0 20px 30px;
}

#menu{
/*		margin:0 auto;*/
		width:700px;
		height:59px;
		background:url(http://florentdubray.typepad.com/Images/menu_034_bg.jpg) repeat-x;
	}
		#menu ul{
			list-style:none;
			margin:0 auto;
			width:500px;
		}
			#menu li{
				list-style:none;
				display:block;
				float:left;
				height:59px;
				line-height:59px;
			}
				#menu li a{
					display:block;
					float:left;
					color:#a7a7a7;
					text-transform:uppercase;
					font-size:11px;
					font-weight:bold;
					line-height:59px;
					text-decoration:none;
					padding:0 20px;				
				}
					#menu li a:hover{
						color:#fff;
						background:url(http://florentdubray.typepad.com/Images/menu_034_h.jpg) no-repeat bottom;
					}
				#menu li a.current{
					display:block;
					float:left;
					background:url(http://florentdubray.typepad.com/Images/menu_034_h.jpg) no-repeat bottom;
					color:#fff;
					text-transform:uppercase;
					font-size:11px;
					font-weight:bold;
					line-height:59px;
					text-decoration:none;
					padding:0 20px;	
				}
					#menu li a:hover.current{
						color:#fff;
					}


Merci à tous, je découvre le site c'est très sympa de pouvoir se faire aider par des personnes éclairées.


Florent
Salut,
a écrit :
Concernant la rubrique témoignage qui se balade et le survol des liens, auriez-vous une solution technique ?
Si tu ne veux pas que ta rubrique Témoignages passe à la ligne et se balade, fais en sorte qu'elle ait la place de rester sur la première ligne : largeur fixe pour tes <li> et/ou réduction de la taille de fonte et/ou réduction du padding, etc.

Si tu ne veux pas que tout se mette à danser quand tu survoles une rubrique, il te suffit, lors du survol, de ne pas toucher à des propriétés susceptibles de changer les dimensions du bloc (ton problème, actuellement, est le changement de font-size de 9pt à small).
Sujet clos
Aller à