Jump to content
php.lv forumi

vairāku līmeņu float: left;


Kaklz

Recommended Posts

Problēma ir šāda:

 

taisu aptuveni bildē redzamo lapas izkārtojumu:

floating.jpg

 

Problēma sākas faktā, ka ne vienmēr ar pelēku atzīmētajās vietās teksta ir pietiekoši daudz, lai tas spētu apaudzēt visu bildi un tad nu nākamā bilde, kas ir ar float: left atribūtu, nostājas nevis zem iepriekšējās, bet tai sānā.

 

it kā jau skaisti un jauki, aiz teksta uzliekam block-level elementu ar clear: left atribūtu un visas lietas. Taču nelaime ir tā, ka šis efekts nedarbojas korekti uz IE pārlūkiem, jo tie pamanās uztaisīt clear visam - arī kreisajā pusē esošajai izvēlnei un līdz ar to starp bildēm rodas paliela tukša atstarpe:

floating2.jpg

 

Tad nu jautājums, kā var šo (DE)fektu novērst uz IE pārlūkiem?

 

Varbūt ir kāds cits veids, kā varētu smuki uztaisīt tādu kā ziņu sarakstu ar bildītēm? Tabulas pagaidām nepiedāvāt :P

 

Paldies jau iepriekš visiem, kas kustinās smadzenes.

Link to comment
Share on other sites

ie defaultaa <img> tagam pieliek kautkaadu hspace, tapeec ieliec droshiibas peec <img hspace="0">.

 

tikai nesaprotu kapeec tev vajag izmantot float: left;?

Link to comment
Share on other sites

ie defaultaa <img> tagam pieliek kautkaadu hspace, tapeec ieliec droshiibas peec <img hspace="0">.

 

tikai nesaprotu kapeec tev vajag izmantot float: left;?

tā vienkāršā iemesla dēļ, ka man vajag, lai teksts izlīdzinātos AP bildi. hspace un vspace ir atribūti, kas atbīda tekstu no bildes. Moderni ir to aprakstīt ar CSS, nevis html ;)

Link to comment
Share on other sites

es arii nesaprotu. uztaisi tur veel vienu kolonu un miers. :blink:

neies cauri.

 

man bildes ir piesaistītas katram no attiecīgajiem teksta gabaliem. Teksta garums nav zināms, līdz ar to ideja par vēlvienu kolonu atkrīt.

Link to comment
Share on other sites

Lasīt šo:

 

http://www.positioniseverything.net/floatmodel.html

http://www.positioniseverything.net/explor...hreepxtest.html

 

Un, pavei, piemērs bez floatiem:

 

http://3.1337.lv/dev/kaklz/

 

Komentāru tur nav, bet es ceru, ka varēs saprast.

hm, izskatās jau lieliski!

 

tikai .. aizmirsu laikam tikai vēl vienu lietu - container ir nopozicionēts loga centrā, līdz ar to absolute pozicionēšana laikam šoreiz nebūs īsti vietā :(

Link to comment
Share on other sites

http://3.1337.lv/dev/kaklz/horizontal-center.php

 

Nekļūsti smieklīgs. ;)

 

Re, kur noslēpums:

 

#wrapper, #title {
position: relative; left: 50%; /* Bloku labā mala ir atbidīta no labās puses par 50% no viewport platuma. */ margin-left: -320px; /* Un kompensējam pārteci. (320 ir puse no bloku platuma.) */
}

Link to comment
Share on other sites

Jāpiezīmē, ka testēts uz IE5.x/Win, IE6/Win, Op7 un Gecko.

ja tas nav par daudz prasīts, varbūt, ka vari vēlreiz tos linkus nopublicēt, a to tagad rādās 404.

Link to comment
Share on other sites

×
×
  • Create New...