Vse, kar ste si želeli vprašati o CSS, pa si niste upali.

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

• Free web templates, Frontpage and Dreamweaver Templates


• Free Website Templates, Free Photoshop Web Templates, Website Design


• BlueRobot - There's nothing wrong with gray.


• CSS Vault » The Web's CSS Site

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.

• /* Position Is Everything */ — Modern browser bugs explained in detail!


• A List Apart: A List Apart


• WebDeveloper.com


• CSS Tutorial


• SitePoint Forums: Resources, Design, HTML, CSS, PHP, ASP, MySQL and more for your web site.


• SitePoint : New Articles, Fresh Thinking for Web Developers and Designers


• CSS problemi


• Layout Gala

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

http://usabletype.com/
http://www.dithered.com/css_filters/

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!

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.

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.

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č

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.

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.

height/width?

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.

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///

Č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

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

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

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.

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

Specifikacije.

Ups, ni centra?

Pa res ...

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.

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  */ }

njok:
Tko si mislil ... sample

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 , men je zmankalj idej.

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

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.

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.

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