Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2059 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  organisation de block "div" avec les CSS: probleme

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

organisation de block "div" avec les CSS: probleme

n°839301
eternity_7​8
Posté le 01-09-2004 à 23:06:00  profilanswer
 

:hello:  
 
Je n'arrive pas a centrer mes block comme je le voudrait, il y a toujours quelque chose qui cloche  :cry:  
 
un chti schema pour comprendre:
http://www.chez.com/eternity78/photos/plan.jpg
 
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   :jap:


Message édité par eternity_78 le 01-09-2004 à 23:13:01
mood
Publicité
Posté le 01-09-2004 à 23:06:00  profilanswer
 

n°839329
gm_superst​ar
Appelez-moi Super
Posté le 01-09-2004 à 23:55:20  profilanswer
 

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
n°840396
eternity_7​8
Posté le 02-09-2004 à 19:59:39  profilanswer
 

je vais regarder ca  ;)

Message cité 1 fois
n°840505
eternity_7​8
Posté le 02-09-2004 à 22:53:45  profilanswer
 

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 ?
 
 :jap:


Message édité par eternity_78 le 02-09-2004 à 22:54:09
n°840507
eternity_7​8
Posté le 02-09-2004 à 22:56:30  profilanswer
 

<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);
}

n°840520
gm_superst​ar
Appelez-moi Super
Posté le 02-09-2004 à 23:19:12  profilanswer
 
n°841378
eternity_7​8
Posté le 03-09-2004 à 18:44:08  profilanswer
 

pour l'instant ce n'est qu'en local sur mon PC :/

n°841604
eternity_7​8
Posté le 03-09-2004 à 21:43:51  profilanswer
 

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

n°841722
eternity_7​8
Posté le 03-09-2004 à 23:08:39  profilanswer
 

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  :sweat:  
 
 
 :jap:

n°841730
gm_superst​ar
Appelez-moi Super
Posté le 03-09-2004 à 23:12:27  profilanswer
 
mood
Publicité
Posté le 03-09-2004 à 23:12:27  profilanswer
 

n°841739
gm_superst​ar
Appelez-moi Super
Posté le 03-09-2004 à 23:18:26  profilanswer
 

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
n°842071
eternity_7​8
Posté le 04-09-2004 à 09:26:23  profilanswer
 

je vais réeessayer comme tu me le dis  :jap:  
(au depart j'avai fait comme ca sans succès alors qu'avec les float ca marchait -> jusqu'a l'arrivé des rollovers :/ )

n°842454
eternity_7​8
Posté le 04-09-2004 à 23:20:32  profilanswer
 

http://www.chez.com/eternity78/test/
 
j'ai deja du mieux  :D  
 
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" )

n°842533
gm_superst​ar
Appelez-moi Super
Posté le 05-09-2004 à 02:04:38  profilanswer
 

eternity_78 a écrit :


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


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
n°842566
eternity_7​8
Posté le 05-09-2004 à 09:42:09  profilanswer
 

gm_superstar 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.


 
Ba justement non [: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 :/

n°842586
gm_superst​ar
Appelez-moi Super
Posté le 05-09-2004 à 11:22:58  profilanswer
 

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
n°842854
eternity_7​8
Posté le 05-09-2004 à 18:38:03  profilanswer
 

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 ? )
 
 :jap:  merci pour ton aide

n°842927
gm_superst​ar
Appelez-moi Super
Posté le 05-09-2004 à 22:18:29  profilanswer
 

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 :


Y a t'il un avantage pour chaque solutions ? (code plus "lourd" ou pas reglementaire d'apres le W3C ? )


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
n°842937
eternity_7​8
Posté le 05-09-2004 à 22:30:52  profilanswer
 

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.

n°842938
gm_superst​ar
Appelez-moi Super
Posté le 05-09-2004 à 22:32:03  profilanswer
 
n°843645
eternity_7​8
Posté le 06-09-2004 à 19:02:53  profilanswer
 

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
n°843679
gm_superst​ar
Appelez-moi Super
Posté le 06-09-2004 à 20:27:53  profilanswer
 

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
n°843710
eternity_7​8
Posté le 06-09-2004 à 21:13:20  profilanswer
 

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 ?
 
 :jap:

n°843801
gm_superst​ar
Appelez-moi Super
Posté le 06-09-2004 à 23:22:26  profilanswer
 
n°843805
eternity_7​8
Posté le 06-09-2004 à 23:24:42  profilanswer
 
n°844579
gm_superst​ar
Appelez-moi Super
Posté le 07-09-2004 à 23:39:54  profilanswer
 

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
n°845306
eternity_7​8
Posté le 08-09-2004 à 18:51:53  profilanswer
 

Merci de ton aide   :jap:

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  organisation de block "div" avec les CSS: probleme

 

Sujets relatifs
probleme afficahge page webProblè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 + javascriptcentrage du text dans page au format CSS ???
CSS pb IE 5.5 
Plus de sujets relatifs à : organisation de block "div" avec les CSS: probleme

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.088 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR