Discussion :

[{F-I}]

Salut mes amis

J'espère que vous portez bien le dimanche ^^

Bref :


(désolé pour la taille de l'image en largeur... C'est que j'ai une grande écran ^^ hihi)


Ma question, c'est comment mettre l'image à gauche et laisser le texte centré dans la partie header...

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="header">
	<img src="images/logo.gif"/>
	Ton header
</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#header
{
	margin: auto;
	padding: 4px;
	margin-top: 10px;
	width: 80%;
	border: 2px solid #000;
	background-color: #fff;
	text-align: center;
}

Merci d'avance les amis et bon dimanche

[grabriel]

Salut l'ami,

Tu peux rechercher du coté des positions absolute ou relative à l'intérieur de ton div, je ne me souviens pas de la syntaxe exacte mais j'ai vu le code dans un post sur le forum. Sinon tu peux refaire des div dans ton div avec des float et aligner celui de ton image à gauche en faire un autre de meme taille à droite et ton texte au milieu... bref le meme schéma qu'en dessous.

Bon dimanche et porte le bien.

[{F-I}]

J'avais pensé à cette méthode (recréer un sous div) mais j'ai entendu qu'on a dit "Trop de div, tue div"...

Donc je voulais connaître la méthode avec css


Haaaa quel dimanche avec le beau soleil / ciel bleu ^^

[Alexounet]

Si tu rajoutes dans ton CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#header img
{
    float:left;
    margin:2px;
}

Ca devrait fonctionner ^^ Mais tu devras préciser une hauteur à ton header, ou alors ajouter un clearer dans ton header...

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.clearer {
    clear:both;
}

et ajouter <div class="header">&nbsp;</div> après ton texte dans le header

[blueice]

Il suffit de placer l'image en background :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
#header
{
	margin: auto;
	padding: 4px;
	margin-top: 10px;
	width: 80%;
	border: 2px solid #000;
	background: #fff url(images/logo.gif) 0 0;
	text-align: center;
}