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.

[KeKeMaN]

Bonjour,

Merci pour ces premières réponses, j'avance doucement

J'ai remis en pièce jointe un nouvel imprime écran.
On remarque donc que la barre horizontale est plus basse sous IE7 que sous Firefox.

Le code HTML :

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
 
<div id="content">
 
<h1>Production</h1>
 
<div id="schema">
 
<!-- Premiere ligne -->
 
<div id="host" style="position:absolute; top:25px; z-index:5;">
	<a href="<?php echo $this->url(array('controller'=>'production', 'action'=>'viewhost', 'id'=>'728'));?>">
	HA<br /><img src="<?php echo $this->baseUrl();?>/public/images/icons/Server.gif" width="22" height="40" border="0"></a>
	<br /><img src="<?php echo $this->baseUrl();?>/public/images/icons/TraitV.gif">
</div>
 
<div id="host" style="position:absolute; top:25px; left:40px;">
	<a href="<?php echo $this->url(array('controller'=>'production', 'action'=>'viewhost', 'id'=>'129'));?>">
	HB<br /><img src="<?php echo $this->baseUrl();?>/public/images/icons/Server.gif" width="22" height="40" border="0"></a>
	<br /><img src="<?php echo $this->baseUrl();?>/public/images/icons/TraitV.gif">
</div>
 
<div id="TraitH" style="position:absolute; top:100px;">
	<img src="<?php echo $this->baseUrl();?>/public/images/icons/TraitH.gif" width="890px" height="2px">
</div>
 
</div>
 
</div>

Le code CSS :

Code :

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

1
2
3
4
5
6
7
8
9
 
#schema {
	position: relative;
	text-align: left;
}
 
#host {
	text-align: center;
}

Une idée pour corriger ce décalage sous IE ?

Merci d'avance

[KeKeMaN]

Je viens de trouver la solution.

J'ai changé mon doctype.

Ancien :

Code :

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

1
2
3
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nouveau :

Code :

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

1
2
3
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Là Firefox a bien décalé vers le bas ma barre horizontale comme sous IE.
J'ai changé ma propriété "top" et tout est rentré dans l'ordre.

Merci 12monkeys pour tes informations!