agrandir balise p dans un div

**ninikkhuet** · 21/08/2006, 12h56

Bonjour,

ce que je souhaite faire est vraiment tout simple mais décidément je n'y arrive pas. En fait j'ai 2 div côte à côte (avec float left), dans le 1er div j'aimerais faire un style de coin arrondi en mettant des images..avec du code ce sera peut-être plus explicite :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
#milieu{
        float:left;
        width:500px;
}
#droite{
        margin-left:520px;
}
.central{
        text-align:center;
        background-image:url(Images/pourpre2_.jpg);
        display:inline;
}
</style>
</head>
 
<body>
  <div id="milieu" style="background:url(Images/pourpre2_.jpg)">
    <img src="Images/hautpourpregauche.jpg" alt="coin gauche" width="20" />
    <p class="central">A La Une</p>
    <img src="Images/hautpourpredroit.jpg" alt="coin gauche" width="20" />
  </div>
  <div id="droite">
    <p align="center">Cacahouète</p>
  </div>
</body>
</html>

Je n'arrive pas à faire que la balise p du 1er div prenne toute la largeur du div (moins celles des coins bien sûr). J'ai essayé de mettre width:100% ou width:95% mais ça ne change strictement rien. Ca doit pas être bien compliqué mais je viens juste de débuter alors je patauge un peu..Quelqu'un peut m'aider ?

Merci

**speedev** · 21/08/2006, 16h31

salut!
essaye de rajouter l'une de ces parcelles de codes dans ton css:

Code :

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

1
2
3
#milieu p{
	width:100%;
}

ou autrement:

Code :

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

1
2
3
#milieu p{
	width:500px;
}

En gros ça te définit la taille de <p> dans ton div #milieu, d'où une classe supplémentaire quoi.

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
#milieu{
	float:left;
	width:500px;
}
#milieu p{
	width:100%;
}
#droite{
 	margin-left:520px;
}
.central{
	text-align:center;
	background-image:url(Images/pourpre2_.jpg);
	display:inline;
}

**ninikkhuet** · 21/08/2006, 16h53

eh non, j'avais déjà essayé justement et ça ne fonctionne pas

, je ne sais plus quoi faire, peut-être y a-t-il une autre solution que la balise p ??

**Oluha** · 21/08/2006, 16h54

et avec un autre <div> à la place de <p> ?

**speedev** · 21/08/2006, 16h57

Beeeen pour ce type d'affichage, càd, des petites images qui créer un design quoi, le plus courant reste encore et toujours les tableaux.

En div cela devrait être possible!

Déjà à ta place je metterai les images et le <p> dans des divs respectifs. Donc je rajouterai des divs qui s'imbriquent dans le div conteneur

**ninikkhuet** · 21/08/2006, 17h43

alors j'ai essayé de changer la balise p par la balise div : rien ne change. Bon donc j'ai mis un tableau à une ligne avec 3 colonnes, c'est ok, ça fonctionne très bien.
Le 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#milieu{
        float:left;
        width:500px;
}
#droite{
        margin-left:520px;
}
.central_blanc{
        text-align:center;
        background-image:url(Images/pourpre2_.jpg);
        display:inline;
        font-size:14px;
        font-weight:bold;
        color:#FFFFFF;
        width:auto;
}
.central_noir {
        text-align:center;
        width:auto;
        font-size:14px;
        font-weight:bold;
        color:#000000;
}
body {
        font:Arial, "Times New Roman", sans-serif;
}
</style>
</head>
 
<body>
	<div id="milieu">
		<table cellpadding="0" cellspacing="0" border="0" width="100%">
		  <tr>
		  	<td width="20px"><img src="Images/hautpourpregauche.jpg" alt="coin gauche" /></td>
			<td class="central_blanc">A La Une</td>
			<td width="20px"><img src="Images/hautpourpredroit.jpg" alt="coin gauche" /></td>
		  </tr>
		</table>
	</div>
	<div id="droite">
		<p class="central_noir" align="center">(Publicité)</p>
	</div>
</body>
</html>

Si vous avez des remarques,n'hésitez pas !
Merci

**speedev** · 21/08/2006, 17h49

Une seule ^^:
Tout ce qui est développable dans le css doit $etre développé dans le css.
Donc adieu à toutes les balises :
cellpadding="0" cellspacing="0" border="0" width="100%"

A moins que ton site n'ai que cette page de stylée en css d'accord...
Mais même, par propreté, il faut créer des classes css pour chaque objet tout en les optimisant et minimalisant. Voir à créer des fichiers css externes bien structurés. Ca facilite la lecture du code.

Le code HTML doit être épuré en gros.

Après chacun ses méthodes...

Tchaw'

agrandir balise p dans un div

HTML

Vue hybride

Discussions similaires

Partager

Partager