CSS problemi

Tody problem je v tem da nisi določil nelaj stilov < h3> in < p> ;)

Poizkusi dodati tole:

/* samo primer */
h3 {
margin: 0;
padding:0;
background: transparent;
padding-left: 20px;
font-family: verdana;
font-size: 15px;
color:#000099;
}

p {
margin: 0;
padding:0;
font-family: Verdana;
padding-left: 20px;
padding-top: 10px;
font-size: x-small;
}

In mislim da bi moralo delati.

aja to me je že zadnjič zajebaval pa potem ko sem skopiral iz weabfreakove strani kodo je pa delal Napako sem pripisal moji površnosti Ampak dobro zdej sem se še to naučil in bomo počas začel proizvajat zadeve

Meni do sedaj IE ne dela problemov z paddingom niti z marginom - verjetno si nekako narobe zastavil CSS. Če pokažeš kodo ki te mori bi z veseljem malo poizkusil postaviti v pravilno obliko ;)

Tody, jaz bi na tvojem mestu naredil en div, ki bi drzal k_zgoraj, vsebino in k_spodaj skupaj. k_sredina pa lahko potem izpustis.

Moj nasvet: globoko vdihni, in zacni znova s pisanjem. ;)

Ce potrebujes inspiracijo: http://www.alistapart.com/articles/onionskin/

Čak mal, a nisi prej zgorej reku, da je display: block, ne inline?

Sej je reku da se je zmotu

Pa še en menu-matic da se vam ne bo treba preveč zafrkavat z temi meniji paddingi in podobnimi zadevami. Jest ga mam na strani in z njim delam dost kar hočem in dela tako v FF kot v IE.

list-o-matic

Dela.

Vse skupi sem dal v seznam, se mal poigral z padddingi ter zlorabu !important ;)

Nova koda (če koga slučajno zanima):

CSS:

#menu {
background: url(slike/7.gif) repeat-x;
width: 75.3%;
color: white;
font-size: 0.7em;
text-align: left;
margin: 0;
border-bottom: 5px solid #737373;
padding-bottom: 8px !important;
padding: 0;
height: 1.5em;
}

#menu ul {
margin: 0;
padding: 0;
}

#menu ul li {
display: block;
float: left;
}

#menu a {
display: block;
color: black;
text-decoration: none;
border-right: 1px solid #8C8C8C;
padding: 6px 15px 6px 15px;
}

Root, CSS ima to simpaticno pravilo, da novejsa (spodnja v kodi) pravila prepisejo starejsa (zgornja).

Torej namesto

padding-bottom: 8px !important;
padding: 0;

napises

padding: 0;
padding-bottom: 8px;

oziroma krajse

padding: 0 0 8px;
}

Verjetno gre za kaksne tezave z default paddingi, ki se med browserji razlikujejo.

Meni najljubsi CSS rule: * { padding: 0; margin: 0; }

jest pri tem site-u nisem nič kradel, samo kopiral tisto kar je folk pustu kopirat. Torej menu matic za katerega imaš link zgori in in tist kvadratek sem delal po navodilih weabfreak-a

Hehe, prva slika kot img v html, druga pa background? ;) Obe moraš dat v CSS, npr takole:

#kartica { background: url(kartica1.jpg) no-repeat; width: 600px; height: 450px; }		
#kartica:hover { background: url(kartica2.jpg) no-repeat; }

<div id="kartica"></div>

Ampak ker v IE dela hover samo na linkih, je tole bolj malo uporabno, čeprav lepo dela v firefox-u in operi. Torej, če nočeš ignorirat pribl. 85% uporabnikov, dodaš en prazen link. Ja, saj vem, da je grdo, ker en ekstra element tlačim noter, pa še kakšen uporabnik bo klikal gor (lahko pa kurzor spremeniš)...

#kartica a {
	background: url(kartica1.jpg) no-repeat;
	width: 600px;
	height: 450px;
	display: block;
}		
#kartica a:hover {
	background: url(kartica2.jpg) no-repeat;
}

<div id="kartica"><a href="#"></a></div>

Aja, ker v IE slika grdo utripne, ko greš z miško čez, te čaka še mal dela. To se reši tako, da združiš obe sliki v eno, potem pa na hover spreminjaš background-position. klik

Eh, ko bi končno enkrat popravili ta IE, da bi delal tako, kot je treba. :(

(mogoče obstaja tudi kakšen divji trik, kako IE pripraviti do tega, da hover dela na vseh elementih)

Evo super, hvala, sem porihtal: klik

Uporabil sem kar tisto fast rollover verzijo, tako da je ena slika, ki se zamika in sicer zaradi flicker-ja, ki sem ga sicer jaz opazil le na Operi in to neglede na metodo in zato ker ne vem kako vklopit preload . En čuden problem je bil pa tudi, da mi je css v main.css-u iz meni neznanega razloga ignoriral (tudi obrobo in ostalo s katerim sem testiral če sploh dela), tako da sem ga fliknil direkt v stran, pol je pa začelo delat.

HairMan tvojo metodo sem si shranil za kdaj drugič za sprobat.

Zdaj imam pa še dve vprašanji in sicer:

zakaj mi v FF in operi glavni div (content) zamakne pod div (meni) v IE pa ne. Divi so pa

div#container{
		width: 770px;
		margin-left: 20;
		text-align: left;
		align: center;
		}

div#toplogo {
		with: 770px;
		background: #EEE;
		text-align: center;
		/*background-image: url("images/logo-ld-01-80x770.gif");
		background-repeat: no-repeat;*/
		clear: both;
		}
	
div#meni {
		float: left;
		width: 160px;
		background: #CCC;
		margin-top: 5px;
		/*position: absolute;
		top: 110px*/
		}

div#nav {
		float: left;
		width: 160px;
		background: #CCC;
		clear: left;
		/*position: absolute;
		top: 160px*/
		}

div#content {	
		background: #999;
		width: 600px;
		float: right;
		margin-top: 5px;
		margin-bottom: 5px;
		text-align: justify;
		/*position: absolute;
		top: 110px;
		left: 177px;*/
		}

div#noga {
		with: 770px;
		background: #EEE;
		text-align: center;
		clear: both;
		margin-top: 5px;
		}

in pa drugo vprašanje ali se da narediti, da bi se mi v meniju ob prehodu ob barvi ozadja ISTOČASNO (tudi če nisem postavljen čez text)spremenila tudi barva texta, ki je link in ga zato povozi nastavitev za link -- predvidevam in da bi tudi klik izven texta, torej samo na (p) kjer je link že deloval kot link -- u bisvu kako bi cel p bil link?

case in point: klik (POZOR: ne dela v IE sploh - a je kak hack)

ali je edina varianta za tak efekt rollover in pa slika?

Aja pa še nekaj. Zakaj imam poravnavo strani v IE center v FF in Operi pa levo oz. kako to popravim? Rad bi imel povsod center. Pa prvo sliko lahko centriram, tako da dam njen (p) na align="center" pri drugi, ki je rollover pa isti štos ne prime.

Emm... glede drugega vprasanja... mislim, da na opisan nacin ne bo slo. P element je namrec block element, ki po standardu ne sme biti vsebovan v inline elemente (kot je A).

Vse kar rabis je, da A element razsiris (element ni omejen samo na tekst, ki ga vsebuje) na recimo 120x25 px, tako bo celotna povrsina zaznavala hover. Ce hoves inline element razsiriti (ne mores mu dodeliti tocnih dimenzij), lahko uporabis padding in line-height lastnosti. Lahko pa uberes drugo pot, in A elementu ukazes, da se prikazuje kot block elemetnti (display: block;), tako mu lahko dolocis tudi width in height. Potem preprosto nastavis barvo ozadja in barvo teksta za a:hover.


Pri poravnavi slike pa spet pride do razlik glede na postavitev. Lahko recimo sliko postavis med tekst, tako da ga ta obliva z leve ali desne (float:right; ali float:left;). Lahko pa sliko postavis kot block element in jo horizontalno centriras z margin: 10px auto; (tukaj vrednost 10px določa spodnji in zgornji odmik, auto pa brskalniku pove, naj bosta razdalja do desnega in do levega roba enaki).

> Zakaj imam poravnavo strani v IE center v FF in Operi pa levo oz. kako to popravim?

Ker align:center; ni glih po standardu. ;)

div#container { margin: 0 auto; }
body { text-align: center; } /* ie5 fix */

Saj je veteranova cisto v redu. Margine in paddinge lahko definiras na stiri nacine:

margin: <zgoraj, spodaj, levo, desno>;
margin: <zgoraj, spodaj> <levo, desno>;
margin: <zgoraj> <levo, desno> <spodaj>;
margin: <zgoraj> <desno> <spodaj> <levo>;

Za vrednost 0 pa je enota nepotrebna.

Zenith1,

> div#container { margin:0px auto 0px auto;}
> mogoče bi pri tvojem rešila problem še ena ničla na koncu, ali pa moja koda pa bo kul.

Hmm. ;) Saj sploh ni problem v tem, da IE5 ne bi razumel skrajšane sintakse, ampak to, da ne 'prepozna' parametra auto pri margin oz. ne zna poravnati na sredino na ta način. Tvoja razširjena sintaksa tako ne reši ničesar...
Zato je treba dodati text-align:center v parent element, da bo stran centrirana tudi v IE5 (to velja tako za IE 5.0 kot IE 5.5). Vsi ostali - IE6, Firefox (in vsi Gecko derivati), Opera in Konqueror pa nimajo problemov z margin: 0 auto;

Eh ja vsi tile brskalniki, to je prav noro kolk morš vedet, da lahko eno relativno simple stvar porihtaš, da bo povsod, no vsaj v večini, delalo. Sem še v lekarni pogledal kako stran izgleda in na ta novih računalnikih v IE je stran točno taka kot pri meni, pri šefici (not good!) na tastarem P4 1,5 MHz iz leta cca 2001-2002 bi rekel (tudi IE 6, samo kakšna starejša verzija), pa manjka zgornje in spodnje sivo ozadje. Kakšna ideja zakaj?

Pa še zanima me kolk je kaj težko narest take menije, ki se odpirajo ko grez čez, tako kot ima enaA.com recimo. A se to sploh da brez jave oz. s CSS.

Pa še eno mal off topic vprašanje. Če bi hotel omogočit da folk podaja komentarje na novice. Kako na splošno bi to naredil?

Ja, dropdown meniji so možni s CSS, ampak IE rabi nekaj javascripta zraven - Son of suckerfish dropdowns

BTW, neverjetno, kaj vse folk počne s CSS; CSS house. LOL. :))

Še najbolj čudno je da dela v IE .

No po vaših nasvetih mi je uspelo poravnati stran v center tudi v FF in Operi, poravnava za sliko pa žal ni prijela. Zamik navzdol v FF in Operi sem rešil z @import url(gecko.css) screen; v style v html-ju, ki da IE ne prepozna in pol sem v gecko.css dal relativno pozicijo -51px, kar je ravno prav za se vsebina poravna z meni div-om, seveda pa je moral nastati nov problem. Ko sem isto naredil še za nogo da se premakne gor skupaj z vsebino je zadeva delovala OK v FF ne pa tudi v Operi, ki jo očitno tam nekaj moti in popači nogo in zamakne text v njej. Poskušal sem določiti z-index, da bi bil ta div višje a ni pomagalo. Kakšna ideja?

Glede rolloverjev je pa za IE, če sem prav razumel, potrebno vsaj malo jave, ki pa mi je španska vas, tako da se bom tega lotil kdaj drugič.

tale stran zgleda v FF že nekako tako kot sem si jo zamislil.

Ja, meni v listu je dobra praksa.

Ja saj to sem tudi razmišljal, samo pol zgubim tist efekt, da je Meni v svojem okvirju :( kar ni tolk slabo. Sploh pa rabi ta stran mal več življenja. Kakšna ideja -- razen druge barve?

Pomoje bi lepse zgledalo, ce ne bi skrolal ozadja.

men je leps ozadje ;-)

men tako turobno deluje.. vse neki sivo črno... Drugače pa footer zgleda malce čudno ker se ne konča tam kot tekst ampak tam ko meni.... jest bi to nekak drugač naredu

Jaz imam pa problem na blogu.. Imam downloadano predlogo, pa še začetnik sem, zato nimam pojma kako odstraniti te pikice pred vsako vrstico:



In niti ne vem, kater del HTML-ja naj nalepim..