Slo-Tech

» »

CSS problemi

CSS problemi

«
1
2

Tody ::

Men nč več ni jasno :(

Vrjetno sem kaj spustil pri teoriji pa sem se odločil da pridem sem vprašat. Naredil sem stran kjer sem ločil dizajn od vsebine. Vse lepo in prav linkov sem na novo CSS datoteko tako da html ni okužen. Toda ko sem hotel narediti ta dinamični kvadratek (ko pišeš vsebino se kvadratek po horizontali povečuje brez da bi ti moral večjo sliko dajat oziroma spreminjat ozadje) zadeva ni hotela delat pa da se ubijem probam na čist novem dokumentu dela probam kle ne dela. Tako da sem dal potem v sam html dokument pa je zadeva začela delat!! No skoraj še zmeri mi ni jasno zakaj zavraga ne morem vseh 3 delov dat skupaj.Med vsemi je 5px razlike pa ne najdem nobenega pravega razloga.

Butasta stran se nahaja na tem naslovu

Torej problemi:

Kako CSS od kvadratka prestavit tam kjer je ostalo?
Kako vse 3 dela dat v celot ?

webfreak ::

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.

root987 ::

Bom še jaz podal manjše vprašanje... kako rešujete probleme z paddingom? Imam meni izdelan (atribut a) z padding: 5px 15px 5px 15px; ter display: block; vendar mi IE nikakor noče prikazat tega paddinga ter posledično gumba. FF - lepo, IE5(v katerem testira) - nikakor.
"Myths which are believed in tend to become true."
--- George Orwell

Tody ::

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

njok ::

root, daj pokazi malo kode, da vidimo tocno kaj mislis.

A element po defaultu inline, IE5 pa verjetno ukaza display: block; ne uposteva, mogoce prihaja do tezav zaradi tega (samo ugibam). Ker pa imas verjetno A elemente v UL, lahko padding/margin nastavljas LI elementom.

webfreak ::

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

sam ta ie je cel smeh... tole stran ki jo delam pri meni zamakne zgornji del pravokotnika če gledam pr fortu pa spodnji del... mislim WTF ?

njok ::

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/

root987 ::

#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-top: 6px;
padding-bottom: 6px;
}

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

#menu a:hover {
color: black;
background-color: white;
border-right: 1px solid #666666;
}


To je CSS koda, ki jo uporabljam za meni. Ko sem pisal prejšnji post sem se zmotil - uporabljam display: inline. Meni je pa standarden skupek povezav v enem div tagu (nobenega seznama).

Se koda:
<div id='menu'>
<a href='index.php' style='margin-left: 0px;'>domov</a>
<a href='?pageID=2'>novice</a>
<a href='#'>skupine</a>
<a href='#'>blog</a>
<a href='#'>galerija</a>
<a href='#'>fajli</a>
</div>


Verjetno je inline razlog?
"Myths which are believed in tend to become true."
--- George Orwell

Ziga Dolhar ::

Čak mal, a nisi prej zgorej reku, da je display: block, ne inline?
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.

root987 ::

Ko sem pisal prejšnji post sem se zmotil - uporabljam display: inline.
Se opravičujem.
"Myths which are believed in tend to become true."
--- George Orwell

Tody ::

Sej je reku da se je zmotu :D

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

njok ::

Eh, enega menija pa ja ni tezko skupi spravit.

root, uporabi float: left; in display: block; ce ne bo slo ti bomo naprej pomagali. ;)

root987 ::

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;
}
"Myths which are believed in tend to become true."
--- George Orwell

njok ::

No, glede na to, da ima tema tako splosen naslov, bom se jaz nekaj vprasal. ;)

A obstaja katerokoli CSS pravilo, ki bi ga IE interpretiral kot postion: fixed; ?

edit: trenutno imam zadevo reseno z hackom, ce pozna kdo kako krajso resitev - se priprocam. :)

Zgodovina sprememb…

  • spremenil: njok ()

njok ::

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;
}

root987 ::

Vem, vendar mozilla brez tega pokaže vso vsebino previsoko. Če uporabim to, mozilla naredi potreben padding, ie pa tako ali tako tam ne potrebuje kaj.
"Myths which are believed in tend to become true."
--- George Orwell

njok ::

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

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

Brilko ::

BTW: Tody, a meni pa je iz www.cx65.com/. Čist OK, tud svoj podpis poglej pa boš vidu da je OK. :D

Tody ::

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

AtaStrumf ::

No vidim, da ste mal zapustil temo pa jo bom jaz mal obudil. Sej je verjetno čist butasto vprašanje, ampak tale CSS študiram komaj 2 dni, tako da mi oprostite.

Rad bi naredil en čist običan image rollover, ko gre miš čez sliko, da se pojavi druga slika. Nekaj sem spackal kar je delalo v Operi ampak ne v IE6 ali FF, tako da čist vseeno tudi če ne bi delalo niti tam. Iskal sem po googlu, ampak vse kar najde je malo čudn, milo rečeno, tako da sedaj spašujem vas kako bi to naredil.

Da si boste lažje predstavljali kaj hočem je beta verzija dosegljiva tukaj, rollover bi pa rad naredil na drugi sliki o krvnem tlaku.

trenuten poskus zgleda tako:

prva slika je linkana kot img, img je označen kot class kartica.

v CSS je pa tole

img.kartica:hover {
background: url("images/kartica2.png") 0 0 no-repeat;
}

veteran ::

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)

Zgodovina sprememb…

  • spremenil: veteran ()

Hair ::

Dokaj preprosta rešitev za hover za vse brskalnike:
<div class="off" onmouseover="this.className='on'" onmouseout="this.className=off'">
CSS kodo pa potem delaš posebaj za off in za on.

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

AtaStrumf ::

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 8-O in to neglede na metodo in zato ker ne vem kako vklopit preload :8). 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.

Zgodovina sprememb…

AtaStrumf ::

OK drugo vprašanje sem pogruntal, daš pač link okoli (p)-ja in ne obratno in potem nastaviš color in pa background-color za p.class:hover, zdaj je pa vprašanje kako to poštimat za IE???

Poleg tega me zanima torej samo še prvo in zadnje vprašanje in pa poravnava slike v CSS (en tag je, samo sem tako grdo napisal, da ne znam prebrat :D, mogoče din :\ ?)

njok ::

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

njok ::

Aja, pa glede na to, da se veliko ukvarjas s hoverji, sta tukaj dva nacina emulacije za IE:

veteran ::

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

zenith1 ::

veteran,

koda bo:

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.

njok ::

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.

AtaStrumf ::

Ok thanx za odgovore, ampak sem koma tako, da bom to jutri oz. verjetno v soboto oz. še najbolj verjetno v nedeljo mal stestiral in poročam.

veteran ::

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;

zenith1 ::

Veteran, zdaj vidim da ti nimaš problema, ampak si naredil odgovor ;) Quota sploh nisem videl.

Ignore me >:D

AtaStrumf ::

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?

Tody ::

Dropdown meniji z CSS so seveda mogoči...(poglej sticky) Dodajanje novice pa je skoraj nujno php in mysql uporaba... odvisno od komplikacij pa je kaka je implentacija.

Zgodovina sprememb…

  • spremenil: Tody ()

veteran ::

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

Hair ::

Glede hiške: Sama hiša niti ni tako neverjetna. Bolj neverjetno je to, da ima nekdo dejansko čas za take zadeve... :D
Whenever people agree with me, I feel I must be wrong...

AtaStrumf ::

Še najbolj čudno je da dela v IE :D.

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.

AtaStrumf ::

A je to prava Java koda za rollover v IE:

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


razlaga

Basically, this applies the 'sfhover' class to li elements in the 'nav' id'd ul element when
they are 'moused over' and removes it, using a regular expression, when 'moused out'.

So now we've got the Suckerfish pumping out new classes, the next step is to simply
duplicate the :hover selector with 'sfhover' class selectors:
#nav li:hover ul, #nav li.sfhover ul {
					left: auto;
}



bi pa moral to kodo popravt, da bi prepoznala moje (p)-je, ker imam meni v paragraphih s class-om "navigacija". Verjetno bi bilo še bolje če dam meni v list in jih ustrezno označim.

njok ::

Ja, meni v listu je dobra praksa.

veteran ::


> No po vaših nasvetih mi je uspelo poravnati stran v center tudi v FF in Operi,
> poravnava za sliko pa žal ni prijela.


Za sliko lahko uporabiš isti recept, daš jo v en div.

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


Hja. ;) Na levi imej en sam div (float:left), v njem naslov in meni, pa se znebiš vseh problemov. Npr:
<div id="meni">
<p>Meni:</p>
<div id="nav">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>

Zgodovina sprememb…

  • spremenil: veteran ()

AtaStrumf ::

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?

veteran ::

Ne, nič ne zgubiš, oblika je lahko enaka; le da imaš en div več, npr #leftbox (ta potem nima "okvirja", je le za postavitev), v njem pa dosedanja #meni in #nav, samo mal css popraviš.

tec ::

Pomoje bi lepse zgledalo, ce ne bi skrolal ozadja.

AtaStrumf ::

Evo sem porihtal stvar presenetljivo enostavno. Sem pač naredil ul li seznam za navigacijo, pol sem moral popravt css za obliko nav div-a in to je bilo to. Zgleda da a v li-ju in display: block zavzame vso širino in čeprav hover dela le na linkih, je tako a sklopljen z celo vrstico, ker imam pa določeno širino za ta div.

nova ul li navigacija

fixirano ozadje

Zdaj me matra samo še Opera s tistim svojim popačenjem noge ;(.

EDIT: kako skriješ css kodo pred opero?

Zgodovina sprememb…

tec ::

men je leps ozadje ;-)

AtaStrumf ::

Neverjetno kaj naredi ena urca zanič spanja:

tole pa sedaj dela v vseh glavnih browserjih

Se mi je posvetilo da zna tist leftbox rešiti vse probleme s postavitvijo in jih tudi res je :D. Thanx, super ideja veteran, očitno si res veteran. Dajte mal sčekirat v vaših brskalnikih pa mi povejte če še kje čudn izgleda.

Tody ::

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

AtaStrumf ::

Ja se strinjam. Saj razmišljam o popolnem redesign-u. S tem kar sem se naučil pri postaviti te strani bi se dalo nekaj dost lepšega narest. Siva barva pa je zaradi enostavnosti v triznakovnem heksadecimalnem zapisu barve.

nuuush ::

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

 CSS

CSS



In niti ne vem, kater del HTML-ja naj nalepim..:8)
«
1
2


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1295259270 (58802) Tody
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč
61485 (1432) amaze646
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč
132182 (2048) Road Runner
»

Izdelava menija? (strani: 1 2 )

Oddelek: Izdelava spletišč
764866 (3873) Jackass
»

Poravnava znotraj DIV

Oddelek: Izdelava spletišč
91182 (1063) alum

Več podobnih tem