[css] problème à grandes résolutions

**gorgonite** · 15/06/2006, 12h24

j'ai un gros problème de décollement à fortes résolutions (à partir de 1280*800)

la page
http://gorgonite.developpez.com/

la css
http://gorgonite.developpez.com/accueil.css

les images à droite qui forment le background se détachent de celles de gauche

**Swoög** · 15/06/2006, 12h28

Salut !

tu devrais séparer ton image qui fait l'effet de bord rond (pour les titres qui posent problèmes

) en trois plutôt qu'en deux :
1°) bord droit
2°) milieu (juste un pixel de large suffit puisqu'il ne me semble pas qu'il y ait de dégradé horizontal
3°) bord gauche

pour faire le milieu, tu le fais se répéter sur toute la largeur, et hop, plus de problème

**gorgonite** · 15/06/2006, 13h03

Envoyé par Swoög

Salut !

tu devrais séparer ton image qui fait l'effet de bord rond (pour les titres qui posent problèmes

) en trois plutôt qu'en deux :
1°) bord droit
2°) milieu (juste un pixel de large suffit puisqu'il ne me semble pas qu'il y ait de dégradé horizontal
3°) bord gauche

pour faire le milieu, tu le fais se répéter sur toute la largeur, et hop, plus de problème

je viens de le faire... mais avec cette méthode, je perds le bord gauche

**Swoög** · 15/06/2006, 13h05

il te faut rajouter un div comme tu as fait pour le bord gauche...

**gorgonite** · 15/06/2006, 13h41

Envoyé par Swoög

il te faut rajouter un div comme tu as fait pour le bord gauche...

gni ???

regardes la source... il me semble que c'est bon, ou alors j'ai rien compris

**Swoög** · 15/06/2006, 13h47

Arf... OK le problème c'est que tu as rajouter un div englobant... prend plutôt un truc de ce style :

Code :

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

1
2
3
<div class="bord_gauche">&nbps;</div>
<div class="titre">Texte</div>
<div class="bord_droit">&nbsp;</div>

ensuite, en jouant sur les positionnement floattant etc ça devrait marcher...

**gorgonite** · 15/06/2006, 14h03

Envoyé par Swoög

Arf... OK le problème c'est que tu as rajouter un div englobant... prend plutôt un truc de ce style :

Code :

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

1
2
3
<div class="bord_gauche">&nbps;</div>
<div class="titre">Texte</div>
<div class="bord_droit">&nbsp;</div>

ensuite, en jouant sur les positionnement floattant etc ça devrait marcher...

ben ça donne cela... mais c'est pas beau

**gorgonite** · 15/06/2006, 14h27

bon pour le haut, c'est réglé... tout passe bien car la hauteur est fixe

en revanche, pour le bas, j'ai un problème

quelqu'un voit une solution ?

[EDIT]
En attendant de trouver, je vais me contenter de cette version allégée sur le bas (sans mauvais jeu de mots

)

[/EDIT]

**Swoög** · 15/06/2006, 16h09

Heu c'est quoi le problème pour le bas (désolé, je le vois pas là XD)

**gorgonite** · 15/06/2006, 17h21

Envoyé par Swoög

Heu c'est quoi le problème pour le bas (désolé, je le vois pas là XD)

c'est parce que j'ai mis la version allégée... donc il n'y a plus les bords arrondis en bas

j'ai remis le code pour le bloc "profil"
les bords arrondis du bas ne descendent pas assez... j'ai essayé de mettre les trois div dans un seul et leur dire height: 100% mais ça ne marche pas

**Swoög** · 15/06/2006, 17h31

tu peux motrer ce que ça donne avec les trois div ensembles et le height à 100%

rajoute un

Code :

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

border : 1px solid red;

pour pouvoir bien voir les limites du div.

S'il descend bien jusqu'en bas, pense à modifier l'alignement de l'image de fond

**gorgonite** · 15/06/2006, 17h43

Envoyé par Swoög

tu peux motrer ce que ça donne avec les trois div ensembles et le height à 100%

rajoute un

Code :

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

border : 1px solid red;

pour pouvoir bien voir les limites du div.

S'il descend bien jusqu'en bas, pense à modifier l'alignement de l'image de fond

voilà... j'avais déjà essayé de jouer avec les padding sur les images

**Swoög** · 15/06/2006, 17h49

heu essaie de faire plutôt un truc comme ça :

Code :

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

1
2
3
4
5
<div class="gorgon_info"><!-- ça en gros c'est actuellement ton gorgon_info3 -->
   <div class="gorgon_info_bordure_gauche">&nbsp;</div>
   <div class="gorgon_info_texte">le texte</div>
   <div class="gorgon_info_bordure_droite">&nbsp;</div>
</div>

**gorgonite** · 15/06/2006, 17h52

Envoyé par Swoög

heu essaie de faire plutôt un truc comme ça :

Code :

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

1
2
3
4
5
<div class="gorgon_info"><!-- ça en gros c'est actuellement ton gorgon_info3 -->
   <div class="gorgon_info_bordure_gauche">&nbsp;</div>
   <div class="gorgon_info_texte">le texte</div>
   <div class="gorgon_info_bordure_droite">&nbsp;</div>
</div>

marche pas non plus

j'avais essayé cette méthode, mais ça foirait... il fallait mettre les deux images en float avant le texte, sinon la seconde image était à la ligne du dessous

**Swoög** · 15/06/2006, 18h09

oui, il faut les mettre en float (oublié de le préciser, désolé...)

ARgl... raaaa, j'ai déjà réussi à le faire en plus, bon, j'ai enregistrer html en css chez moi, je matterais ça un peu plus tard ce soir cette nuit pour essayer de revenir avec un truc qui marche vraiment cette fois lol

**gorgonite** · 15/06/2006, 18h17

Envoyé par Swoög

oui, il faut les mettre en float (oublié de le préciser, désolé...)

ARgl... raaaa, j'ai déjà réussi à le faire en plus, bon, j'ai enregistrer html en css chez moi, je matterais ça un peu plus tard ce soir cette nuit pour essayer de revenir avec un truc qui marche vraiment cette fois lol

j'ai mis float: left et float: right

mais ça donne cela justement...

à moins qu'il faille changer la valeur de position... mais je ne connais pas

[EDIT]
Level up... bonus d'xp, c'est la classe

[/EDIT]

**Swoög** · 15/06/2006, 23h26

[Et pendant ce temps là, les shadocks pompaient... (Working in progress)]

VOILA !

Je savais bien que c'était possible

est-ce que ça convient à ce que tu veux ? :

structure HTML :

Code :

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

1
2
3
4
5
6
7
	<div class="gorgon_info">
		<div class="gorgon_info3">
			[CONTENT]
		</div>
		<div class="gorgon_info1">&nbsp;</div>
		<div class="gorgon_info2">&nbsp;</div>
	</div>

règles CSS :

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
29
30
31
32
33
34
35
36
div.gorgon_info {
margin: 0px;
text-align: left;
border: 1px solid #CCC;
border-top: none;
border-bottom: none;
}
 
div.gorgon_info1 {
background: transparent url(./images/grey_bottom_left.png) no-repeat bottom left;
padding: 0px;
padding-left: 4px;
margin: 0px;
margin-top: -20px;
margin-left: -2px;
float: left;
border-left: 1px solid white;
border-bottom: 1px solid white;
}
 
div.gorgon_info3 {
padding: 15px;
border-bottom : 1px solid #CCC;
}
 
div.gorgon_info2 {
background: transparent url(./images/grey_bottom_right.png) no-repeat bottom right;
padding: 0px;
padding-right: 4px;
margin: 0px;
margin-top: -20px;
margin-right: -2px;
float: right;
border-right: 1px solid white;
border-bottom: 1px solid white;
}

Alors ?

**gorgonite** · 16/06/2006, 11h09

presque parfait...

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
div.gorgonsection {
margin-top: 30px;
}
 
div.gorgon_titre1 {
background: transparent url(./images/blue_top_left.png) no-repeat top left;
padding: 0px;
padding-left: 4px;
margin: 0px;
float: left;
}
 
div.gorgon_titre3 {
background: transparent url(./images/blue.png) repeat top center;
padding: 0px;
margin: 0px;
padding-top: 5px;
padding-left: 15px;
color: #ffffff;
line-height : 15pt;
font-size: 15pt;
text-align: left;
}
 
div.gorgon_titre2 {
background: transparent url(./images/blue_top_right.png) no-repeat top right;
padding: 0px;
padding-right: 4px;
margin: 0px;
float: right;
}
 
div.gorgon_info {
margin: 0px;
text-align: left;
border: 1px solid #CCC;
border-top: none;
border-bottom: none;
}
 
div.gorgon_info1 {
background: transparent url(./images/grey_bottom_left.png) no-repeat bottom left;
padding: 0px;
padding-left: 4px;
margin: 0px;
margin-top: -21px;
margin-left: -2px;
float: left;
border-left: 1px solid white;
border-bottom: 1px solid white;
}
 
div.gorgon_info3 {
padding: 15px;
background: transparent url(./images/grey.png) repeat-x bottom center;
border-bottom : 1px solid #CCC;
}
 
div.gorgon_info2 {
background: transparent url(./images/grey_bottom_right.png) no-repeat bottom right;
padding: 0px;
padding-right: 4px;
margin: 0px;
margin-top: -21px;
margin-right: -3px;
float: right;
border-right: 1px solid white;
border-bottom: 1px solid white;
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="gorgonsection">
<div class="gorgon_titre1">&nbsp;</div>
<div class="gorgon_titre2">&nbsp;</div> 
<div class="gorgon_titre3">Articles</div>
<div class="gorgon_info">
  <div class="gorgon_info3">
    &nbsp;
  </div>
  <div class="gorgon_info1">&nbsp;</div>
  <div class="gorgon_info2">&nbsp;</div>
</div>
</div>