[Magi-X]

Salut,

Est-ce que quelqu'un peut me dire si c'est possible de faire comme l'image ci-dessous en css ?

J'en ai surtout sur le texte souligné, car un simple text-decoration: underline; met la ligne a la fin du "y".



Merci d'avance.

[Benjy]

Peut-être vec une balise HR placée judicieusement ?

[Magi-X]

Salut benjy,

Effectivement avec un HR c'est possible, d'ailleur après ton post je l'ai essaié et ça fontionne nickel sur Firefox mais internet explorer 7 ... bah c'est la cata.

Je dois travailler avec des positions absolute pour le HR et le petit texte "Spécialiste Cuisines", et le comportement n'est pas du tout le même sous IE7 (J'ose même pas essayer avec un IE < 7).

Le code html et css ci-dessous fonctionne parfaitement avec Firefox 2.x. Meme lors d'un [CTRL] + [SCROLL] ça s'agrendit comme il faut.

J'ai 2 sollution:

1. Je me casse la tête à le faire fonctionner sur la pluspart des browsers
2. Je laisse l'image, mais lors d'un zoom (sauf IE7) l'image ne s'agrendira pas.

<div id="introduction">
	<h1>Dekeyser SA</h1>
			
	<hr />
			
	<h2>Spécialiste en Cuisines</h2>
</div>

#introduction {
	margin: 5em auto; 
	width: 40em; 
}

#introduction h1 {
	font-family: verdena, serif;
	font-size: 4.8em;
	text-align: center;
	color: rgb(32, 65, 98);
}

#introduction h2 {
	font-family: verdena, serif;
	font-size: 1.1em;
	position: absolute;
	top:9em;
	color: rgb(32, 65, 98);
	margin: 0 0 0 19em;
}

#introduction hr {
	position: absolute; 
	top:8.68em; 
	border: rgb(32, 65, 98) thin solid; 
	width: inherit;
}

Firefox


IE 7

[Magi-X]

J'ai répondu trop vite ^^

J'ai réussi à le faire proprement pour que ça fonctionne en firefox et IE7 (les autres pas encore testé)

<div id="introduction">
	<h1>Dekeyser SA</h1>
			
	<div id="intro-underline">
		<hr />
	</div>
			
	<div id="intro-msg">
		<h2>Spécialiste en Cuisines</h2>
	</div>
</div>

#introduction {
	position: relative;
	width: 40em; 
	margin: 5em auto;
}

#introduction h1 {
	font-family: verdena, serif;
	font-size: 6em;
	font-weight: normal;
	line-height: normal;
	text-align: center;
	color: rgb(32, 65, 98);
}

#intro-msg {
	position: absolute; 
	top: 5.8em; 
	left: 0;
	right: 0;
}

#intro-msg h2 {
	font-family: verdena, serif;
	font-size: 1.1em;
	font-weight: normal;
	line-height: normal;
	color: rgb(32, 65, 98);
	text-align: right;
	padding-right: 4.5em;
}

#intro-underline {
	font-weight: normal;
	line-height: normal;
	position: absolute; 
	top: 5em; 
	left: 0;
	right: 0; 
}

#intro-underline hr {
	color: rgb(32, 65, 98);
	border: thin rgb(32, 65, 98) solid;
}

[Benjy]

Je te recommanderais quand même de paramétrer la taille et la position de ton logo en pixels, de sorte que tu n'aies pas de problèmes en cas de redimensionnement. Les em et les pourcentages c'est bien pour du texte standard. Pour des éléments tels que des logos et des menus, je conseille en général d'utiliser les pixels (et ça évite les [mauvaises] surprises).

[Magi-X]

Originally Posted by Benjy

Je te recommanderais quand même de paramétrer la taille et la position de ton logo en pixels, de sorte que tu n'aies pas de problèmes en cas de redimensionnement. Les em et les pourcentages c'est bien pour du texte standard. Pour des éléments tels que des logos et des menus, je conseille en général d'utiliser les pixels (et ça évite les [mauvaises] surprises).

Oui oui, mais ce n'est pas un logo ...

Je l'affiche sur la premiere page comme intro en grand ... donc il peut être redimensioné, ca ne pose pas de problème.