floyde
Originalplakat- 7. April 2005
- Monterrey Mexiko
- 27. März 2006
Ich habe zwei div. Einer hat eine feste Höhe und ich möchte, dass der andere den verbleibenden vertikalen Raum im Fenster ausfüllt. Wenn ich die Höhe des letzteren Divs auf 100 % setze, wird es auf die gleiche Höhe wie das Fenster gesetzt, aber ich möchte, dass es die Höhe des Fensters minus der Höhe des ersten Divs ist.
Dies ist der Code, den ich verwende:
Code: |_+_|
Ich habe auch einige Bilder eingefügt, die zeigen, was ich tun möchte und was ich bisher tun konnte. Danke im Voraus
Anhänge
n
NoNameMarke
- 17.11.2005
- Halifax, Kanada
- 27. März 2006
Sonst kann ich mir keinen Weg vorstellen, wie du bekommst, was du willst.
stevep
- 13. Oktober 2004
- Vereinigtes Königreich
- 27. März 2006
Versuchen:
Unbenanntes Dokument
zu
B
C
D
Und
ps Ich habe betrogen, indem ich es in DW gemacht habe, der zweiten Ebene etwas Inhalt hinzugefügt und dann mit dem Code herumgespielt habe - DW mag es, wenn die Kanten etwas aufgefüllt sind, und obwohl Sie in den Dialogfeldern angeben können, dass eine Ebene verwendet werden soll Beginnen Sie bei 0px in der oberen Ecke, Sie müssen es zweimal sagen, indem Sie die Codeansicht verwenden. Ich musste sowieso.
floyde
Originalplakat- 7. April 2005
- Monterrey Mexiko
- 27. März 2006
NoNameBrand sagte: Warum nicht die erste in die zweite verschachteln?
Sonst kann ich mir keinen Weg vorstellen, wie du bekommst, was du willst.
Danke, das funktioniert optisch, aber das zweite div wird ein Container für dieses Layout sein, daher muss es noch die richtigen Abmessungen haben, damit der Inhalt sie erben kann.
Vielleicht ist es also einfach nicht möglich? Vielleicht muss ich ein wenig Javascript verwenden, damit es funktioniert?
Stevep sagte: Versuchen Sie:Danke, aber ich konnte es nicht zum Laufen bringen. Welchen Browser hast du verwendet?
floyde
Originalplakat- 7. April 2005
- Monterrey Mexiko
- 27. März 2006
Ok, hier ist ein Bild von meinem ultimativen Ziel. Bisher habe ich es schrittweise gemacht, also ist das Problem vielleicht mein erster Ansatz. Wie würdet ihr das angehen (ich brauche nur Ideen)? Würden Sie reines CSS verwenden oder würden Sie Tabellen oder Frames nachgeben?
Anhänge
stevep
- 13. Oktober 2004
- Vereinigtes Königreich
- 27. März 2006
Das Bit, mit dem Sie herumspielen müssen, ist Folgendes:
#Ebene1 {
Position: absolut;
links:0px;
oben:0px;
Breite:100%;
Höhe: 180px;
z-Index: 1;
Hintergrundfarbe: #99CCFF;
}
Rauen Sie Ihre Seite auf einem Blatt Papier auf, damit Sie die Positionen richtig machen, und das gibt Ihnen die Position der oberen linken Ecke jeder Ebene. Die Höhe von Schicht 1 bestimmt die Startposition von Schicht 2 - in diesem Fall muss Schicht 2 a . habenoben: 180px;Codezeile.
Wenn Sie die 3 Ebenen wie in Ihrem letzten Beitrag gezeigt haben möchten, dann ist die am weitesten links liegende Ebene:
#Ebene1 {
Position: absolut;
links:0px;
oben:0px;
Breite: 200px;
Höhe:100%;
z-Index: 1;
Hintergrundfarbe: #336699;
}
und die oberste RH-Schicht ist:
#Ebene1 {
Position: absolut;
links: 200px;
oben:0px;
Breite:100%;
Höhe: 180px;
z-Index: 2;
Hintergrundfarbe: #33CCFF;
}
und die dritte Ebene, die den Rest des Fensters ausfüllt (jedoch in der Größe geändert), sollte etwa so aussehen:
#Ebene1 {
Position: absolut;
links: 200px;
oben: 180px;
Breite:100%;
Höhe:100%;
z-Index: 3;
Hintergrundfarbe: #99CCFF;
}
Wenn Sie Dreamweaver verwenden, fügen Sie am besten Dummy-Inhalte in jede Ebene ein, falls die Ebene in der Seitenansicht auf nichts verkleinert wird, daher das 'a,b,c usw.' im obigen Original-HTML.
ps Ich bin kein Experte, ich kann mich irren, aber ich hoffe, es hilft. Was ich sagen kann ist, dass mein erster Code zu funktionieren scheint. Ich persönlich würde keine Schichten verschachteln, wenn ich etwas helfen könnte, aber das bin nur ich - ich mache nur einfaches. n
NoNameMarke
- 17.11.2005
- Halifax, Kanada
- 27. März 2006
Folgendes würde ich tun:
Code:
foo Sie glauben!
-
- 14. Juni 2003
-
-
- MD / VA / DC
- 27. März 2006
Dekonzeptieren ...
Schauen Sie sich FlashObject an und im Download gibt es Code, um ein div-Vollbild zu erstellen. Vielleicht kann es so angepasst werden, wie Sie es möchten.
http://blog.deconcept.com/flashobject/ floyde
Originalplakat -
- 7. April 2005
-
-
- Monterrey Mexiko
- 28. März 2006
Danke für all die Hilfe, Leute, aber mir ist gerade klar geworden, dass das genaue Layout, das ich möchte, mit einer Kombination aus festen Breiten/Höhen und Prozentsätzen unmöglich zu erreichen ist. Ich habe es nur mit Prozentsätzen umgeschrieben und jetzt funktioniert es. Wenn Sie sich für das Markup interessieren, lassen Sie es mich wissen und ich werde es veröffentlichen. stevep
-
- 13. Oktober 2004
-
-
- Vereinigtes Königreich
- 28. März 2006
floyde sagte: Wenn Sie sich für das Markup interessieren, lassen Sie es mich wissen und ich werde es posten.
Ich würde gerne nachschauen, ob Sie die Zeit haben, noch einmal zu posten.
NoNameBrand sagte: Was ist das für 'Schichten'-Zeug? ist das Dreamweaver-artig für 'Break-Zeugs wirklich-gut'?
Nun, ich weiß nicht, was das 'Knicken' angeht, aber ich denke, Sie haben erkannt, dass ich kein CSS-Boff bin - Ebenen sind ein bequemer Name, den die DW für Dinge gibt, die meiner Meinung nach 'CSS-positionierte Elemente' heißen sollten - und Ich glaube, sie nennen sie so, damit sich Leute wie ich mit einem DTP / Photoshop-Hintergrund etwas wohler fühlen. Wenn Sie sich den Code ansehen, den Sie in Ihrem Beitrag NoNameBrand enthalten, ist er viel eleganter als meiner - ich muss mich wirklich versuchen, das Div-Tag zu verstehen. Danke für die OP und die Antworten. n NoNameMarke
-
- 17.11.2005
-
-
- Halifax, Kanada
- 28. März 2006
stevep sagte: Nun, ich weiß nicht, was 'Knautschzeug' ist, aber ich denke, Sie haben vermutet, dass ich kein CSS-Boff bin '
Sie hatten auch Stacking-Z-Indizes - die Dinge von vorne nach hinten auf einer Seite positionieren. Ich habe schon zuvor DW-Layer gesehen, die eine Site total kaputt gemacht haben, aber ansonsten hatte ich nicht viel Kontakt mit ihnen (das war wirklich genug).
Ich muss versuchen, mich wirklich mit dem Div-Tag auseinanderzusetzen.
A ist nur ein beliebiger Block - es bedeutet semantisch nichts, wie atut (ein Textabschnitt). EINist die gleiche Idee, aber für Inline-Dinge (wie a tag, aber wieder semantikfrei).
Am einfachsten lernen Sie diese Dinge, wenn Sie Dreamweaver nicht mehr verwenden. Ich entwerfe meine Sites in Photoshop und speichere dann die gewünschten grafischen Elemente, notiere Farbcodes und einige grobe Pixelmaße für Ausrichtungszwecke und kodiere die Site dann in TextWrangler oder VIM. floyde
Originalplakat -
- 7. April 2005
-
-
- Monterrey Mexiko
- 28. März 2006
stevep sagte: Ich würde gerne nachsehen, ob du die Zeit hast, noch einmal zu posten.
Hier ist es, da ist ein bisschen Spanisch drin, ich hoffe es ist nicht zu verwirrend:
Code:Grand Scheme html { Höhe: 100 %; } Körper { Marge: 0; Polsterung: 0; Höhe: 100 %; Breite: 100 %; } #links, #rechts { float: left; } #links { Höhe:100%; Hintergrundfarbe: orange; Breite: 10 %; } #rechts { Höhe: 100%; Position: relativ; Breite: 90%; } #top { Hintergrundfarbe: blau; Höhe: 10%; } #fotos { position: relativ; Höhe: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { Höhe: 50%; Breite: 50%; Überlauf: automatisch; Position: absolut; } #foto_sup_izq, #foto_sup_der { top: 0; } #foto_sup_der, #foto_inf_der { links: 50%; } #foto_inf_izq, #foto_inf_der { oben: 50%; } 
Anhänge
Beliebte Beiträge