» »

Pomoč pri css

Pomoč pri css

Jerry000 ::

Pozdravljeni

Malo probavam css, oziroma se ga učim podrobneje da lahko potem izdelam kakšno spletno stran. Pa da kar na primeru razložim moj problem. torej želim si narediti okvirje za vadbo z pozicijami, z-indexi, float, itd. Zastavil sem si cilj narediti tako:
. Celotna podoba naj bi bila na centru. Rešil sem že nekaj, zataknilo se mi je pri polnem črnem kvadratu na levi strani (ki se dotika velikega sivega kvadrata)
Namreč, nikakor ga ne morem spraviti gor...napišem:

float: right;
position: relative;
bottom: 700;

in ostane spodaj kjer je bil le da se je prestavil na desno stran. Kot da bi samo float prijel to pa ignoriral. Pri prejšnjih primerih je delovalo lepo. Torej tisti ki pozna rešitev ga prosim za utemeljitev, kajti mene zanima ZAKAj je tako (rad bi se naučil). Tukaj je tudi moja koda za lažjo predstavo koliko sem naredil:

http://cssdeck.com/t/B9HeCZyo

  • spremenil: Jerry000 ()

Skatey ::

bottom ti vzame od cele strani spodaj, ker imaš div direktno na stran napisan. Kaj hočeš narest je, da imaš par wrapperjev okoli divov.

Npr. 1 div header, ok. Pol 1 wrapper, ki je relativen npr. 600px znotri katerega je main content npr. 400px kot si narisal sivo, zgornji črni kvadrat je potem absolutno na relativni in bo recimo top:20px od wrapperja in ne. Črni poln kvadrat na desni pa je potem absolute npr. top:60px bo vzelo od wrapperja, in dodaš še right: 0px, da bo od desne strani se začelo. Cel wrapper maš lahko margin:0 auto, da bo na sredi.

Desni črna obroba meni, narediš float right, relative, pri čemer lahko rečeš top: npr. 100px; tokrat ti bo vzel od cele strani odmike. Enako lahko narediš na levi strani.

Torej lekcija: absolutna pozicija se računa glede na celo stran, možnost, je da narediš si "wrap" element div class="wrap" /div in znotraj njega dodaš dodatne div oz dom elemente. Na ta način se naslednje absolutne pozicije gledajo glede na zgornji nadrejeni div.

Včasih lahko wrapperji tudi tepejo, npr. pri tebi ni dobra ideja narest 1ga absoultnega wrapperja, ker imaš header daljši kot potem notranji content in se ti bolj splača razdelit na par delov in potem znotraj tega gledati. Ena stvar, ki se jo hočeš izogibati, če je možno je absolutna pozicija v negativne px..
Design, elephants and stuff... www.yukaii.com/blog

Jerry000 ::

malo sem razmišljal to kar si napisal in nekako mi ne uspe. Lahko mogoče napišeš to kar si razložil v urejevalnik (http://cssdeck.com/t/B9HeCZyo) in daš pod komentarje? Nekako mi niso čisto jasni elementi oziroma position: absolute/relative. Se pravi če absolute gleda glede na celo stran...katero celo stran? Relative je pa ubistvu poljubno pozicioniranje?. Zanima me s katerimi elementi naredis obliko strani kot je naprimer moja na sliki? Se to bolj dela s tabelami al position elementi?

Skatey ::

http://cssdeck.com/t/b9heczyo/1

Fora je, da to kar si si zbral z takšnimi odmiki se ponavadi ne dela. oz. razmišljat moraš v škatlah. kako jih boš postavil in katera se bo nanašala na katero. to kar sem ti napisal je ena rešitev. eno kar recimo se izogibaj je, pozicioniranje elementov glede na bottom. namreč, ko boš enkrat imel notri realna besedila recimo novice so le-te ponavadi različno dolge in od spodaj gor ne veš višine, od zgoraj dol pa veš.
Design, elephants and stuff... www.yukaii.com/blog

Jerry000 ::

Ful hvala. Ampak kakšna je razlika med margin: 0 auto; in margin: auto;? Je to isto ali je kakšna fora? Pravtako nevem točno kot sem rekel absolute in relative elementa. Zdaj si naredil brez absolute.
Ne razumem pa kaj si hotel reči da moram razmišljat o škatlah...saj to so škatle. Kolikor sem pa z firebug-om gledal pa spletne postavijo z tabelami (tbody, td, tr,...), si to mislil?

Jerry000 ::

Ful hvala. Ampak kakšna je razlika med margin: 0 auto; in margin: auto;? Je to isto ali je kakšna fora? Pravtako nevem točno kot sem rekel absolute in relative elementa. Zdaj si naredil brez absolute.
Ne razumem pa kaj si hotel reči da moram razmišljat o škatlah...saj to so škatle. Kolikor sem pa z firebug-om gledal pa spletne postavijo z tabelami (tbody, td, tr,...), si to mislil?

Se opravičujem, nevem kako se je to zgodilo, kliknil sem samo 1x na pošlji poslalo mi je pa 1 preveč

Zgodovina sprememb…

  • spremenil: Jerry000 ()

HardFu ::

Kadar vrednostim margin ali padding dodas dve vrednosti, je prva vedno spodnja in zgornja, druga pa levo in desno:

margin: 0 auto; je isto kot:
margin: 0 auto 0 auto;
vrednosti gredo: zgoraj, desno, spodaj, levo.

Za vec si poglej: http://www.w3schools.com/css/css_margin...

Nasploh ti priporocam malo vec googlanja, ce vpises samo "margin" potem je prvi rezultat link zgoraj.
http://codeable.io

Skatey ::

tabele uporabljaj samo za tabularne podatke, torej tabele so your friend, ko imaš dejansko tabelo :)

ne vem kako nej razložim relative absolute. bom probal. torej html dom elementi se izrisujejo od začetka proti koncu, torej kar napišeš prej se bo prej izrisalo. vsi elementi so v osnovi relativni na kanvas (to je browser window).. daš škatlo gor in če nič ne nastaviš bo levo zgoraj. lahko ji rečeš margin 0 auto in bo zgoraj brez odmika, levo desno pa avtomatično (pazi catch, mora imeti fiksno širino, če želiš, da to dela).
potem imaš naslednji element, le-ta se bo izrisal za naslednji element.

naslednja stvar, ki si jo preberi so: display: block/inline/compact; ta parameter opisuje izris škatel na kanvasu, če je zadeva block bo izrinila vse elemente vzporedno z njo, inline bo štancala elemente zraven, compact tudi itd. vsaka se malo drugače obnaša.

potem imaš float: left/right. naredi to kar piše, element se postavi čisto levo ali čisto desno, + vsi naslednji elementi sledijo temu pravilu. če ga hočeš resetirati, da bo zopet block torej pod tvojo škatlo moraš narediti clear: left/right/both; odvisno kaj imaš.

malo sem zašel. ampak to so v osnovi vse opcije, ki se izvajajo zraven relativnih objektov + seveda še druge.

na drugi strani imaš position absolute. tega si predstavljaj kot koordinatni sistem. levo zgoraj je tvoja 0, 0 točka in začetek sistema. potem vzameš element/škatlo in jo postaviš top:20px, left: 60px; in tada je odmaknjena za toliko. pri absolute lahko določiš 1 parameter, ponavadi je pa najbolje 2 - tista ki določiš torej top/bottom/left/right tja se bo nalepil element. - torej če boš napisal top:20px, bottom 30px; bo vzel bottom ker je kasneje v sintaksi, da te ne bo medlo - uporabljaj samo enega.

zdej pa še catch. če imaš element 1, ki je relativen in znotraj tega elementa element 2, ki je absoluten, bo le-ta absoluten na element 1. če ga želiš, da je absoluten na kanvas ga ali daš ven iz elementa, lahko pa tudi ne določiš relativnosti elementu 1.

hmm. malo sem se razpisal. torej lekcija naprej. poglej si še display / float / position in se malo igrej ;)
Design, elephants and stuff... www.yukaii.com/blog

Jerry000 ::

Hvala za razlago, bom probu se mal špilat s tem, tko se pomoje še najhitrej vidi kaj je kaj ampak vseeno malo teorije ne škodi:)


@HardPhuck, googlat ni problem, problem je kako je razloženo. Naprimer učim se iz nekega videa ki najprej razloži potem pa na primeru pokaže kar je povedal. To men ful pomaga:)



Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297335410 (59559) htmltroubles
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč
151847 (1575) kr?en
»

poravnava li elementov

Oddelek: Izdelava spletišč
82034 (1899) boss-tech
»

CSS - DIV - Brez Tabele

Oddelek: Izdelava spletišč
231503 (1206) jernejp
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč
62337 (2284) amaze646

Več podobnih tem