div bla bla bla

**{F-I}** · 30/05/2007, 11h12

Salut à tous,

Tout d'abord je m'exucse, mon titre n'est pas très explicité, c'est simplement parce que je ne sais pas comment être explicité et court...

Bref, voici l'image en question :

J'aimerais bien savoir comment on fait pour avoir le texte à cette place...

Sachez que j'utilise la div pour faire le tableau et pas table

Au plaisir d'avoir vos réponses

**Bisûnûrs** · 30/05/2007, 11h33

Il existe une balise fieldset :

Code html :

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

1
2
3
<fieldset>
   <legend>Texte positionné là où tu veux sur ton image</legend>
</fieldset>

**{F-I}** · 30/05/2007, 11h38

Sachant que j'aimerais bien l'appliquer dans

Code html :

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

1
2
3
<div class="format001_style001">
					Format 001, style 001
				</div><br />

Donc avec ton code source, je dois placer juste apres la fermture d'ouverture de div ?

**Candygirl** · 30/05/2007, 11h39

Cette présentation est celle par défaut des balises fieldset et legend. Maintenant si tu souhaites obtenir cet effet dans un autre contexte que regrouper ees champs de formulaire, tu peux le faire en jouant avec les border et positionnement pour ton texte. Par exemple:

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
<!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">
        div {border:1px solid #ccc; height:300px;margin-top:1em;}
        h3 {margin-top:-0.7em; float:left; background-color:#FFF; padding:0 0.5em;margin-left:20px;position:relative;}
</style>
</head>
<body>
<div><h3>test pour voir</h3></div>
</body>
</html>

**{F-I}** · 30/05/2007, 11h45

@Candygirl, avec ta réponse, ça permettre d'avoir tous les tableaux de ce type (avec texte au bord en haut gauche)....

Mais s'il y a des tableaux spécifique (avec texte) et les autres pas, comment m'y prends-je ?

**Candygirl** · 30/05/2007, 11h58

Envoyé par {F-I}

Mais s'il y a des tableaux spécifique (avec texte) et les autres pas, comment m'y prends-je ?

Tu passes par l'attribution d'une classe.

Autrement je n'avais pas testé mon code sur IE6. Il faut rajouter un position:relative sur le h2 pour que ce dernier passe par-dessus le cadre (j'édite mon premier message).

div bla bla bla

CSS

Vue hybride

Discussions similaires

Partager

Partager