organisation de block "div" avec les CSS: probleme
organisation de block "div" avec les CSS: probleme - HTML/CSS - Programmation
Marsh Posté le 01-09-2004 à 23:55:20
Utilise le positionnement absolu pour positionner les 3 blocs à l'intérieur de zone1.
http://incongru.webdynamit.net/PositionnementCSS
Message édité par gm_superstar le 01-09-2004 à 23:55:49
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 02-09-2004 à 22:53:45
J'ai resolu mes problemes de positionnement de "div"
Par contre lorsque j'utilise la fonction de rollover <a class="image" href="lien.htm"></a> le positionnement de mes div saute completement et mes images (qui sont mes boutons d'acces aux autres pages) se retrouvent les unes en dessous des autres sans tenir comptes du positionnement des blocs dans lesquels elles sont 
Quelqu'un a une idée de comment contourner le probleme ?
Message édité par eternity_78 le 02-09-2004 à 22:54:09
Marsh Posté le 02-09-2004 à 22:56:30
<a class="bouton1" href="lien.htm"></a> est ma partie html
Pour la partie CSS j'utilise:
a.bouton1
{
display: block;
width: 190px;
height: 165px;
background-image: url(images/bouton1.jpg);
background-repeat: no-repeat;
border: 0;
}
a.bouton1:hover
{
background-image: url(images/bouton1_nega.jpg);
}
Marsh Posté le 02-09-2004 à 23:19:12
URL pour tester ?
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 03-09-2004 à 21:43:51
http://www.chez.com/eternity78/test/index.html
Sur internet explorer, tout les blocs sont les uns en dessous des autres et sous mozilla, il m'en manque une partie
Si je supprime le rollover de mes boutons, les Div reprennent leur bon ppositionnement 
Marsh Posté le 03-09-2004 à 23:08:39
Ca c'est pour la page d'acceuil, mais j'ai éssayé le positionnement des pages de contenu et c'est le meme probleme (normalement tout les boutons sont les uns sous les autres dans le div de gauche), le positionnement des divers div est bon avec mes images "classiques", mais dès que je leur met un rollover, le positionnement n'est plus valable.
help 
Marsh Posté le 03-09-2004 à 23:12:27
Je vais regarder ça.
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 03-09-2004 à 23:18:26
Oui, mais j'avais dit d'utiliser le positionnement absolu pour placer zone2/3/4 ça sera plus simple que les flottants (si ce que tu veux faire correspond à ton plan)
Les coordonnées des 3 DIV seront prises par rapport à zone1. Donc pour positionner zone2 il faut le placer à top: 0; et left: 0;
Idem pour les autres.
Message édité par gm_superstar le 03-09-2004 à 23:19:21
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 04-09-2004 à 09:26:23
je vais réeessayer comme tu me le dis
(au depart j'avai fait comme ca sans succès alors qu'avec les float ca marchait -> jusqu'a l'arrivé des rollovers )
Marsh Posté le 04-09-2004 à 23:20:32
http://www.chez.com/eternity78/test/
j'ai deja du mieux 
mais par contre meme en utilisant le positionnement absolu de mes Div, je suis obligé de positionné les images soumises au rollover a l'interieur de leur div (pas moyen d'avoir le positionnement du flux "normal" )
Marsh Posté le 05-09-2004 à 02:04:38
| eternity_78 a écrit : |
Le logo et les images 1 et 2 ne sont pas posistionnés, ils sont bien dans le flux normal.
Les images 3 à 6 ne sont pas positionnées non plus mais tu fais des trucs bizarres avec les marges. Laisse tomber tout ça, par défaut les images (ou les liens) s'alignent de gauche à droite sur la ligne de base du texte.
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 05-09-2004 à 09:42:09
| gm_superstar a écrit : Le logo et les images 1 et 2 ne sont pas posistionnés, ils sont bien dans le flux normal. |
Ba justement non ![[:spamafote]](https://forum-images.hardware.fr/images/perso/spamafote.gif "[:spamafote]")
au depart je faisait comme ca, mais si je ne positionne pas mes images de 3 a 6 avec des marges, elles se mettent les unes en dessous des autres sur le coté gauche de la page
Marsh Posté le 05-09-2004 à 11:22:58
Aah ok je vois pourquoi. Parce que tu définis tes éléments A en tant que bloc.
Ce que tu peux faire c'est s'inspirer de http://www.wpdfd.com/editorial/wpd1102.htm#feature (exemple 9)
- Tu mets tes images classiquement dans tes liens :
<a class="image3" href="index2.htm"><img src="3_.jpg" width="nnn" height="nnn" alt="Image 3" /></a>
- Tu définis en image de fond de A l'image survolée (3_N.jpg)
- Tu "caches" l'image lorsque la souris est sur le lien, pour produire l'effet de rollover
a:hover img {
visibility: hidden;
}
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 05-09-2004 à 18:38:03
je vais eesayer ca, mais ca me parait un poil plus compliqué que la solution de positionner tout les bloc d'image.
Y a t'il un avantage pour chaque solutions ? (code plus "lourd" ou pas reglementaire d'apres le W3C ? )
merci pour ton aide
Marsh Posté le 05-09-2004 à 22:18:29
| eternity_78 a écrit : je vais eesayer ca, mais ca me parait un poil plus compliqué que la solution de positionner tout les bloc d'image. |
Ben non, le comportement par défaut des images c'est de se mettre cote à cote, donc profites-en. C'est à mon avis plus simple de compter là dessus que les positionner une par une comme tu l'as fait.
| eternity_78 a écrit : |
Les 2 sont bons point de vu W3C, mais la solution que je propose me parait plus simple (tu n'as pas à calculer la position des liens, ils se mettent cote à cote tout seuls)
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 05-09-2004 à 22:30:52
J'ai essayé ta technique, mais ca ne marche pas
J'ai suivi ton lien ainsi que le tutoriel sur alsacreations.com, mais sans résultat. Je n'ai que mon image principale, le rollover ne marche pas.
Marsh Posté le 05-09-2004 à 22:32:03
| gm_superstar a écrit : URL pour tester ? |
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 06-09-2004 à 19:02:53
J'ai changé le code uniquement pour le 1er bouton
http://www.chez.com/eternity78/test/index2.htm
edit: Je viens de m'appercevoir que c'est sous IE6 que ca ne marche pas, sous Firefox ca marche 
Je test mes pages avec IE (qui est mon navigateur par defaut) alors que j'utilise firefox pour "surfer".
La fonction n'est pas prise en charge par IE ? (pourtant c'est conforme au W3C)
Message édité par eternity_78 le 06-09-2004 à 19:05:04
Marsh Posté le 06-09-2004 à 20:27:53
Non ça marche pas avec IE cette méthode (comme dit dans le lien que j'ai posté plus haut). Il faut utiliser une autre méthode, celle de l'exemple 10.
Mais en fait si tu n'as qu'un menu vertical tu peux garder ta méthode (car dans ce cas les éléments A qui sont des blocs se mettront tous seuls les uns sur les autres)
La méthode que je t'ai proposée avait un sens si tu devais avoir un alignement horizontal de tes images.
Quel est ton design final que tu souhaites en fait ?
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 06-09-2004 à 21:13:20
En fait pour mon site, seule la page d'acceuil sera comme ca:
http://www.chez.com/eternity78/test/index.htm
et toutes les pages de contenus auront cet aspect là:
http://www.chez.com/eternity78/test/index2.htm
Donc pour les pages de contenus mieux vaut garder ma technique ?
Marsh Posté le 06-09-2004 à 23:22:26
404 sur le premier lien
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 07-09-2004 à 23:39:54
Il va falloir faire un mix des 2 méthodes alors :
- menu vertical -> ta méthode
- menu horizontal -> Exemple 10 du lien en dessus (si tu veux que ça marche avec IE) http://www.wpdfd.com/editorial/thebox/example10.html Ouais non en fait ça ira pas. Si tu veux aligner horizontalement tes liens tu peux aussi essayer de les mettre en flottants (float: left
et comme ça tu gardes la même méthode pour les rollover.
Message édité par gm_superstar le 08-09-2004 à 00:49:07
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Sujets relatifs:
- probleme afficahge page web
- Problème d'affichage css
- probleme client attente d'une connexion server
- [PHP/dédié] Problème de mail ( expediteur = nobody@monserveur.com )
- Problème avec Rowspan
- [CSS] incompatibilité avec ie/mozilla [résolu]
- Problème liste déroulante + javascript
- centrage du text dans page au format CSS ???
- CSS pb IE 5.5
Marsh Posté le 01-09-2004 à 23:06:00
Je n'arrive pas a centrer mes block comme je le voudrait, il y a toujours quelque chose qui cloche
un chti schema pour comprendre:
Je voudrait crée un bloc conteneur qui sert de conteneur pour mon site. Ensuite trois bloc organisé a l'interieur du conteneur qui sera centré sur la page.
voici mon code (j'ai inclus les CSS dans ma page html pour les éssais):
<head>
<style type="text/css">
<!--
.zone1
{
text-align: center;
background-color: red;
width: 760px;
height: 620px;
}
.zone2
{
position: relative;
background-color: green;
width: 190px;
height: 455px;
margin-left: 0;
margin-top: 0;
}
.zone3
{
position: relative;
background-color: yellow;
width: 570px;
height: 455px;
margin-right: 0;
margin-top: 0;
}
.zone4
{
text-align: center;
margin-bottom: 0;
background-color: blue;
width: 760px;
height: 190px;
}
-->
</style>
</head>
<body>
<div class="zone1">
<div class="zone2"></div>
<div class="zone3"></div>
<div class="zone4"></div>
</div>
</body>
</html>
Si quelqu'un qui maitrisse le possitionnement en CSS veut bien m'aider
Message édité par eternity_78 le 01-09-2004 à 23:13:01