ugrás a tartalomhoz

DIVek összehangolása

haho · 2010. Szep. 1. (Sze), 23.40
Sziasztok!
A sok érv a div-ek mellett engem is meggyőzött, de eddig féltem belevágni. Nem csoda, hiszen táblázatokkal már nagyon jól ment a böngészőfüggetlen kód, de a div-ek nagyon idegennek tűntek. És még mindig azok sajnos:

Szóval adott egy oldal ahol van egy bal, egy középső és egy jobb oldali div. A bal és jobb div csak a külső megjelenés kedvéért van, tehát azokban tartalom nincsen, csak ismétlődő háttérkép van beállítva rájuk.

Megadom mindhárom DIVnek a 100% height paramétert és mindhárom div kitölti a teljes képernyőt. Azonban ha a tartalom olyan nagy a középsőben, hogy a középső div magasságát megnyújtja, akkor a bal és jobb divek nem követik őt ugye, mint egy táblázat esetében és onnantól kezdve már nem ismétlődik a hátterük sem ezáltal.
ÉN PEDIG PONTOSAN EZT SZERETNÉM ELÉRNI HA LEHETSÉGES... Össze lehet hangolni a 3 egymás mellé helyezett div-et valahogyan?
Köszönöm
‹ Alsó két sarok lekerekítése. Mit tegyek az iframe-el? ›
 ■
1

Háttérkép

Poetro · 2010. Szep. 2. (Cs), 00.00
Ha csak a háttérképet kell, akkor keress rá Faux Columns. Egyébként pedig maximum JavaScript-tel lehetne megoldani.
2

Tudnál linkelni egy url-t,

ironwill · 2010. Szep. 2. (Cs), 10.39
Tudnál linkelni egy url-t, vagy esetleg meg tudod mutatni a kódot, mert lehet, hogy másként is meg lehet oldani ami szeretnél, és akkor nem kell a 3 oszlopos megoldást erőltetni. (Más kérdés, ha a struktúrán változtatni már nem akarsz, csak "div-esíteni" akartad.)
3

float: left

Nutec · 2010. Szep. 2. (Cs), 11.41
Szia!

Próbáld ki a következőt:

A 3 oszlopot tedd bele egy burkoló divbe (legyen ez most container).
A containernek állítsd be a szélességét (legalább a 3 oszlop szélessége összesen) és a hátterret amit szeretnél ha ismétlődne.
A 3 oszlopot pedig floatold balra a css-ben (float: left;). Így mindig a leghosszabb oszlop magasságát veszi fel a container (és vele együtt a beállított háttér is).
A háttér mintázatát a faux-columnos példa szerint szerkeszd meg.
Remélem tudtam segíteni!

Üdv.: Nu7ec
4

div a div-ben

Zoyek · 2010. Okt. 7. (Cs), 15.43
Sziasztok!

Az alábbi rejtélyre szeretnék megoldást találni, már elég régóta keresem a neten de eddig nem sok sikerrel:

Adott egy weboldal tartalmi része ami két divből áll, baloldal és center. A baloldali div-ben található egy lenyíló menüsor (CollapsiblePanel) valamint ez alatt egy kisebb div-be ágyazott flash. Jelen pillanatban a flash együtt mozog a lenyíló menüvel ami nem is lenne akkora probléma. Viszont én azt szeretném , hogy fixen a baloldal alján maradjon némi távolsággal és a menü minden pontját lenyitják és ez miatt meg nyúlik a baloldal akkor is ott maradjon a flash a megnyúlt baloldal alján!

Előre is köszönöm az építő javaslatokat!
Zoyek
5

position: absolute

Poetro · 2010. Okt. 7. (Cs), 16.28
Hogy ne nyúljon meg a bal oldal a menüdet rakd egy relatív pozicionált div-be, és tedd a menüt abszolút pozícióba. Például:
<div style="position: relative;">
  <ul style="position: absolute;">
    <li>Menü elem 1.</li>
    <li>Menü elem 2.</li>
  </ul>
</div>
6

div a div-ben 2

Zoyek · 2010. Okt. 7. (Cs), 17.08
Köszi a tippet!

Nem a baloldal megnyúlásával van a gondom. Az teljesen jó úgy hogy ha a szemlélő úgy kívánja és végig lenyitogatja a menüpontokat akkor a kívánt méretre nyúlik . Viszont a menü alatti flash mindig a menü alatt helyezkedik el ( vele együtt mozog ) akár levannak nyitva a menüpontok akár nem. Na most én úgy szeretném ha ez a flash ( ami egy külön div-ben van )mindig a "baloldal" alján legyen függetlenül a menü helyzetétől. Ja és a menü is egy külön div-ben van a "baloldal"-on belül.
7

position: absolute

Poetro · 2010. Okt. 7. (Cs), 17.21
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>position: absolute</title>
</head>
<body style="width: 500px; margin: 0 auto; background: grey;">
  <div style="float: right; width: 300px; background: blue; 
              height: 500px;">
    <p>Nem a baloldal megnyúlásával van a gondom.
    Az teljesen jó úgy hogy ha a szemlélő úgy kívánja és végig lenyitogatja a
    menüpontokat akkor a kívánt méretre nyúlik . Viszont a menü alatti flash
    mindig a menü alatt helyezkedik el ( vele együtt mozog ) akár levannak
    nyitva a menüpontok akár nem. Na most én úgy szeretném ha ez a flash
    ( ami egy külön div-ben van )mindig a "baloldal" alján legyen függetlenül
    a menü helyzetétől. Ja és a menü is egy külön div-ben van a "baloldal"-on
    belül.</p>
  </div>
  <div style="float: left; width: 200px; background: red; 
              height: 500px; position: relative;">
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
  	</ul>
    <div style="position: absolute; bottom: 0; left: 0; 
                background: green; height: 100px; width: 100%;"></div>
  </div>
</body>
</html>
8

div a div-ben 3

Zoyek · 2010. Okt. 7. (Cs), 19.07
Ha nálam a flash-t tartalmazó div-nek ami a kódban a menü-t tartalmazó div után jön, absolute pozíciót adok akkor felkerül szépen a szülő div tetejére kitakarva a menüt, hiába adom meg nek a bottom:0px;-et és hát ott is marad!
Lényegében ha csak a baloldalt nézzük akkor van egy befoglaló div, benne egymás alatt 2 másik div. A felső tartalmazza a lenyiló menü-t az alsó a flash-t. És ezt az alsót szeretném fixen a befoglaló div aljához ragasztani valahogy.
9

div a div-ben 4

Zoyek · 2010. Okt. 8. (P), 08.26
Na megoldódott részben a probléma. Az absolute pozíció jó lett csak benmaradt egy top:10px; érték a css-ben és ezért tette felülre.
Most viszont csak a bottom van megadva neki és így beteszi lentre, de itt még mindig megoldásra vár az hogy ha kell a menü tudja lefelé tolni maga elött ezt a flash-div-et. Ez gondolom ezzel az absolute pozícióval nem fog menni!
Jelenleg ha teljesen le van nyitva a menü akkor teljesen kitölti a 600px magaságú baloldal-t és a vége nem látszik mert kitakarja a flash! Erre esetleg van valami megoldás?
10

mi lenne, ha..

ironwill · 2010. Okt. 8. (P), 10.24
Mi lenne, ha a flash-t is betennéd a bal oldali div-be alulra?
Akkor együtt pozícionálhatnád őket és mivel az abszolút pozícionálás, csak a div-re vonatkozik, a tartalmára nem, ezért a menü lenyitásakor lejjebb csúszna a flash..
Vagy nem jól látom a problémát?
11

nem rossz az ötlet viszont

Zoyek · 2010. Okt. 8. (P), 13.11
nem rossz az ötlet viszont ebben az esetben ha nem külön div-ben van a flash akkor hogy tudom a baloldal aljához tenni úgy hogy csak addig maradjon ott amig a menü lejebb nem tólja ha kell?
a kódban sorrendben a menüt tartalmazó div után van és a baloldal div vége elött. Írni kéne rá külön css-t?
12

? :)

ironwill · 2010. Okt. 8. (P), 13.26
baloldal aljához tenni úgy hogy csak addig maradjon ott amig a menü lejebb nem tólja ha kell?


Ha a menü lejjebb tolja, akkor is bal oldal alján lesz, nem? :)

Esetleg tudsz mutatni kód részletet, vagy egy képet róla, hogy mi van most és pontosan mit szeretnél?
14

elküldtem a az oldal címét az

Zoyek · 2010. Okt. 8. (P), 14.11
elküldtem a az oldal címét az email-etekre. DE MÉG NEM PUBLIKUS, mint látjátok majd nincs még kész! a termékek oldalon látható az a bizonyos baloldal a flash-el. a css-t megtudom itt mutatni, ha kell.
17

megnézem

ironwill · 2010. Okt. 8. (P), 14.52
Köszi, de majd csak este felé tudom megnézni az email címem. Addig a türelmed kérem! :)
13

sztem rakj akkor paddingot a

szabo.b.gabor · 2010. Okt. 8. (P), 14.02
sztem rakj akkor paddingot a div aljára, amekkora a flash-nek kell.. vagy egy placeholder divet a menü után, ami akkora mint a flash. szóval vmi ilyesmi foglald le a flash helyét egy nem látható valamivel..
15

sajna a te címedet nem

Zoyek · 2010. Okt. 8. (P), 14.14
sajna a te címedet nem találtam.
16

Amit pedig elérni szeretnék

Zoyek · 2010. Okt. 8. (P), 14.20
Amit pedig elérni szeretnék az az hogy a flash alaphelyzetben a baloldal alján jelenjen mag. És amikor a lenyíló menüt max lenyitják és ebben az állapotban hosszabb mint a baloldal eleve akkor tolja maga elött a flash-t illetve a befoglaló div is nyúljon meg annyival hogy kényelmesen elférjen benne minden, a menü is és utána a flash is. Esetleg a késöbbiekben szeretnék majd esetleg egyéb dolgokat is tenni a menü és a flash közé, ezeknek is mozogniuk kellene majd.
18

ok

ironwill · 2010. Okt. 8. (P), 18.11
Szia!

Megnéztem. Én a te helyedben mindig csak az aktuálisan kiválasztott menüpont almenüit jeleníteném meg, mert elég randa látvány tud nyújtani ahogy táncol lábléc.. :/
Ebből adódan nyugodtan igazíthatnád fixen alulra a flash-t:
.ballapalj {
..
position: absolute;
bottom: 10px;
..
}
illetve én még ezeket is tanácsolnám:
.CollapsiblePanelTab {
..
text-align: left;
..
}

.CollapsiblePanelContent td { //új szabály
text-align: left;
padding-left: 10px;
}
Illetve jelezném, hogy így tudsz globálisan betűtípust beállítani (és akkor nem kell minden egyes elemre külön-külön):
html,body,table,input,select {
font-family:Geneva,Arial,Helvetica,sans-serif;
}
19

Ok. Köszi az instrukciókat!

Zoyek · 2010. Okt. 11. (H), 08.17
Ok. Köszi az instrukciókat! Megnézem mik a lehetőségek!