28220 sujets

CSS et mise en forme, CSS3

Alignement et centrage horizontal d'un texte

bonjour,
voila,j'ai un header extensible avec une image a gauche et une a droite (positionnées en float) et je voudrais avoir le texte "LA MI DES VENTS" centré entre les 2 images et qui s'adapte a toute les resolutions
comment faire?

css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Largeur fluide, header/menu gauche/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 160px;
background-color: #99CCCC;
background-image: url("C:/Documents and Settings/Marc/Bureau/brown123.gif")
}
.image1 {
display: block;
float: left;
margin-left: 10px;
}
#header p {
position: absolute;
font-size: 3.7em;
font-weight: bold;
color: #BC997E;
text-align: center;
line-height: 120px;
}
.image2 {
display: block;
float: right;
margin-right: 10px;
}

#conteneur {
position: absolute;
width: 100%;
background-color:#BC997E;


xhtml:


<body>

<div id="conteneur">

<div id="header">
<img src="gif/trumpet61-det.gif" class="image1" />
<p>LA MI DES VENTS</p>
<img src="gif/sax3.52jpg-det.gif" class="image2" />
</div>

merci d'avance
Modifié par VENT400 (11 Nov 2005 - 15:31)
Bonjour,

Pourrais-tu éditer ton post pour présenter lisiblement ton code comme demandé dans les règles.

Merci d'avance.
Modifié par Raphael (11 Nov 2005 - 15:25)
Administrateur
Hello et bienvenue ici,

Comme tu es dans le salon CSS, tu dois te douter que la grande majorité des sujets ici (voire tous) traitent de "Positionnement css".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre Smiley decu

Pour te donner une piste par rapport à ta question : quelle est la propriété qui permet d'aligner un texte au centre ? Smiley cligne
Modifié par Raphael (11 Nov 2005 - 15:29)
je l'ai mis le text-align: center dans #header p{
mais en resolution 800*600 le texte passe sur les photos!
faut-il le position:absolute ou pas?
Est ce que ton paragraphe prends bcp de place?
Et tes images, elles sont grandes?
Modifié par Oryo (11 Nov 2005 - 17:45)
Sujet clos
Aller à