CSS - DIV - Brez Tabele @ Slo-Tech

Forum » Izdelava spletišč »
CSS - DIV - Brez Tabele

CSS - DIV - Brez Tabele

jernejp :: 21. jan 2012, 01:37

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...

Gandalfar :: 21. jan 2012, 01:45

http://css.maxdesign.com.au/floatutoria...

ostalo pa @media-queries

jernejp :: 21. jan 2012, 01:52

@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

gufy123 :: 21. jan 2012, 08:08

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

jernejp :: 21. jan 2012, 09:47

@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

Gandalfar :: 21. jan 2012, 11:30

jernejp: http://jsfiddle.net/ tule notri daj to kar imas do sedaj pa kar ne razumes pa bomo ti od tam dalje pomagal.

jernejp :: 21. jan 2012, 11:46

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

gufy123 :: 24. jan 2012, 10:05

kaj pa takole:

        #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 :: 24. jan 2012, 10:10

@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

gufy123 :: 24. jan 2012, 10:20

ja dobro, pa jim določi fiksno širino. za test sem dal procente. nastavi še margine in paddinge pa bo

jernejp :: 24. jan 2012, 10:21

Potem bo vse skupaj poravnano na levi rob...

gufy123 :: 24. jan 2012, 10:23

ja pa? daj okoli še en div, ki mu določiš margin: 0px auto;

jernejp :: 24. jan 2012, 10:31

@gufy123
Po tvojih navodilih sem naredil in tudi ne dela...
Poglej na:
http://jsfiddle.net/pWn5Q/

gufy123 :: 24. jan 2012, 10:44

#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 :: 24. jan 2012, 10:50

@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

gufy123 :: 24. jan 2012, 10:52

potem pa rešuj preko table, če to znaš in se nočeš niti malo poglobit v dive

lp

jernejp :: 24. jan 2012, 10:58

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

RockyS :: 24. jan 2012, 12:52

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 :: 24. jan 2012, 12:55

Se lahko kam priklopim da vizualno pogledam resize strani, ali pošlji 2-3 screene.
TeamViewer?

RockyS :: 24. jan 2012, 13:01

alphasaphir :: 25. jan 2012, 10:27

<!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 (25. jan 2012 ob 10:37)

alphasaphir :: 25. jan 2012, 11:20

Ker mi stvari ne dajo zlepa miru, sem se vseeno bolj potrudil in prve napake odpravil:

<!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 (25. jan 2012 ob 11:25)

jernejp :: 25. jan 2012, 15:41

@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!

jernejp :: 25. jan 2012, 21:04

@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.

Zgodovina sprememb…

spremenil: jernejp (3. feb 2012 ob 11:48)

Vredno ogleda ...

	Tema	Sporočila	Ogledi	Zadnje sporočilo
	Tema	Sporočila	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 ) Tody Oddelek: Izdelava spletišč	1297	330893 (55042)	htmltroubles 27. feb 2021 23:15:17
»	Prikaz strani na različni resoluciji-Joomla jugostyle Oddelek: Izdelava spletišč	15	1806 (1534)	kr?en 26. jun 2014 18:57:18
»	CSS dimenzije in pozicije biasko Oddelek: Izdelava spletišč	17	1257 (985)	marjan_h 28. feb 2013 15:45:33
»	jquery in div-i (strani: 1 2 ) mk818764 Oddelek: Izdelava spletišč	87	10501 (9239)	lisjak 25. feb 2013 23:17:00
»	Wampserver in Firefox jonystar Oddelek: Izdelava spletišč	6	1714 (1594)	jonystar 4. maj 2012 07:59:32

Več podobnih tem

Zadnje novice

Zadnji članki

Išči:

Forum » Izdelava spletišč »
CSS - DIV - Brez Tabele

CSS - DIV - Brez Tabele