Fórumok

A div elem kitölti a fennmaradó függőleges teret? (css)

floyde

Eredeti plakát
2005. április 7
Monterrey Mexikó
  • 2006. március 27
Lehetséges?
Két divem van. Az egyik fix magasságú, és azt szeretném, hogy a másik kitöltse az ablakon fennmaradó függőleges helyet. Ha az utóbbi div magasságát 100%-ra állítom, akkor az ablak magasságával azonos magasságú lesz, de azt szeretném, ha az ablak magassága mínusz az első div magassága lenne.

Ez az általam használt kód:
Kód: |_+_|
Mellékeltem néhány képet is, amin látható, hogy mit szeretnék csinálni, és mire is tudtam eddig. Előre is köszönöm

Mellékletek

  • xa.gif xa.gif'file-meta'> 2,6 KB · Megtekintések: 10 076
  • xb.gif xb.gif'file-meta'> 3 KB · Megtekintések: 9 950
N

NoNameBrand

2005. november 17


Halifax, Kanada
  • 2006. március 27
Miért nem fészkelte be az 1-est a 2-ba?

Különben nem tudom elképzelni, hogy megkapja, amit akar.

stevep

2004. október 13
Egyesült Királyság
  • 2006. március 27
Azt hiszem, előfordulhat, hogy nem mondod meg a második rétegnek, hogy hol kell kezdenie, ezért feltételezi, hogy felülről indul, így átfedi az első réteget.
Próbáld ki:




Névtelen dokumentum










nak nek






b


c




d


És







ps Csaltam azzal, hogy DW-ben csináltam, hozzáadtam egy kis tartalmat a második réteghez, majd a kóddal vacakoltam - a DW szereti, ha a dolgok szélein vannak párnázás, és bár a párbeszédablakban megadhatod, hogy egy réteget 0px-nél kezdje a felső sarokból, kétszer kell elmondania a Code View segítségével. Mindenesetre muszáj volt.

floyde

Eredeti plakát
2005. április 7
Monterrey Mexikó
  • 2006. március 27
NoNameBrand azt mondta: Miért nem fészkelte be az 1-est a 2-ba?

Különben nem tudom elképzelni, hogy megkapja, amit akar.

Köszönöm, ez vizuálisan működik, de a második div egy konténer lesz ehhez az elrendezéshez, így még mindig szükségem van a megfelelő méretekre, hogy a tartalma örökölje azokat.

Szóval lehet, hogy egyszerűen nem lehetséges? Talán egy kis javascriptet kell használnom, hogy működjön?

Stevep mondta: Próbáld meg:
Köszi, de nem tudtam működni, milyen böngészőt használtál?

floyde

Eredeti plakát
2005. április 7
Monterrey Mexikó
  • 2006. március 27
A dolgok nagy terve

Rendben, itt egy kép a végső célomról. Eddig fokozatosan csináltam, így talán az én kezdeti megközelítésemben van a probléma. Szóval ti hogyan közelítenétek meg ezt (csak ötletek kellenek)? Tiszta css-t használnál, vagy engednél a táblázatoknak, kereteknek?

Mellékletek

  • grand_scheme.gif grand_scheme.gif'file-meta'> 40,2 KB · Megtekintések: 450

stevep

2004. október 13
Egyesült Királyság
  • 2006. március 27
Safarit használtam. Másolja ki és illessze be a kódrészletet egy szöveges fájlba – a mentéskor győződjön meg róla, hogy szerepel a .html utótag. Ezután egyszerűen húzza az új fájlt egy nyitott böngészőablakba. Most teszteltem Firefox-szal, és rendben van - legalábbis azt gondolom, hogy az, amit akarsz.
A következő dologgal kell játszani:
#Layer1 {
pozíció:abszolút;
bal:0px;
felső:0px;
szélesség:100%;
magasság: 180 képpont;
z-index: 1;
háttérszín: #99CCFF;
}

Dörzsölje ki az oldalt egy darab papírra, hogy a megfelelő pozíciókat kapja, és így megkapja az egyes rétegek bal felső sarkának helyzetét. Az 1. réteg magassága határozza meg a 2. réteg kezdő pozícióját - ebben az esetben a 2. rétegnek afelső: 180 képpont;kódsor.
Ha azt szeretnéd, hogy a 3 réteg úgy legyen, ahogy az utolsó bejegyzésedben mutatod, akkor a bal szélső réteg a következő lesz:
#Layer1 {
pozíció:abszolút;
bal:0px;
felső:0px;
szélesség: 200 képpont;
magasság:100%;
z-index: 1;
háttérszín: #336699;
}

és a felső RH réteg a következő lesz:
#Layer1 {
pozíció:abszolút;
bal:200px;
felső:0px;
szélesség:100%;
magasság: 180 képpont;
z-index: 2;
háttérszín: #33CCFF;
}

és a 3. rétegnek, amely kitölti az ablak fennmaradó részét (bármilyen át is van méretezve), valami ilyesminek kell lennie:
#Layer1 {
pozíció:abszolút;
bal:200px;
felső: 180 képpont;
szélesség:100%;
magasság:100%;
z-index: 3;
háttérszín: #99CCFF;
}

Ha Dreamweavert használ, a legjobb, ha minden rétegbe ál tartalmat helyez el, ha a réteg semmivé zsugorodik az oldalnézetben, ezért az „a,b,c stb” az eredeti html-ben.

ps Nem vagyok szakértő, lehet, hogy tévedek, de remélem segít. Azt mondhatom, hogy az első kódrészletem működik. Én személy szerint nem fészkelnék be rétegeket, ha segíthetnék kicsit, de ez csak én vagyok – én csak egyszerűt csinálok. N

NoNameBrand

2005. november 17
Halifax, Kanada
  • 2006. március 27
Mi ez a 'réteges' cucc? ez a Dreamweaver-féle 'break stuff'-ra való igazi jó?

Íme, mit tennék:
Kód:
foo   

hiszel!

2003. június 14
MD / VA / DC
  • 2006. március 27
Dekoncepció...

Nézze meg a FlashObject-et, és a letöltésben ott van a kód, amivel teljes képernyős div-t lehet készíteni.. talán lehet szabni, ahogy szeretnéd.

http://blog.deconcept.com/flashobject/

floyde

Eredeti plakát
2005. április 7
Monterrey Mexikó
  • 2006. március 28
Köszönöm a segítséget srácok, de most jöttem rá, hogy a kívánt elrendezést lehetetlen elérni rögzített szélességek/magasságok és százalékok kombinációjával. Átírtam csak százalékokat használva, és most már működik. Ha érdekel a jelölés, szólj és felteszem.

stevep

2004. október 13
Egyesült Királyság
  • 2006. március 28
floyde azt mondta: Ha érdekel a jelölés, szólj és felteszem.
Szeretnék egy pillantást vetni, ha van időd újra közzétenni.
NoNameBrand megkérdezte: Mi ez a „réteges” cucc? ez a Dreamweaver-féle 'break stuff'-ra való igazi jó?
Nos, nem tudok a 'törő cuccokról', de azt hiszem, arra gyanakodtál, hogy nem vagyok egy CSS-fiú – a rétegek egy kényelmes elnevezés a DW-től azoknak a dolgoknak, amelyeket szerintem 'CSS pozicionált elemeknek' kellene nevezni - és Szerintem azért hívják így őket, hogy az olyan emberek, mint én DTP/Photoshop háttérrel, kényelmesebben érezzék magukat. Ha a NoNameBrand bejegyzésében szereplő kódot nézzük, az sokkal elegánsabb, mint az enyém – muszáj lesz egy szúrnom, hogy a div címke köré fordítsam a fejem. Köszönöm az OP-t és a válaszokat. N

NoNameBrand

2005. november 17
Halifax, Kanada
  • 2006. március 28
stevep mondta: Nos, nem ismerem a 'törő cuccokat', de azt hiszem, azt gyanítottad, hogy nem vagyok CSS-fiú - a rétegek egy kényelmes elnevezés a DW-től azoknak a dolgoknak, amelyeket szerintem 'CSS pozicionált elemeknek' kellene nevezni. '

Emellett z-indexek is voltak rajtuk – amelyek elölről-hátára helyezik el a dolgokat egy oldalon. Láttam már olyan DW-rétegeket, amik teljesen összetörtek egy oldalt, de egyébként nem nagyon találkoztam velük (ez tényleg elég volt).

Kénytelen leszek egy szúrással, hogy a div címke köré kapjam a fejem.

Az A csak egy tetszőleges blokk – szemantikailag nem jelent semmit, ahogy a

csinál (egy bekezdés szöveg). Augyanaz az ötlet, de inline dolgokhoz (például a címke, de ismét szemantikai mentes).

Ennek megtanulásához a legegyszerűbb, ha abbahagyja a Dreamweaver használatát. Webhelyeimet Photoshopban tervezem, majd elmentem a kívánt grafikus elemeket, feljegyzem a színkódokat és néhány durva pixelméréseket igazítási célból, majd TextWranglerben vagy VIM-ben kódolom a webhelyet.

floyde

Eredeti plakát
2005. április 7
Monterrey Mexikó
  • 2006. március 28
stevep azt mondta: Szeretnék egy pillantást vetni, ha van időd újra közzétenni.
Itt van, van benne egy kis spanyol, remélem nem túl zavaró:

Kód:
Grand Scheme html { magasság: 100%; } body { margó: 0; párnázás: 0; magasság: 100%; szélesség: 100%; } #bal, #jobb { float: left; } #bal { magasság:100%; háttérszín: narancssárga; szélesség: 10%; } #jobb { magasság: 100%; pozíció:relatív; szélesség: 90%; } #top { háttérszín: kék; magasság: 10%; } #fotos { position: relatív; magasság: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { magasság: 50%; szélesség: 50%; túlcsordulás: auto; pozíció: abszolút; } #foto_sup_izq, #foto_sup_der { top: 0; } #foto_sup_der, #foto_inf_der { balra: 50%; } #foto_inf_izq, #foto_inf_der { tetejére: 50%; } img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg 

Mellékletek

  • img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg'file-meta'> 36,3 KB · Megtekintések: 405