» »

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.

««
7 / 26
»»

CaqKa ::

http://ferisrv5.uni-mb.si/~dm3809/cetrt...

kak naj v popupu naredim drsnike za vse strani.. (popup se skriva pri onem linku pri slikci)
imam generiran html iz worda s pomočjo course genija, zato se v samo vsebino ne gre extra posegat.
sej mu sicer dodam, da mi naj našopa skroler zraven, ampak ta glup CG parser to nekaj zmrda in mi ne da skrolera.. kolkor gledam pa skroler doda preko javascripta (mislim kdo jim je reko da se za skroling uporablja java script?)
http://ferisrv5.uni-mb.si/~dm3809/cetrt...

problem 2
nevem zakaj so se odločli delat layout s pomočjo tabel.. no skratka ob strani kjer je TOC sem želel aktivnega vsakič obarvat belo kar je vredi..
pa potem mu zgornji spodnji in levi rob naštrihat črno..
desnega pa belo.. ampak tak belo da bi prekril rob od naslednjega td v katerem je vsebina. no skratka tega s tabelo ne znam naredit, pa prosim za kako rešitev.
pa tudi kak se tistega enega pixla modre podlage med obema TDjema znebim.

Road Runner ::

#1: išči window.open po javascriptih (al je direkt v htmlju? - nisem gledal) in notri imaš opcijo nekaj v stilu scrolling="no" pa daj na yes

#2: pixel med tdji... <table cellspacing="0" cellpadding="0">. če ne morš htmlja spreminjat:
table, tr, td { border-collapse:collapse; padding:0; }
ampak ne bo delalo v starejših browserjih (ne vem točno katerih)

z border-collapse ti MORDA uspe prekriti črn rob. če sta obe celici v isti tabeli that is. malo se igraj


CSS - Fun with tables
http://dusan.fora.si/blog/ (742617000027)

CaqKa ::

#1 mhm koda je direkt v html includana:
<!--

	
	function winOpen(winUrl) {
		self.close();
	 	popWin=window.open(winUrl,"linkWindow",
"width=640, height=480, status=yes, toolbar=yes, menubar=yes,
resizable=yes, location=yes, scrollbars=yes");
	}

// -->

ne morem tega forcat s pomočjo cssja da bi vedno bili scrolleri?
#2 grem probat.

Zgodovina sprememb…

  • spremenil: CaqKa ()

njok ::

overflow: scroll;
doda elementu oba scrollerja,


overflow: auto;
pa samo, če vsebina presega velikost elementa.

CaqKa ::

finta je da nevem kak naj popupu vsilim scroller.. ker sem dal v body {} tale overflow in vse kar sem dobil so bili dodatni skrolerji v samem dokumentu v popupih pa ne.. kot da tisti javascript ne dopusti cssju kontrole nad drsniki.

oni collapse mi je zbrisal tisti pixel odvečni ki sem ga imel.. ampak še vedno nevem kak bi prebarval tisti črni rob na belo z vsebino iz prejšnega tdja.

CaqKa ::

pa še tole:
imam bordere okrog li

li.currentpage {
font-weight: bold;
color: #069;
padding:6px;
border-top: solid gray 3px;
border-left: solid gray 3px;
border-bottom: solid gray 3px;
border-right: solid white 3px;
background: white;
margin-right: -3px;
z-index:2;
}

kako naredim da bo tudi številka od li znotraj borderja?

Road Runner ::

list-style-position:inside al neki tazga mora bit, preveri

s tabelami ne morš delat čudežev in prekrivanja :) lahko probaš z display:block; na table, tr, td, .. ampak bi znal ne delat ;>

za scrollbar pa, a si zihr da je to ta koda? ker kle notr maš scrollbars=yes
http://dusan.fora.si/blog/ (742617000027)

CaqKa ::

listsyle position inside.. ok. samo zgleda obupno :) nisem vedo da številko skup potegne k tekstu.
ma tisto s tabelami sem zdaj že kr opustil ker vidim da nekak nebo šlo..

ja ono je koda od prvega popupa ki sem ga našel.. pač v tistem dela
hotel sem naznanit da mi v html kodo nasipa tale javascript v katerem je tudi kontrola za drsnike..
no htmlja ne morem spreminjat, zato bi to rad v cssju rešil.

oni parser zgenerira html za skrolanje glih kak se mu zljubi.. čeprav sem pogledal da je vsakič noter:
<popup>
<size>scrolling</size>
</popup>

se to tu in tam vseeno ne poparsa v tist javascript.. pa bi rad na css nivoju zaobšel to zadevo.

http://ferisrv5.uni-mb.si/~dm3809/cetrt...
vsakršna dezijnerska priporočila so dobrodšla.

Road Runner ::

play some with overflow I guess...
http://dusan.fora.si/blog/ (742617000027)

Hair ::

Če nočeš imeti številk blizu texta naredi tole:

li { padding-left:10px }

Lp!
Whenever people agree with me, I feel I must be wrong.

Nobelov ::

Oj, bi mi lahko kdo pomagal s temle problemom:

Imam main div, zdaj bi pa rad pod spodnji vogal zataknil še en manjši div. In tu mam problem z z-indexom; recimo da ima body z-index 1, manjši div 2 in main div 3 - v tem primeru je manjši div še vedno nad zgornjim, torej tako, kot da ne bi upoštevalo indexov. V primeru, da dam za indexe negativne številke torej body: -x, manjši div: -1 in main: +x, mi stvar v IE pravilno dela v firefoxu pa mi manjšega diva sploh ne pokaže.

Zdaj nevem, al kaj narobe delam a ma spet vsak brskalnik svoje fore glede tega?

Tody ::

pri tako kompliciranih zadevah je priporočljivo dati link do strani ali pa vsaj kodo.

Road Runner ::

z-index brez position:relative, position:absolute oz. position:fixed ne igra nobene vloge
http://dusan.fora.si/blog/ (742617000027)

Nobelov ::

O superca, sem popravil in zdaj lepo dela, pri main divu nisem določil pozicije.

Hvala za pomoč

iso2000 ::

Še jaz prosim za malo pomoči! Zopet delam eno stran in mi deluje kot sem si zamislil v IE in Operi. Nikakor pa ne v FF-u!? Problem je v tem, da mi menija in vsebine ne prikazuje znotraj gradnika, ki sem ga namenil temu, ampak kar odplavata preko. Sigurno je zopet neka banalna napaka v kodi. Samo je nikakor ne najdem! Sicer pa poglejte stran v IE in FF, ter primerjajte: KLIK-KLAK.

Za vse predloge se najlepše zahvaljujem!


LP

njok ::

Trenutno mi strani noče odpreti. Si se prepričal, da nimaš kakšne napake v markupu (nepravilni gnezdenje, element brez zaključujočega taga,...)?

Road Runner ::

tkole na hitro mi zgleda kot da si kak float pozabu clearat
http://dusan.fora.si/blog/ (742617000027)

iso2000 ::

Ali lahko malo več razložiš okrog tega? . Sicer sem tudi sam sumil, da je kaj v zvezi s clear funkcijo, ampak je ne znam prav dobro uporabljat in bi prosil kakšno dobro dušo, da mi malo pomaga.

LP

njok ::

Gre za to, da ce mas element, ki deluje kot vsebovalnik za druge floatane elemente, potem se ta vsebovalnik ne bo prilagajal velikosti teh floatanih elementov. Razen v slucaju, ko vsebuje tudi element, ki ima definirano clear funkcijo.

Ce te natancneje zanima, kako floate renderirajo browserji, si lahko preberes kaksen clanek (sem vedel za enega, ki stvari res podrobno razlozi, ampak na zalost ne najdem).

Ce bi pa rad samo resil tezavo, na katero si naletel, dodaj tole v CSS datoteko:
#silos:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}

Za konec ostane se nekaj tezav z IE mac. Ce te zanima si oglej razlago zgornje kode.

iso2000 ::

njok: Najlepša hvala! Prvič si mi zelo veliko pomagal, drugič pa si mi dal še odličen link, kjer sem izvedel kar nekaj novega! Hvala!!!

bobyx ::

Jaz imam pa eno vprašanje glede tega, kje naj bo stylesheet definiran.

Sedaj imam narejen pač nek template in v glavi strani (<head>) linkam na pripadajoč stylesheet. Rad bi spremenil določene stile v strani in edini prostor kjer to lahko naredim je nekako sredi vsebine.
Torej sem sredi vsebine dodal <style type="text/css">...</style> in tam notri ponovno definiral stile.
Zanima me pa, kako nepravilno to je. Rešitev se mi sicer zdi zelo grda, vendar vsi trije brskalniki prikazujejo pravilne stile. Bi moral na vsak način uporabiti kak drug način?

Ali se tudi lahko po cssju stili definirajo več kot enkrat, tudi z enakimi postavkami (različnimi vrednostmi)?

njok ::

To, da ti brskalnik prikaze tako, kot si si zamislil, je potreben a ne zadosten pogoj za dobro stran. Tako kot ce ti stran gre skozi validator se ne pomeni, da je vse tip-top, ceprav si z zgornjima testoma prekosil lep del obstoječih spletnih strani. ;)

V tvojem primeru kršiš načelo ločevanja vsebine od prezentacije ( 1, 2), na prvi pogled stvar, ki jo bos opazil ti in kaksen izmed redkih obiskovalcev, ki se bo poglobil v kodo.

Po drugi strani ima pa problem precej enostavno resitev, o kateri smo tudi nekajkrat ze razpravljali v tej temi. Vse kar moras storiti je, da nekam (recimo na body) nalepis en class, ki bo povedal, zakaj je ta stran drugacna od ostalih (recimo class="admin"), potem pa tvoj element, na katerega si se prej nanasal kot
element#id.class { ... }
enostavno naslavljas kot
body.admin element#id.class { ... }

Enostavno, a ne? Obstaja pa se boljsa resitev, ki pride prav, ko potrebujes se vec razlicic istega elementa. Tokrat namesto classov vsakemu body tagu na vsaki strani dodelis id atribut, glede na url. Tako bo recimo naslov /novice/ dobil id="novice", /clanki/06/05/sed/ pa id="clanki-06-05-sed". Ce uporabljas kaksen CMS oz framework je vseskupaj se lazje, ker lahko dodeljevanje id-jev povsem avtomatiziras in med pisanjem stylesheetov sploh ne razmisljas vec.

No, za konec naj se povem, da sem se, ko sem rekel, da je vse skupaj samo zaradi lepse kode, malo zlagal. Pomisli sedaj, da bi za isto stran rad naredil drugo podobo (naj bo dodaten skin ali redesign, ni vazno). Kaj moras storiti, ce imas med vsebino sem pa tja kaksen style element, in kaj, ce imas vse skupaj lepo definirano v enem css dokumentu?

bobyx ::

Kot prvo hvala za izčrpen odgovor! Dejansko bi rad zadevo rešil na čimlepši način, vendar mogoče nisem pravilno izrazil mojega problema in tudi mislim da trenutna rešitev definitivno, čeprav deluje, ni uporabna.
Moj problem je v osnovi to, da omogočim uporabnikom, da si znotraj oblike strani na svojih podstraneh postavijo svoje stile. Boljšo rešitev sem si zamislil nekako takole: v templateu se glede na uporabnika pot importanjem originalnega stila dodajo še ponovne definicije za elemente, katere ima uporabnik pravico spreminjati. Torej ne morem vnaprej definirati stilov za vse uporabnike, ampak moram te stile dinamično nalagati.
V originalnem stylesheetu defirane recimo A, P.title1, P.title2,... V novem stilu, ki ga bom poskušal prestaviti iz sredine html kode nazaj v glavo bom ponovno definiral te elemente z drugačnimi vrednostmi. V tem primeru torej drži definicija, ki je na strani zadnja?

njok ::

Se opravicujem, sem popolnoma narobe razumel.


V tem primeru torej drži definicija, ki je na strani zadnja?
Tako je, če imata selektorja enako težo, potem prevlada zadnja definicija. Vendar v priemru
#content p { color: red }
p { color: black }

<div id="content"><p>Hej!</p></div>

bo "Hej!" izpisan rdece, ceprav je zadnja definicija dolocala crno barvo. Prvi selektor namrec nabere vec tock. Pravila.

Kako se lotiti tvojega problema sedaj tezko recem, ker ne vem, kake pravice imajo uporabniki pri definiranju stilov. Ce imas ti vnaprej definirane selektorje, uporabniki pa samo zapolnijo lastnosti { .. }, potem ni tezav. Najprej v glavi vkljucis datoteko s splosnimi stili, nato pa se uporabnikovo datoteko in pravila se bodo enostavno prepisala.

Upam, da nisem spet zgresil bistva. ;)

CaqKa ::

kaj če bi jim pa dal v glavi samo link do cssja in si naj css datoteko sami spreminjajo?
zakaj bi css pisal v html?
če ima uporabnik kje dostop do css datoteke si jo potem lahko čisto sam ureja.

bobyx ::

Zadevo sem rešil potem tako, da sem malo spremenil cms, da če je potrebno, naloži nov css stylesheet (<link rel...>) ki je pa dejansko neka php datoteka ki iz baze naloži barve, slike in ostale informacije. Uporabniki pa preprosto za izdelavo novega stila samo izpolnejo polja na obrazcu:

original vs nov stil

njok ::

Tocno tako sem mislil. :D

r5r ::

Rad bi odpravil drsnike (na desni in na levi) in hkrati rad dosegel, da ima spletna stran širino več kot je vidno.
Torej, da lahko kaj postavim izven vidnega polja in ni dosegljivo z drsnikom. :D Predstavljam si tole rešeno z css ? :>
And it makes me wonder.

njok ::

HTML:
<div id="main"><a href="#secret">to secret content</a></div>
<div id="secret"><a href="#main">back to main</a></div>


CSS:
html {overflow: hidden}
#main {height: 9999px}

Gotovo ni povsem scroll-proof, najbrz predvsem odvisno od browserja (nisem testiral).

bobyx ::

In imam ponovno probleme. Odločil sem se poskusiti preurediti stran, ki trenutno uporablja izključno tabele, v css ureditev z div elementi.
Torej vse lepo in prav, dokler ne uporabljam treh vzporednih stolpcev pri katerih imata levi in desni stolpec le ozadje (repeat-y) - torej ozadje čez celo višino strani.
V cssju sem to naredil s tremi elementi div, ki imajo vsi float: left. Problem pa nastane, ker tista elementa, ki bi morala imeti sliko za ozadje čez celo višino, te višine nimata. Probal sem nastaviti height: 100%; kar seveda ni delovalo pravilno.

Drug problem je pa, da če nek element nima nobene vsebine, se v browserju (firefox) sploh ne prikaže. Zadevo rešujem z <div>& nbsp;</div> vendar se mi to ne zdi najboljša rešitev...

Potem je pa še problem, da čeprav imam v zunanjem elementu nastavljeno margin-left: auto; margin-right: auto; IE tega elementa preprosto ne da na sredino (opera in ff ga).

Se mi sploh splača ubadati s to strukturo, ali naj ostanem pri klasičnem layoutu s tabelami.

povezava do kode

Zgodovina sprememb…

  • spremenilo: bobyx ()

njok ::

Tisto s praznim divom skoraj ne verjamem, razen ce nimas dolocen kaksen display: inline. Za block element z dolocenima sirino in visino sem preprican, da bo prikazan.

Sicer pa ti priporocam, da si najdes kaksen layout, ki bi ga rad implementiral in zacnes gruntat kako je narejen.

Lahko zacnes tukaj: Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

Sandoval ::

Imam sledeč problem:
-na strani(cela v css), kjer je vse določeno absolutno bi rad na levi in desni strani dodal siv pas.
kako naj ga določim, da bo segal čez celo višino strani v širini 20pikslov?
Kr3nU_X JAZZ-WA Sandoval

njok ::

Če še nisi izkoristil HTML elementa, ga lahko sedaj:

html {
	border-color: #666;
	border-style: solid;
	border-width: 0 20px;
}

Sandoval ::

Najlepša hvala.
V IE-ju in FF-ju že deluje.
Le za opero se moram še malček ubadati, ker mi margine ostalih predmetov upošteva od levega roba, ne pa od borderja.
Kr3nU_X JAZZ-WA Sandoval

njok ::

Sem se ze ubadal s tem, pa se ne spominjam, kako sem potem resil... probaj se poigrat s position:relative; ali cim podobnim na body elementu.

Sandoval ::

Sem ze delno rešil:
-naredil nova lajer(z odmaknjenostjo levo/desno 20pikslov)
border 20px in nekako dela
-skombiniram še s html elemntom pa verjetno bo

zdaj pa grem spat :zeh:
Kr3nU_X JAZZ-WA Sandoval

njok ::

Ce si resil v redu, ampak da bos vedel za drugic: v tem oddelku ti veliko lazje pomagamo, ce poleg problema dostavis se source, po moznosti kar link na stran.

Sandoval ::

Dobro, bom bedel za naslednjič.
Tukaj pa link vietnam-projektno delo
Sicer ne gre za uvodno stran(ki je žal obvezna), temveč za vse naslednje.
Pa dodatek: kljub vsem popravkom je še vedno html/css valid :)
Kr3nU_X JAZZ-WA Sandoval

Sandoval ::

se že vnaprej opravičujem za dvojni post, vendar če bi na odgovor v primeru, da bi le uredil čakal neprimerno dlje.
Torej:
-na strani imamo meni v css-ju, kjer imamo pod njim še gumba za nazaj in domov.
Ločili smo ju kar z odstavkom (p), vendar zdaj zadeve ne validira. Če pa damo odstavek med "li", ob mouse-over(v IE) gumba promakne navzdol).
Kako rešiti ta problem(razen z novim menijem v css-ju)?

Link do strani: http://online.streznik.org/vietnam/zgodovina/zgodovina.htm
Kr3nU_X JAZZ-WA Sandoval

Road Runner ::

<li>&nbsp;</li>
http://dusan.fora.si/blog/ (742617000027)

Hair ::

Ali pa zaključiš seznam, mu določiš margin-bottom in začneš novega.
Whenever people agree with me, I feel I must be wrong.

njok ::

Semantika ima raje HairManov nacin. ;)

Road Runner ::

se popolnoma strinjam.
http://dusan.fora.si/blog/ (742617000027)

Sandoval ::

Sem pustil kar po nasvetu Racer D -ja.
Ker mi je malček bedno delati nov seznam le zarsdi dveh gumbkov.
Kr3nU_X JAZZ-WA Sandoval

Tody ::

dodal eno fajn slikco v prvi post :)

Hair ::

Zelo vredu, bo prišlo prav... :)
Hvala!
Whenever people agree with me, I feel I must be wrong.

CaqKa ::

od kod je original? ker tale je namreč preko stja rendan.. jaz bi si pa tole kar printno za na steno :)

njok ::

Tody ::

spodaj desno piše od kje je skopirano ;)

letez ::

Pozdravljeni,

Ne vem če sem zadel bistvo ampak vseeno zadeva govori o CSSju .. Ker sem nov na tem forumu si bom vzel trenutek, da se najprej predstavim čisto na kratko, da ne bom komu zagrenil dneva ;)....Sem grafični oblikovalec svoje izkušnje pa vsakodnevno vlagam v izdelavo in oblikovanje spletnih mest. Imam dobrih 8 let izkušenj.. za mano pa je ostalo kar nekaj referenc kot so sava-tires ( blagovna in korporativna), KD-group , Tosama in podobno..žal v večini projektov nimam prostih rok pri oblikovanju, saj ima večina podjetij že predefiniran design ter CGP ( celostno grafično podobo ).. Ker je temu tako, je za vsako stran potrebno pripraviti CSS in da bi le ta bil univerzalen ( za vsako stran primeren ) sem po svojih izkušnjah iz standardnega CSSja prišel malo bolj do svojega...In sicer:

ne mara CSSja v obliki:

.imeStyla(aka naslov novice)
{
font-family: arial;
color: #000000;
font-size: 13px;
}

ker v tem primeru vsaj v 90% moraš za vsako stran popraviti in prilagoditi obliko, spremeniti naziv srylov itd...pa še na koncu je CSS tako dolg, da je ne berljiv in zelo težko ga je urejati .. v praksi je vedno tako... ko v HTMLju vlkjučuješ attribute class vedno ALT TABAS v .css in isčeš pravi style (pri velikih projektih je tega vrjetno toliko več). Problem te oblike je ta, da se nazvivi prevečkrat ponavljajo. enkrat uporabimo .NaslovNovice, drugič .titleNovie in tretjič spet kaj drugega.. hmm upam, da je kdo dojel moj point.. anyway....

Nikjer v tem forumu nisem našel podobnega načina kot ga uporabljam sam. Da bi si naredili CSS bolj "univerzalen" in pregleden, bi predlagal tistim, ki so začetniki in novi uporabniki CSSja zelo preprost in logičen način oblikovanja vsebine.

jaz sem si naredil datoteko style.css, katero uporabljam ze 2leti.

Primer ( kako določiti 2 tipa pisave, barvo in velikost - koliko malo je potrebno in kako močen je efekt)


////// Style.css ///////
/* FONT PROPERTIES */

font_type_01 {font-family: arial;}
font_type_02 {font-family: verdana;}

font_color1 {color: #000099;}
font_color2 {color: #111111;}

font_xx-small {font-size: 9px;}
font_x-small {font-size: 10px;}
font_medium {font-size: 11px;}
font_normal {font-size: 13px;}
font_x-large {font-size: 15px;}
font_xx-large {font-size: 18px;}
////// Style.css ///////

Kaj sedaj lahko iz tega v HTML naredim?

[font class="font_type_01 font_color1 font_x-large"][b]Naslov Novice]/b][/font]
[font class="font_type_01 font_color2 font_medium"][ i]Povzetek novie[/i][/font]
[font class="font_type_01 font_color2 font_normal"]Besedilo novice[/font]

To je to...stvar deljuje v Operi, Firefoxu, Netscapu, IE...Lahko si je zapovniti izraze kot so "font_type, font_color, font_medium, border_top_color1, border_bottom_color2, color1_100, color2_050 itd itd" .. in z njimi ustvarjati kombinacije že kar med tem ko pišemo kodo.

[table border="0" cellspacing="0" cellpadding="0" width="100%" class="border_bottom_color1 font_type_01 font_color1 font_normal"]...

enjoy!
««
7 / 26
»»


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

poravnava li elementov

Oddelek: Izdelava spletišč
82143 (2008) boss-tech
»

Wampserver in Firefox

Oddelek: Izdelava spletišč
61845 (1725) jonystar
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč
519833 (7632) nuuush
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč
62454 (2401) amaze646
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč
133068 (2934) Road Runner

Več podobnih tem