Aligner des éléments dans ma div

**Neewd** · 31/03/2013, 19h10

Ahoy !

Je ne sais pas si mon titre est vraiment explicite.
Je suis une quiche en CSS et je m'en rends compte de plus en plus.

Mon but serait de faire ce genre de choses (sans utiliser les absolute).

Donc c'est un <ul> puis un <h1> puis un <input>.
J'ai tout mis dans une div.
Mais tous mes éléments se mettent les uns en dessous des autres, j'ai beau fixé une hauteur fixe pour mon élément j'aimerais que ça s'aligne comme sur mon image.

Je ne sais vraiment pas comment faire ...

Merci d'avance !

**rodolphebrd** · 31/03/2013, 19h19

Bonjour,

Sans code je pourrais simplement vous dire:

Code css :

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

1
2
3
4
 
nav, h1, input {
     float:left;
}

**Neewd** · 31/03/2013, 19h27

Houlà, toutes mes excuses, je tombais en rade de batterie j'ai oublié de poster mon code HTML.

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="header">
	<ul>
		<li><a href="@">Blog</a></li>
		<li><a href="@">About</a></li>
		<li><a href="@">Contact</a></li>
	</ul>
	<h1>escape from reality</h1>
	<input type="text" id="search">
</div>

**rodolphebrd** · 31/03/2013, 20h21

Une base de départ:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3 colonnes fluides</title>
<style>
li {
        display:inline;
}
ul, h1, input {
        float:left;
}
</style>
</head>
<body>
<div class="header">
			<ul>
				<li><a href="@">Blog</a></li>
				<li><a href="@">About</a></li>
				<li><a href="@">Contact</a></li>
			</ul>
			<h1>escape from reality</h1>
			<input type="text" id="search">
		</div>
</body>
</html>

Aligner des éléments dans ma div

Positionnement en CSS

Discussions similaires

Partager

Partager