Forum » Izdelava spletišč » CSS - DIV - Brez Tabele
CSS - DIV - Brez Tabele
jernejp ::
Mi prosim lahko kdo pomaga/pokaže, če je možno in kako s pomočjo CSS-ja in brez tabel narediti sledeč layout.
Po možnosti za zadnji IE, Mozillo in Chrome.
1.
Slika1
kaže osnovno postavitev.
2.
Slika2
kaže postavitev če zmanjšam velikost brskalnikovega okna.
3.
Če še zmanjšam okno, naj zunaja rdeča div-a izgineta, sredinski ostane enako širok, vendar se vidi le do roba okna...
Po možnosti za zadnji IE, Mozillo in Chrome.
1.
Slika1
kaže osnovno postavitev.
2.
Slika2
kaže postavitev če zmanjšam velikost brskalnikovega okna.
3.
Če še zmanjšam okno, naj zunaja rdeča div-a izgineta, sredinski ostane enako širok, vendar se vidi le do roba okna...
jernejp ::
@Gandalfar
Marsikaj sem že pogledal, tako da mi je to na žalost preveč obširen odgovor...
Le clean kodo za poslano sliko bi prosil, če kdo kje pri roki ima.
hvala,
lp
Marsikaj sem že pogledal, tako da mi je to na žalost preveč obširen odgovor...
Le clean kodo za poslano sliko bi prosil, če kdo kje pri roki ima.
hvala,
lp
gufy123 ::
malo se boš moral sam potrudit in pogruntat
desni div ima float:right, lefi div pa float:left
za skrivanje pa uporabi tole metodo: http://css-tricks.com/css-media-queries/
s tem, da boš ti na določeni širini napisal, da je div1 in div 2 display:none
desni div ima float:right, lefi div pa float:left
za skrivanje pa uporabi tole metodo: http://css-tricks.com/css-media-queries/
s tem, da boš ti na določeni širini napisal, da je div1 in div 2 display:none
jernejp ::
@gufy123
Če za desnega naredim float:right in levega float:left,
mi desnega postavi na zunanji desni rob in ne na desni rob od div3,
ter enako pri levem...
Hvala za link.
Če se nebi že kar precej trudil nebi pošiljal vprašanja in glede na čas,
ki sem ga že porabil mislim, da je zadeva sploh nemogoča...
Zgoraj nisem napisal da IE tudi pred v9 (xp ne podpira 9),
skratka če kdo ve in pokaže (javno na forumu),
pošljem 30€ preko paypal-a.
skratka:
css in 3 x div za funkcionalnost priloženih slik, brez JS, da deluje v IE8+, Chrome, Mozilla -> 30€ PayPal
Če za desnega naredim float:right in levega float:left,
mi desnega postavi na zunanji desni rob in ne na desni rob od div3,
ter enako pri levem...
Hvala za link.
Če se nebi že kar precej trudil nebi pošiljal vprašanja in glede na čas,
ki sem ga že porabil mislim, da je zadeva sploh nemogoča...
Zgoraj nisem napisal da IE tudi pred v9 (xp ne podpira 9),
skratka če kdo ve in pokaže (javno na forumu),
pošljem 30€ preko paypal-a.
skratka:
css in 3 x div za funkcionalnost priloženih slik, brez JS, da deluje v IE8+, Chrome, Mozilla -> 30€ PayPal
Gandalfar ::
jernejp: http://jsfiddle.net/ tule notri daj to kar imas do sedaj pa kar ne razumes pa bomo ti od tam dalje pomagal.
jernejp ::
Na podlagi prejšnjih napotkov sem naredil to:
http://jsfiddle.net/kLxg2/
Želel pa bi, da so div-i 1-3 eden ob drugem,
ter da se div-a 1 in 2 odmikata in na koncu izgineta,
ko manjšam velikost strani...
@Gandalfar
http://jsfiddle.net/kLxg2/
Želel pa bi, da so div-i 1-3 eden ob drugem,
ter da se div-a 1 in 2 odmikata in na koncu izgineta,
ko manjšam velikost strani...
@Gandalfar
gufy123 ::
kaj pa takole:
za skrivanje pa še dodaš
nisem poskušal ampak bi moralo bit nekaj v tem stilu
#Div1, #Div3 { border:4px solid Red; width:20%; display:inline-block; } #Div2 { border:4px solid blue; width:50%; display:inline-block; }
za skrivanje pa še dodaš
@media screen and (max-width: 400px) { #Div1, #Div3 {display:none} }
nisem poskušal ampak bi moralo bit nekaj v tem stilu
jernejp ::
@gufy123
Ko sem poskusil to v jsfiddle.net mi ne deluje...
Rdeča DIV-a morata biti fiksne širine in poravnana na zunanjost modrega in ne med modrim in robom strani...
Vseeno hvala za trud in lp
Ko sem poskusil to v jsfiddle.net mi ne deluje...
Rdeča DIV-a morata biti fiksne širine in poravnana na zunanjost modrega in ne med modrim in robom strani...
Vseeno hvala za trud in lp
gufy123 ::
ja dobro, pa jim določi fiksno širino. za test sem dal procente. nastavi še margine in paddinge pa bo
jernejp ::
gufy123 ::
#wrap { margin: 0px auto; width:400px; border:4px solid green; } #Div1, #Div3 { border:1px solid Red; width:98px; margin:0px; display:inline-block; } #Div2 { border:1px solid blue; width:190px; margin:0px; display:inline-block; }
jernejp ::
@gufy123
Na žalost ne gre tako kot sem želel...
Na začetku sem dal slike in opis kako naj stvar deluje.
Osnovna ideja je da je DIV2 content strani, v DIV1 & DIV2
pa je grafika ki ni nujno potrebna...
Stran je sredinsko poravnana in pri manjšanju strani,
se DIV1 in DIV2 skrivata DIV2 pa se ustavi na levem robu
in se na desni skriva...
Sedaj te zadeve rešujem preko TABLE in dela OK,
če pa poskusim z DIV mi nikakor ne gre, zato sem
tudi ponudil "nagrado", če kdo pomaga...
hvala za trud in lp
Na žalost ne gre tako kot sem želel...
Na začetku sem dal slike in opis kako naj stvar deluje.
Osnovna ideja je da je DIV2 content strani, v DIV1 & DIV2
pa je grafika ki ni nujno potrebna...
Stran je sredinsko poravnana in pri manjšanju strani,
se DIV1 in DIV2 skrivata DIV2 pa se ustavi na levem robu
in se na desni skriva...
Sedaj te zadeve rešujem preko TABLE in dela OK,
če pa poskusim z DIV mi nikakor ne gre, zato sem
tudi ponudil "nagrado", če kdo pomaga...
hvala za trud in lp
jernejp ::
1.Kar precej sem se poglobil v dive in ker zadeva ni šla sem vprašal še tukaj in sodeloval z vsakim, ki je bil pripravljen pomagati...
2.Nihče še ni pokazal rezultata...
Nagrada iz 30€ na 50€ veljavnost do petka,
kar mislim, da je dovolj za 3-5 div-ov, če seveda kdo zna...
lp
2.Nihče še ni pokazal rezultata...
Nagrada iz 30€ na 50€ veljavnost do petka,
kar mislim, da je dovolj za 3-5 div-ov, če seveda kdo zna...
lp
MisterR ::
Celotna koda. Preko TRR?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <body> <style> @media all and (max-width: 300px) { .floated_div_levo{ display:none} .floated_div_desno{ display:none} } .sredina{width:800px; height:400px; background-color:#00F;float:left;} </style> <div class=floated_div_levo style="width:150px;float:left; background-color:#F00; height:400px;">levo</div> <div class=sredina>sredina</div> <div class=floated_div_desno style="width:150px; height:400px; background-color:#F00;float:left;">Desno</div> </body> </html>
jernejp ::
Se lahko kam priklopim da vizualno pogledam resize strani, ali pošlji 2-3 screene.
TeamViewer?
TeamViewer?
alphasaphir ::
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <style> body { margin: 0 auto; padding: 0; } #wrapper { width: 960px; margin: 0px auto; } .img1 { width: 100px; height: 100px; background-color: red; position: relative; } #imgl { float: left; } #imgr { float: right; bottom: 800px; left: 0px; } #content { width: 760px; height: 800px; background-color: blue; margin: 0 auto; } </style> <div id="wrapper"> <div id="imgl" class="img1"> Left </div> <div id="content"> Content </div> <div id="imgr" class="img1"> Right </div> </div> </body> </html>
Nimam ravno dosti časa. Obstaja tudi problem, ker ko zazoomaš preveč noter ne centrira in višina je zdaj fiksna, kar zna delat težave, ampak se boš moral sam še bolj poglobit v ta primer, splošno gledano je meni headfirst kar pomagal, html pišem pa mesec/dva.
Nisem razumel zakaj hočeš display: none; ampak pač dodaš v .img1, samo potem zgublaš širino. drugo so pa border, ki ti bodo zjebali celo zadevo, če ne boš prav zračunal width!
poglej na primer partis.si oni majo to kar ti hočeš
LP
Zgodovina sprememb…
- spremenil: alphasaphir ()
alphasaphir ::
Ker mi stvari ne dajo zlepa miru, sem se vseeno bolj potrudil in prve napake odpravil:
border znajo celotno stvar malo otežit, ker boš moral računat width in pri različnih stopnjah zooma se vseeno pojavljajo težave. Kam pa nameravaš navigacijo postavit? A bi lahko videl stran ko bo gotova?
LP
<!DOCTYPE html> <!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> body { margin: 0 auto; padding: 0; } #wrapper { width: 960px; height: 800px; background-color: blue; margin: 0 auto; } #wrapper .img1 { position: absolute; width: 100px; height: 100px; background: red; } #wrapper #left { margin-left: -100px; } #wrapper #right { margin-left: 960px; margin-top: -20px; } </style> </head> <body> <div id="wrapper"> <div id="left" class="img1"> Left </div> <div id="content"> Content </div> <div id="right" class="img1"> Right </div> </div> </body> </html>
border znajo celotno stvar malo otežit, ker boš moral računat width in pri različnih stopnjah zooma se vseeno pojavljajo težave. Kam pa nameravaš navigacijo postavit? A bi lahko videl stran ko bo gotova?
LP
Zgodovina sprememb…
- spremenil: alphasaphir ()
jernejp ::
@alphasaphir
Čestitam, končno točno to kar sem želel!
To imam že dolgo splošen problem, ki sem ga reševal vedno s tabelo in potem kar nekaj časa zapravil, da bi mi ratalo z DIV-i a mi ni uspelo.
Prvo naslednjo ki naredim s tem ti pošljem link.
Pošlji mi ZS za paypal nakazilo.
Hvala!
Čestitam, končno točno to kar sem želel!
To imam že dolgo splošen problem, ki sem ga reševal vedno s tabelo in potem kar nekaj časa zapravil, da bi mi ratalo z DIV-i a mi ni uspelo.
Prvo naslednjo ki naredim s tem ti pošljem link.
Pošlji mi ZS za paypal nakazilo.
Hvala!
jernejp ::
@alphasaphir
Malo sem še zadevo testiral in je bilo potrebno dati content div za levega in desnega (na konec),
ter margin -20 sem potem odstranil, da se ob povečani vsebini desni blok ne prestavi nižje.
Hvala še enkrat super primer za delo naprej si mi naredil,
na linku pa zadnja verzija:
http://jsfiddle.net/6tPcv/1/
Zadeva zaključena,
nagrada podeljena.
Malo sem še zadevo testiral in je bilo potrebno dati content div za levega in desnega (na konec),
ter margin -20 sem potem odstranil, da se ob povečani vsebini desni blok ne prestavi nižje.
Hvala še enkrat super primer za delo naprej si mi naredil,
na linku pa zadnja verzija:
http://jsfiddle.net/6tPcv/1/
Zadeva zaključena,
nagrada podeljena.
Zgodovina sprememb…
- spremenil: jernejp ()
Vredno ogleda ...
Tema | Ogledi | Zadnje sporočilo | |
---|---|---|---|
Tema | Ogledi | Zadnje sporočilo | |
! | Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )Oddelek: Izdelava spletišč | 347511 (6648) | sunniegoldie |
» | Prikaz strani na različni resoluciji-JoomlaOddelek: Izdelava spletišč | 1952 (1680) | kr?en |
» | CSS dimenzije in pozicijeOddelek: Izdelava spletišč | 1363 (1091) | marjan_h |
» | jquery in div-i (strani: 1 2 )Oddelek: Izdelava spletišč | 11348 (10086) | lisjak |
» | Wampserver in FirefoxOddelek: Izdelava spletišč | 1860 (1740) | jonystar |