Sekoman.lv 01 Jūlijā 2025 - Otrdiena - 02:19
Sākums Raksti Forums Par projektu
  • Rokasgrāmata "Kā izveidot savu mājas lapu"
  • Rekomendācijas jūsu web-lapas darbības ātruma paaugstināšana ...
  • Šāda tāda teorija par HTML un CSS (Latviski!)
  • Bildes izmērs un izšķirtspēja
  • RegExp - JavaScript regulārās izteiksmes
  • Specsimbolu kodi HTML valodā
  • Piemērs: Kā pelnīt ar Affiliate / Niche marketing un Adsense ...
  • Kas tas tāds - CSS ? CSS pamati īsumā
  • 15 standarta banneru izmēri
  • Nedaudz par "DIV"
  • PHP programmētāja rokasgrāmata
  • Kā novērtēt saites
  • Kā paātrināt lapas ielādes ātrumu
  • JavaScript pāradresācija - redirekts uz citu lapu
  • HTML valoda
  • Все о Google PageRank
  • Kā uzzināt lappuses URL?
  • Tegs <SCRIPT>
  • Tegs <FORM>
  • JavaScript programmēšanas labā prakse
  • On-site faktori: (x)HTML lapas elementa <head> saturs
  • Tegi <H1...H6>
  • Tegs <EMBED>
  • Kā ap tekstu izveidot noteiktas krāsas rāmi?
  • Javascript metodes window.stop() problēmas pārlūkā Internet ...
  • Reitingi un topi – plusi un mīnusi
  • Tegs <DIV>
  • Kādus meta tegus atpazīst Google ?
  • Javascript piemēri darbam ar Cookie
  • JavaScript faila "atlikta" pieslēgšana pēc piepras ...
  • Lattelecom partnerprogramma
  • HTML5 standarta atribūts 'placeholder' teksta ievade ...
  • jQuery UI – spraudnis Draggable
  • Tegs <IMG>
  • Tegs <BODY>
  • jQuery : darbs ar elementiem; CSS selektoru izmantošana
  • Kas ir dokumenta veids (Doctype) ?
  • Vēlreiz par mājaslapas optimizāciju interneta meklētājos
  • Tegs <FIELDSET>
  • Tegs <OBJECT>
  • Создание успешного сайта
  • CSS šrifta izmēru atbilstību tabula
  • Tegs <TABLE>
  • Parametrs wmode Flash failu attēlošanai
  • CSS "spraiti"
  • CSS float problēmas un risinājumi
  • Kas ir Google AdSense?
  • Nestandarta šriftu pieslēgšana web lapā
  • Tegs <INPUT>
  • Tegs <FRAME>
  • Tegs <a>
  • Tegs <META>
  • Kā izmainīt pogas krāsu formā?
  • Tegs <MARQUEE>
  • Kā nopelnīt ar savu interneta projektu?
  • Meta tegi mājaslapas mobilajai versijai
  • Atslēgvārdi
  • Tegs <LI>
  • SEO: Kā iepatikties Google meklētājam?
  • Īss CSS3 apskats
  • Tegs <LINK>
  • Tegs <HR>
  • Tegs <BUTTON>
  • CSS pseido klases (pseido selektori)
  • Tegs <IFRAME>
  • Freimu (<frame>) un Ifreimu (<iframe>) formatēšanas te ...
  • CSS stila īpašību pieslēgšana atkarībā no pārlūka
  • Tegs <BASE>
  • 6 izplatītākās kļūdas izstrādājot mājaslapas mobilajām ierīc ...
  • Tegs <OL>
  • On-site faktori: (x)HTML lapas elementa <body> saturs
  • Tegs <P>
  • Google Pagerank un Google Toolbar PR
  • Off-site faktori: saites un Google PageRank
  • Kā teksta daļu izcelt citā krāsā?
  • Saites atvēršana 'uzpeldošā' logā izmantojot jQuery
  • Tegs <SELECT>
  • Ko apzīmē mērvienība "em" stila atribūtos?
  • Tegs <COLGROUP>
  • Reitingu sistēmu tumšā puse
  • Tegs <SPAN>
  • Tegs <TR>
  • Mazliet par web 2.0
  • Tegs <FRAMESET>
  • HTML koda vai satura nomaiņa elementiem ar zināmu ID, izmant ...
  • Tegs <ABBR>
  • Tegs <AREA>
  • Tegs <DL>
  • Ārējās hipersaites noformēšana, izmantojot jQuery un CSS
  • 10 SEO mīti
  • Kā horizontāli nocentrēt tabulu pārlūka logā?
  • HTML elementu pseidoparametri un to apstrāde skriptos
  • SEO pamati
  • Tegs <BR>
  • Tegs <PARAM>
  • Tegs <BGSOUND>
  • Tegs <FONT>
  • Kā atcelt hipersaišu pasvītrojumu
  • Tegs <PRE>
  • Kā lapā izveidot dažādu krāsu hipersaites?
  • Tegs <SAMP>
  • Tegs <HTML>
  • Atdalām JavaScript funkcijas no HTML koda
  • Tegs <CODE>
  • Tegs <UL>
  • Pseidoklase <:active>
  • Nosacītie komentāri pārlūkiem Internet Explorer
  • Tegs <BASEFONT>
  • Tegs <ACRONYM>
  • Kā pārbaudīt, vai rinda satur doto(s) simbolu(s)?
  • Kā uzzināt, vai lapas kods satur noteiktu tegu (elementu)?
  • Tegs <BLOCKQUOTE>
  • Garas simbolu virknes pārnešana jaunā rindā
  • Tegs <SMALL>
  • Meklētājsistēmas Google filtri
  • Tegs <STRIKE>
  • Tegs <TEXTAREA>
  • Īpašība <@import>
  • Javascript valodā rezervētie vārdi
  • Tegs <STRONG>
  • Stila atribūtu "padding/margin" vērtību īsais pier ...
  • Ko apzīmē pieraksts #fc0?
  • Tegs <TITLE>
  • Tegs <TD>
  • Fancy Partnerprogramma
  • Pseidoelements <:after>
  • Tegs <MAP>
  • Izvēlnes aktīvās saites iezīmēšana tikai ar CSS palīdzību
  • Tegs <CAPTION>
  • Domēnu zonu saraksts
  • Laika parametru iegūšana JavaScript kodā
  • Interneta pārlūka konstatēšana ar jQuery palīdzību
  • Tegs <LEGEND>
  • Tegs <TBODY>
  • Tegs <ADDRESS>
  • Tegs <STYLE>
  • Tegs <NOBR>
  • SEO: Google PageRank
  • Kā izvietot blakus divus fiksēta izmēra slāņus (DIV) ?
  • Tegs <BDO>
  • Tegs <DT>
  • Tegs <COL>
  • Tegs <DD>
  • Tegs <DFN>
  • Tegs <TFOOT>
  • Tegs <I>
  • Tegs <OPTION>
  • Tegs <B>
  • Tegs <LABEL>
  • Tegs <INS>
  • Tegs <Q>
  • Tegs <TH>
  • Izmantojam tegu <hr> ar fona attēlu
  • Tegs <HEAD>
  • Tegs <EM>
  • Kā noteikt ekrāna izšķirtspēju un pārlūka loga izmērus ?
  • Tegs <XMP>
  • 10 tipiskas Latvijas Interneta „startapu” kļūdas
  • Tegs <DEL>
  • Tegs <OPTGROUP>
  • Tegs <NOSCRIPT>
  • Tegs <THEAD>
  • Tegs <NOFRAMES>
  • Tegs <SUB>
  • Īpašība <!important>
  • Tegs <TT>
  • Tegs <BIG>
  • 10 ошибок начинающих блоггеров
  • Tegs <WBR>
  • Tegs <VAR>
  • Parametrs target='_blank' citiem vārdiem
  • Tegs <KBD>
  • Tegs <SUP>
  • Tegs <CITE>
  • Tegs <NOEMBED>
  • Alternatīva fona pievienošana vairs neeksistējošam attēlam.
  • Parādām un rediģējam elementu <style>
  • Veidojam failu robots.txt
  • 9 veidi, kā meklēt informāciju iekš Google, par kuriem nezin ...

Vadība

Ieeja lapā
Reģistrācija Uzrakstīt Autoram Ielādēt visus ierakstus
  • black
  • blue
  • green
  • gray
  • pink
  • orange

Reklāma

Sadaļas

HTML
CSS
JavaScript
jQuery
HTML tegi (tags)
CSS īpašības
Vienā teikumā
Vispārīgas WEB lietas
Peļņa internetā

Meklēšana


Birkas

google (10)
css (9)
javascript (7)
jquery (6)
HTML (5)
izmērs (5)
nopelnīt (5)
optimizācija (5)
peļņa (5)
saites (5)
seo (5)
affiliate (3)
attēls (3)
DIV (3)
izmēri (3)
krāsa (3)
mārketings (3)
meklētāji (3)
Meta (3)
Rangs (3)

Partneri

Aptauja

Kāda veida apraksti Jums šķiet nepieciešamāki?
Rezultāti | Aptauju arhīvs
Atbilžu kopskaits: 158
Sākums Raksti CSS

CSSCSS float problēmas un risinājumi

Lai cik efektīva un noderīga mēdz būt elementu piesaistīšana pie cita elementa sāna (float), šie elementi mēdz būt diezgan viltīgi. Iespējams, ka esat redzējuši līdzīgu situāciju, kā 1.attēlā, kas ir izveidota tikai ar diviem div elementiem, katrs ar attēlu, kas ir piesaistīts pie kreisās malas.


1. attēls. Nav labi!
1. attēls. Nav labi!

Visdrīzāk, ka tas nav īsti tas, ko kodētājs bija iedomājies, taču ar izmantoto CSS kodu, šis ir korekts izklājums. Lūk, kā tas tika izveidots:

div.item {border: 1px solid; padding: 5px;}
div.item img {float: left; margin: 5px;}

Tas ir viss, kas nepieciešams. Rezultātā, tas, kas redzams 1.attēlā, notiek jo, <div> elementi „neizstiepjas”, lai aptvertu pie sāna piesaistītās bildes, kuras tajos ir iekļautas. Ja palūkojas uz situāciju no otras puses, tad tā notiek, jo piesaistītās bildes „lien ārā” no <div> elementu apakšas.

Tā nav kļūda. Tā arī nav CSS nepilnība. Patiesībā, pārsvarā gadījumu kodētāji vēlas tieši šo likumsakarību. Tikai piemērā, kas redzams 1.attēlā, tas nav tas, ko viņi vēlas.

Problēmas izprašana

Tātad, kad visa labā un pareizā vārdā, kodētāji vēlētos, lai pie sāna piesaistītais elements izvirzītos no elementa, kurā tas atrodas? Elementāri: vēsturiski visbiežāk pielietotajā CSS pazīmes (property) float izmantošanā. Pievērsiet uzmanību 2.attēlam un xHTML kodam, kas seko.

2.attēls. Bilde, kas piesaistīta teksta kreisajai pusei.
2.attēls. Bilde, kas piesaistīta teksta kreisajai pusei.

<p>
...teksts...
<img src="jul31-03-sm.jpg" height="200" width=”50” class="picture" alt=”Kalni” />
...teksts...
</p>
<p>
...teksts...
</p>

Šāda attēla ievietošana tekstam pa vidu tiek praktizēta jau kopš ļoti, ļoti seniem laikiem. Tāpēc šī iespēja tikai ieviesta tīmeklī sākot ar Netscape 1.1, un kāpēc CSS padara to iespējamu izmantojot CSS pazīmi float.[1] Taču palūkojieties uzmanīgāk uz 2.attēlu. Bilde lien ārā no elementa (<p>), kurā tā atrodas. Uzskatāmāk to var novērot, attēlojot malas rindkopām, kā parādīts 3.attēlā.

3.attēls. Rindkopu malas ir redzamas.
3.attēls. Rindkopu malas ir redzamas.

Tagad ir redzams, kāpēc ir būtiski, lai pie sāna piesaistītie elementi izvirzītos no elementiem, kuros tie atrodas. Ja tas tā nenotiktu, tad 2.attēlā redzamā situācija attēlotos kā 4.attēlā.

4.attēls. Ja piesaistītie elementi neizvirzītos no elementiem, kuros tie atrodas.
4.attēls. Ja piesaistītie elementi neizvirzītos no elementiem, kuros tie atrodas.

Tas ir tas, ko dizaineri nekad nepieļautu. Tātad, lai sekotu tīmekļa dizaina tradīcijām un tam, ko kodētāji sagaida, CSS ir veidots, lai ļautu piesaistītajiem elementiem izvirzīties no elementu apakšas, kuros tie atrodas. Lai gan tā ir nepieciešamība izmantojot piesaistīšanu pie teksta, šeit rodas liela problēma, kad piesaistītie elementi tiek izmantoti, lai veidotu lapas izklājumu (layout).

Clear risinājums

Ja piesaistītie elementi tiek izmantoti veidojot beztabulu izklājumus, tad ir nepieciešams atrast veidu, lai elementi, kuros tie atrodas izstieptos ap tiem. Pašlaik tam nepieciešams ir neliels strukturāls triks (hack). Tā kā mēs vēlamies, lai elementa, kurā atrodas piesaistītais elements, apakšējā mala atrastos tīri aiz piesaistītā elementa apakšējās malas, tad CSS parametrs clear ir mūsu risinājums. Mums nepieciešams ievietot block-level elementu tieši pirms saturošā elementa noslēguma, un pievienot tam CSS pazīmi clear. Ievērtējiet:

<div class="item">
<img src="w6144.gif" />
Widget 6144
<br />$39.95
<hr />
</div>
<div class="item">
<img src="w6145.gif" />
Widget 6145
<br />$44.95
<hr />
</div>

Tagad mums jāpielieto sekojošais CSS kods xHTML kodam, un jāiegūst rezultāts, kas attēlots 5.attēlā.

div.item hr 
{
display: block;
clear: left;
margin: -0.66em 0;
visibility: hidden
}

5.attēls. Horizontālās līnijas izmantošana elementa pastiepšanai.
5.attēls. Horizontālās līnijas izmantošana elementa pastiepšanai.

Pārliecinoties, ka <hr> elementi ir block-level, un tiem ir CSS pazīme clear, mēs piespiežam <div> elementus „aptvert” attēlus, kas ir piesaistīti kreisajam sānam.

Negatīvās augšējā un apakšējā maliņas (margins) ir nepieciešamas, lai noslēgtu atstarpi, ko aizņem <hr> elementi. Tomēr šis efekts nav precīzs un nedarbojas identiski uz visiem pārlūkiem. Elementa <hr> mistiskās dabas dēļ ir ļoti grūti iepriekš paredzēt, kā īsti tas attēlosies. Nepieciešamais <hr> elementa augstums varētu būt nulle, vai neliels pozitīvs skaitlis, vai pat negatīvs augstums.

Tāpēc situācijās, kur ir nepieciešama precizitāte, kodētāji var izmantot <div> elementu <hr> elementa vietā, lai panāktu attīrīšanas efektu. Piemēram:


div.clearer {clear: left; line-height: 0; height: 0}

<div class="item">
<img src="w6144.gif" />
Widget 6144
<br />$39.95
<div class="clearer">&nbsp;</div>
</div>

Float izmantošana float labošanai


Ir veids, lai izvairītos no pārliekas strukturālā trika izmantošanas, kurš tika apskatīts iepriekš, lai gan reizēm tomēr arī tas ir nepieciešams. Lielākajā daļā pārlūku, un kā tas ir definēts iekš CSS 2.1, elements ar CSS float parametru paplašināsies, lai aptvertu visus elementus ar CSS parametru float, kurus tas pats satur. Tātad mūsu piemērā mēs varētu izvākt visus <div class="clearer"> elementus un tā vietā pierakstīt šādu CSS kodu:

div.item {float: left; border: 1px solid; padding: 5px; width: 60%}
div.item img {float: left; margin: 5px}

Pievērsiet uzmanību, ka CSS float parametrs tika iedots gan bildēm, gan <div class="item"> elementiem. Norādot <div> elementu platumu lielāku par 50%, mēs nodrošinām, ka tie nekad nevarēs atrasties viens otram blakus, bet tā vietā atradīsies viens virs otra. Rezultāts ir attēlots 6.attēlā.

6.attēls. float parametra izmantošana problēmas risināšanai.
6.attēls. float parametra izmantošana problēmas risināšanai.

Šo acīmredzami ir vieglāk izmantot, gan HTML koda ziņā, gan CSS koda ziņā. Tomēr triks, kas tika apskatīts agrāk vēl aizvien var būt noderīgs. Iedomāsimies, ka ir nepieciešams pievienot nelielu papildus tekstu zem „items”. Lai teksts nesāktos no <div> elementu labās puses, mums jāizmanto iepriekš apskatītais „clear” triks. Kas mūs noved pie sekojoša koda, kura rezultāts ir attēlots 7.attēlā.

<div class="item">
<img src="w6144.gif" />
Widget 6144
<br />$39.95
</div>
<div class="item">
<img src="w6145.gif" />
Widget 6145
<br />$44.95
</div>
<div class="clearer">&nbsp;</div>
<p>Widgets are sold on an "as is" basis without
warranty or guarantee.</p>

7.attēls. Kombinējot risinājumus var iegūt vēlamo rezultātu.
7.attēls. Kombinējot risinājumus var iegūt vēlamo rezultātu.

<div class="clearer"> elements automātiski piespiež tam sekojošus elementus sākties no jaunas rindas, tātad zem <div class="item"> elementiem.

Iespējamā problēma, izmantojot piesaistītus sāniem elementus citos piesaistītos elementos, ir tas, ka jūs balstāties uz pārlūku korektu darbību. Šī situācija kļūst daudz trauslāka, ja šie piesaistītie elementi ir daļa no daudz sarežģītāka izklājuma, kurā iespējams arī tiek izmantota piesaistīšana pie sāniem, tabulas vai pozicionēšana. Neteiksim, ka šādus izklājumus nav iespējams veidot. Taču šādu izklājumu veidošana var veidot milzīgu mēģinājumu un kļūdu apjomu, lai izvairītos no nekorektas piesaistīšanas pie sāniem un citām izklājuma kļūdām, kas var rasties pārlūku CSS attēlošanas kļūdu dēļ.

Apkopojums

Izprotot, kā piesaistītie pie sāniem elementi un nepiesaistītie mijiedarbojas viens ar otru, un izprotot kā CSS parametrs clear var tikt izmantots, kodētāji var uzskatīt CSS parametru float par ļoti spēcīgu izklājumu veidošanas rīku. Tā kā šie elementi ar CSS parametru float sākotnēji nebija paredzēti izklājumu veidošanai, daži triki var būt nepieciešami, lai tie izkārtotos tā, kā tas ir ieplānots. Var iesaistīt pie sāniem piesaistītus elementus, kuri satur citus piesaistītus elementus, „attīrošos” elementus ar CSS parametru clear, vai izmantot abu šo triku kombināciju.

Skatoties nākotnē, ir ierosināti vairāki CSS uzlabojumi, kas ļautu kodētājiem norādīt, ka elementam vajadzētu izstiepties, lai saturētu sevī pilnībā visus sāniem piesaistītos elementus. Šīs noteikti būtu iekš CSS gaidītas iespējas, taču pašlaik izskatās, ka līdz šādu iespēju atbalstīšanai būs jāgaida ļoti ilgi.

[1] Termins „float” attiecināms uz veidu kādā elements tiek piesaistīts cita elementa sānam (vai apakšai), kā tas ir aprakstīts oriģinālajā „Addition to HTML 2.0” dokumentā, kas nāca līdzi Netscape 1.1 izlaidumam.

Raksta autors ir Eric A.Meyer, vispāratzīts CSS guru.
Raksts pārtulkots no complexspiral.com, kur tas tika publicēts 2003.gada 25.augustā.

Raksta avots : http://web.hc.lv/kods/css/raksti/css-float/
  • 1
  • 2
  • 3
  • 4
  • 5
Skatīts : 3408 / Komentāri : 0 / Vērtējumi : 0 / Uzrakstīts : 10 Novembrī 2009 plkst. 15:42
Komentāru kopskaits: 0
Pievienot komentārus var tikai reģistrētie lietotāji.
[ Reģistrācija | Ieeja ]

Datuve.lv
Kopēšana pieļaujama norādot raksta avotu vai autoru. Norāde uz šo lapu obligāta.
Lapas ideja pieder tās autoram.
Oriģinālais dizains no Zoxy, Uzturēšanu nodrošina uCoz
Redizains un lokalizācija no Arnis Freimanis.