Pereiti prie turinio

CSS

ifixas

Sukūrė ifixas
Tinklalapių kūrimas

 Dalintis Sekėjai 0

Rekomenduojami pranešimai

Rimas

Rimas 1.146

Atrašyta
Atrašyta

Tai kad tu neaiskiai nurodai problema, ka tu nori padaryti. Kaip supratau, tai turi kazka tokio: <body><div><p>Tekstas</p></div></body>.

Nori:

1) po div'o padaryti tuscia vieta: taikai margin'a div'ui, arba padding'a body'dziui.

2) po teksto padaryti tarpa, kuriame butu div'o fonas ir t.t.: taikai marging'a <p>'ui arba padding'a div'ui.

3) nori po teksto padaryti tarpa, kuriame butu teksto fonas ir t.t.: taikai padding'a <p>'ui

4) nori kazko kito: padoriai isaiskink ko nori, papasteink koda.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
ifixas

ifixas 1.385

Atrašyta
  • Autorius
Atrašyta

Ne.

Yra vieta kur turi būti tekstas... Noriu, kad tekstas būtų atitrauktas nuo apačios tam tikrą atstumą. Jis turi tilpti į tokį rėmelį ant fono. Bet šiek tiek išlenda. Reikia, kad tarpas tarp teksto ir sakykime footerio būtų didesnis.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
ziogas

ziogas 5

Atrašyta
Atrašyta

Atitraukt naudok position, jei aišku nesvarbu kad ant viršutinio elemento "užvažiuosi", padaryk dideli z-index jei neatsitraukia, position:relative; top:-50px; z-index:999;

Dar gali naudot margin-top:-50px; norint patraukt viršun, nors kaip kurios naršyklės į tai reaguoja

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Rimas

Rimas 1.146

Atrašyta
Atrašyta

Ne.

Yra vieta kur turi būti tekstas... Noriu, kad tekstas būtų atitrauktas nuo apačios tam tikrą atstumą. Jis turi tilpti į tokį rėmelį ant fono. Bet šiek tiek išlenda. Reikia, kad tarpas tarp teksto ir sakykime footerio būtų didesnis.

Vistiek nelabai suprantu. Pagal tavo parasyma, tai tau turetu tikti antras variantas. Bet man labai keista tai, kad tu nori nepakeites teksto pozicijos ji sutalpinti i kazkoki plota, kuriame jis netelpa. Siaip, norint sutalpinti, reikia mazinti srifto dydi, tarpus tarp eiluciu ir pan. Bet ko gero as nelabai suprantu situacijos, o kadangi, kaip matau, kodo pasteinti neketini, tai ko gero mes taip ir nesusikalbesim... ;)
Nuoroda į pranešimą
Dalintis kituose puslapiuose
ifixas

ifixas 1.385

Atrašyta
  • Autorius
Atrašyta

ziogas mane suprato.

O naudojant padingą būna kelios reikšmės.

padding: x px z px a px c px;

Tai kiekvieno kokia reikšmė?

 

O man reikia to:

Yra tekstui skirto ploto img... Bet tame img yra tokie lankeliai į kuriuos jis turi tilpti. Ir iš viršaus aš nustačiau tiek kiek man reikėjo px, kad daeitų iki lankelio , o taipat reik daeiti iš apačios iki jau kito lankelio. Man nesvarbu kiek to teksto nukirs. Esmė tame, kad viskas ten sueitų tiek kiek nustačiau px.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Rimas

Rimas 1.146

Atrašyta
Atrašyta

ziogas mane suprato.

O naudojant padingą būna kelios reikšmės.

padding: x px z px a px c px;

Tai kiekvieno kokia reikšmė?

 

O man reikia to:

Yra tekstui skirto ploto img... Bet tame img yra tokie lankeliai į kuriuos jis turi tilpti. Ir iš viršaus aš nustačiau tiek kiek man reikėjo px, kad daeitų iki lankelio , o taipat reik daeiti iš apačios iki jau kito lankelio. Man nesvarbu kiek to teksto nukirs. Esmė tame, kad viskas ten sueitų tiek kiek nustačiau px.

Paddingo reiksmes tokios: pirmas skaicius - is virsaus, antras - desine, trecias - apacia, ketvirtas - kaire. Tiesiog sutrumpinimas keturiu atskiru eiluciu.

 

Dabar, kai jau atrodo supratau problema, as daryciau taip:

<div class="pirmas"><div class="antras">Tekstas</div></div>

.pirmas {background: ...; padding: a px b px c px d px;}

.antras {width: e px; height: f px; overflow: hidden; }

 

Kur e, f - tos dalies, i kuria turi sutilpti, matmenys (lankelio, ar ko ten). Kur a, b, c, d - paderini, kad pataikytu i ta lankeli.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Rimas

Rimas 1.146

Atrašyta
Atrašyta

Hm... Panagrinėjau keletą kodų ir mačiau, kad viename dive sukišta ir margin ir padding... Kokie jų skirtumai?

Margin yra isorines parastes, o padding - vidines. Jei tarkim turi kazkoki maza div'a su background'u, tai uzdejes jam padding ta teritorija, kur matomas background, padides, o uzdejus margin - ne. Taciau abiem atvejais kiti objektai jau i teritorija uz tu parasciu nebeis (na, nenaudojant z-index, position ir kt.).

Jei ant div'o nenaudoji nei fono, nei border'io, tai praktiskai jokio skirtumo tarp ju. ;)

Nuoroda į pranešimą
Dalintis kituose puslapiuose
ziogas

ziogas 5

Atrašyta
Atrašyta (redaguota)

Kažkas tokio?

 

<div style="width:500px; margin-left:auto; margin-right:auto; text-align:center;">
<div>
<div style="float:left; width:250px;">pirmas</div>
<div style="float:left; width:250px;">antras</div>
</div>
<div>
<div style="float:left; width:250px;">trecias</div>
<div style="float:left; width:250px;">ketvirtas</div>
</div>
</div>

Redagavo ziogas
Nuoroda į pranešimą
Dalintis kituose puslapiuose
Rimas

Rimas 1.146

Atrašyta
Atrašyta (redaguota)
O padingas jau nebeįsiterpia. :)
Na tada proporcingai didink width, height. Pvz:

<div style="width:540px; margin-left:auto; margin-right:auto; text-align:center;">
<div>
<div style="float:left; width:250px;padding: 10px; ">pirmas</div>
<div style="float:left; width:250px;padding: 10px; ">antras</div>
</div>
<div>
<div style="float:left; width:250px;padding: 10px; ">trecias</div>
<div style="float:left; width:250px;padding: 10px; ">ketvirtas</div>
</div>
</div>

Edit: suklydau šiek teik. :)

Redagavo T-Mix
Nuoroda į pranešimą
Dalintis kituose puslapiuose
ziogas

ziogas 5

Atrašyta
Atrašyta

O padingas jau nebeįsiterpia. :)

 

 

Įsiterpia, tiesiog reik padidint main div'o ploti :)

<div style="width:600px; margin-left:auto; margin-right:auto; text-align:center;">
<div>
<div style="float:left; width:250px; padding:10px;">pirmas</div>
<div style="float:left; width:250px; padding:10px;">antras</div>
</div>
<div>
<div style="float:left; width:250px; padding:10px;">trecias</div>
<div style="float:left; width:250px; padding:10px;">ketvirtas</div>
</div>
</div>

Nuoroda į pranešimą
Dalintis kituose puslapiuose
ifixas

ifixas 1.385

Atrašyta
  • Autorius
Atrašyta (redaguota)

Problema: IE atvaizduoja kitaip nei kiti browseriai.

Tarp text laukelio ir žodžio IE dar sukuria tarpą, o kitos ne. Kame bėda gal kas žino?

 

Ir gal kas gali paaiškinti šias reikšmes:

 

position: absolute ir relative;

clear reikšmes;

Būna tarkime #menu { } divas ir po jo dar #menu p { } ką tai reiškia?

Ačiū.

 

--------------------------------------------------------------------------------------

P.S.

Vietoje šito:

<div style="width:600px; margin-left:auto; margin-right:auto; text-align:center;">

<div>

Geriau šitas:

<div style="width: 600px;

margin-left: -300px; margin-top: 0px;

margin-left: 50%;">

<div>

 

Kažkas tokio. Tada IE tiesina, nes to kas buvo prieš tai IE nepripažysta :)

Redagavo ifixas
Nuoroda į pranešimą
Dalintis kituose puslapiuose
Rimas

Rimas 1.146

Atrašyta
Atrašyta
Problema: IE atvaizduoja kitaip nei kiti browseriai.

Tarp text laukelio ir žodžio IE dar sukuria tarpą, o kitos ne. Kame bėda gal kas žino?

 

Ir gal kas gali paaiškinti šias reikšmes:

 

position: absolute ir relative;

clear reikšmes;

Būna tarkime #menu { } divas ir po jo dar #menu p { } ką tai reiškia?

Ačiū.

 

--------------------------------------------------------------------------------------

P.S.

Vietoje šito:

<div style="width:600px; margin-left:auto; margin-right:auto; text-align:center;">

<div>

Geriau šitas:

<div style="width: 600px;

margin-left: -300px; margin-top: 0px;

margin-left: 50%;">

<div>

 

Kažkas tokio. Tada IE tiesina, nes to kas buvo prieš tai IE nepripažysta :)

Del tarpu: jei nenori tarpo po input'o, tai ten to tarpo ir nedek. Beja, enter taip pat uzskaitomas kaip tarpas. O jei butinai nori tarpo, bet nededa, tai pabandyk   arba ant input'o margin-right:2px;

 

Absolute pozicija, tai kai objekto pozicija nustatoma konkreciu pixeliu skaiciumi nuo ekrano virsaus/kaires etc. Rekomenduoju naudoti tik labai retais atvejais, nes jei visa dizaina taip kursi, tai jis bus nepritaikytas skirtingoms rezoliucijoms.

Releatyve - tai pozicija nuo tos padeties, kuroje objektas turetu buti "pagal default'a". Kartais padeda, kai reikia objekta paslinkti zemyn etc, bet taip pat stengiuosi ne per daznai naudoti, nors neabejotinai geriau uz absolute. :)

 

#menu p{} reiskia, kad nurodytas stilius taikomas visems paragrafams (<p>), kurie yra objekte, kurio id = menu.

 

P.S. Neigiamu parasciu (ir procentiniu) nenaudok - nesamone. Bandyk kazkaip kitaip pasiekti norima rezultata.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Rimas

Rimas 1.146

Atrašyta
Atrašyta
O ačiū už išsamumą. O kaip su clear?

Beje tai kaip tada be position? Sunkoka biški :)

Clear naudojamas tada, kai naudoji float. Jis tartum nubrezia riba, kad visi po jo einantys float'ai ir butu is tikruju po to elemento, o ne toliau rikiuotusi i viena eilute. Mazdaug jei daug div'u su float: left; rikiuoji i eilute, tai <div style="clear: left;" /> atitinka Enter klavisa - nukelia tolimesni rikiavima i kita eilute. Sunkoka paaiskinti, bet pasipraktikavus principas suprantamas greitai. As div'a su clear dazniausiai darau tuscia, 1px aukscio (arba net 0) ir su "overflow: hidden;" nes kitaip IE jo ilgi padidina iki srifto jame dydzio.

 

Be position viska darai tiesiog su div'ais - sukuri pagrindini div'a, ji centruoji. Tada jame sukuri tarkim 3 div'us - header, content ir footer. Visus juos gali daryti float:left ir po kiekvieno del visa ko dar ta div'a su clear gali uzdeti, nors jei didziai fiksuoti, tai netilpe jie turetu nusikelti automatiskai. Tada viduriniame div'e - content - kuri tarkim dar tris - left, center ir right. Juos taip pat gali su flot:left, bet po ju clear nebereikia, nes jie neturi keltis i nauja eilute. Ir taip toliau visa dizaina skirstai div'ais - jokiu position. :)

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 0
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

×
×
  • Pasirinkite naujai kuriamo turinio tipą...