Aligner au même niveau verticalement du texte [Résolu]

proximacent · 27/11/2011, 18h01

Salut à tous

J'essaie de changer la présentation de mes pages web avec deux titres

Je souhaite mettre :

les titres verticalement côte à côte bien sûr avec un espacement.

J'ai créé 2 div

J'essaie de les imbriquer les séparer bref ! rien y fait

Les deux titre verticaux se décalent en hauteur. En d'autres termes le premier titre chasse le second vers le bas. L'erreur vient-elle du htm ou du css ? Je ne vois plus clair. Merci de m'aider car je sèche.

mon code

Code :

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
27
28
29
30
31
32
33
34
35
36
37
 
<div id="bandeaulateral">    
      S</br>c</br>i</br>e</br>n</br>c</br>e</br></br> d</br>e</br>s</br></br> a</br>r</br>t</br>s
     <div id="bandeaulateral1">
         <chgstylefontbdl>A</br>c</br>c</br>u</br>e</br>i</br>l</br></chgstylefontbdl>
     </div>
    </div>
 
CSS
 
div#bandeaulateral{
	margin-left:50px;
  margin-right:auto;
  margin-top:0px;
  width:20px;
	height:700px;
  margin-bottom:3px;
	background-color:#696969; /* couleur grise*/
	font-family:"Agency Fb";
	font-size:35px;
  color:#990000; /* couleur texte*/
  padding:10px;
  }
 
  div#bandeaulateral1{
	margin-left:100px;
  margin-right:auto;
  margin-top:50px;
  width:20px;
	height:auto;
  margin-bottom:3px;
	background-color:#696969;
	font-family:"Agency Fb";
	font-size:35px;
  color:#990000;
  padding:10px;
  }

Merci et bonne continuation.

rotrevrep · 28/11/2011, 07h23

bonjour

.
j'ai modifié quelque peu le css, afin d'avoir tes titres verticaux côte à côte :

Code :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
<head>
<style>
div#bandeaulateral{
	margin-left:50px;
position:absolute;
top:0px;
  margin-right:auto;
  margin-top:0px;
  width:20px;
	height:700px;
  margin-bottom:3px;
	background-color:#696969; /* couleur grise*/
	font-family:"Agency Fb";
	font-size:35px;
  color:#990000; /* couleur texte*/
  padding:10px;
  }
 
  div#bandeaulateral1{
	margin-left:100px;
  margin-right:auto;
  margin-top:0px;
position:absolute;
top:0px;
  width:20px;
	height:auto;
  margin-bottom:3px;
	background-color:#696969;
	font-family:"Agency Fb";
	font-size:35px;
  color:#990000;
  padding:10px;
  }
</style>
</head>
<body>
<div id="bandeaulateral">    
      S</br>c</br>i</br>e</br>n</br>c</br>e</br></br> d</br>e</br>s</br></br> a</br>r</br>t</br>s
    </div>
     <div id="bandeaulateral1">
         <chgstylefontbdl>A</br>c</br>c</br>u</br>e</br>i</br>l</br></chgstylefontbdl>
     </div>
</body>
</html>

si c'est bien cela que tu voulais

!

jreaux62 · 28/11/2011, 08h50

Bonjour,
le mieux pour un menu est encore d'utiliser les listes non ordonnées (<ul><li>) :

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
27
28
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Menu avec textes verticaux</title>
	<style type="text/css">
ul#bandeaulateral
	{ list-style-type:none; list-style-position:inside; 
	height:700px; margin:0 50px 3px auto;
	}
 
ul#bandeaulateral li 
	{ float:left; width:20px; height:700px; margin:10px; padding:10px;
	background-color:#696969; /* couleur grise */
	font-size:35px; font-family:"Agency Fb"; text-align:center; color:#990000; /* couleur texte*/ 
	line-height:36px;  /* maitriser la hauteur du lettrage */
	}
</style>
</head>
<body>
 
<ul id="bandeaulateral">    
	<li>S<br />c<br />i<br />e<br />n<br />c<br />e<br /><br /> d<br />e<br />s<br /><br /> a<br />r<br />t<br />s</li>
	<li>A<br />c<br />c<br />u<br />e<br />i<br />l</li>
</ul>
 
</body>
</html>

proximacent · 29/11/2011, 14h31

Merci bien à vous deux.

C'est exactement ce que je voulais. Les deux méthodes sont bonnes. Mais pour l'optimisation je passe par les listes non ordonnées <ul><li>.

Nickel et bonne journée

29/11/2011, 14h31	#4
proximacent Membre du Club Inscription : septembre 2011 Messages : 71 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : septembre 2011 Messages : 71 Points : 53 Points : 53	Merci bien à vous deux. C'est exactement ce que je voulais. Les deux méthodes sont bonnes. Mais pour l'optimisation je passe par les listes non ordonnées <ul><li>. Nickel et bonne journée
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email