floyde
Affiche originale- 7 avr. 2005
- Monterrey Mexique
- 27 mars 2006
J'ai deux div. L'un a une hauteur fixe et je veux que l'autre remplisse l'espace vertical restant sur la fenêtre. Si je règle la hauteur de ce dernier div sur 100 %, cela lui donnera la même hauteur que la fenêtre, mais je veux que ce soit la hauteur de la fenêtre moins la hauteur du premier div.
Voici le code que j'utilise :
Code : |_+_|
J'ai également inclus des images qui montrent ce que je veux faire et ce que j'ai pu faire jusqu'à présent. Merci d'avance
Pièces jointes
N
SansNomMarque
- 17 novembre 2005
- Halifax, Canada
- 27 mars 2006
Sinon, je ne vois pas comment vous obtiendrez ce que vous voulez.
steve
- 13 octobre 2004
- Royaume-Uni
- 27 mars 2006
Essayer:
Document sans titre
à
b
c
ré
Et
ps j'ai triché en le faisant dans DW, en ajoutant du contenu au deuxième calque, puis en jouant avec le code - DW aime que les choses aient du rembourrage sur les bords et même si vous pouvez spécifier dans les boîtes de dialogue que vous voulez un calque commencez à 0px du coin supérieur, vous devez le dire deux fois, en utilisant la vue Code. Je devais de toute façon.
floyde
Affiche originale- 7 avr. 2005
- Monterrey Mexique
- 27 mars 2006
NoNameBrand a dit : Pourquoi ne pas emboîter le 1er dans le 2e ?
Sinon, je ne vois pas comment vous obtiendrez ce que vous voulez.
Merci, cela fonctionne visuellement, mais le deuxième div sera un conteneur pour cette mise en page , j'ai donc toujours besoin qu'il ait les bonnes dimensions pour que son contenu puisse en hériter.
Alors peut-être que ce n'est tout simplement pas possible ? Peut-être que j'aurai besoin d'utiliser un peu de javascript pour le faire fonctionner ?
Steve a dit : Essayez :Merci, mais je n'ai pas réussi à le faire fonctionner, quel navigateur avez-vous utilisé ?
floyde
Affiche originale- 7 avr. 2005
- Monterrey Mexique
- 27 mars 2006
Ok, voici une photo de mon objectif ultime. Jusqu'à présent, je l'ai fait progressivement, alors peut-être que le problème est mon approche initiale. Alors, comment aborderiez-vous cela (j'ai juste besoin d'idées) ? Utiliseriez-vous du css pur, ou céderiez-vous aux tableaux ou aux cadres ?
Pièces jointes
steve
- 13 octobre 2004
- Royaume-Uni
- 27 mars 2006
Le morceau avec lequel vous devez jouer est le suivant :
#Couche1 {
position:absolue;
à gauche : 0px ;
haut : 0px ;
largeur : 100 % ;
hauteur : 180 px ;
indice z : 1 ;
couleur d'arrière-plan : #99CCFF ;
}
Dégrossissez votre page sur un morceau de papier afin que vous obteniez les bonnes positions, et cela vous donnera la position du coin supérieur gauche de chaque couche. La hauteur de la couche 1 déterminera la position de départ de la couche 2 - dans ce cas, la couche 2 doit avoir unehaut : 180 px ;ligne de code.
Si vous voulez les 3 calques comme vous le montrez dans votre dernier message, alors le calque le plus à gauche sera :
#Couche1 {
position:absolue;
à gauche : 0px ;
haut : 0px ;
largeur : 200px ;
hauteur : 100 % ;
indice z : 1 ;
couleur d'arrière-plan : #336699 ;
}
et la couche RH supérieure sera :
#Couche1 {
position:absolue;
gauche : 200 px ;
haut : 0px ;
largeur : 100 % ;
hauteur : 180 px ;
indice z : 2 ;
couleur d'arrière-plan : #33CCFF ;
}
et le 3ème calque pour remplir le reste de la fenêtre (cependant il est redimensionné) devrait être quelque chose comme :
#Couche1 {
position:absolue;
gauche : 200 px ;
haut : 180 px ;
largeur : 100 % ;
hauteur : 100 % ;
indice z : 3 ;
couleur d'arrière-plan : #99CCFF ;
}
Il est préférable de mettre du contenu factice dans chaque calque si vous utilisez Dreamweaver, au cas où le calque se réduirait à rien dans la vue de la page, d'où le 'a,b,c etc' dans le code html d'origine ci-dessus.
ps je ne suis pas un expert, je me trompe peut-être mais j'espère que ça t'aidera. Ce que je peux dire, c'est que mon premier morceau de code semble fonctionner. Personnellement, je n'imbriquerais pas de calques si je pouvais m'aider, mais ce n'est que moi - je ne fais que du simple. N
SansNomMarque
- 17 novembre 2005
- Halifax, Canada
- 27 mars 2006
Voici ce que je ferais :
Code:
foo tu crois!
-
- 14 juin 2003
-
-
- MD/VA/DC
- 27 mars 2006
Déconception...
Découvrez FlashObject et dans le téléchargement, il y a un code pour créer un div en plein écran. Peut-être qu'il peut être adapté comme vous le souhaitez.
http://blog.deconcept.com/flashobject/ floyde
Affiche originale -
- 7 avr. 2005
-
-
- Monterrey Mexique
- 28 avr. 2006
Merci pour toute votre aide, mais je viens de réaliser que la mise en page exacte que je veux est impossible à réaliser avec une combinaison de largeurs/hauteurs et pourcentages fixes. Je l'ai réécrit en utilisant uniquement des pourcentages et maintenant cela fonctionne. Si vous êtes intéressé par le balisage, faites-le moi savoir et je le publierai. steve
-
- 13 octobre 2004
-
-
- Royaume-Uni
- 28 avr. 2006
floyde a dit : Si vous êtes intéressé par le balisage, faites-le moi savoir et je le publierai.
J'aimerais voir si vous avez le temps de poster à nouveau.
NoNameBrand a dit : Qu'est-ce que c'est que ce truc de « couches » ? est-ce que c'est Dreamweaver-esque pour « casser des trucs vraiment bien » ?
Eh bien, je ne sais pas pour les « trucs de rupture », mais je suppose que vous avez pensé que je ne suis pas un boff CSS - les couches sont un nom pratique donné par DW à des choses qui, selon moi, devraient être appelées « éléments positionnés CSS » - et Je pense qu'ils les appellent ainsi pour mettre un peu plus à l'aise les gens comme moi qui ont un background PAO/Photoshop. En regardant le code que vous avez inclus dans votre message NoNameBrand est beaucoup plus élégant que le mien - je vais devoir essayer de vraiment comprendre la balise div. Merci pour l'OP et les réponses. N SansNomMarque
-
- 17 novembre 2005
-
-
- Halifax, Canada
- 28 avr. 2006
Stevep a dit : Eh bien, je ne sais pas pour les « trucs de rupture », mais je suppose que vous avez pensé que je ne suis pas un boff CSS - les couches sont un nom pratique donné par DW à des choses qui, selon moi, devraient être appelées « éléments positionnés en CSS '
Ils avaient également des index z empilés sur eux - qui positionnent les choses d'avant en arrière sur une page. J'ai déjà vu des couches DW qui ont totalement cassé un site, mais sinon, je n'y ai pas été beaucoup exposée (c'était suffisant, vraiment).
Je vais devoir essayer de vraiment comprendre la balise div.
A est juste un bloc arbitraire - cela ne veut rien dire sémantiquement, comme unfait (un paragraphe de texte). UNEc'est la même idée, mais pour les choses en ligne (comme un tag, mais encore une fois, sans sémantique).
La chose la plus simple à faire pour apprendre ce genre de choses est d'arrêter d'utiliser Dreamweaver. Je conçois mes sites dans Photoshop, puis enregistre les éléments graphiques que je veux, en notant les codes de couleur et quelques mesures approximatives de pixels à des fins d'alignement, puis je code le site dans TextWrangler ou VIM. floyde
Affiche originale -
- 7 avr. 2005
-
-
- Monterrey Mexique
- 28 avr. 2006
stevep a dit : j'aimerais jeter un œil si vous avez le temps de poster à nouveau.
Voilà, il y a un peu d'espagnol là-dedans, j'espère que ce n'est pas trop déroutant :
Code:Grand Scheme html { hauteur : 100 % ; } corps { marge : 0 ; remplissage : 0 ; hauteur : 100 % ; largeur : 100 % ; } #gauche, #droite { float : gauche ; } #gauche { hauteur:100%; couleur de fond : orange ; largeur : 10 % ; } #droit { hauteur : 100 % ; position : parent ; largeur : 90 % ; } #top { background-color: blue; hauteur : 10 % ; } #photos { position : relative ; hauteur : 90 % ; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { hauteur : 50 % ; largeur : 50 % ; débordement : automatique ; position : absolue ; } #foto_sup_izq, #foto_sup_der { haut : 0 ; } #foto_sup_der, #foto_inf_der { gauche : 50 % ; } #foto_inf_izq, #foto_inf_der { haut : 50 % ; } 
Pièces jointes
Articles Populaires