Positionné du contenu

Version imprimable

Bonjours, je vous écris car je commence à craquer :(

En effet j'ai fait un site ou tout était ordonnancé par des tableaux :oops:, je sais c'est pas bien ! Et c'est justement pour ça que j'ai voulu me lancer dans les div et les span pour tout ordonnancer, malheuresement je n'y arrive pas :(

Donc voilà ce que j'avait au début :

Code:

1
2
3
4
5
6
7
8
9
10
11
<tr>
<td><a href="index.php"><img src="images/logo-hne.gif" alt="Page d'acceuil"></a></td>
<td><div class="titre1">LIGUE DE HAUTE NORMANDIE DES ECHECS </div>
<br>
<div class="date"> Lundi 05 Juin 2006 </div>
<div style="text-align: center;"><a href="documents/calendrier-lhne-2005-2006.pdf" class="menu1"> Calendrier 2005/2006 </a>
<br> Contact :<a href="mailto:ligueh@liguehne.fr" class="menu1"> ligueh@liguehne.fr </a>
<br><a href="http://www.echecs.asso.fr/" class="menu1"> Site de la FFE </a>
<br><a href="documents/comdirhn.htm" class="menu1"> Comit� directeur </a>
</div>
</td></tr>

Et donc voilà que j'aimerai faire exactement la même chose mais en div et en span et j'arrive à ça :

Code:

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
<div>
 
    <a href="index.php">     <img src="images/logo-hne.gif" alt="Page d'acceuil"> </a>
 
<span>
<div class="titre1" style="vertical-align: super;"> LIGUE DE HAUTE NORMANDIE DES ECHECS </div>
 
<br>
<div class="date"> Lundi 05 Juin 2006 </div>
<div style="text-align: center;">
 
    <a href="documents/calendrier-lhne-2005-2006.pdf" class="menu1"> Calendrier 2005/2006 </a>
 
 
<br> Contact :
 
    <a href="mailto:ligueh@liguehne.fr" class="menu1"> ligueh@liguehne.fr </a>
 
 
<br>
 
    <a href="http://www.echecs.asso.fr/" class="menu1"> Site de la FFE </a>
 
 
<br>
 
    <a href="documents/comdirhn.htm" class="menu1"> Comit� directeur </a>
 
</div>
</span>
 
</div>

Le problème c'est que "LIGUE DE HAUTE etc..." se trouve sous l'image :'(
Et tout ce qui s'en suit se place aussi en dessous !

Merci à celui qui m'aidera !

05/06/2006, 15h22
KiLVaiDeN

Salut,
dans ton IMG, ajoute un

Code:

align="middle"

pour voir :)
05/06/2006, 15h33
Invité

Je suis désolé mais ça marche pas, en fait j'ai cru trouver, c'est simplement les span qui ne sont pas reconnu, j'ai pris un p'tit screen avec le navigateur FireFox en rouge ce sont les span et les div en vert :

http://nicolac76.free.fr/site.JPG

Vous pouvez voir le machin ridicule correspondant au span qui devrait contenir tout le texte :(
05/06/2006, 15h34
<romain/>
Tu n'a pas modifié la position de ton texte, il faut que tu le retire du flux et que tu le positionne :
remplace ca :
Code:

1 2 div class="titre1" style="vertical-align: super;"
par ca :
Code:

1 2 div class="titre1" position : absolute:"
Tu devrais séparer ton style de ta mise en forme. Utilise une feuille css.
05/06/2006, 15h36
Invité

Je suis désolé avec l'absolute c'est encore pire :s

La date etc... se retrouve dans le gros titre rouge :s
05/06/2006, 15h42
KiLVaiDeN

A quoi te sert ton span ? Enlève-le.

Quel est le contenu de titre1 dans ta css ? Et si tu as déjà une classe titre1, pourquoi ajouter l'attribut "style" ?

Normalement, ton image sera alignée avec le texte de ton div, si ton div est en display "inline" :)

A+
05/06/2006, 15h43
<romain/>

tu as mis le gros titre rouge en absolute et il a pas bougé? Il ne s'est pas retrouve tout en haut a gauche par dessus : images/logo-hne.gif ?

Sinon tu as de gros probleme de structures. La balise span est de type inline et ne peux donc aps contenir de balise bloc comme div.
Plutot que d'utiliser class="titre1" pourquoi ne pas utiliser <h1> la balise faites pour ca? Tu la style a ta guise dans la feuille css par la suite...
05/06/2006, 15h51
Invité

Que de réponses merci !

Bon alors j'ai enlevé le span, en fait si je l'avais mit c'est parce que je me suit dit : "Il va se mettre juste à coté de l'image et ensuite je découperai ce qu'il y a dans ce span avec des block !

Pour les style si je me sers pas des classes c'est parce que je le ferais après tout d'abord je met tout directement dedans, je gêre mieux comme ça (comment ça je gêre rien là ? :furax:)

Pour l'absolute, au départ quand j'avais encore le span il avait pas bougé mais le texte en dessous c'était collé sous lui !
Une fois que j'ai enlevé le span il s'est mit en haut !

Et la j'ai crié miracle (mais trop tôt) en effet, si je fait pour le reste, tout ce retrouve en haut et ils s'accumulent les uns sur les autres :'()

Pour H1, j'y penserai merci ;)
05/06/2006, 15h54
<romain/>

essaie de les positionner avec margin-left, margin-top etc...

<romain/>

Ba j'm'en suis sortie en fait ^^

Autrement j'ai trouvé ça sur OpenWeb (j'le garde dans mes liens d'ailleurs super site ;))

Code:

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
<div>
 
    <a href="index.php">     <img src="images/logo-hne.gif" alt="Page d'acceuil" style="float: left;" align="top"> </a>
 
<div class="titre1"> LIGUE DE HAUTE NORMANDIE DES ECHECS </div>
 
 
<br>
<div class="date"> Lundi 05 Juin 2006 </div>
 
<div style="text-align: center;">
 
    <a href="documents/calendrier-lhne-2005-2006.pdf" class="menu1"> Calendrier 2005/2006 </a>
 
 
<br> Contact :
 
    <a href="mailto:ligueh@liguehne.fr" class="menu1"> ligueh@liguehne.fr </a>
 
 
<br>
 
    <a href="http://www.echecs.asso.fr/" class="menu1"> Site de la FFE </a>
 
 
<br>
 
    <a href="documents/comdirhn.htm" class="menu1"> Comit� directeur </a>
 
</div>
 
</div>

Tout simplement float:left !

Merci à tous !