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'

**ninikkhuet** · 21/08/2006, 18h15

ah oui c'est vrai je suis d'accord avec toi, j'ai déjà fait un fichier CSS externe mais il se trouve que je n'ai pas trouvé l'équivalent de cellpadding et cellspacing dans la liste de ce que me propose Dreamweaver..

**ninikkhuet** · 21/08/2006, 18h42

euh en fait je me suis trompé, ça fonctionne avec IE mais pas sous Mozilla, la colonne du milieu fait tout juste la taille de ce qui est écrit (A La Une), le width:auto n'a pas l'air de marcher

..Quelqu'un ?

**speedev** · 21/08/2006, 22h18

Pour le CSS utilise plutot TopStyle Lite, c'est un petit logiciel qui contient au moins 90% des balises CSS existentes, si ce n'est pas 100%.

C'est utile pour ce familiariser avec le CSS et c'est gratuit.

**Oluha** · 22/08/2006, 10h12

si ton problème c'était de caler les coins arrondis, pas la peine d'utiliser un tableau et encore moins des images : http://www.cssplay.co.uk/boxes/curves.html

**speedev** · 22/08/2006, 10h38

re bonjour!

Le syst des coins arrondis en css est plutot limité niveau "interface", c'est pas très joli l'aliasing des bords. Sinon cela allourdi un peu le HTML et le rend moins lisible malgré une certaine simplicité de développement HTML indubitablement.
Je pense que ce syst peut etre utilisé pour des pages simples de gestion, pour afficher plusieurs div qui contiendraient des données dynamiques.

Par contre sinon ça peut être pratique pour des divs d'information venant de l'auteur ou autre, un peu comme des info-bulle.

Mais pour des divs principaux sur une page, je trouve ce système un peu trop dépouillé et inutilement complexes.

Cela dit j'ai aussi ce lien dans mes favoris car ça peut servir! ^^

**Oluha** · 22/08/2006, 11h30

et aussi : http://www.cssplay.co.uk/boxes/krazy.html

après pour la "complexité" je vois pas trop où est le problème. Pour moi c'est pas pire que les images et je l'utilise sans aucun soucis pour faire le design de mes pages

**speedev** · 22/08/2006, 11h35

Ca dépent du type de site en fait et de ses goûts personnels.
C'est pas de mon goût quoi lol ^^

**Candygirl** · 22/08/2006, 12h16

Envoyé par Oluha

si ton problème c'était de caler les coins arrondis, pas la peine d'utiliser un tableau et encore moins des images : http://www.cssplay.co.uk/boxes/curves.html

Le gros problème de cette méthode, du moins telle qu'elle est présentée sur cette page, c'est qu'elle réagit très mal à un agrandissement des caractères. Donc pas acceptable à mon goût.

L'autre lien réagit mieux, mais je rejoins l'avis de Speedv. Rajouter des tas de balises vides dans le code html juste pour un effet graphique n'a pas grand sens. Dans cette optique, en attendant une propriété qui permette de le faire simplement, je préfère clairement jouer avec 2 images de fond posées sur des balises utiles et déjà existantes dans mon html lorsque c'est possible (on est bien d'accord que ce n'est pas toujours le cas

) et, au pire, rajouter le minimum de balises "inutiles".

agrandir balise p dans un div

HTML

Discussions similaires

Partager

Partager