28173 sujets

CSS et mise en forme, CSS3

[résolu] Faire une en-tête de section avec des images

Bonjour,

Je suis tout nouveau sur alsacreations! Donc une petite présentation s'impose. Je suis une ingé développement (C/C++, etc..) et le web design est un de mes passe-temps. Je fais mon site avec des potes, je m'occupe du code et eux s'occupe de faire vivre le site (bon c'est pas un super site, mais il permet d'avoir un endroit où on peut discuter sachant qu'on est tous parti un peu partout dans le monde à la fin de nos études). Le but du site est de faire une page d'accueil un peu plus fun que la simple page de Google (donc rien de bien prétentieux Smiley smile ). Et je met un point d'honneur à respecter autant que possible les standards du web.

Voilà, fini les présentations! Donc j'ai déjà touché pas mal au CSS, sans être non plus une brutasse, j'arrive à me débrouiller Smiley lol Et pourtant, j'ai toujours ce même problème, qui doit sans doute plus venir de moi que du CSS Smiley langue

J'ai bien sûr essayé de rechercher sur les différentes FAQ et autres forums, mais j'avoue être un peu perdu car les réponses sont jamais exactement ce que je recherche et quand j'essaye de fusionner deux solutions, c'est la lose! Smiley lol

J'aimerai créer des en-têtes de section avec des images et non plus des propriétés de base ("border-bottom: 2px slashed gray", etc...), le tout sans utiliser de tableaux qui alourdissent le code et le rend illisible.
J'ai cru comprendre que le principe serait de mettre deux images (gauche et droite de l'en-tête) et un élément au milieu qui repeat-x le background.

J'ai fais ça pour le moment:
<div class="section">
	<h1>
		<img src="./images/section-header-left.png" class="left" />
		<img src="./images/section-header-right.png" class="right" />
		News
	</h1>
	<div class="text">
</div>

div.section h1
{
	height: 20px;
	background-repeat: repeat-x;
	background-image: url('../images/section-header-back.png');
	padding: 0px;
	margin: 0px;
	text-align: left;
	font-size: x-small;
}


div.section h1 img.left
{
	padding: 0px;
	margin: 0px;
	float: left;
}

div.section h1 img.right
{
	padding: 0px;
	margin: 0px;
	float: right;
}


C'est ce que j'ai réussi à obtenir de plus proche de ce que je veux, mais c'est insuffisant... Déjà, les images de bords étant transparentes au niveau des arrondis, elles laissent paraître le background du h1 :s
En plus, le texte s'affiche à la suite de ma première image...
Cerise sur le gâteau, le texte n'est pas centré verticalement (mais j'ai vu des tuto pour ça...)

Donc voilà, si vous avez l'âme généreuse pour me faire comprendre qu'est-ce qui cloche dans ma logique, je vous en serait éternellement reconnaissant Smiley smile
Modifié par Creak (01 Apr 2007 - 12:44)
Bonjour,

Si j'ai bien compris, j'aurais bidouillé un truc dans ce genre

<title>Test</title>
<style type="text/css">	
*{padding: 0; margin: 0;}

#conteneur{
position: relative;
height: 50px;
background: yellow;
font-family: tahoma;
font-size: 0.9em;	
color: blue;
margin: 50px 50px 0 50px;
}

#image_gauche{
position: absolute;
width: 50px;
height: 50px;
left: -50px;
top: 0;
background: blue;
}

#image_droite{
position: absolute;
width: 50px;
height: 50px;
right: -50px;
top: 0;
background: green;
}

h1{
text-align: center;
font-size: 2em;
line-height: 1.7em;
}
</style>
</head>

<body>

<div id="conteneur">
	 <div id="image_gauche">
	 </div>
	 <div id="image_droite">
	 </div>	
	 <h1> Titre</h1>
</div>
</body>
</html>


Pour pour l'exemple, il n'a y a pas d'image Smiley cligne
Euh... bah ouais... c'est ça!
J'ai juste changé ton code mettant les images, ça donne exactement ce que je veux. Maintenant il faut que je l'insère dans mon site pour voir si ça marche toujours.

Je me suis juste pris la tête dessus pendant plus de 5h Smiley bawling
C'est quoi la technique entre les "relative" et les "absolute"? parce qu'à chaque fois que j'ai essayé, je me retrouvai avec les bords de mon cadre collés aux bordures de la fenêtre de mon navigateur.

Merci énormément! J'étais à deux doigts d'utiliser des tableaux...
Je commence à comprendre... tu crées un header avec les marges suffisantes pour faire passer les images de gauche et de droite.

Si on veut que le texte soit aligné à gauche (et qu'il s'écrive au dessus de l'image de gauche), il faut rajouter un "position: relative; left: -40px;" sur la balise <p>, c'est bien ça?

Edit> Ah bah nan... ça ne fait que décaler le bloc sur la gauche...
Modifié par Creak (31 Mar 2007 - 18:55)
Re,

Pour les positionnements, fais un tour là

Non pour ton texte sur l'image de gauche ton <p>, il faut le positionner en absolute par rapport à ton bloc header qui est lui positionné en relative et après jouer avec les z-index celui du texte supérieur à celui de l'image...
Modifié par ghost (31 Mar 2007 - 18:58)
T'as raison... j'ai fait un "position: absolute; left: -40px; right: -40px" et ça marche.
Pas besoin des z-index car <h1> est le dernier du flux donc forcément le dernier affiché (enfin sauf si sur IE c différent ou si y'a encore un truc que j'ai pas compris...)

Merci encore!
Voilà le code pour faire un cadre/header avec le texte aligné à gauche avec une marge de 10px (+ un petit [résolu]).

*{padding: 0; margin: 0;}

.section{
width: 50%;
margin: auto;
}

.header{
position: relative;
height: 20px;
background-color: yellow; // mettre l'image de fond.
font-family: tahoma;
font-size: 0.9em;	
color: blue;
margin: 50px 20px 0 20px;
}

.image-left, .image-right{
position: absolute;
width: 20px;
height: 20px;
background: no-repeat;
}

.image-left{
left: -20px;
top: 0;
background-color: red; // mettre l'image de gauche.
}

.image-right{
right: -20px;
top: 0;
background-color: green; // mettre l'image de droite.
}

h1{
position: absolute;
left: -10px;
right: -10px;
text-align: left;
font-size: 14px;
line-height: 1.7em;
}

<div class="section">
	<div class="header">
		 <div class="image-left"></div>
		 <div class="image-right"></div>	
		 <h1>Titre de la section</h1>
	</div>
</div>
Sujet clos
Aller à