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

Nekaj me matra

Ko narediš gumb (s CSS-om)... in nanj pritisneš.... se ti izriše črtkana črta (podobno kot ko po namizju vlečeš z miško).... kako se znebit te črte?

Hvala, deluje kot je treba.

ce si malo preberes kaj css sploh je bos hitro videl da je tvoje vprasanje precej nesmiselno

s css-som ne bo slo.

no, seveda se da imitirati senco tako ali drugace, ampak neke smiselne css varjante pa ni
oziroma bolj natancno, je v css3, ampak afaik je ne podpira se noben browser

V tem primeru je najbolje, da daš za BG eno sliko, ki vsebuje sliki za navaden link in za hover, potem pa pri a:hover samo spreminjaš pozicijo ozadja.

Lp!

Lako pa narediš eno sliko v kateri imaš gumb in gumb z hoverjem. Potem spremeniš position od hoverja vertikalno toliko kolikor je gumb visok. Sliši se komplicirano ampak je preprosto, izogneš pa se zakasnitvni, ko gre recimo miška čez sliko, stran pa rabi nekaj časa da naloži hover sliko posebej.

Recimo:
.rollover a {
display:block;
width: 200px;
padding:15px 0px 15px 0px;
background: url("gumb.jpg") 0 0 no-repeat;
}

.rollover a:hover {
background-position: 0 -(višina gumba)px;

}

Ups, sm prebral sam zadnji odgovor. Je pa vsaj en kos kode hehe

Ups nisem miti pogledal kaj sem napisal. Se opravičujem, njok ma prav.

Najprej te moram pohvalit za izčrpen opis problema. Tvoj post je lahko vzor za vsakogar, ki v tej temi išče pomoč.

Rešitev problema je na kratko:

#menu{margin:0;}

Razlaga sledi: težave ti povzročajo privzete nastavitve brskalnika. V tem primeru je to UL element, ki ima privzeto določen margin. Te privzete vrednosti so seveda potrebne, saj bi sicer enostavna stran brez pripetih stilov izgledala kot zmazek. Vendar ko tvoj stil definira kaj več kot le pisavo in kako barvo sem pa tja je css datoteko dobro začeti z

*{margin:0;padding:0;}

Tako se znebiš privzetih odmikov, ki so večinoma krivi za kakšno minuto puljenja las. Jaz poleg odmikov odstranim še nekaj drugih stvari, recimo:

: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,acronym,abbr { border:none }
address, dfn { font-style:normal } 

zakaj tale dotted border ni dotted v ieju?
v operi namreč je lepo pikčast.

http://www.dsferi.org/

Zna kdo povedat, zakaj exploder noče lepo postavit menuja na levo stran, medtem ko ga FF in Opera lepo prikažeta tam kjer je mišljen.

Stran
CSS

Racer D: Resno? OMG. Potem so stvaritelji IE še večji loleki kot pa sem mislil, da so. Kot da je tako težko narediti, da se v primeru 1px riše pikica in ne krogec. Tako bi lahko imeli luštne obrobe, ampak ne, to ne gre :/.

Ok. Sedaj pa k mojemu problemu. Nisem verjel, da bom kdarkoli to rekel, ampak dejansko sem uspel spisati kodo, ki deluje popolnoma pravilno v IE in Operi, v FF pa ne dela.

Povezava do težave

CSS koda:

<style>

html,body {
	margin: 0;
	padding: 0;
	text-align:center;
	background: white;
}


div.container {
	position: relative;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	width: 780px;
	height: 432px;
}

div.left {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 125px;
	height: 432px;
	text-align:center;
	}

div.top {
	position: absolute;
	top: 0px;
	left: 130px;
	width: 500px;
	height: 400px;
	overflow:hidden;
}

div.right {
	position: absolute;
	top: 0px;
	left: 635px;
	width: 150px;
	height: 432px;
	background: #ffffff;
	overflow: auto;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	}

div.komentar {
	position: relative;
	top: 0px;
	left: 0px;
	height: 406px;
	width:150px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	font:75% Verdana, Geneva, Arial, Helvetica, sans-serif;
	background: #ffffff;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 2px;
}

div.bottom {
	position: absolute;
	top: 405px;
	left: 130px;
	width: 500px;
	height: 23px;
	text-align: center;
	padding-top: 3px;
}

div.galerija_def {
	position: relative;
	background: white;
	width: 780px;
	text-align: left;
	height: 100px;
}

</style>

Izgleda kot da bi firefox napačno razumel podatke za višino in širino div.komentar
Nimam pojma kaj je narobe.

Hvala za pomoč!

Ja v firefoxu se desni okvirček - tam kjer je sličica Komentar ne pokaže v celoti. Firefox očitno napačno izračuna širino in višino diva. Par pixlov zato izgine pod nadrejenim divom. V IE in Operi te težave ni ali pa je samo jaz ne vidim.

Link je pa že podan, ga bom pa še enkrat napisal:
Povezava do težave

Nisem se veliko poglabljal, le izmeril sem renderirano stran v firefoxu. Najprej sem razsiril div.right na 200px, da se je pokazal celoten div.komentarji. Sirok pa je tocno 156px, kot bi moral biti. Torej: 150px widtha + 2*2px paddinga + 2*1px borderja.

to o cemer govoris je css box model, ki ga pravilna upostevajo firefox, opera, safari, ..., ter ie6 v standards mode - torej ce na zacetek html dokumenta dodas vrstico, ki doloca kaj dokument je, naprimer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ie6 brez tega, ter ie5.5 in nizji pa box modela ne upostevajo.

wikpedia

Opera pravilno upoštevata tele širine. Ni mi jasno zakaj Opera 8.5 ne upošteva tega modela brez tega hacka .

Ne vem ce bi temu lahko rekli hack, prej edini pravilen nacin za zacet (X)HTML datoteko.

Tabele je predvesm grdo gledat ko se loadajo. Vse nekaj skace po ekranu in se resiza. Da ne govorimo o neprijaznosti raznim screen readerjem, prenostnim napravam, crawlerjem itd.

Ce mene vprasas je CSS zelo nezahtevna stvar, rabis samo nekaj prakse, da vidis kako se stvarem streze.

Živjo!

Že cel večer se ubadam s tem, kako bi naredil sledeče:

Imam napisano abecedo črk (ločene s presledki) v vodoravni vrsti. Vsaka črka je link. Ko grem z miško čez, bi rad, da se črka na katero sem pokazal poveča. To sem naredil. Vendar pa se mi pri tem ostale črke premaknejo nekoliko dol. Torej namesto, da bi se povečala samo črka na katero sem pokazal, se premaknejo ostale črke nekoliko dol.

Kaj je potrebno narest, da bi niz črk ostal pri miru?

na paddingi in margini... lazje bo ce kar fiksno sirino dolocis linku, torej reces naprimer:

a
{
   float:left;
   width:25px;
   text-align:center;
   font-size:12px;
}

a:hover
{
   font-size:18px;
}

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

w3.org

sumim da ie ne prikazuje tako?

firefox seveda razume padding:0 0 0 0; (oziroma padding:0;)

pebkac bi rekel ;)

Ne vem če sem dovolj jasno napisal. V bistvu kako naredit "td align="center" valign="middle"" torej centriranje tako po horizontali kot po vertikali v css-u?

Par postov nazaj sem omenjal mojo reset.css datoteko. Danes sem slučajno naletel na Yahoojevo, ki vsebuje nekaj več parametrov in je del Yahoo User Interface libraryja.

/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.11.0
*/
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,
p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,
dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

P.S.: A lahko moderator prosim doctype iz enega posta na tej strani razdeli v več vrstic?

ok, malo offtopic, ampak tile copyrighti na yahoojevih zadevah mi res niso več jasni (tako tale css reset kot css templati)... če bi imel sam eno res podobno datoteko potem na takle način človek dobi občutek, da krade. Sem šel prav po disku gledat arhiv shranjenih strani in predlog (na katere vedno znova pozabljam) in našel par strani, ki res uporabljajo kar Yahoojev reset, skupaj s copyrightom. Zanimivo...

Tudi sam imam Tantekovo(? - se tud sam ne spomnim, kje sem jo staknil) datoteko, ki jo omenja Njok že na prvi strani. Zdej če skombiniramo te zadeve, da recimo Njok lahko gor svoj copyright al kako? In če kaj dosti ni več za dodat zraven, dobi v bistvu tako kar patent nad "css resetom"?

Jackass: bug je v IEju. in sicer bug v interpretaciji box model-a, o cemer smo v tej temi ze govorili

w3 box model in explorer box model bug na wikipedii