5568 sujets

Sémantique web et HTML

Probleme de mise en page lié a une police ?

bonsoir,

je suis en train de me faire un petit bouton et je ne comprends pas quel propriété de la police de style Verdana me décale tout ...

Je précise que si je ne met pas de police ni de taille au texte je n'ai aucun soucis ...

merci de votre aide


voici mon code :

.bdg1 {
	background-image: url(images/developpement-photo_01.gif);
	background-repeat: no-repeat;
	background-position: left;
	height:16px;
	width:2px;
	float:left;
}
.bdg2{
	background-image: url(images/developpement-photo_03.gif);
	background-repeat: repeat-x;
	background-position: left;
	height:16px;
	width:100px;
	float:left;
}
.bdgtxt{
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	font-size: 10px;
	}
.bdg3 {
	background-image: url(images/developpement-photo_05.gif);
	background-repeat: no-repeat;
	background-position: left;
	height:16px;
	width:20px;
	float:left;
}
#bdg a{
	color: #FFFFFF;
	text-decoration: none;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}


voici l'aperçu upload/14472-bouton.gif
Modifié par mims1664 (08 Jul 2008 - 20:35)
Oui pardon si je retire le div du texte :
<div id="bdg">
<div class="bdg1"></div>  
<div class="bdg2"><a href="">Acc&egrave;der au site</a></div>
<div class="bdg3">&nbsp;</div>
</div>


en retirant bdgtxt c'est bien de cela que tu parles ??
je vois pas ce que l'on peut faire de mieux par contre cela ne résoud pas mon soucis de mise en page ... je trouve pas la propriété qui permet de regler la hauteur ...
mims1664 a écrit :
en retirant bdgtxt c'est bien de cela que tu parles ?

Non, je parle de tout effacer et de recommencer en visant une solution plus simple et plus robuste. Par exemple en partant du code HTML suivant:
<a class="bouton" href="#"><span>Accéder au site</span></a>
Ok merci pour l'indice, je vois ce que tu veux me proposer mais se sera un bouton a largeur fixe !! avec pour la classe bouton en image de fond mon image de bouton! c'est ca ?

je désirais faire un bouton à longueur variable !
Hello,
mims1664 a écrit :
...mais se sera un bouton a largeur fixe !! avec pour la classe bouton en image de fond mon image de bouton! c'est ca ?

je désirais faire un bouton à longueur variable !
Non, non ! Ce sera bien un bouton à largeur variable Smiley cligne !

C'est d'ailleurs à cela que sert l'ajout du <span> (<-- deuxième indice Smiley lol )
ho ho ho je crois avoir trouvé l'énigme !

- les images de bord droit et gauche en dur
- et l'image de fond sur la balise <a>

en tout cas ca fonctionne plutot bien comme ca .... 


<a class="bouton" href="#"><img src="images/developpement-photo_01.gif" border="0"><span>Accéder au site</span><img src="images/developpement-photo_05.gif" border="0"></a>





.bouton{
	color: #00FF00;
	background-image: url(images/developpement-photo_04.gif);
	background-repeat: repeat-x;
	height:16px;
	text-decoration: none;
	}

.bouton span{
	margin-bottom:5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	font-weight: bold;
	vertical-align: 40%;
	}


Alors ?
Modifié par mims1664 (09 Jul 2008 - 15:04)
mims1664 a écrit :
ho ho ho je crois avoir trouvé l'énigme !

Hmm... raté.

mims1664 a écrit :
les images de bord droit et gauche en dur

Ben non, parce que là tu changes le code HTML proposé, pour le coup.
Encore une fois, je disais que tu peux t'inspirer de ceci:
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Il s'agit de faire la même chose à l'horizontale plutôt qu'à la verticale, en utilisant deux éléments imbriqués (le A et le SPAN) comme support des images de fond.

On peut même travailler avec une image de fond unique, de largeur suffisante, et faire quelque chose du genre:
a.bouton {
	float: left;
	padding:l 0 10px 0 0;
	background: url(bouton.png) no-repeat right top;
}
a.bouton span {
	display: block;
	padding: 4px 0 4px 10px;
	background: url(bouton.png) no-repeat left top;
}


En passant, Verdana, Arial, sans-serif c'est une mauvaise famille de polices. La différence (de volume à corps égal) entre Verdana et Arial (ou Helvetica) est trop importante. Bistream Vera Sans et Lucida Grande sont de meilleurs substituts pour Verdana.
avec cette technique

http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
je n'obtiens rien de correcte après je m'y prend peut être mal !

voici mon code 


.boite {
	height: 16px;
	background-position: left center;
	background-color: white;
	background-image: url(images/btn.gif);
	background-repeat: no-repeat;
}

.boite a {
	margin: 0;
	background-position: left center;
	background-image: url(images/developpement-photo_01.gif);
	background-repeat: no-repeat;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
}


et mes images :
upload/14472-btn.gif

et
upload/14472-developpem.gif

le restultat n'est pas terrible car a gauche l'arrondi n'est pas net loin de la meme et la longueur n'est pas ajustable automatiquement
Page en ligne?

Je vois déjà une erreur dans ton essai, mais il y en a peut-être d'autres.
mims1664 a écrit :
le restultat n'est pas terrible car a gauche l'arrondi n'est pas net

C'est normal, tu as découpé une image de 3px de large et 16px de haut. Pour un arrondi bien propre et circulaire, il t'aurait fallu au moins 8px de large! Smiley rolleyes

mims1664 a écrit :
et la longueur n'est pas ajustable automatiquement

Elle l'est dans l'exemple de code que je donne plus haut.

Je crois que tu as de grosses lacunes en CSS, notamment à propos:
- des types de rendu (display), du comportement flottant (float);
- de l'utilisation du padding;
- de l'utilisation des images de fond (et notamment de background-position).

Du coup tu n'arrives pas à adapter des solutions somme toute assez «simples».
A qui le dis tu !!!!je débute dans le css je bidouille je n'ai pas assez d'expérience pour mémoriser toutes ces propriétés c'est trop complexe a mon gout!

sinon je vais me faire un tableau classique !c'est pas tres propre mais c'est efficace et fiable !
Ce n'est ni efficace ni fiable, les tableaux. C'est même deux des plus gros défauts que je leur ferais.

J'ai aussi galéré au début, mes premiers sites étaient une catastrophe avec les flottants, les fusions de marge et autre, et je continue de bidouiller maintenant alors que ça fait quand même un bon moment...

Mais jamais je n'imaginerais utiliser des tableaux Smiley cligne

Il faut que tu gardes confiance en toi et que tu te dises que tu peux le faire. Si tu as suivi jusqu'ici c'est sans doute que tu penses que ça vaut le coup de se mettre à jour, non?
Je suis tout a fait d'accord avec toi et je sais que ma réflexion est mauvaise mais je n'ai pas énormément de temps eja pour développer, et apprendre la CSS .... c'est sans fin !!! LOL

et j'avoue que j'ai un amis qui me dit sans cesse "tu t'embetes bien avec ta css" google il s'en fou !

mon avis est partagé j'ai envie de faire mon site en css mais il ne fait pas perdre trop de temps sur un bouton !

je me suis arreté la :
ok pour internet explorer et pas ok pour firefox, je verrais plus tard pour m'y remettre ...
http://r12586.ovh.net/~developp/index.php?page=tousleslabos&plab=info

<div style="width:150px; float:left"><a class="bouton" href="#"><img src="images/developpement-photo_01.gif" border="0"><span>Accéder au site</span><img src="images/developpement-photo_05.gif" border="0"></a></div>

.bouton{
	color: #00FF00;
	background-image: url(images/developpement-photo_04.gif);
	background-repeat: repeat-x;
	height:16px;
	text-decoration: none;
	}

.bouton span{
	margin-bottom:5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	font-weight: bold;
	vertical-align: 40%;

	}


ca me semblais pas trop mauvais (mais juste pour moi.... LOL)
Modifié par mims1664 (16 Jul 2008 - 19:24)
Sujet clos
Aller à