Forum » Izdelava spletišč » Vse, kar ste si želeli vprašati o CSS, pa si niste upali.
Vse, kar ste si želeli vprašati o CSS, pa si niste upali.
DiTi ::
DiTi:
ce gremo po vrsti imas dive v takem vrstnem redu:
1. glava
2. vsebina
3. vsebina
4. noga
med nogo (4) in drugo vsebino (3) dodaj magar <br style="clear: both" />
ne z rdečo črto je ločeno pač dva primera, enkrat ko je vsebine manj enkrat kot je je več. tako da imam le 3 dive.
poiskusil sem že par "googlovih zadetkov" pa pri meni noben ne deluje pravilno (http://www.themaninblue.com/writing/per.... vedno več gledam in vedno več se mi zdi da bo potrebno rešit s javascriptom če hočem da bo res tako kot želim. vseeno hvala za pomoč
t3hn0 ::
DiTi: aha, malce prehitro sem napisal ;)
ena metoda je ta, da dolocis html ter body visino 100%, pa potem absolutno pozicioniranje...
lahko pa uporabis ta princip http://ryan.rawswift.com/sandbox/fixed-...
Gost: malce sem se zmotil pri cssju:
#content je znotraj enega absolutno pozicioniranega diva, sam #content pa ni absolutno postavljen. samo overflow me zajeb***.
ena metoda je ta, da dolocis html ter body visino 100%, pa potem absolutno pozicioniranje...
lahko pa uporabis ta princip http://ryan.rawswift.com/sandbox/fixed-...
Gost: malce sem se zmotil pri cssju:
#content je znotraj enega absolutno pozicioniranega diva, sam #content pa ni absolutno postavljen. samo overflow me zajeb***.
^.^
t3hn0 ::
moj problem, predstavljen grafično:
url do slike:
levo od rdeče črte mi odreže popup, kar jaz nebi rad [:/]
url do slike:
levo od rdeče črte mi odreže popup, kar jaz nebi rad [:/]
^.^
Zgodovina sprememb…
- spremenil: t3hn0 ()
Jebac18 ::
lep pozdrav vsem odločil sem se da naredim kaj v dreamviverju in to bi bilo v css in lepo prosim če bi kdo prilimal kakšno uporabno delujočo stran kko s cssom ?
nobodyelse ::
Imam css problem:
Struktura mora biti pa nujno taka:
div class="vsiDivi"
div
div
div
div
div
/div
Kaksne ideje?
Struktura mora biti pa nujno taka:
div class="vsiDivi"
div
div
div
div
div
/div
Kaksne ideje?
Zgodovina sprememb…
- spremenilo: nobodyelse ()
Gost ::
nobodyelse,
vsem notranjim divom določi širino in jim dodaj float:left, ter jih razmakni s pomočjo marginov. Na koncu dodaj še en prazen div z lastnostjo clear:both, da zaključiš floatanje.
vsem notranjim divom določi širino in jim dodaj float:left, ter jih razmakni s pomočjo marginov. Na koncu dodaj še en prazen div z lastnostjo clear:both, da zaključiš floatanje.
nobodyelse ::
dinozaver7 ::
Eno vprašanje, dobil sem design in sedaj sem ga razrezal ter začel sestavljati...in naletel na problem!
Levo je header (in meni), desno pa ozadje. Za ozadje je barva, vendar kot vidite, zaradi gradienta je meja grdo vidna. Kako vi rešujete take zadeve?
Levo je header (in meni), desno pa ozadje. Za ozadje je barva, vendar kot vidite, zaradi gradienta je meja grdo vidna. Kako vi rešujete take zadeve?
:P
Zgodovina sprememb…
- spremenil: dinozaver7 ()
Gost ::
Dinozaver7,
body-ju daj ozadje s sličico 1px širine in višine potrebnega gradienta, ki se ponavlja po x osi, glavnemu meniju pa daj zaobljen rob kot transparentno gif slikico (ki ima namesto alpha kanala neko povprečno modro belo barvo). Nihče ne bo opazil problematike. PNG po mojem ni še preveč primeren za to. Lahko pa tudi, če te ne moti, da v IE6 ne deluje.
body-ju daj ozadje s sličico 1px širine in višine potrebnega gradienta, ki se ponavlja po x osi, glavnemu meniju pa daj zaobljen rob kot transparentno gif slikico (ki ima namesto alpha kanala neko povprečno modro belo barvo). Nihče ne bo opazil problematike. PNG po mojem ni še preveč primeren za to. Lahko pa tudi, če te ne moti, da v IE6 ne deluje.
dinozaver7 ::
Sedaj sem naredil takole, v bistvu še preden sem postal prejšnji post. Kar sem naredil je, da sem shranil celotno ozadje (brez elementov) in ga ponovil po x osi..
Boljše najbrž ne morem naredit, je pa še vedno preveč opazno..
Boljše najbrž ne morem naredit, je pa še vedno preveč opazno..
:P
Netrunner ::
PNG po mojem ni še preveč primeren za to.
PNG je danes več kot primeren, IE6 je mrtev !!
jaz uporabljam predvsem GIF in PNG, sem pa tja kak JPG. Da pa ne ravno zanemraim ie6 rešujem težavo tako:
background: url(whatever.png);
_background: url(whatever.gif);
Doing nothing is very hard to do... you never know when you're finished.
dinozaver7 ::
Ok, dobro, jaz bom svoje kar pustil tako, itak večina sploh nima toliko širokih ekranov. :P
Še ena zadeva, imam nekaj težav s postavitvijo, pa me nekaj zanima. Kako vi poizicionirate elemente, ki so podobni kot tukaj:
Problem imam predvsem z elementi desno, v mozzili mi je nekako uspelo vse to spravit skupaj, v IE pa se podere.
Uporabljam dive in float, pa mi ne štima vse.
Še ena zadeva, imam nekaj težav s postavitvijo, pa me nekaj zanima. Kako vi poizicionirate elemente, ki so podobni kot tukaj:
Problem imam predvsem z elementi desno, v mozzili mi je nekako uspelo vse to spravit skupaj, v IE pa se podere.
Uporabljam dive in float, pa mi ne štima vse.
:P
Netrunner ::
Preprosto
1. Header daš v svoj DIV in mu daš position relative ... MENU pokneš absolutno tja
2. narediš 2 DIV-a fixne širine float left. V prvega daš LEVO 1 in LEVO 2 v drugega daj DESNO 1, DESNO 2 in DESNO 3
3. Noga je klasičen DIV
če se ti podre v IE je gotovo kriv kak padding. DIV width 200px z padding: 10px je širok 220px !! Ne pozabit tudi da če imaš placa npr 1000px in da daš noter dva DIVA širine 500px bo npr border 1px solid black prinesel vsakemu divu 2x širine .. se pravi skupaj bo 1004px in se bo zalomilo ...
na kratko .. preveri paddinge borderje margine ...
aja pa še to ... načeloma se težave pojavijo v IE6 pa tudi 7 ... drugje dela več ali manj enako ... to jaz odpravljam z _ # * CSS hacki...
1. Header daš v svoj DIV in mu daš position relative ... MENU pokneš absolutno tja
2. narediš 2 DIV-a fixne širine float left. V prvega daš LEVO 1 in LEVO 2 v drugega daj DESNO 1, DESNO 2 in DESNO 3
3. Noga je klasičen DIV
če se ti podre v IE je gotovo kriv kak padding. DIV width 200px z padding: 10px je širok 220px !! Ne pozabit tudi da če imaš placa npr 1000px in da daš noter dva DIVA širine 500px bo npr border 1px solid black prinesel vsakemu divu 2x širine .. se pravi skupaj bo 1004px in se bo zalomilo ...
na kratko .. preveri paddinge borderje margine ...
aja pa še to ... načeloma se težave pojavijo v IE6 pa tudi 7 ... drugje dela več ali manj enako ... to jaz odpravljam z _ # * CSS hacki...
Doing nothing is very hard to do... you never know when you're finished.
Zgodovina sprememb…
- spremenilo: Netrunner ()
dinozaver7 ::
Preprosto
1. Header daš v svoj DIV in mu daš position relative ... MENU pokneš absolutno tja
2. narediš 2 DIV-a fixne širine float left. V prvega daš LEVO 1 in LEVO 2 v drugega daj DESNO 1, DESNO 2 in DESNO 3
3. Noga je klasičen DIV
Glede 2. točke, 2h DIV-ov, oba float left? Zakaj, a ni eden levo, eden desno? Kaj pa position?
Glej tako je, desno so divi, ki imajo pripravljene background slike, levo bo pa pac samo ozadje vsebine in nima svojega bgja.
Gandalfar, zanimiva povezava, vendar se sploh ne znajdem in ne vem kaj pol počet s css fajlom. Je kje kakšen vodič?
:P
Netrunner ::
zakaj float left in ne left in right, načeloma v tvojem primeru bi lahko dal eno left drugo right, vendar s tem nimaš nobene prednosti. Jaz vedno dam float left, ali sta dva bloka ali trije ... vedno float left da se lepo zlagajo drug ob drugega. Lahko bi tudi float right uporabil, vendar ga ne.
Doing nothing is very hard to do... you never know when you're finished.
dinozaver7 ::
zakaj float left in ne left in right, načeloma v tvojem primeru bi lahko dal eno left drugo right, vendar s tem nimaš nobene prednosti. Jaz vedno dam float left, ali sta dva bloka ali trije ... vedno float left da se lepo zlagajo drug ob drugega. Lahko bi tudi float right uporabil, vendar ga ne.
Aha, ja, sedaj razumem, sploh mi ni bilo čisto jasno vse.
Sedaj sem šel znova in vse lepo postavil pa vendar IE (8) še vedno razdere zadevo. Kakšni so tisti CSS hacki?
:P
Netrunner ::
Mozila, Opera, Safari, Chrome in IE8 načeloma delajo enako, IE7 in IE6 so klasa zase ...
težko je vedet zakaj ti povzroča težave če ne vidim kode ... in kako ti sploh razdere ? ... le ti desni del vrže pod levega namesto da bi bil poleg, pomeni da je nekaj narobe z notranjimi širinami, margini ali paddingi ... če ti noga čudno stoji pomeni da nisi počistil float-a.
Pod holderji ki držijo LEVI del in DESNI del moraš zaključit float. to narediš tako da nekemu elementu spodaj daš style "clear: both;"
CSS hacki ..
če imaš:
width: 100px;
padding: 0 10px;
širina ki jo potrebuješ je 120px ... zgoraj napisano bo delalo povsod razen v ie6 .. to popraviš tako
width: 100px; _width: 120px;
padding: 0 10px;
pred vsako ime styl-a če daš podčrtaj ga bo upošteval samo ie6, ... potem mislim da imaš še # samo za IE7 pa * za ... se ne spomenem :) poguglaj malo
težko je vedet zakaj ti povzroča težave če ne vidim kode ... in kako ti sploh razdere ? ... le ti desni del vrže pod levega namesto da bi bil poleg, pomeni da je nekaj narobe z notranjimi širinami, margini ali paddingi ... če ti noga čudno stoji pomeni da nisi počistil float-a.
Pod holderji ki držijo LEVI del in DESNI del moraš zaključit float. to narediš tako da nekemu elementu spodaj daš style "clear: both;"
CSS hacki ..
če imaš:
width: 100px;
padding: 0 10px;
širina ki jo potrebuješ je 120px ... zgoraj napisano bo delalo povsod razen v ie6 .. to popraviš tako
width: 100px; _width: 120px;
padding: 0 10px;
pred vsako ime styl-a če daš podčrtaj ga bo upošteval samo ie6, ... potem mislim da imaš še # samo za IE7 pa * za ... se ne spomenem :) poguglaj malo
Doing nothing is very hard to do... you never know when you're finished.
nuuush ::
Netrunner ::
kot Tody pravi .. uporabi break .. ali pa z CSSji elemntu ki drži en komentar dodaj padding: 10px 0; .. ali pa margin ..
Doing nothing is very hard to do... you never know when you're finished.
overlord_tm ::
Ok, tale stvar me muci ze cel dan. Verjetno je kaka trivialna stvar, vendar je ne opazim.
Verjetno je jasno kaj bi zelel, sidebar poravnan tako da bo vzporeden z vsebino, ne spodaj :) Problem se pojavla v vseh browserjih. Se live demo
Verjetno je jasno kaj bi zelel, sidebar poravnan tako da bo vzporeden z vsebino, ne spodaj :) Problem se pojavla v vseh browserjih. Se live demo
fizikalac ::
nuush, s cssjem lahko komentarju dodaš margino (margin-bottom:10px;) ali pa padding (padding-bottom:10px;).
Lako pa tudi
Lako pa tudi
<br />za vsakim komentarjem, kar pa je dosti bolj leseno za narest :D
Zgodovina sprememb…
- spremenil: fizikalac ()
CaqKa ::
huh tega pa nisem vedel in se mi zdi vredno deliti z vsemi:
iz: http://stackoverflow.com/questions/4658...
Zdaj mi je pa jasno zakaj mi nekatere zadevščine ne delajo.. pa mi je tudi jasno zakaj sem začel selektorje sidrat od IDja dalje :)
upam da še komu koristi
skratka najvišji rule je !important v inline.
pa za tiste ki ste v css že nekaj časa me zanima koliko uporabljate za izbiro tudi + ali pa > ?
namreč delam css za en site baziran na sharepoint tehnologiji (MS) in ni redko ko uporabim varianto
pač nimam vpliva na kodo, MS pa še vedno uporablja jebene tabele...
According to the CSS specification, element selectors have a specificity of 1, class selectors have a specificity of 10, ID selectors have a specificity of 100, and the specificity of inline styles is 1000. A higher specificity will override a lower specificity, so inline styles always win. However, there is a way out. The !important declaration overrides all the unimportant declarations. No matter what the source of the style is, it will lose to anything with the !important declaration.
iz: http://stackoverflow.com/questions/4658...
Zdaj mi je pa jasno zakaj mi nekatere zadevščine ne delajo.. pa mi je tudi jasno zakaj sem začel selektorje sidrat od IDja dalje :)
upam da še komu koristi
skratka najvišji rule je !important v inline.
pa za tiste ki ste v css že nekaj časa me zanima koliko uporabljate za izbiro tudi + ali pa > ?
namreč delam css za en site baziran na sharepoint tehnologiji (MS) in ni redko ko uporabim varianto
#bla table td:first-child +td+td
pač nimam vpliva na kodo, MS pa še vedno uporablja jebene tabele...
Zgodovina sprememb…
- spremenil: CaqKa ()
maastermedia ::
CaqKa,
dokler ne potrebuješ podpirati IE6 ali kakih podobnih brskalnikov, ki ne podpirajo CSS2, je vse v redu s temi selectorji in ti zelo olajšajo kodiranje.
dokler ne potrebuješ podpirati IE6 ali kakih podobnih brskalnikov, ki ne podpirajo CSS2, je vse v redu s temi selectorji in ti zelo olajšajo kodiranje.
CaqKa ::
sej sem potem celo opazil da je v sharepoint 2010 vse polno javascripta, ki uporabniku pove da uporablja star browser in da stran ne bo delovala pravilno in se naj updejta :>
CaqKa ::
http://www.rcum.uni-mb.si/novice/Lists/...
tukaj mi raztegne nekam čudno, ma kdo kako idejo kaj sem spregledal?
referenčni izris: http://www.rcum.uni-mb.si/novice/defaul...
tukaj mi raztegne nekam čudno, ma kdo kako idejo kaj sem spregledal?
referenčni izris: http://www.rcum.uni-mb.si/novice/defaul...
tec ::
A lahko pričakujem kakšne težave, če npr. v enem layerju naredim pet layerjev in dam vse na position: absolute in jih potem z paddingom in marginom postavljam po master layerju?
hvala
hvala
Major ::
Ne morš jih s paddingbom pozicionirat. Margin odsvetujem. Če že morajo biti absolutno pozicionirani uporabi property { top, right, bottom, left } (beri: uporabiš lahko le kombinacijo dveh hkrati).
IT Developer & Photography enthusiast.
Matthaios ::
Rabil bi da se ozadje div elementa spreminja glede na to kera je stran odprta. Vem da se to naredi s php-jem. Ne vem pa kako dobit vrednost spremenjljivke section iz url-ja. sm poskusu z $_GET pa ne gre. A ma kod kakšen predlog. ja pa to bi naredil v ločenem php(css) fajlu
Zgodovina sprememb…
- spremenil: Matthaios ()
Major ::
S phpjem dinamično nastaviš class div elementu, glede na trenutno stran, ki jo prikazuješ. Nato v cssu različnim classom dodaš različna ozadja.
IT Developer & Photography enthusiast.
CaqKa ::
sem pa zadnjič uporabil eno finto za take zadeve...
php na različnih straneh ni generiral posameznih classov ali idjev za strani... je pa na vrhu v oznako HTML ali pa FORM dodal nekaj svojega kot recimo v html sem imel "lang='en-us'" kar sem uporabil za drugačne finte pri različnih jezikih.
zadevo selectaš z
html[lang='en-us']
pri form pa sem imel "action='naslednja_stran.php'", kar spet lahko podobno kot zgoraj selectaš, pa daš različnim stranem različna ozadja :>
pa še ena varianta je take zadeve zahaklat...
dostikrat se zgodi da je html koda na posameznih straneh različna...
da je recimo vsebina na eni strani v 4 vrstici, dočim je na neki drugi strani že v drugi vrstici ostale pa so prazne, ali pa jih ni.
zadevo potem zahaklaš na tak način
table tbody > tr:first-child + tr + tr +tr (s tem zahaklaš 4 vrstico)
php na različnih straneh ni generiral posameznih classov ali idjev za strani... je pa na vrhu v oznako HTML ali pa FORM dodal nekaj svojega kot recimo v html sem imel "lang='en-us'" kar sem uporabil za drugačne finte pri različnih jezikih.
zadevo selectaš z
html[lang='en-us']
pri form pa sem imel "action='naslednja_stran.php'", kar spet lahko podobno kot zgoraj selectaš, pa daš različnim stranem različna ozadja :>
pa še ena varianta je take zadeve zahaklat...
dostikrat se zgodi da je html koda na posameznih straneh različna...
da je recimo vsebina na eni strani v 4 vrstici, dočim je na neki drugi strani že v drugi vrstici ostale pa so prazne, ali pa jih ni.
zadevo potem zahaklaš na tak način
table tbody > tr:first-child + tr + tr +tr (s tem zahaklaš 4 vrstico)
Major ::
Daj prosim kakšno knjigo preberi, preden limaš takšne primerke neokusne kode.
IT Developer & Photography enthusiast.
CaqKa ::
GLEDE NA TO DA NISMA KRAV SKUP PASLA, te bom zdaj prosil da argumentiraš zakaj je zgornjo "primerek neokusne kode".
dejstvo je da je to v standardu. in da so glede na css 2 zadevo razširili.
CSS2 selektorji
CSS3 selektorji
dejstvo je da je to v standardu. in da so glede na css 2 zadevo razširili.
CSS2 selektorji
CSS3 selektorji
Zgodovina sprememb…
- spremenil: CaqKa ()
Major ::
Sem vesel, da bova širila obzorja. Dejstvo je, da je renderiranje spletnih strani popolnoma subjektivna odločitev naročnika. Če želi, da je na voljo širokemu ciljnemu občinstvu, moramo upoštevati skladnosti z x-brskalniki (CSS 3 tukaj odpade). V tem primeru je potrebno zboleti za classitis.
Debata je potekala v pomoč Matthaiosu, ki je spraševal kako bi prikazal različna ozadja na različnih straneh. V golem PHPju se da preko GETa enostavno preveriti na kateri strani trenutno si in določiti temu primeren class div elementu (Matthaios: še naprej poskušaj v tej smeri, se mi zdi najlažja). Obstajajo tudi drugi načini. Veliko lažje je če se uporabi framework, ki temelji na MVC patternu. Tako lahko v controllerju includaš različne css fajle za različne viewje.
Verjamem, da je mnogo težje, če si omejen z nekim CMSom, vendar pravim da ni nemogoče (sploh za takšno osnovno funkcionalnost).
Kaj pa če želi menjati ozadje na bodyju?
Sam se nebi zanašal na action atribut (čeprav ni ravno semantično pravilno, je lahko tudi prazen).
To deluje, če je vedno 4. vrstica. Zakaj nebi samo dodal nek class tej vrstici in se znebil omejitve?
Če že mora biti tako, lahko uporabiš tr:nth-child(4)
Mogoče nekaj uporabnega za Sharepoint -> How to get current page (aspx) url and title using spcontext object in sharepoint?
Debata je potekala v pomoč Matthaiosu, ki je spraševal kako bi prikazal različna ozadja na različnih straneh. V golem PHPju se da preko GETa enostavno preveriti na kateri strani trenutno si in določiti temu primeren class div elementu (Matthaios: še naprej poskušaj v tej smeri, se mi zdi najlažja). Obstajajo tudi drugi načini. Veliko lažje je če se uporabi framework, ki temelji na MVC patternu. Tako lahko v controllerju includaš različne css fajle za različne viewje.
Verjamem, da je mnogo težje, če si omejen z nekim CMSom, vendar pravim da ni nemogoče (sploh za takšno osnovno funkcionalnost).
pri form pa sem imel "action='naslednja_stran.php'", kar spet lahko podobno kot zgoraj selectaš, pa daš različnim stranem različna ozadja :>
Kaj pa če želi menjati ozadje na bodyju?
Sam se nebi zanašal na action atribut (čeprav ni ravno semantično pravilno, je lahko tudi prazen).
table tbody > tr:first-child + tr + tr +tr (s tem zahaklaš 4 vrstico)
To deluje, če je vedno 4. vrstica. Zakaj nebi samo dodal nek class tej vrstici in se znebil omejitve?
Če že mora biti tako, lahko uporabiš tr:nth-child(4)
Mogoče nekaj uporabnega za Sharepoint -> How to get current page (aspx) url and title using spcontext object in sharepoint?
IT Developer & Photography enthusiast.
CaqKa ::
Verjamem, da je mnogo težje, če si omejen z nekim CMSom, vendar pravim da ni nemogoče (sploh za takšno osnovno funkcionalnost).
pri form pa sem imel "action='naslednja_stran.php'", kar spet lahko podobno kot zgoraj selectaš, pa daš različnim stranem različna ozadja :>
Kaj pa če želi menjati ozadje na bodyju?
Sam se nebi zanašal na action atribut (čeprav ni ravno semantično pravilno, je lahko tudi prazen).
Zakaj ni pravilno?
Mojo rešitev s css sem dal kot alternativo. sploh ker je to tema o css in ne o php. zato sem verjetno tudi sprva razumel da potrebuje css rešitev ne pa php, kot sedajle vidim ob še enkratnem prebiranju njegovega posta.
table tbody > tr:first-child + tr + tr +tr (s tem zahaklaš 4 vrstico)
To deluje, če je vedno 4. vrstica. Zakaj nebi samo dodal nek class tej vrstici in se znebil omejitve?
Če že mora biti tako, lahko uporabiš tr:nth-child(4)
Zato ker sem želel exaktno 4 vrstico zahaklat, ker pač sharepoint samo v določenih primerih naredi tak, in sem lahko to uporabil za css. zakaj nebi dodal nekega classa, ker kot rečeno sem omejen s tem da nič ne spreminjam kode ki se izpljune.
:nth-child() sem spoznal šele s prejšnjim postom.
Mogoče nekaj uporabnega za Sharepoint -> How to get current page (aspx) url and title using spcontext object in sharepoint?
Hvala.
Vredno ogleda ...
Tema | Ogledi | Zadnje sporočilo | |
---|---|---|---|
Tema | Ogledi | Zadnje sporočilo | |
» | poravnava li elementovOddelek: Izdelava spletišč | 2158 (2023) | boss-tech |
» | Wampserver in FirefoxOddelek: Izdelava spletišč | 1860 (1740) | jonystar |
» | CSS problemi (strani: 1 2 )Oddelek: Izdelava spletišč | 9882 (7681) | nuuush |
» | [CSS]Pozicioniranje footer divaOddelek: Izdelava spletišč | 2468 (2415) | amaze646 |
» | CSS background-image in IE6?Oddelek: Izdelava spletišč | 3082 (2948) | Road Runner |