Discussion :

[KeKeMaN]

Bonjour,

Je me permets de vous solliciter concernant un problème que je rencontre.

Je dois réaliser un petit site en interne pour présenter différents schémas (réseaux / systèmes). Ces schémas présenteront les différents équipements et on pourra cliquer dessus pour afficher les informations du dit équipement.

J'ai essayé de placer mes différentes images en position "absolute" mais cela me pose problèmes lors du redimensionnement de la page ou alors une incompatibilité entre Firefox et IE.

Auriez-vous des idées simples pour réaliser ces schémas ?

Merci d'avance,
Julien

[12monkeys]

Bonsoir

cela me pose problèmes lors du redimensionnement de la page ou alors une incompatibilité entre Firefox et IE.

C'est à dire ? Peut tu être plus précis, par exemple avec une page en ligne, une capture d'écran ou au moins le code CSS et HTML ?

[KeKeMaN]

Voici le code que j'utilise pour le moment :

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
 
<div id="content">
<h1>Schema !!</h1>
<div id="schema">
<div id="HostA" style="position:absolute; margin-top:25px; z-index:5;">
	<a href="" title="XXX.XXX.XXX.XXX">
	HOST A<br /><img src="img/Server.gif" width="22" height="40" border="0"></a>
	<br /><img src="img/TraitV.gif">
</div>
 
<div id="HostB" style="position:absolute; margin-top:25px; z-index:5; margin-left:40px;">
	<a href="" title="XXX.XXX.XXX.XXX">
	HOST A<br /><img src="img/Server.gif" width="22" height="40" border="0"></a>
	<br /><img src="img/TraitV.gif">
</div>
 
<!-- .............. -->
 
</div>
</div>

Le style :

Code :

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

1
2
3
4
 
#schema {
	text-align: center;
}

Je mets en copie un imprime écran du problème.

En fait sous IE, le schéma commence au centre de ma div père alors que sous firefox, il commence bien dans le coin supérieur gauche.
De plus, j'ai un décalage de ma barre horizontale sous IE mais pas sous Firefox ...

Bon en fait si je mets ma div schema en "text-align: left" et que je rajoute pour chaque div un style "text-align:center" ca passe.

Par contre, j'ai toujours un problème avec ma barre horizontale décalée sous IE.

Merci d'avance pour vos commentaires

[12monkeys]

Je ne suis pas sur de pouvoir aider parce que le code n'as pas l'air de correspondre avec les images : dans le code il y a du texte "HOST A" que je ne vois pas dans les captures ?

Cependant positionner en absolute sans positionner l'élément grâce à top, left, right, et bottom, je ne vois pas l'intérêt... Positionner en absolute fait sortir l'élément du flux, est ce vraiment ce que tu veux ?

[KeKeMaN]

Je ne suis pas sur de pouvoir aider parce que le code n'as pas l'air de correspondre avec les images : dans le code il y a du texte "HOST A" que je ne vois pas dans les captures ?

J'ai bien entendu caché les noms des machines (et adresse IP, ...). Donc à la place du gros carré gris, il y a les noms des machines (HOST A, ....).

Cependant positionner en absolute sans positionner l'élément grâce à top, left, right, et bottom, je ne vois pas l'intérêt... Positionner en absolute fait sortir l'élément du flux, est ce vraiment ce que tu veux ?

C'était justement la question principale de ce topic.
J'aimerais avoir l'avis de personnes qui aurait été confondu à ce besoin, ou bien les conseils de personnes qui auraient des idées.

Le problème avec top, left, .... c'est que chaque div de host se positionne par rapport au coin supérieur gauche de l'écran.

Une idée ?

Merci !

[12monkeys]

Le problème pour te répondre c'est de savoir à quoi ça ressemble et à quoi ça doit ressembler : ton image en pièce jointe c'est quelle vue ? celle d'internet explorer, de firefox, des deux ??

Utiliser la position absolute sans positionner l'élément (avec top, left...) ne sert à rien, donc n'utilise pas absolute...

Si tu veux utiliser absolute et qu'il ne se positionne pas par rapport au bord gauche supérieur du navigateur il faut que l'élément parent soit lui même positionne en position:relative, alors l'élément en absolute se positionnera par rapport à sont parent.