28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bordure middle sur un titre possible?

Pages :
Bonjour,

Est-ce possible de faire ça en css? avec une simple règle?

Voici une image d'exemple:

upload/28211-Capturede7.png

Sinon une idée de comment faire?

Merci d'avance
Modifié par Blogger (13 Jul 2011 - 17:53)
lis des tutos css ou de la doc (genre css h1 sous google w3school) et adapte ce que tu trouve à ton besoin, car c'est trop basique pour qu'on te ponde du code tout fait. Smiley smile

Tu peux essayer de regarder du coté des background de titre et marge negative, positionement etc.

Edit : comme tu le dit dans ton titre il y aura un border quelques part Smiley cligne
Modifié par ptitvincent (12 Jul 2011 - 15:50)
Merci pour vos réponses rapides.

Je saurais le faire avec des images de fond, etc.

Mais je demande si il existe pas une règle css du genre:


h1 {
    border-middle: 1px solid #999;
}


??

Merci
Modifié par Blogger (12 Jul 2011 - 16:01)
tu n'as pas besoin d'image.. tu met ton h1 dans un div tu met un border bottom à ton div et tu met un margin-top Moins quelqueschose. franchement rien de compliqué.
moi je mettrai un hr dans la même div et on lui change son margin top (effet texte barré le hr après le h1, sinon le hr avant le h1 et modif de la marge du bas
Le problème avec vos solutions c'est que le hr ou la bordure va traverser mon titre, regardez mon image...
Blogger a écrit :
Le problème avec vos solutions c'est que le hr ou la bordure va traverser mon titre, regardez mon image...


yodaswii t'as donné la réponse à cette partie du problème...
Oui j'ai réussi avec ce code:


<h1><span>Mon titre</span></h1>




h1 {
    background: #424242 url("../img/fond-h1.png") repeat-x center;
}

h1 span {
    background: #424242;
}


Mais le problème c'est que j'aimerais comme sur mon image exemple...la bordure s'arrête à x pixels de chaque côté (elle touche pas les bords)....

En gros il y a pas de moyen simple pour faire cela...
Bonjour à toutes et à tous,

j'ai procédé avec une image de fond rouge avec, au milieu une ligne en noire. Voici l'image : upload/38115-image.PNG

Elle a exactement les dimensions de la boite conteneur. Et voici le code HTML + CSS : 
<!doctype html>
<html>
<head>
<title>test</title>
<style type="text/css">
body {
		background-color	: skyblue;
}

#boite {
		background-image	: url(image.png);
		background-repeat	: no-repeat;
		
		width				: 400px;
		height				: 100px;

		display				: table-cell;
		vertical-align		: middle;
		
		text-align			: center;
		font-family			: "arial";
		font-weight			: bolder;
		font-size			: 32px;
		font-style			: italic;

		padding				: 0 10px;
}

#boite span {
		background-color	: red;
		color				: black;
		padding				: 0 30px;
}

</style>
</head>

<body>
	<div id="boite"><span>bla bla bla bla</span></div>
</body>
</html>
Ce n'est qu'une ébauche mais je pense que le principe de ce que tu veux faire est là. Smiley cligne

@+
Modifié par Artemus24 (13 Jul 2011 - 17:18)
Blogger a écrit :
Je disais les côtés extérieurs...pas les bords du texte...j'ai oublié de préciser.


Mais sur ta maquette le trait touche bien les bords.

Sinon je pensais à un truc qui rejoins un peu l'idée de Vincent (sans utiliser d'image donc) :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
.machin {
	padding: 1em;
	background: #000;
}

.machin h1 {
	padding: 0;
	margin: 0 0 1em 0;
	border-bottom: 1px solid #fff; /* le filet */
	color: #fff;
	text-align: center;
}

.machin h1 span {
	padding: 0 15px;
	position: relative; /* on sort du flux */
	top: 0.5em; /* position par rapport au h1 */
	background: #000;
}
</style>
</head>

<body>

	<div class="machin">
		<h1><span>Mon titre</span></h1>
	</div>

</body>
</html>

Modifié par jb_gfx (13 Jul 2011 - 16:24)
Bonjour à toutes et à tous,

bien vu jb-gfx ! Smiley cligne

Pour faire un trait horizontal, dans un premier temps, j'ai pensé à la balise "<hr />" mais le plus difficile était de le centrer dans la boite et le mettre sous le texte. Puis j'ai adopté l'image en arrière plan.

Bien que Petit Vincent avait préconisée cette solution, je n'ai pas su comment utiliser la propriété CSS border.

@+
Modifié par Artemus24 (13 Jul 2011 - 17:15)
Bonjour,

il y aussi la piste du line-height + border-bottom et bien évidemment le span Smiley smile

Moyennant quelques corrections/surcharge pour Opéra et IEs pour se passer d'image.

code test avec une tite pointe de css3 pour coller un peu au screen.
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>simulacre border-middle ou striked-white-space </title>
  <style type="text/css" media="screen">
	body {background:#444;color:#999;text-shadow:0 0 2px #777;}
	h1 {font-weight:normal;font-style:italic;line-height:0;margin:1em 0;text-align:center;border-bottom:1px solid #777;box-shadow:0 0 2px #777;height:0;}
	h1 span {background:#444;padding:0 0.25em; line-height:0;vertical-align:middle;/* opera*/}
  </style>
  <!--[if ie ]><style>h1 span {position:relative;/* pour ie7 et inf */;vertical-align:auto;}</style><![endif]-->
</head>
<body>
	<h1><span>TEST TEST TEST TEST TEST TEST </span></h1>
</body>
</html>


Cordialement
jb_gfx a écrit :


Mais sur ta maquette le trait touche bien les bords.

Sinon je pensais à un truc qui rejoins un peu l'idée de Vincent (sans utiliser d'image donc) :


&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
.machin {
	padding: 1em;
	background: #000;
}

.machin h1 {
	padding: 0;
	margin: 0 0 1em 0;
	border-bottom: 1px solid #fff; /* le filet */
	color: #fff;
	text-align: center;
}

.machin h1 span {
	padding: 0 15px;
	position: relative; /* on sort du flux */
	top: 0.5em; /* position par rapport au h1 */
	background: #000;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

	&lt;div class=&quot;machin&quot;&gt;
		&lt;h1&gt;&lt;span&gt;Mon titre&lt;/span&gt;&lt;/h1&gt;
	&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;


Nice, ta solution fonctionne...du coup j'ai réussi avec une image de fond, je préfère utiliser une image de fond.


<div class="machin"> 
    <h1><span>Mon titre</span></h1> 
</div>




.machin {
    padding: 1px 10px 1px 10px;
     background: #424242;
}


.machin h1 {
    margin: 0;
    padding: 10px 0 10px 0;
    text-align: center;
    color: #a5a5a5;
    font-style: italic;
    background: #424242 url("../img/fond-h1.png") repeat-x center;
}

.machin span {
    background: #424242;
    padding: 0 10px;
}



Et voici à quoi ressemble le résultat:

upload/28211-captureok.png

Du coup problème résolu, merci pour votre aide/réponses.

[EDIT] Quoi que non, je vais plutôt utiliser la méthide avec "border", ça évite de charger une image en plus...
Modifié par Blogger (13 Jul 2011 - 17:58)
gc-nomade a écrit :

code test avec une tite pointe de css3


Ah on peut utiliser du CSS3 ? Smiley lol 


<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8" />
	<title>Test</title>
	<style type="text/css">
	h1 {
	padding: 0;
	margin: 0;
	color: #fff;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(49.4%, #000000), color-stop(49.5%, #ffffff), color-stop(50.5%, #ffffff), color-stop(50.6%, #000000), color-stop(100%, #000000));
	background: -moz-linear-gradient(top, #000000 0%, #000000 49.4%, #ffffff 49.5%, #ffffff 50.5%, #000000 50.6%, #000000 100%);
	background: -o-linear-gradient(top, #000000 0%, #000000 49.4%, #ffffff 49.5%, #ffffff 50.5%, #000000 50.6%, #000000 100%);
	}

	h1 span {
	padding: 0 15px;
	background: #000;
	}
	</style>
</head>

<body>
	<h1><span>Mon titre</span></h1>
</body>
</html>

Modifié par jb_gfx (13 Jul 2011 - 17:55)
Pages :
Sujet clos
Aller à