Prijavi se z GoogleID

» »

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.

strani: 1 2 3 4 5 ... 26

CCfly ::

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

ok tale link mi bo dost pomagu :D :D
hvala
FallenAngel

jerneju ::

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

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 ()

CaqKa ::

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

njok ::

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

Hvala za tole kodo!!!

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

CaqKa ::

namesto cssja daš v head tole
<link rel="stylesheet" href="stil.css">

jerneju ::

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

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

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

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

> 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š"?
Legal systems are not supposed to be efficient. They are
designed to ensure that innocent people are not found guilty.
If that requires inefficiencies, so be it.

Srachko ::

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

srachko, background-position v navezi z dimenzijami matičnega elementa, ki deluje kot "okno v ozadje".
Legal systems are not supposed to be efficient. They are
designed to ensure that innocent people are not found guilty.
If that requires inefficiencies, so be it.

njok ::

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

Zdravo!
Imam problem z divi....v Firefoxu mi vse pokaže lepo in prav v IE je pa vse narobe:O
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 ::

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

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

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

snow ::

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

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

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

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

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

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

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

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

@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 ::

tnx. bom uporabil float.

Ziga Dolhar ::

HairMan: zakaj pa ne display: block? [Ok, je pa res, da se pri tem izgubi nekaj fičrov blocka ...]
Legal systems are not supposed to be efficient. They are
designed to ensure that innocent people are not found guilty.
If that requires inefficiencies, so be it.

Hair ::

display: block? Pri čem to?
Whenever people agree with me, I feel I must be wrong...

Ziga Dolhar ::

-- Ups, vidim da sem prehitro prebral vse skup. Tisto z blockom je bla bedarija. :)
Legal systems are not supposed to be efficient. They are
designed to ensure that innocent people are not found guilty.
If that requires inefficiencies, so be it.

Zgodovina sprememb…

somebody16 ::

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

teeo, a mi ne zaupaš? >:D
Whenever people agree with me, I feel I must be wrong...

somebody16 ::

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

Na bandreju te čaka presenečenje! ;)
Whenever people agree with me, I feel I must be wrong...

somebody16 ::

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…

Hair ::

Š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...:D

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

somebody16 ::

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

CaqKa ::

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

Zgodovina sprememb…

  • spremenil: CaqKa ()

CaqKa ::

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

position:absolute;
top:0;
right:0

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

Tiste prve zadeve pa ne razumem kaj želiš...
Whenever people agree with me, I feel I must be wrong...

CaqKa ::

position:fixed;
top:0;
right:0


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

Zgodovina sprememb…

  • spremenil: CaqKa ()

njok ::

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

IE & position:fixed

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

Highlag ::

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:D 6x širina trenutnega fonta se opravičujem za smetenje.
Never trust a computer you can't throw out a window

Zgodovina sprememb…

  • spremenil: Highlag ()

CaqKa ::

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

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

<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 ()

veteran ::

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. :)
strani: 1 2 3 4 5 ... 26


Vredno ogleda ...

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

poravnava li elementov

Oddelek: Izdelava spletišč
8939 (804) boss-tech
»

Wampserver in Firefox

Oddelek: Izdelava spletišč
61019 (899) jonystar
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč
516098 (3897) nuuush
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč
61464 (1411) amaze646
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč
132174 (2040) Road Runner

Več podobnih tem