Paveiksliukas su CSS Kordinatemis

Sveiki,

Reikia pagalbos su CSS, nezinau kaip cia reik paaiskint jums, kad suprastumet, ko noriu, bet bandysiu kaip nors paaiskinti kuo aiskiau.

Reikia CSS "kodo" kuri galeciau deti i forumo skydeli (Arba viso kodo su name.css failu, kuri talpinciau i skydeli), pas save tinklapi tipas zinoma HTML.

CSS scriptas turetu buti nustatytas 4-riomis (kordinatemis) pozicijos, parasius tam paciame skydelije paveiksliuko url link (pvz <img src=""/>) rodytu pirmoje pozicijoje(ta paveiksliuka). Idėjus dar viena paveiksliuka pirmas paveiksliukas persoktu i antra pozicija, o idetas naujas liktu pirmoje pozicijoje. Na esme tame jog senesnis paveiksliukas slinktu i apacia.

Labai atsiprasau, kad neaiskiai ir ne itin graziai paaiskinau, bet tikuos kazka suprasit, pridesiu dar paveiksliuka, gal is jo dar labiau pavyks suprasti, PAVEIKSLIUKAS PADARYTAS SU PAINT, Todel bandysiu jusu pagalba visa tai igyvenvinti savo puslapyje.

Jeigu kas neaisku prasau klauskit, tikuos atsiras zmoniu kurie pades.

CSS pacios kalbos nemoku "rasyti", bet mazdaug suprantu kas yra parasytame kode.

Todel ir aiskinu viska kaip zydas, nes nezinau tu pavadinimu kalbos taip visa tai vadinas :)

o kam tau "kordinatės"? :huh:

1. Nes virs ir po paveiksliuku bus mano tekstas.

2. Nes tu paveiksliuku bus 3eilutes, kaip yra paveiksliuke, O kas jau eis i 4 eilute visa tai kelsiu i kita puslapi t.y 2puslapi.

Na as bent jau manau kai butu kordinates meti visus paveiksliukus is eiles ir jie sau keiciasi vietomis. Nes dabar jeigu be tu kordinaciu bus tai kas 4paveiksliukus reiks prideti <br> arba nutrint <br>.

Gal pasiulysi koki priimtinesni varijanta? Gal as cia nelabai gerai sugalvojau, gal yra paprastesnis variantas? mm :huh:

EDIT:Jeigu kazkas pakeis tai bus ne paveiksliukas seip koks paprastas o paveiksliuko thumbnail o paspaudus ant thumbnail jau bus kitas veiksmas.

float: left

http://jsfiddle.net/PbzMj/

float: left

 

http://jsfiddle.net/PbzMj/

oo kazkas jau panasei gaunas, bet yra dar keletas problemu, ta css koda as irasiau i gallery.css failiuka ji skirtuke nurodziau taip (kelia iki .css failiuko)):

<link rel="stylesheet" href="/gallery.css" type="text/css" media="screen" />

ir toliau ikeliau tavo HTML parasyta koda

<div>
   lorem ipsum
   <p><img src="http://.lt/images/videos/m2.jpg"></p>
   lorem ipsum
</div>
<div>
   lorem ipsum
   <p><img src="http://.lt/images/m2.jpg"></p>
   lorem ipsum
</div>
<div>
   lorem ipsum
   <p><img src="http://.lt/images/m2.jpg"></p>
   lorem ipsum
</div>
<div>
   lorem ipsum
   <p><img src="http://.lt/images/m2.jpg"></p>
   lorem ipsum
</div>
<div>
   lorem ipsum
   <p><img src="http://.lt/images/m2.jpg"></p>
   lorem ipsum
</div>

Paveiksliukai stovi kaip ir gerai, bet greiciausiai gallery failiuke kazko truksta, nes jis siuo metu man gadina svetaines dizaina.

http://devopsreactions.tumblr.com/post/49667540079/trying-to-fix-someone-elses-css

<p> tagas nereikalingas, jis paragrafams, "kažko" trūksta, tai susidėk klases and paveikslėlių divų ir joms daryk float left, anyway, daryk fiddle, kaip, kad buvo pavyzdys pateiktas ir nereikės dviračio išradinėt

http://devopsreactions.tumblr.com/post/49667540079/trying-to-fix-someone-elses-css

 

<p> tagas nereikalingas, jis paragrafams, "kažko" trūksta, tai susidėk klases and paveikslėlių divų ir joms daryk float left, anyway, daryk fiddle, kaip, kad buvo pavyzdys pateiktas ir nereikės dviračio išradinėt

na paragrafus nujemiau, klase irgi uzmeciau jeigu ji taip rasoma:

<div class="float: left">

ar taip?

<div class="left">

<link rel="stylesheet" href="/gallery.css" type="text/css" media="screen" />
<div class="left">
   lorem ipsum
   <img src="http://.lt/images/videos/m2.jpg">
   lorem ipsum
</div>
<div class="left">
   lorem ipsum
   <p><img src="http://.lt/images/m2.jpg"></p>
   lorem ipsum
</div>
<div class="left">
   lorem ipsum
   <img src="http://.lt/images/m2.jpg">
   lorem ipsum
</div>
<div class="left">
   lorem ipsum
   <img src="http://.lt/images/m2.jpg">
   lorem ipsum
</div>
<div class="left">
   lorem ipsum
   <img src="http://.lt/images/m2.jpg">
   lorem ipsum
</div>

jeigu ne taip rasos ta class, prasau pavydzio, labai nepykit, dar daug ko nemoku, jug visko iskart neismoksi :)

..

Jei nori pačiame elemente nurodyti stilių - turi naudoti style="" o ne class="".

Klasėje rašomas tik jos pavadinimas (-ai), ps gali naudoti ir id.

Tarkime nori susikurti klasę - left.

Css faile susikuri kažką panašaus:

.left {
float: left;
}

Ir tada tik naudoji pasirinktame elemente. (Prieš klases, css faile rašomas taškas, prieš id - #).

dekoju iskart uz paaiskinima, nes istikruju nepilnai supratau, ka parase tas zmogus kuris norejo man padeti ;)

<div class="left">

p turi atrodyti taip ir nereikia ten display-table cell ir vertical-align su border, nes ten buvo "for demo purpose"

.left img {

width: 100px;

height: 50px;

}

<div class="left">

 

p turi atrodyti taip ir nereikia ten display-table cell ir vertical-align su border, nes ten buvo "for demo purpose"

 

.left img {

width: 100px;

height: 50px;

}

na pataisiau kaip tu parasej, bet jis man vistiek gadina dizaina (bet si kart ne tiek daug kaip ana syki).

paziurek i paveiksliuka, pazymejau raudona linija kur turetu baigtis, o rodo vos ne virs paveiksliuku..

na pataisiau kaip tu parasej, bet jis man vistiek gadina dizaina (bet si kart ne tiek daug kaip ana syki).

paziurek i paveiksliuka, pazymejau raudona linija kur turetu baigtis, o rodo vos ne virs paveiksliuku..

Būsi į ne tą elementą įdėjęs kodą. Be pilno kodo sunku tau čia kažką padėti.

Būsi į ne tą elementą įdėjęs kodą. Be pilno kodo sunku tau čia kažką padėti.

Va viskas:

Dariau kaip sake tommoze.

CSS

.left {
   float: left;
   text-align: center;
   margin: 0 10px 0 0;
}

p {
   width: 100px;
   height: 50px;
}

HTML

<link rel="stylesheet" href="/gallery.css" type="text/css" media="screen" />
<div class="left">
   lorem ipsum2<br>
   <img src="http://.lt/images/m2.jpg"><br>
   lorem ipsum<br>
</div>
<div class="left">
   lorem ipsum<br>
   <img src="http://.lt/images/m2.jpg"><br>
   lorem ipsum<br>
</div>
<div class="left">
   lorem ipsum<br>
   <img src="http://.lt/images/m2.jpg"><br>
   lorem ipsum<br>
</div>
<div class="left">
   lorem ipsum<br>
   <img src="http://.lt/images/m2.jpg"><br>
   lorem ipsum<br>
</div>

vis dar neradau problemos. :huh:

vis dar neradau problemos. :huh:

google "clearfix"

parentui reikia uždėti clearfix'ą

google "clearfix"

parentui reikia uždėti clearfix'ą

? :blink: kas cia per dalykas? kokia is jo nauda? Ar to reikia, ar man tai pades?

tinginys esi, nebepadėsiu, jei tingi pats pasistudijuoti

http://themergency.com/clearfix/clearfix_demo_1_none.htm

Labai dėkui, kad nepagailėjot laiko, ir padėjot man, dideli dėkui, taip pat dėkui narui Pattio kurio dėka padėjo galutinai ištaisyti klaida.