☰

» »

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.

««
22 / 26
»»

SanAndreas ::

Imam problem, ker dve ali več slik po vrsti so vsi za kakšen milimeter narazen, kako pa dati vse tesno skupaj?
SanAndreas je doma iz Rimske Galaksije ima srebrn NLP :)

SanAndreas ::

Poglejte primer, ki jih vidite zgoraj, vse slike so narazen za nekaj milimetrov, mene pa zanima, kako se napiše kodo, da bojo vse tesno skupaj?
SanAndreas je doma iz Rimske Galaksije ima srebrn NLP :)

CaqKa ::

Lahko daš linke na točno določen post v katerem so te slike?

načeloma pa je rešitev ta da daš paddinge in margine na 0.

Major ::

Uporabi Mayerjev css reset kot prvi includan css fajl.
IT Developer & Photography enthusiast.

SanAndreas ::

Sem tudi dal padding in margin na 0 v menu, ampak so še vedno narazen.

to je primer menu

to je primer menu

SanAndreas je doma iz Rimske Galaksije ima srebrn NLP :)

CaqKa ::

kakšna pa je koda? lahko še ti jih border drži narazen.

SanAndreas ::

To je ta primer koda, border je na "0" zato, da se ne vidi modri okvir:

<a href="odejavnosti.html"> <img src="../images/odejavnosti.png" border="0"></a>


Kakšno kodo pa uporabljaš, daš en kakšen primer, da bojo skupaj te slikice?
SanAndreas je doma iz Rimske Galaksije ima srebrn NLP :)

Zgodovina sprememb…

Major ::

Nismo mi iz nanizanke CSI, da bi iz drobtinice kode reševali probleme. Če želiš, da ti kdo pomaga, se potrudi in dodaj še kakšno vrstico kode več (HTML in CSS). Še rajši link do konkretne strani. V nasprotnem primeru ti ne preostane drugega kot obisk Dannyjevih zvezd.
IT Developer & Photography enthusiast.

CaqKa ::

border="0" ni style property.
če imaš kje v css definiran border za sliko, prepiše tega ki je inline v htmlju pisan.
namesto border="0" napiši 
style="border:0!important; padding:0!important; margin:0!important;"

če tale koda deluje imaš nekje v cssju zapisane pa jih morš najt in si jih nastavit.
Če to ne deluje, potem edino na kar še lahko pomislim je da imaš rob naret v sami sliki :>

SanAndreas ::

Sem že rešil problem, CaqKa hvala! ;)
SanAndreas je doma iz Rimske Galaksije ima srebrn NLP :)

CaqKa ::

pa ne pustit tak kot sem ti napisal, to je samo tolko da vidiš in najdeš težavni property.
pa !important pobriši, ker drugače nimaš poti da ga preko css overridaš. inline important je namreč najvišje prioritete.

Housy ::

Mene pa zanima ena stvar glede fontov.

font-family: Arial, Verdana, sans-serif;


Velikokrat sem že to sicer opazil in me samo zanima, ali to pomeni, da v primeru, da font Arial pri uporabniku ne obstaja, potem uporabi font Verdana, itd.?

Zakaj pa je na koncu še vseeno sans-serif? Ker to je skupno ime za fonte kot so arial in podobni a ne? Če pustim samo sans-serif, potem brskalnik izbere poljubnega iz računalnika uporabnika ali kako točno zadeva deluje?

Lp in hvala,
Housy

Zgodovina sprememb…

  • spremenil: Housy ()

Major ::

w3schools -> font-family :)

V pravo smer razmišljaš, preberi si del o generic-family.
IT Developer & Photography enthusiast.

Housy ::

Hvala Major :)

CaqKa ::

kakšna je razlika pri tem:
.posevno .krepko{neki:neki;}

vs
.posevno.krepko{neki:neki;}


pa še ena zadeva, Major kaj si mislil z:
Pa še en nasvet width: 100% ne gre skupaj s paddingom, ker block box vzame širino width+padding+border, zato se stvari velikokrat poderejo.
?

Zgodovina sprememb…

  • spremenil: CaqKa ()

DiTi ::

Major misli da če daš padding dobiš več kot 100%.

razlike pa jaz ne vidim, ampak ne me vzeti za besedo. zakaj sprašuješ?

Major ::

1. HTML:
.posevno .krepko{neki:neki;}

<div class="posevno">
    <div class="krepko"></div>
</div>

2. HTML:
.posevno.krepko{neki:neki;}

<div class="posevno krepko"></div>


"Total element width = width + left padding + right padding + left border + right border + left margin + right margin"
Box model, še bolje razloženo na css-tricks.com
IT Developer & Photography enthusiast.

Zgodovina sprememb…

  • spremenil: Major ()

CaqKa ::

DiTi je izjavil:

razlike pa jaz ne vidim, ampak ne me vzeti za besedo. zakaj sprašuješ?

Zato ko sem jaz danes šele skužil razliko med tema dvema in še nisem videl da bi to bilo v tej temi opisano, se mi pa zdi zelo zanimivo in uporabno :)

aja, na box model si se samo skliceval. ja to mi je jasno :) imam tole vedno pred sabo, ko se začne kaj komplicirat.

če imam na začetku css-a 
*[style]{margin:0;padding:0;}

in kasneje 
bla[style]{margin:nekaj;padding:nekaj;}

bo * overrideala nižje pravilo?
kolkor mi je namreč jasno je kasneje zapisano pravilo z višjo prioriteto. ali morem potem uporabljat !important?

Zgodovina sprememb…

  • spremenil: CaqKa ()

Major ::

Najbolje je, da imaš celotni box model v glavi že takoj na začetku, ko začneš postavljat containerje in wrapperje. Je pa to zelo zelo težko, potrebuješ kar nekaj let izkušenj :)
IT Developer & Photography enthusiast.

DiTi ::

zakaj bi bil drugi primer sploh dober? če imaš oboje tako daš en atribut (krepko-posevno)

CaqKa ::

DiTi je izjavil:

zakaj bi bil drugi primer sploh dober? če imaš oboje tako daš en atribut (krepko-posevno)

več kontrole imaš s tem.
dosti bolj natančno poveš za kater element gre če rečeš span.krepko.posevno kot pa če rečeš .posevno

načeloma pa sem ga že do sedaj uporabljal (recimo div.novica) pa se nisem nikoli zavedal oziroma sprobal da bi lahko tudi drugače delal

Zgodovina sprememb…

  • spremenil: CaqKa ()

DiTi ::

ni čisto nič bolj natančno, sploh če je tako kot je napisal Major

CaqKa ::

na ta način lahko pohopsaš nek tag ki ima tako id kot tudi class definiran. brez tega ga nebi mogel, in bi ga verjetno lovil z idjem. zato pravim da je bolj natančno.

DiTi ::

če je id in class potem ja, če je pa oboje class pa nima smisla.

Major ::

Seveda ima smisel, drugače bi bilo še zdavnaj depricated. Če nekaj let delaš na frontend področju, imaš mnogo širšo predstavo kje določene stvari, če se ti na prvi pogled zdijo še tako nepotrebne, pridejo še kako prav. Naj tu omenim samo sprites. S class chainingom pridobiš mnogo večjo fleksibilnost, izogneš se divitisu in classitisu, hudim boleznim frontend razvijalcev (začetnikov).
IT Developer & Photography enthusiast.

DiTi ::

hvala za sprites tip, nisem vedel da je tako dejansko hitrejše nalaganje. drugače pa se tudi sam ravnam po teh načelih in se izogibam boleznim. ampak tega primera še enostavno nisem imel da bi se mu takšna uporaba zdela smiselna, očitno še nisem dovolj dolgo v teh vodah :)

edit: ok zdaj skapiral kdaj to pride prav. boljše pozno kot nikoli :)

Zgodovina sprememb…

  • spremenil: DiTi ()

CaqKa ::

kako kaj optimizirate css?

jaz sem sedaj našel eno zadevo v chromeu, ko mi bo blazno pomagala.
če namreč na strani desno klikneš in greš na inspect element, se po defaultu odpre na "zavihku" elements. na "audits" se spodaj zažene run in ti pokaže ko klikneš na puščice katera vsa css pravila se na neki strani ne uporabijo. tista lahko potem zbrišeš oziroma preveč če jih slučajno na kateri drugi podstrani uporabljaš.

DiTi ::

že ko pišeš skrbiš da ne flancaš nekaj nepotrebnega?

bigbada ::

Zdravo!

Imam eno vprasanje... V html datoteki imam crke abecede napisane:
<div id="tipke">
    <span onclick="izbira(this)">Q</span>
    <span onclick="izbira(this)">W</span>

itd...

zdaj pa me zanima, kako bi naredil, da bi te crke prikazovalo v stilu tipkovnice?
S tem mislim, da bi vsaka crka bila obdana s sivim kvadratom ? A se, da to s CSS resiti?
Moram za vsako crko posebaj, ali lahko kako elegantnejsi? Kaki namig?

Potem pa se imam eno vprasanje.. Kako naj resim, da bi vsa stran bila na sredi ?
Zdaj je |abcd|, rad pa bi imel | |abcd| | ?
Kaksni namigi?

Hvala

Zgodovina sprememb…

  • spremenilo: bigbada ()

Pimoz :: 

#tipke span {
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
}

<html>
<head>
<style type="text/css">
    #wrapper {
        margin: 0px auto;
        width: 500px;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
    <div id="wrapper">
        Tukaj sledi vsa moja vsebina<br />
        Lalala Tralala Hopsasa :)
    </div>
</body>
</html>

bigbada ::

Hvala, 2 del deluje vredu za pozicijo na sredini.
Prvi del za tipke pa ne deluje, nič se ne spremeni...

a lahko tako v css datoteki sploh uporabis?
#tipke span { .... } ?

Zgodovina sprememb…

  • spremenilo: bigbada ()

Pimoz ::

my bad :/ očitno moram spat.
<html>
<head>
<style type="text/css">
#tipke span {
	display: block;
	border: 1px solid #000;
	clear: right;
	float: left;
	margin-right: 5px;
	padding: 5px 10px;
}
</style>
</head>
<body>
	<div id="tipke">
		<span onclick="izbira(this)">a</span>
		<span onclick="izbira(this)">b</span>
		<span onclick="izbira(this)">c</span>
	</div>
</body>
</html>


Drugače pa seveda lahko. To enostavno pomeni da ta style pripada vsem elementom span, ki imajo kateregakoli izmed višje ležečih elementov z id="tipke".

CaqKa ::

DiTi je izjavil:

že ko pišeš skrbiš da ne flancaš nekaj nepotrebnega?

Eden izmed možnih odgovorov, še vseeno me zanima kako kdo kaj izvaja optimizacijo CSS.

Housy ::

CaqKa je izjavil:

DiTi je izjavil:

že ko pišeš skrbiš da ne flancaš nekaj nepotrebnega?

Eden izmed možnih odgovorov, še vseeno me zanima kako kdo kaj izvaja optimizacijo CSS.


Če imaš več značk, ki bodo pozicionirane levo, polj logično, da ne boš šel za vsako značko pisat float: left; a ne?

Ker s tem narediš škodo predvsem sebi, saj se iz kode potem ne znajdeš ravno preveč, razen če uporabljaš Firebug.

Tage, ki imajo enake lastnosti, daš skupaj.

Lp, Housy

Zgodovina sprememb…

  • spremenil: Housy ()

CaqKa ::

orodja, orodja. nebom tega na roko delal.

kriko1 ::

Hm, jaz pa sem naredil en div, kateri je fiksne veličine:
#draggable{
width:425px;
height:370px;
display:block;
position:relative;
float: right;
z-index:60;
font-size: 62.5%;
border-style:solid;
border-width:1px;
}


Ta div lahko vlečeš po strani kot hočeš, noter pa je neka vsebina, če klikneš zapri se zapre (display:none).
Težava je ta, da tudi ko je skrita se stran obnaša kot da bi jo prekrival en ogromen div in ne morem kopirat
teksta, na kako vnosno polje, ni možno postavit fokusa...
Poskusil sem jo vriniti v eno vsebino na strani, vendar je še vedno isti efekt.
Kako bi lahko popravil da bi imel plavajoči div, kateri bi vizualno prekrival stran samo do tam kjer seže?
Kak drugi element namesto div?

EDIT: težava je bila v JQuery

Zgodovina sprememb…

  • spremenil: kriko1 ()

icurk ::

Mene pa zanima kako lahko narediš dropdown meni brez uporabe java scripta, torej samo z CSS?
Imam menijsko vrstico, kjer imam različne gumbe. Pod njimi pa so absolutno pozicionirani podmeniji, ki so skriti. Kako jih lahko postavim na visible, brez java scripta?

CaqKa ::

eno implememntacijo imaš tukaj: http://www.rcum.uni-mb.si

Tody ::

Ker je bilo zmeraj težko vpisat v googl css dropdown :D

http://www.jankoatwarpspeed.com/post/20...

icurk ::

Ne da je težko poiskat, sej sem že prej, ampak mi nikakor noče delat. Sem pregledal že veliko različnih kod, vendar mi nikakor ne dela pravilno. Tako da sedaj prilagam majhen delček kode in bi lepo prosil koga, če mi pove kaj delam narobe.
CSS:
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu li {float:left;width:100px;position:relative;}
.menu ul ul {visibility:hidden; position:absolute;top:41px;left:110px; width:149px;border-top:1px solid #000;}
.menu ul li:hover ul{visibility:visible;}]


<div class="menu">
<ul>
      <li><a href="">Domov</a></li>
      <li ><a href="">O Klubu</a></li>
          <ul>
            <li><a href="" >Vodstvo</a></li>
            <li><a href="" >Člani</a></li>
          </ul>
      <li><a href="" >Aktivnosti</a></li>
      <li><a href="" >Novice</a></li>
      <li><a href="" >Zapisniki</a></li>
</ul>
</div>

Zgodovina sprememb…

  • spremenil: icurk ()

DiTi ::

Ko daš pod meni ne smeš zaključit li se pravi imaš 
<li>Oklubu <ul><li>...</li>..</ul></li>

icurk ::

O lej pa res, tega pa sploh nisem opazil :) toliko skrbi zaradi take neumnosti :)

JackCola ::

Spet problemi z IE.
Postavil sem html/css spletno stran vendar se mi background image v IE sploh ne pokaže. Koda:
CSS:
body {
background: url(tree.png);
font-family: TitilliumMaps29L;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); }

Link do strani je: www.moysushi.si

Pa tudi slimbox pri linku ambient ne dela v ie-ju. Mogoče kdo zna pomagat?

DiTi ::

glede IE6 se jaz enostavno več ne bi sekiral, če ni toliko zmožen da da gor novejši browser ga tudi stran brez slike ne bo motla.

Housy ::

DiTi je izjavil:

glede IE6 se jaz enostavno več ne bi sekiral, če ni toliko zmožen da da gor novejši browser ga tudi stran brez slike ne bo motla.


Jaz uporabljam za IE6 kar spodnji delček kode, ki ga vstaviš v glavo html dokumenta.
<!--[if lte IE 6]>
    <meta http-equiv="refresh" content="0;url=http://www.tvoja-domena.com/zastarel-brskalnik.html" />
<![endif]-->


Nardiš en fajl, v mojem primeru je to zastarel-brskalnik.html in te v primeru, da uporabljaš IE6, preusmeri na to datoteko, kjer pač navedeš linke za posodobitev Internet Explorerja in morda tudi drugih alternativ (Chrome, Firefox, Opera, Safari).

Morda pa komu pride prav :D

Lp, Housy

Zgodovina sprememb…

  • spremenil: Housy ()

DiTi ::

No ja, jaz raje rešim z javascript, tako da prikaže le majhen toolbar na vrhu kjer opozori, tako da je še stran vedno vidna, saj če veš kaj delaš po navadi dela tudi v IE6 toliko dobro, da lahko uporabnik normalno uporabi/dobi pomembne informacije.

JackCola ::

@Housy Hvala bom uporabil kar tvojo metodo. ;)

pizdarija1 :: 

<style>
#body {
	background-color: #ccc;}
		
.notice{
	display:block;
	padding: 5px;
	color: #769B4E;
	border:1px solid #769B4E;
	margin-top: 10px;
	margin-bottom: 10px;
}	
	
	
</style>

<div id="body">
&nbsp;
	<span class="notice">
		You have been logout!
	</span>

dsds
</div>


Tegaaa problema še nisem opazil, ko vpišem  (LOL &.nbsp;) deluje margin-top drugače ne.
Ali obstaja kakšen css hack vseeno me moti prazen prostor.

Zgodovina sprememb…

Housy ::

@pizdarija1 - Namesto margin-top uporabi padding-top :)

CaqKa ::

JackCola je izjavil:

Spet problemi z IE.
Postavil sem html/css spletno stran vendar se mi background image v IE sploh ne pokaže. Koda:
CSS:
body {
background: url(tree.png);
font-family: TitilliumMaps29L;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); }

Link do strani je: www.moysushi.si

Pa tudi slimbox pri linku ambient ne dela v ie-ju. Mogoče kdo zna pomagat?

Jaz bi se tukaj pošpilal z polnim selektorjem in en samo shorthand property, predvsem pa tudi da postaviš narekovaje prav. poln property je background-image. http://www.w3schools.com/css/pr_backgro...
za text-shadow, ki niti še na IE9 ne dela uporabiš msjeve filtre. http://www.google.com/search?q=text+sha...
vse skupi flikneš v en "if ie" stavek, kot že zgoraj predlagano.
pa še enih par idej imaš tukaj:
http://jigsaw.w3.org/css-validator/vali...
in tukaj:
http://validator.w3.org/check?uri=http%...

<style>
#body {
	background-color: #ccc;}
		
.notice{
	display:block;
	padding: 5px;
	color: #769B4E;
	border:1px solid #769B4E;
	margin-top: 10px;
	margin-bottom: 10px;
}	
	
	
</style>

<div id="body">
&nbsp;
	<span class="notice">
		You have been logout!
	</span>

dsds
</div>


Tegaaa problema še nisem opazil, ko vpišem  (LOL &.nbsp;) deluje margin-top drugače ne.
Ali obstaja kakšen css hack vseeno me moti prazen prostor.

span je po defaultu inline element, raje vzemi div, ki je block

Zgodovina sprememb…

  • spremenil: CaqKa ()
««
22 / 26
»»

Vredno ogleda ...

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

poravnava li elementov

Oddelek: Izdelava spletišč		82101 (1966) boss-tech
»

Wampserver in Firefox

Oddelek: Izdelava spletišč		61803 (1683) jonystar
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč		519681 (7480) nuuush
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč		62408 (2355) amaze646
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč		133027 (2893) Road Runner

Več podobnih tem