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

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.

3 / 26

CCfly :: 20. avg 2005, 14:11

Preprosto povedano, vsebino imaš spisano v html datoteki, oblikovanje pa v css datoteki, ki sestavljeni skupaj tvorita končni izdelek. Lahko zadevo še zakompliciramo ampak ne bo kaj dosti učinka.
Začni tukaj: http://www.w3schools.com/css/default.asp

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

FallenAngel :: 20. avg 2005, 15:34

ok tale link mi bo dost pomagu

hvala

FallenAngel

jerneju :: 7. sep 2005, 12:30

Jaz bi pa rad naredil HTML oz. ASPX dokument, ki bi se nalozi in se prikazal v npr. Stil1.CSS obliki. Ko bi kliknil na Button, bi se pa prikazal v Stil2.CSS. Kako naj to izvedem?

njok :: 7. sep 2005, 13:56

Zelo na hitro narejeno, samo primer:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="sl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
		<head>
			<title>stil1 to stil2</title>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<style type="text/css">
			BODY {
				width: 50%;
				height: 200px;
				border: 3px double #ccc;
				background: #666;
			}
			
			BODY.alter {
				border: 3px solid #c00;
				background: #000;
			}
			#switcher a {
				cursor: pointer;
				background: #ccc;
			}
			.alter #switcher a {
				display: none;
			}
			
		</style>
		
		<script type="text/javascript">
			window.onload=function(){
				swi = document.createElement("a");
				swi.onclick=function(){
					bod=document.getElementsByTagName("body")[0];
					bod.className+=" alter";
				}
				swi.setAttribute("title","Spremeni stil");
				swi.appendChild(document.createTextNode("Stil2"));
				document.getElementById("switcher").appendChild(swi);
			};
		</script>
	</head>
	
	<body>
		<div id="switcher"></div>
	</body>
</html>

Naprednejsa moznost: IOTBS

Zgodovina sprememb…

spremenil: njok (7. sep 2005 ob 14:04)

CaqKa :: 7. sep 2005, 14:42

kaj gre to lažje? z phpjem recimo?
tak v dveh vsrticah.. namesto cela skripta v javi?

njok :: 7. sep 2005, 15:05

Seveda gre lazje, ampak mislil sem, da mora biti sprememba brez refresha.

S php-jem bi slo takole, da s klikom na link php shrani en session var, ki se potem med izpisovanjem strani preveri, in po potrebi doda class na body tag.

Sicer pa je javascript (ne java ;)) zadevica dolga celih 297B, ne-js uporabnikov pa nikakor ne ovira.

jerneju :: 7. sep 2005, 15:31

Hvala za tole kodo!!!

Zanima me še, kako namesto implementiranega css v html dokumentu dodam poti do stil1.css in stil2.css. Hvala.

CaqKa :: 7. sep 2005, 15:38

namesto cssja daš v head tole

<link rel="stylesheet" href="stil.css">

jerneju :: 7. sep 2005, 15:43

Ja, saj sem dal za stil1. Kam pa za stil2...? Kako se potem to preklopi? A sta oba stila v eni datoteki ali kako?

jerneju :: 7. sep 2005, 16:03

Hmm, zadeva deluje odlično. Še enkrat hvala.

Samo to bi še vprašal. Je kak način, ki bi preprečil tisto zadevo zgoraj, ki je kao zaščita pred nezaželenimi skriptami.

Če bi naredil z novim lovdanjem dokumenta, se tisti bar zgoraj ne bi pokazal ali kako?

Srachko :: 30. sep 2005, 00:30

Mene pa zanima, če se da s pomočjo CSS-a spreminjat določeno sliko ob postavitvi miškinega kazalca na njo? Rad bi namreč naredil slikco, ki bi bila povezava do nekega html dokumenta. Ko bi uporabnik postavil miško nad to slikco, bi se le-ta spremenila.

Podoben "trik" bi vedel narediti s pomočjo java script-a, vendar mi le-tega ponudnik ne dovoli na zastonjskem prostoru za osebno spletno predstavitev.

I can see clearly now, the brain has gone...

njok :: 30. sep 2005, 02:26

Ponudnik ne dovoli? A sta zmenjena? Ker drugace ne vidim kako bi ti to lahko preprcil. No... pustimo to.

Zadevo lahko izvedes z background parametrom. Torej linku dodelis nekaj podobnega (na pamet):

A#moja_posebna_povezava {
 display: block;
 width: ...; height: ...; /* dimenzije slike */
 background: #/*barva*/ url('/*pot do slike*/');
}

A#moja_posebna_povezava:hover {
 background: #/*barva*/ url('/*pot do hover slike*/');
}

Ce zelis, da slika ne utripa, ko se nalaga hover razlicica, lahko navadno in hover sliko zlepis skupaj v eno, potem pa sliko samo zamikas.

Ziga Dolhar :: 30. sep 2005, 07:53

> Ce zelis, da slika ne utripa, ko se nalaga hover razlicica, lahko navadno in hover sliko zlepis skupaj v eno, potem pa sliko samo zamikas.

Zanimiva ideja :).

To dejansko ti sam "uporabljaš"?

https://dolhar.si/

Srachko :: 30. sep 2005, 16:49

Sam to je pa res cool. A mi lahko še razložiš, kak gre tista finta z zamikanjem slike in kak si mislil, da te dve varianti slik zlepim skupaj (delam v Paint Shop Pro 9) ?

I can see clearly now, the brain has gone...

Ziga Dolhar :: 30. sep 2005, 23:59

srachko, background-position v navezi z dimenzijami matičnega elementa, ki deluje kot "okno v ozadje".

https://dolhar.si/

njok :: 1. okt 2005, 13:12

> To dejansko ti sam "uporabljaš"?

Ja, pa pri tem je se en haklc. Privzeta slika mora biti zamaknjena, medtem ko je hover del na poziciji 0. Tako so vsi brskalniki zadovoljni. :) Clanek, ki to obravnava (upam, da je pravi).

Jester :: 1. okt 2005, 14:20

Zdravo!
Imam problem z divi....v Firefoxu mi vse pokaže lepo in prav v IE je pa vse narobe

Problem je v tem da imam dva diva enega ob drugem in Firefox mi jih lepo razporedi da res ležita en ob drugem IE pa naredi da je eden višj od drugega!
Poglejte si na http://193.77.115.68/dreamweaver

help!

HP notebook, AMD Turion 64 1,6 GHz, 512 MB RAM, ATI Radeon X300 128 MB

njok :: 1. okt 2005, 19:36

Streznik ni dosegljiv.

Mogoce je tezava pri dimenzijah, poizkusi diva malo zozat, mogoce bosta skocila skupaj. Ce pa malo poisces bos gotovo nasel kaksen tutorial ali pa vsaj kaksen source.

Jester :: 1. okt 2005, 22:04

mnja.....sej sm že rešu z margin

hvala vseen

HP notebook, AMD Turion 64 1,6 GHz, 512 MB RAM, ATI Radeon X300 128 MB

snow :: 6. okt 2005, 21:04

Kako s CSS naredim da imam en div (alpa ker drug element) neke fiksne širine na sredini bodya ves čas. In kako to naredim recimo če bi hotel imet več fiksnih divov in bi rad jih postavljal absolutno od sredine? $:\$

Random mutation plus nonrandom cumulative natural selection - Richard Dawkins

Hair :: 6. okt 2005, 21:49

margin-left:auto;
margin-right:auto

To ti element postavi na sredino body-ja.

Za pozicjoniranje od sredine bi pa jaz naredil en parent div z tex-align:center, potem pa nested elementom margine levo ali desno.
Ne vem pa če bo to delovalo, še nisem delal tako...

Lp!

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

snow :: 6. okt 2005, 22:44

Ja je blo nekaj v tem stilu! Hvala.

Sem iskal še malo potem: http://www.quirksmode.org/css/centering.html

Seveda rabi IE nek svoj trik za to :)

Random mutation plus nonrandom cumulative natural selection - Richard Dawkins

tec :: 8. okt 2005, 17:13

Se en problem v ie, oz. ena napaka v kodi

#nav-meni  li a:link, #nav-meni li a:visited, #nav-meni li a:active
{
padding-top:2px;
padding-bottom:2px;
padding-left:5px;
display: block;
text-decoration:none;
font-size:80%;
text-align: left;
color:black;
text-transform:lowercase;
}

<div id="nav-meni">
<ul id="nav-list">
<li><a href="/si/oprema/police/" id="id_oprema">police & regali</a></li>
.....

IE mi med vsakim menijem naredi prazen prostor velik cca 30 pikslov. Mozilla pa prikaze normalno. Ce dolocim sirino na 90% tega problema ni, sam potem mi meni ne gre do konca. Ce izbrisem display:block je tudi ok, sam tega pa nocem.

hvala

veteran :: 8. okt 2005, 19:07

tec, tale problem (IE je delal kakih 10px prostora med meniji, v firefoxu pa seveda nobene razlike) sem jaz rešil takole:

div.menu li {
display: inline; /* IE fix */
}
div.menu li a {
display: block;
}

tec :: 8. okt 2005, 19:58

dela..tnx.
Se neki....paddin-left ie ne uposteva

<span class="submeni" id="sub1">
<a href="/si/">si</a>
</span>

.submeni a:link, .submeni a:visited
{
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
display: block;
}

CaqKa :: 11. okt 2005, 19:30

kako naredim, da mi med dvema divoma nebo šel v novo vrsto

<div class="nekaj">bla<div class="nekaj2">bla</div></div>

tole mi namreč izpiše
bla
bla
pričakoval pa sem blabla

Hair :: 11. okt 2005, 19:41

div je blokovni element, kar pomeni da po defaultu zajema najmanj eno vrstico. Uporabi span. Če pa nujno rabiš div, pa mu določi float.

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

Hair :: 11. okt 2005, 19:46

@tec
Odkar mi IE ni upošteval a:link, uporabljam samo a - za link. Poizkusi - če seveda ti dela probleme samo IE...

Je tudi vse po standardih...

Lp!

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

CaqKa :: 11. okt 2005, 20:35

tnx. bom uporabil float.

Ziga Dolhar :: 11. okt 2005, 20:42

HairMan: zakaj pa ne display: block? [Ok, je pa res, da se pri tem izgubi nekaj fičrov blocka ...]

https://dolhar.si/

Hair :: 12. okt 2005, 21:07

display: block? Pri čem to?

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

Ziga Dolhar :: 14. okt 2005, 09:24

-- Ups, vidim da sem prehitro prebral vse skup. Tisto z blockom je bla bedarija. :)

https://dolhar.si/

Zgodovina sprememb…

spremenil: Ziga Dolhar (14. okt 2005 ob 09:25)

somebody16 :: 18. okt 2005, 20:05

Lep pozdrav.

Imam problem. Najbolje da si pogledate kodo. Rad bi da bi se mi stranska div - a raztregnila do noge.

Upam da ni preveč komplicirano.

<!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>
<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />	<style type="text/css">
		#container {
			height:100%;
			width: 760px;
			\width: 780px;
			w\idth: 760px;
			border: 1px solid gray;
			margin: 0px;
			margin-left:  auto;
			margin-right:  auto;
			padding: 0px;
		}

		#banner {
			padding: 0px;
			margin-bottom: 0px;
			background-color: rgb(213, 219, 225);
		}

		#content {
			padding: 0px;
			margin-left: 215px;
			margin-right: 215px;
			background-color: gray;
		}

		#sidebar-a {
			height:100%;
			float: left;
			width: 200px;
			\width: 210px;
			w\idth: 200px;
			margin: 0;
			margin-right: 0px;
			padding: 0px;
			background-color: rgb(235, 235, 235);
		}

		#sidebar-b {
			height:100%;
			float: right;
			width: 200px;
			\width: 210px;
			w\idth: 200px;
			margin: 0;
			margin-left: 0px;
			padding: 0px;
			background-color: rgb(235, 235, 235);
		}

		#footer {
			clear: both;
			padding: 0px;
			margin-top: 0px;
			
			background-color: rgb(213, 219, 225);
		}
	</style>
</head>
<body style="height:100%">
	<div id="container">
		<div id="banner">&nbsp;</div>

		<div id="sidebar-a">&nbsp;</div>

		<div id="sidebar-b">&nbsp;</div>

<div id="content">



fgdsfgds<p>gf</p><p>ds</p><p>ds</p><p>gf</p>
<p>gds</p><p>fg</p>
<p>dsf</p><p>g</p>
<p>dsfg</p><p>sd</p>
<p>fg</p><p>ds</p>
<p>fg</p><p>dsg</p>
<p>ds</p><p>f</p>

<p>ds</p><p>f</p><p>fg</p>
<p>dsf</p><p>g</p>
<p>dsfg</p><p>sd</p>
<p>fg</p><p>ds</p>
<p>fg</p><p>dsg</p>


</div>

		<div id="footer">&nbsp;</div>
	</div>
</body>
</html>

Hair :: 19. okt 2005, 21:28

teeo, a mi ne zaupaš? >:D

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

somebody16 :: 20. okt 2005, 02:48

c.c.c.c.c

Ti ,ti sam je problem ker trik z ozadjem ne pride v poštev oz. ni rešitev za mojo celotno stran. Drugače imam vse narejeno s tabelami. Sedaj pa hočem narediti vse skupaj z layerji. S to kodo sem samo hotel pokazati kakšen problem imam in sem upal, da mi bo kdo pomagal. BTW slo-tech ma malo veliko več obiskovalcev kot bandrej knede >:D

Hair :: 20. okt 2005, 16:26

Na bandreju te čaka presenečenje!

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

somebody16 :: 20. okt 2005, 18:07

HairMan mi je resu zadevo. Evo tle je koda čebo mel kdo iste probleme


<html>
<head>

<style>

body {
 margin:0;
 padding:0
}

#glava, #noga {
 height:30px;
 background-color:#ccc
}

#levo {
 float:left;
 width:150px;
 background-color:#000;
 color:#fff
}
#desno {
 float:right;
 width:150px;
 background-color:#000;
 color:#fff
}

#telo {
 background-color:#ccf;
 margin-left:150px
}

</style>

<script type="text/javascript">
function visina() {
 var maxH = 0;
 var ids = ["levo","telo"];
 // najde najvisji div
 for (var i=0;i<ids.length;i++) {
  var d = document.getElementById(ids[i]);
  if (d.offsetHeight > maxH) maxH = d.offsetHeight;
 }
 // oba diva nastavi na najvisjo visino
 for (var i=0;i<ids.length;i++) {
  var d=document.getElementById(ids[i]);
  d.style.height = maxH+"px";
 }
}
</script>

</head>

<body onload="visina()" onresize="visina()">

<div id="glava"></div>

<div id="levo">Lorem i</div>
<div id="desno">Lorem</div>
<div id="telo">Donec venenata li</div>

<div id="noga"></div>

</body>
</html>

Zgodovina sprememb…

spremenil: somebody16 (20. okt 2005 ob 18:08)

Hair :: 20. okt 2005, 18:35

Še par poravkov tele kode, ker si dodal še #desno:

#telo {
 background-color:#ccf;
 margin:0 150px 0 150px
}

var ids = ["levo","telo","desno"];

Drugače pa koda ni moja, da me ne bo kdo obtožil kraje...

Lp!

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

somebody16 :: 20. okt 2005, 19:53

Maš prav ja. V tvojo kodo sem samo na hitro dodal desno, pogledal, in zadeva je na prvi pogled delala.

CaqKa :: 27. okt 2005, 02:13

tisto zamikanje slike on mouse over pa to, kar sta se njok in ziggga pogovarjala najdete nekaj tudi tukaj

Zgodovina sprememb…

spremenil: CaqKa (27. okt 2005 ob 02:13)

CaqKa :: 4. nov 2005, 12:44

stran
menu je čisto spodaj.
rad bi pa videl kako zgleda če je ob strani #sredina (da se drži direkt zraven in sredina ostane centirana)
ali pa kako naredim da menu vedno ostane v zgornjem kotu, tudi ko skrolam dol?

Hair :: 4. nov 2005, 13:44

position:absolute;
top:0;
right:0

To ti ga našopa desno zgoraj ne glede na vse!

Tiste prve zadeve pa ne razumem kaj želiš...

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

CaqKa :: 4. nov 2005, 14:35

position:fixed;
top:0;
right:0

sem dal fixed.. kak to dela v ie?
/edit: kako popravim da tam dela?

Zgodovina sprememb…

spremenil: CaqKa (4. nov 2005 ob 14:36)

njok :: 4. nov 2005, 14:39

Ce hoces, da je meni imun na scrollanje ne potrebujes position:absolute; temvec position:fixed; (in seveda pripadajoci css hacki/js fixi za IE).

njok :: 4. nov 2005, 14:43

IE & position:fixed

Obstaja vec nacinov, bos sam presodil kateri je boljsi za tvojo postavitev elementov.

Highlag :: 7. nov 2005, 22:56

Malo brskam po tem css-ju pa še nisem naletel na opis oznake:

width:6em

Kaj tistih 6em pomeni? kakšna enota je to? :8)

Ravno naletel na opis

6x širina trenutnega fonta se opravičujem za smetenje.

Never trust a computer you can't throw out a window

Zgodovina sprememb…

spremenil: Highlag (7. nov 2005 ob 22:58)

CaqKa :: 8. nov 2005, 00:23

ko je zunanji css me zanima kako mu določiš za kakšen tip medija je. ali print ali pa monitor..
pri vnosu cssja v html je to nekak v stilu media=print

rad bi za printanje naštelal display:none za menuje pa podobne fore, ki ovirajo print verzijo dokumenta.

CaqKa :: 8. nov 2005, 00:30

ok. naguglal
če bo pa še koga zanimalo:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

še ostali tipi

btw. kaj kdo ve kako ta tehnologoija ugotovi kje se bo dejansko prikazoval html?
tu predvsem leti na to kak bo browser vedo al je slika na tv ali pa na projektorju?

veteran :: 8. nov 2005, 00:32

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

<style type="text/css" media="screen,projection">@import "info.css";</style>

Aha, si že pogruntal.. ;)

Zgodovina sprememb…

spremenil: veteran (8. nov 2005 ob 00:33)

veteran :: 8. nov 2005, 00:45

tu predvsem leti na to kak bo browser vedo al je slika na tv ali pa na projektorju?

V resnici ne ve. Če napišeš samo media="screen" (brez projection) ter v brskalniku pritisneš F11, boš na monitorju dobil precej čudno oblikovano stran. :)

«« «

3 / 26

»»»

Vredno ogleda ...

	Tema	Sporočila	Ogledi	Zadnje sporočilo
	Tema	Sporočila	Ogledi	Zadnje sporočilo
»	poravnava li elementov boss-tech Oddelek: Izdelava spletišč	8	2167 (2032)	boss-tech 1. okt 2012 08:19:03
»	Wampserver in Firefox jonystar Oddelek: Izdelava spletišč	6	1869 (1749)	jonystar 4. maj 2012 07:59:32
»	CSS problemi (strani: 1 2 ) Tody Oddelek: Izdelava spletišč	51	9903 (7702)	nuuush 20. mar 2010 18:15:37
»	[CSS]Pozicioniranje footer diva amaze646 Oddelek: Izdelava spletišč	6	2474 (2421)	amaze646 2. dec 2009 22:26:32
»	CSS background-image in IE6? para! Oddelek: Izdelava spletišč	13	3089 (2955)	Road Runner 12. jun 2008 19:07:09

Več podobnih tem

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.