» »

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.

««
«
1 / 26
»»

Tody ::

No takole, tole bo spet en know how, ki seveda še od daleč ne bo popoln kaj šele perfeketn samo nekaj da vas požene v pravo smer in da se ne boste matrali in iskali in zabijali čas v neskončnost...

Najprej nekaj za "učne namene"

Najprej na strani naredimo layout strani, pri tem nam izdatno lahko pomaga INKNOISE. Ta layout naj bi vseboval že vse "hack-e" ki so potrebni ,da je stran lepo vidna v IE in ostalih brskalnikih.


Nadalje stran, seveda potrebuje navigacijo. To dobimo tako da uporabimo LIST-O-MATIC

Vse kar potrebujemo je še neka podlaga kamor bomo dajali vsebino in lepo bi bilo da bi se ta podloga sama podaljševala. Prijazni fantje pri slo-desginu so spisali vodič kako se magični pravokotnik spiše. Poleg tega sta vam napisala tudi nekaj osnov CSS.

Za tiste pa ki jim ni do tega da bi sami karkoli spravili skupaj še ena lista HTML/CSS osnutkov



Za tiste ki so raziskovalci po duši in tiste ki se dejansko hočejo kaj naučiti pa naslednji spisek že rešenih problemov, nasvetov in novic.



Takole tole je zaenkrat vse. Vljudno vabljeni k izpoplnjevanju te zbirke.

Še ena slikca



Dotični CSS "cheat-sheet" lahko dobite tudi v PDF formatu na naslovu:
http://www.ilovejackdaniels.com/css_cheat_sheet.pdf
  • spremenil: Matek ()

CCfly ::

"My goodness, we forgot generics!" -- Danny Kalev

njok ::

zenith1 ::

drejc ::

Recimo da delam kvadratek z cssjem. Obstaja kak ukaz za obliko kvadratka, da določim dolžino horizontalne linije in vertikalne (direktno, ne z odmikom od top bottom left right)?

Obstaja kak gui ali ide za delo z cssji (mislm na kej bolj resnega od tistih online wizov)? Ce se to da v DWju mi lahko kdo pove kak pridem do tega toola?


Hvala!

njok ::

Kaj naj bi bilo
dolžino horizontalne linije in vertikalne
Mogoce mislis na margin?


Orodij nisem testiral, lahko jih ti: http://www.westciv.com/westciv/downloads.html

Tody ::

DW ma tud možnosti da si nekak izbiraš kaj hočeš. Eno je samo dopolnjevanje če pišeš direkt v kodo drugo pa je desno pri unem stolpcu sam ne vem lih točn k ne uporabljam tiste zadeve.

njok ::

Za tiste, ki si želijo dopolnjevanja kode (poleg DW), opravilce lepo opravlja topstyle, pa HTML-Kit se tudi nekaj trudi, samo ni najbolj po mojem okusu.

njok ::

Integrated Web Design: Strategies for Long-Term CSS Hack Management

Vsebina članka nikakor ni tako zapletena kot naslov. Priporočam vsem, ki počasi ugotavljate, da se stvari v nekaterih browserjih ne prikažejo kot bi morale. Morda boste tudi ostali, ki ste s tem že seznanjeni, izvedeli kaj novega.

njok ::

mile ::

imam problem z pozicioniranjem treh div-ov

situacija je sledeča




spodaj in zgoraj sta dva div-a ( toolbara ), ki morta biti vedno vidna, srednji div pa mora imet omogočen overflow , ce je vsebina prevelika

zgornji in spodnji div imata fiksno visino (30px), srednji se mora pa dinamično prilagajat... in tu je problem

obstoječa css koda


                DIV.Top  {  position: absolute;  height: 30px; }

  		DIV.Center    {   position:  relative;
  				  overflow : auto; 	
				  top: 30px;
				  bottom: 30px;
				  height: 300px;							
  						}
  							         
  	       DIV.Foot  { position: absolute;  height: 30px;  bottom: 0;}





zdej mam height srednjega diva hard koderan... kako zadevo spremenit, da se bo srednji div lepo prilagaju

hvala za pomoč

Zgodovina sprememb…

  • zavaroval slike: Predator ()

njok ::

Prva zadeva, ki mi pade na pamet je, da srednjemu divu dolocis maksimalno visino 100% in 30px paddinga spodaj in zgoraj.

njok ::

Ok, boljsa resitev:

HTML
<div id="top"></div>
<div id="mid"></div>
<div id="bot"></div>


CSS
	* { margin: 0; padding: 0; }
	
	#mid { 
		padding: 50px 0; 
		background: #eee;
	}
	
	#top, #bot { 
		position: fixed; 
		height: 30px; 
		width: 100%; 
		background: #ccc; 
	}
	
	#top { top: 0; } #bot { bottom: 0; }



Ker nekateri - khm - browserji ne poznajo position: fixed bos moral uporabiti kak hack. Ce ti resitev ugaja seveda.

mile ::

tole super deluje v Mozilli, IE6 pa ne jebe zadeve... hvala ti za tole, upam da mi bo še explorerja uspel prepričat

/edit:

sm že najdu žrtev za seciranje >:D

http://xopus.com/demo/

Zgodovina sprememb…

  • spremenil: mile ()

njok ::

Seveda ti bo uspelo.

Prva moznost: http://devnull.tagsoup.com/fixed/
Deluje dobro ce imas samo fixed elemente na strani, absolute potem odpadejo.

Druga moznost: http://annevankesteren.nl/test/examples/ie/position-fixed.html
Deluje, vendar zaradi hacka ne validira. Poisci drugega.

Tretja moznost: http://web.tampabay.rr.com/bmerkey/examples/body-disconnect.html
Nisem se testiral.


Gotovo se najde se kaka rasitev, malo poglej kaka ti bolj ustreza.



/edit: sele sedaj sem videl tvoj /edit :) Tvoja zrtev uporablja drugo moznost.

Zgodovina sprememb…

  • spremenil: njok ()

mile ::

novo vprasanje :)

kako v IE6 odstranit ves prazen prostor okoli checkboxa, ki mi poveča višino vrstice v tabeli?

izgled v firefoxu


izgled v IE6

Zgodovina sprememb…

  • zavaroval slike: Predator ()

njok ::

height/width?

mile ::

:8) dela

rokpok ::

Lep pozdrav. Imam eno težavo:

Koda:
<html>
<head>
	<style>
		#ogrodje {
			width:500px;
			height:300px;
			background-color:#999999;
		}
		#kvadratek1 {
			float:left;
			display: inline;
			margin: 0 0 0 8px;
			background-color:#99CCCC;
			width: 242px;
			height: 300px;
		}
		
		#kvadratek2 {
			display: inline;
			margin: 0px 8px 0 0;
			float: right;
			width: 242px;
			height: 300px;
			background-color:#FF9900;
		}
		#besedilo {
			display:block;
			text-align:left;
			width: 242px;
			height: 100px;
			background-color:#FF0000;
			padding-left:10px;
		}
    </style>
<body>
	<div id="ogrodje">
		<div id="kvadratek1"></div>
		<div id="kvadratek2">
		<div id="besedilo">Ime</div>
		</div>
	</div>
</body>
</html>
Problem nastane v #besedilo padding-left:10px. V IE-ju se stvar prikaže kot bi se morala, v Firefox-u pa se dolžina kvadratka2 poveča.
Rad bi bil pingvin.

Zgodovina sprememb…

  • spremenil: rokpok ()

njok ::

Ne, IE širino izračuna narobe, saj v nasprotju s specifikacijami od parametra width parameter padding odšteje.

actual_width = width + padding + border

Ena od možnih rešitev: Tantek's box model hack.

njok ::

A je prav, da se za sprotno reševanje težav uporablja sticky tema?

///Da, ker je tak naslov, vrjetno bo marsikdo naletel na enake težave kot uporabniki tukaj in si jih bo lahko prebral Tody///

Zgodovina sprememb…

  • spremenil: Tody ()

rokpok ::

Hvala za odgovor - sem kasneje tudi sam ugotovil to. V resnici pa me je zajebavalo to, da sem mel pred DOCTYPE xml deklaracijo in potem ima IE 6.0 določene težave (drugače pa v IE-ju 6.0 dela to).

Lp
Rad bi bil pingvin.

rokpok ::

Če mogoče koga zanima, kako izdelati enostaven "scroller" s pomočjo javaScript-a in CSS-ja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test scroller</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script language="javascript" type="text/javascript">
		var top = 0;
		var height = 130;
		function plus() {
			//top=(top==-273)?top:top-13;
			
			if (top==-273) top=top;
			else top=top-13;
			
			if (height==403) height=height;
			else height=height+13;
			
			//height=(height==403)?height:height+13;
			document.getElementById("text").style.marginTop=top+"px";
			document.getElementById("text").style.height=height+"px";
		}
		function minus() {
			//top=(top==0)?top:top+13;
			
			if (top==0) top=top;
			else top=top+13;
			
			if (height==130) height=height;
			else height=height-13;
			
			//height=(height==130)?height:height-13;
			document.getElementById("text").style.marginTop=top+"px";
			document.getElementById("text").style.height=height+"px";
		}
	</script>
	<style type="text/css">
		body {
			margin: 0 0 0 100px;
		}
		div#empty{
			width:300px;
			height:100px;
			z-index:2;
			position:relative;
			background-color:#ffffff;
		}
		div#scroller {
			position:relative;
			z-index:1;
			width:302px;
			height:156px;
			background-color:#000000;
		}
		
		div.box {
			width:300px;
			background-color:#F6F6F6;
			position:relative;
		}
		.box#top {
			z-index:2;
			height:12px;
			border: 1px solid #C7C7C7;
			border-bottom: 0 none;
		}
		.box#content {
			z-index:1;
			height:130px;
			border: 1px solid #C7C7C7;
			border-bottom: 0 none;
			border-top: 0 none;
			overflow:hidden;
		}
		.box#bottom {
			z-index:2;
			height:12px;
			border: 1px solid #C7C7C7;
			border-top: 0 none;
		}
		#text {
			position:relative;
			margin:0 10px;
			overflow:hidden;
			font-family:Verdana;
			font-size:11px;
			color:#535353;
			line-height:13px;
		}
		
		div.button {
			border:1px solid #C7C7C7;
			font-size:12px;
			margin-top:6px;
			width:16px;
			height:16px;
			background-color:#F6F6F6;
			color:#A9A9A9;
			cursor:pointer;
			margin-left:284px;
		}
		div.button:hover {
			color:#006600;
		}
		span.mark {
			margin-left:5px;
		}
		
	</style>
</head>
<body>
	<div id="empty"></div>
	<div id="scroller">
		<div class="box" id="top"></div>
		<div class="box" id="content">
			<div id="text">Some text about this tut here ! 
			</div>
		</div>
		<div class="box" id="bottom"></div>
	</div>
	<div class="button" onclick="plus()"><span class="mark">+</span></div>
	<div class="button" onclick="minus()"><span class="mark">-</span></div>
</body>
</html>


Lep pozdrav
Rad bi bil pingvin.

Zgodovina sprememb…

  • spremenil: Tody ()

b0B3k ::

Zelo bi bil srečen ako bi se tukaj-prikazanim tutorialom dodal kak mali linkec, ki bi zdemonstriral delovanje ...
(Predvsem za nas lenobe, ki se nam ne ljubi (ali pa včasih ni časa) to stestirat :D )

[MYTiX] ::

Imam en problem s CSSjem.

<body>
<div id="frame">
	<div id="body">
		<div>header</div>

		<div id="title">Naslov</div>
		<div id="mainFrame">
			<div id="menu">menu1<br />menu2</div>
			<div id="main">besedilo besedilo</div>
		</div>
		<div id="menuBottom">Spodnji meni</div>

	</div>
</div>
</body>


Zdej pa nevem, kako naj naredim, da bosta div menu in div main vzporedna. Ce dam float=left na oba, pol dela lepo v IEju, medtem ko v FFju text skoči čez ostale elemente.

Thx
podpis

grim_ ::

kaj pa če daš za njima:
<div class="clear"></div>

v css pa tole:
.clear {
	clear:left;
}

Zgodovina sprememb…

  • spremenil: grim_ ()

[MYTiX] ::

U thx, dela. Hitr si bil. Res se enkrat hvala.
podpis

njok ::

[MYTiX] ::

A bi lahko popravli tisto zgorej, ker ful raztegne stran (ceprav imam sirino na desktopu 1680px).

Da preidem na CSS:
A se da narest tako, da bi bil en div v drugem in bi text prvega oblival drugi div.
podpis

Ziga Dolhar ::

float: left|right|center;
https://dolhar.si/

njok ::

Ziggga: left | right | none | inherit. ;)

Specifikacije.

[MYTiX] ::

Thx. Sm delal neki v tej smeri sam sm dal dva diva "vzporedno", namesto, da bi enga ugnezdu.
podpis

Ziga Dolhar ::

Ups, ni centra?

Pa res ... |O
https://dolhar.si/

b0B3k ::

Dodajam še povezavo, kjer so zbrani linki za CSS, ki jih ljudje po svetu najraje klikajo ...

tec ::

Mene pa zanima kako naredit, da ti gumb ostane aktiven ko si na strani, ki jo gumb doloca in da tisti gumb ni vec aktiven.

Ziga Dolhar ::

tec,

a) v CSSju je rajtam temu namenjen psevdoselektor :active, če se ne motim.
b) Če ta ne dela, za to poskrbiš pri generiranju same strani.
c) Javascript
https://dolhar.si/

njok ::

b) ali c)

Server ali client side gres skozi linke in s primerjavo href atributa s trenutno lokacijo enemu od linkov dolocis class active ali kaj podobnega. To bi slo, in je verjetno tudi najboljsa resitev.


CSS-only bi slo pa takole:
  1. Vsak dokument ima svoj id (na html ali body elementu (recimo #s1, #s2, #s3), kar mimogrede, sploh ni slaba praksa), ravno tako vsak link v meniju (recimo #nav1, #nav2, #nav3).

  2. Oblikujes meni
    #nav LI { /* bla bla*/ }
  3. Za vsako sekcijo dodas
    #s1 #nav1, #s2 #nav2, #s3 #nav3 { /* ciracara  */ }

Ziga Dolhar ::

Oki, vidim da :active res ni namenjen temu :). (Test)
https://dolhar.si/

tec ::

njok:
Tko si mislil ... sample

njok ::

Ja, s tem da bi predlagal, da id iz A elementa premaknes nazaj na LI.

overlord_tm ::

mene pa zanima, če se da nardit, da bi bil v enem prozornem div-u potem neprozoren. ker meni avtomatsko naredi vse dive, ki so v prozornem prozorne ;( .

al pa vsaj povejte pod kaj nej na googlu iščem :D , men je zmankalj idej.

Ziga Dolhar ::

Določiš mu ozadje/barvo ozdaja? [Temu, gnezdenemu, ki naj bo neprozoren.]
https://dolhar.si/

overlord_tm ::

In potem za gnezden prevzame transparentnost, in je mal črne barve, ampak se vseeno vidi čez ozadje :\ . No zdej sem rešil tako, da sem un div postavil zraven tistega transparentnega in ne v njega. Potem sem pa position uštimal tko, da se prekriva :D

[MYTiX] ::

Kako pa naredim da bi bil na !sredini! en div z fixno širino, na levi in desni pa div-a, ki bi se prilagajala (vedno maximalno kar je mogoče).
podpis

njok ::

S problemom se se nisem srecal, a ker mi je bil vsec, sem ga poskusil resiti. Mogoce se slisi cudno, ampak dela tudi na IE5. Starejsih oper pa nisem testiral.

[MYTiX] ::

njok ti si naravni talent za CSS. Stvar dela v vseh browserjih. Hvala.
podpis

tec ::

v cssju imam dolocen span za en tekst, ki se prikaze na mouseover

<a href="nekam.html">nekam<span>tale link gre nekam</span></a>

div#nekam a span { display: none; }
div#nekam a:hover span
{
display:block;
position: absolute; 
top: 5px; 
left: 5px; 
width: 125px;
padding: 0px; 
margin: 10px; 
z-index: 100;
}


Problem je, ker se v razlicnih browserjih postavi malce drugace. Tekst sem postavil na mesto, kjer so sicer mozna manjsa odstopanja kot npr. v firefox in ie. V operi, pa se tekst postavi previsoko in gre cez mejo. Je tukaj kaksna resitev? Lahko bi sicer uporabil js, ampak mi je tole bolj vsec.

njok ::

Pa si preprican, da je tale delcek kode problematicen? Mogoce pride do razlik ze pri elementu, na katerega se absolutno pozicioniria tisti span (absolutno pozicioniranje pa tako, ha? :D).


edit: skoraj bi pozabil. Do razlik najverjetneje pride zaradi razlicnih privzetih marginov/paddingov pri browserjih, saj sta sicer operin in firefoxov rendering engine dokaj podobna. Poizkusi z
* { padding: 0; margin: 0; }
na zacetku dokumenta.

Zgodovina sprememb…

  • spremenil: njok ()

tec ::

Tole je pa fina resitev za vec problemov...hvala :-)

njok ::

Ker je tema sticky, bom sem pastal mojo reset.css datoteko (nekje sem jo pobral, mislim da od Tanteka, in malo predelal):
/* undo default browser settings */

*{padding:0;margin:0;}
:link,:visited{text-decoration:none;color:inherit;}
h1,h3,h4,h5,h6,th{font-weight:normal;}
ul,ol{list-style:none}
a img,:link img,:visited img{border:none}
address,dfn{font-style:normal}
/* end undo */

Ni (se) popolna, vendar sluzi svojemu namenu. :)
««
«
1 / 26
»»


Vredno ogleda ...

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

poravnava li elementov

Oddelek: Izdelava spletišč
81947 (1812) boss-tech
»

Wampserver in Firefox

Oddelek: Izdelava spletišč
61683 (1563) jonystar
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč
519181 (6980) nuuush
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč
62233 (2180) amaze646
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč
132897 (2763) Road Runner

Več podobnih tem