Création d'un schéma d'architecture informatique

Version imprimable

15/09/2009, 09h17
KeKeMaN

Création d'un schéma d'architecture informatique

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
15/09/2009, 20h03
12monkeys

Bonsoir

Citation:

Envoyé par KeKeMaN

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 ?

1 pièce(s) jointe(s)

Voici le code que j'utilise pour le moment :
Code:

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:

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 :)

16/09/2009, 20h03
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 ?
17/09/2009, 08h09
KeKeMaN

Citation:

Envoyé par 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 ?

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, ....).

Citation:

Envoyé par 12monkeys

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 !
17/09/2009, 18h57
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.

1 pièce(s) jointe(s)

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:

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:

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

18/09/2009, 10h21
KeKeMaN
Je viens de trouver la solution.

J'ai changé mon doctype.

Ancien :
Code:

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:

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!