floyde
Oryginalny plakat- 7 kwi 2005
- Monterrey Meksyk
- 27 marca 2006 r.
Mam dwóch divów. Jedna ma stałą wysokość i chcę, aby druga wypełniła pozostałą pionową przestrzeń na oknie. Jeśli ustawię wysokość drugiego elementu div na 100%, będzie on miał taką samą wysokość jak okno, ale chcę, aby była to wysokość okna minus wysokość pierwszego elementu div.
Oto kod, którego używam:
Kod: |__+_|
Dołączyłem też kilka zdjęć, które pokazują, co chcę robić i co udało mi się do tej pory. Z góry dziękuję
Załączniki
n
NoNameMarka
- 17 listopada 2005
- Halifax, Kanada
- 27 marca 2006 r.
W przeciwnym razie nie mogę wymyślić sposobu, w jaki dostaniesz to, czego chcesz.
Steve
- 13 października 2004 r.
- Wielka Brytania
- 27 marca 2006 r.
Próbować:
Nienazwany dokument
do
b
C
D
I
ps Oszukiwałem robiąc to w DW, dodając trochę zawartości do drugiej warstwy, a następnie bawiąc się kodem - DW lubi mieć trochę dopełnienia wokół krawędzi i chociaż możesz określić w oknach dialogowych, że chcesz, aby warstwa zacznij od 0px od górnego rogu, musisz powiedzieć to dwa razy, używając widoku kodu. I tak musiałem.
floyde
Oryginalny plakat- 7 kwi 2005
- Monterrey Meksyk
- 27 marca 2006 r.
NoNameBrand powiedział: Dlaczego nie zagnieździć pierwszego w drugim?
W przeciwnym razie nie mogę wymyślić sposobu, w jaki dostaniesz to, czego chcesz.
Dzięki, wizualnie to działa, ale drugi div będzie kontenerem dla tego układu, więc nadal muszę mieć odpowiednie wymiary, aby jego zawartość mogła je odziedziczyć.
Więc może to po prostu niemożliwe? Może będę musiał użyć trochę javascriptu, żeby to zadziałało?
Steve powiedział: Spróbuj:Dzięki, ale nie mogłem tego zrobić, jakiej przeglądarki używałeś?
floyde
Oryginalny plakat- 7 kwi 2005
- Monterrey Meksyk
- 27 marca 2006 r.
Ok, oto zdjęcie mojego ostatecznego celu. Do tej pory robiłem to stopniowo, więc może problemem jest moje początkowe podejście. Więc jak byście podeszli do tego (potrzebuję tylko pomysłów)? Czy użyłbyś czystego css, czy poddałbyś się tabelom lub ramkom?
Załączniki
Steve
- 13 października 2004 r.
- Wielka Brytania
- 27 marca 2006 r.
Trochę, z którym musisz się pobawić, to:
#Warstwa1 {
pozycja:bezwzględna;
lewy: 0px;
góra:0px;
szerokość:100%;
wysokość:180px;
z-index:1;
kolor tła: #99CCFF;
}
Zgrubnie na kartce papieru, aby uzyskać prawidłowe pozycje, a to da ci pozycję górnego LH rogu każdej warstwy. Wysokość warstwy 1 określi położenie początkowe warstwy 2 - w tym przypadku warstwa 2 musi mieć agóra:180px;wiersz kodu.
Jeśli chcesz, aby 3 warstwy były pokazane w ostatnim poście, najbardziej po lewej stronie będzie warstwa:
#Warstwa1 {
pozycja:bezwzględna;
lewy: 0px;
góra:0px;
szerokość:200px;
wzrost:100%;
z-index:1;
kolor tła: #336699;
}
a górna warstwa RH będzie:
#Warstwa1 {
pozycja:bezwzględna;
lewy:200px;
góra:0px;
szerokość:100%;
wysokość:180px;
z-index:2;
kolor tła: #33CCFF;
}
a trzecia warstwa wypełniająca pozostałą część okna (niezależnie od tego, jak ma zmieniony rozmiar) powinna wyglądać mniej więcej tak:
#Warstwa1 {
pozycja:bezwzględna;
lewy:200px;
góra:180px;
szerokość:100%;
wzrost:100%;
z-index:3;
kolor tła: #99CCFF;
}
Najlepiej umieścić trochę fikcyjnej zawartości w każdej warstwie, jeśli używasz programu Dreamweaver, na wypadek gdyby warstwa zmniejszyła się do zera w widoku strony, stąd 'a,b,c itd.' w oryginalnym html powyżej.
ps Nie jestem ekspertem, może się mylę, ale mam nadzieję, że to pomoże. Mogę tylko powiedzieć, że mój pierwszy fragment kodu wydaje się działać. Osobiście nie zagnieździłbym warstw, gdybym mógł trochę pomóc, ale to tylko ja - robię tylko proste. n
NoNameMarka
- 17 listopada 2005
- Halifax, Kanada
- 27 marca 2006 r.
Oto, co bym zrobił:
Kod:
bla wierzysz!
-
- 14 czerwca 2003 r.
-
-
- MD / VA / DC
- 27 marca 2006 r.
Dekoncept...
Sprawdź FlashObject, a w pobranym pliku znajduje się kod do stworzenia div pełnoekranowego.. może można go dostosować tak, jak chcesz.
http://blog.deconcept.com/flashobject/ floyde
Oryginalny plakat -
- 7 kwi 2005
-
-
- Monterrey Meksyk
- 28 marca 2006
Dziękuję za pomoc, ale właśnie zdałem sobie sprawę, że dokładny układ, którego chcę, jest niemożliwy do osiągnięcia za pomocą kombinacji stałych szerokości/wysokości i wartości procentowych. Przepisałem to używając tylko procentów i teraz działa. Jeśli jesteś zainteresowany znacznikami daj mi znać, a ja to opublikuję. Steve
-
- 13 października 2004 r.
-
-
- Wielka Brytania
- 28 marca 2006
floyde powiedział: Jeśli jesteś zainteresowany znacznikami, daj mi znać, a ja to opublikuję.
Chciałbym rzucić okiem, jeśli masz czas na ponowne opublikowanie.
NoNameBrand powiedział: Co to za „warstwy”? czy to w stylu Dreamweavera dla 'przerwania rzeczy' jest naprawdę dobre?
Cóż, nie znam się na „łamliwych rzeczach”, ale przypuszczam, że nie jestem boffem CSS – warstwy to wygodna nazwa nadana przez DW rzeczom, które moim zdaniem powinny być nazywane „elementami pozycjonowanymi w CSS” – i Myślę, że nazywają je tak, aby ludzie tacy jak ja z tła DTP / Photoshop czuli się nieco bardziej komfortowo. Patrząc na kod, który umieściłeś w swoim poście, NoNameBrand jest o wiele bardziej elegancki niż mój – będę musiał się postarać, żeby naprawdę ominąć znacznik div. Dzięki za OP i odpowiedzi. n NoNameMarka
-
- 17 listopada 2005
-
-
- Halifax, Kanada
- 28 marca 2006
stevep powiedział: Cóż, nie wiem o „łamliwych rzeczach”, ale myślę, że podejrzewasz, że nie jestem boffem CSS - warstwy to wygodna nazwa nadawana przez DW rzeczom, które moim zdaniem powinny być nazywane „elementami pozycjonowanymi w CSS '
Mieli również na sobie układanie indeksów Z, które ustawiają rzeczy od przodu do tyłu na stronie. Widziałem wcześniej warstwy DW, które całkowicie zepsuły witrynę, ale poza tym nie miałem z nimi zbyt wiele ekspozycji (naprawdę wystarczyło).
Będę musiał się dźgnąć, żeby naprawdę ominąć znacznik div.
A jest po prostu arbitralną blokadą - semantycznie nic nie znaczy, tak jak arobi (akapit tekstu). Ato ten sam pomysł, ale dla rzeczy wbudowanych (takich jak tag, ale znowu semantycznie wolny).
Najłatwiejszą rzeczą do zrobienia, aby się tego nauczyć, jest zaprzestanie korzystania z programu Dreamweaver. Projektuję swoje witryny w Photoshopie, a następnie zapisuję wybrane elementy graficzne wraz z kodami kolorów i kilkoma przybliżonymi pomiarami pikseli w celu wyrównania, a następnie koduję witrynę w TextWranglerze lub VIM. floyde
Oryginalny plakat -
- 7 kwi 2005
-
-
- Monterrey Meksyk
- 28 marca 2006
stevep powiedział: Chciałbym rzucić okiem, jeśli masz czas na ponowne opublikowanie.
Tutaj jest trochę hiszpańskiego, mam nadzieję, że nie jest zbyt mylące:
Kod:Wielki Schemat html { wysokość: 100%; } treść { margines: 0; wypełnienie: 0; wzrost: 100%; szerokość: 100%; } #lewo, #prawo { float: lewo; } #lewo { wysokość:100%; kolor tła: pomarańczowy; szerokość: 10%; } #prawo { wzrost: 100%; pozycja:względna; szerokość: 90%; } #top { kolor tła: niebieski; wzrost: 10%; } #fotos { pozycja: względna; wzrost: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { wysokość: 50%; szerokość: 50%; przelew: auto; pozycja: bezwzględna; } #foto_sup_izq, #foto_sup_der { góra: 0; } #foto_sup_der, #foto_inf_der { po lewej: 50%; } #foto_inf_izq, #foto_inf_der { góra: 50%; } 
Załączniki
Popularne Wiadomości