» »

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.

««
25 / 26
»»

xerror ::

Kako lahko s css naredim divu background image, da se razteza kot naprimer na tej strani:
http://www.foofighters.com/us/home

Imam pa nekak isto postavitev, header, background slika, footer, za vsako stvar svoj div, vse skupaj pa potem v glavnem divu.

para! ::

Death before dishonor!

hidetr ::

xerror je izjavil:

Kako lahko s css naredim divu background image, da se razteza kot naprimer na tej strani:
http://www.foofighters.com/us/home

Imam pa nekak isto postavitev, header, background slika, footer, za vsako stvar svoj div, vse skupaj pa potem v glavnem divu.


če te prav razumem bi rad 100% width/height background-image za div, predpostavljam da uporabljaš neki fluid design.

Načinov je več:

1.) pure css varianta (old browsers = no):

background-image: url(cowbell.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;

2.) v div v kateremu bi rad ozadje dodaj img tag in ga raztegni na 100%, just in case (browser differences) za vse elemente v temu divu določaj z-index.

3.) Javascript.

Housy ::

Zakaj v textarea ne prime "vertical-align: middle"? Obstaja mogoče kakšen CSS hack?

Tnx, Housy

Housy ::

Housy je izjavil:

Zakaj v textarea ne prime "vertical-align: middle"? Obstaja mogoče kakšen CSS hack?

Tnx, Housy


Sem zadevo rešil z uporabo jQuery :)
Želel sem torej, da se ob kliku na textarea kurzor pomakne na vrh. Če v textarea ne vpišemo ničesar, potem je kurzor na sredini.

Vsak si bo moral edino mere za svoj textarea prilagodit (višino in padding).

Vem, da je ta tema namenjena CSS-u, ampak vseeno, če bo slučajno kdo rabil kodo:
jQuery(function() {
	var textboxes = [];
	
	jQuery(".popup-content form textarea").each(function(i){ textboxes[i] = jQuery(this).val(); });

	jQuery(".popup-content form textarea").focus(function()
	{
	    jQuery(this).css('height', '118px');
	    jQuery(this).css('padding-top', '10px');
			
		var index = jQuery(".popup-content form textarea").index(this);
		
		if(jQuery(this).val() == textboxes[index])
			jQuery(this).val("");
            			
	});
	
	jQuery(".popup-content form textarea").blur(function()
	{
		var index = parseInt(jQuery(".popup-content form textarea").index(this));
		
		if(jQuery(this).val() != "") {
		    jQuery(this).css('height', '118px');
	        jQuery(this).css('padding-top', '10px');
		    jQuery(this).val();
		} else {
		    jQuery(this).css('height', '68px');
	        jQuery(this).css('padding-top', '60px');
			jQuery(this).val(textboxes[index]);
		}
	});
});


Lp, Housy

Zgodovina sprememb…

  • spremenil: Housy ()

tec ::

Imam spustni meni. Sub se aktivira, ko greš na main. Problem je, ker ko se premaknem na podmeni, torej sub, mi main ne ostane aktiven. Glede na spodnjo kodo želim, da ko grem na main, se ozadje za celoti meni in podmeni pobarva v črno (kar deluje in tudi ostane, ko grem na sub), barva main linka pa postane bela, tudi ko se premaknem na podmeni. Torej, se da določit, da bi a v prvem li-ju ostal aktiven, dokler sem na prvem li-ju? Nekaj takega #menu li:a:hover :)

<ul id="menu">
<li><a href="#">main</a>
<ul class="sub">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
</ul>
</li>
</ul>


#menu li:hover {background:black;}
#menu a{color:red;}
#menu a:hover{color:white;}

Trinitron ::

probaj #menu li:hover a:link {color:white;}

tec ::

Uff..simpl je tanajbolš. Deluje, hvala

BlueBerry ::

Kako v IE dobiš border-radius: delujoč ?
Na netu je povno ene kode karkol dam notr v ta novem IE še vedno ni nč zaokroženo.


Nov ie je zame 8 je biu že naložen na winsih (kot vedno) in sm komi najdu verzijo, ker ga ne uporabljam.

JayKay ::

Netrunner ::

za border radius si poglej css3pie če ti kaj pomaga...

jaz se ne bi obremenjeval z browserji ki ne podpirajo css3 ... pač ne bo zaobljeno ... stran bo ravno tako funkcionalna
Doing nothing is very hard to do... you never know when you're finished.

BlueBerry ::

Aha hvala, jah ne problem je ker sem mislu da obstaja pa ne najdem, če prav razumem obstaja za starejše IE novejše pa ne zanimivo skoz večji crap.
Dobr bom pa dal sliko notr.
lp

BlueBerry ::

A obstaja kšn CSS trik da se ozadje prilega (povečuje/zmanjšuje) glede na vsebino ?
Najdu sem jih kar nekaj ampak noben ne pove kako na konc dodaš border.

Vsi delujejo samo za enobarvno ozadje kaj pa, če maš za ozadje "sliko" z borderjem in bi rad mel gor, dol border tisto v sredini (barva) se pa povečuje ?

Zgodovina sprememb…

tomazsss ::

Zdravo.

Imam problem, da mi ne pokaže besede "nickname" odebeljeno. Id "content" je definiran v page.css, class loud pa v font.css. Če pa dam class loud v page.css pa zadeva deluje. A so mogoče kakšne omejitve, da mora biti vse kar je znotraj enega id-ja v isti .css datoteki? Če je temu tako, se da kako drugače rešiti zadevo? (razen tega da vse stlačim v eno datoteko, ker to ni opcija)

index.html
...
<div id="content">
Logged in as <span class="loud">nickname</span>.
</div>
...


page.css
...
#content {height:150px;}
...


font.css
...
.loud {font-weight:bold;}
...

CaqKa ::

je možno da sploh nisi opazil in da v head niti ne kličeš prav font.css?

tomazsss ::

Sem preveril in je pravilno. V head-u kličem najprej font.css, nato pa page.css.

Zgodovina sprememb…

  • spremenil: tomazsss ()

CaqKa ::

jaz ponavadi sprobam če sploh prime selektor na tak način da mu noter zdefiniram {background-color:fuchsia!important; border:red 1px solid!important;}
še prej ponavadi uporabi chromov inspector, (lahko tudi firebug v ffju), da vidim če je sploh našel pravilo.
tam lahko tudi pogledaš če ga kakšno drugo pravilo overridea.

Tody ::

To se rešuje tako da greš s Chromom pogledat stran daš inspect element in se potem igraš s CSS. Če maš napako v sintaksi ti chrome ne bo pokazal na desni opcije od CSS in ne boš moral spreminjati font-weight:bold;, če imaš pa na tem stilu še kaj obešeno ti bo pa to prikazal z prečratnim font-weight:bold;.

Tam lahko tudi vpisuješ nove zadeve in potem še v fizično datoteko zadevo prepiše.

martincek1 ::

Imam problema s html, css in js

Imam skripto, ki bo kliku avtomatsko scrolla do vrha. Na eni strani deluje normalno, na eni pa ne. V htmlju sem na obeh straneh dodal

<a href="#top"></a>


in na obeh je to kul (na eni strani itak dela, na drugi pa je link modro obarvan, tako da tu ni problema).

$(document).ready(function() {
    
    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
 
    })



To je koda, razlika pa je, da je na tisti strani, kjer stvar deluje, koda v divu, tam kjer ne deluje, pa div-a ni.
__________________

Druga stvar pa je:

<h1><a href="index.html">ime<span>priimek</span></a></h1>



Pač črkovni logotip in ob kliku je preusmeritev na index.html

Enostavno mi ne uspe, da se novoustvarjen link ne bi ubarval vijolično..

css:

.logo h1 {
    font-family: 'Ebrima';
    font-size: 32px;
    font-weight: lighter;
    color: #86cad9;
}



Dodam lahko .logo:link {color:#86cad9}, ostale (hover, active...) pa sploh ne zazna(v programu se ne obarva tako kot se link, čeprav je koda enaka.

lp

para! ::

in na obeh je to kul (na eni strani itak dela, na drugi pa je link modro obarvan, tako da tu ni problema).

Čaki, jquery scrollTop in barva linkov imata veze v katerem vesolju že?

To je koda, razlika pa je, da je na tisti strani, kjer stvar deluje, koda v divu, tam kjer ne deluje, pa div-a ni.

Kakšna koda v divu? A prov notr u divu je koda? JS, ki si ga prilepil je v redu, delovati bi moralo v vsakem primeru, lahko pejstaš HTML primer, kjer ti ne dela, ali pa jsfiddle link?

Enostavno mi ne uspe, da se novoustvarjen link ne bi ubarval vijolično..

Končni selektor bo a:visited.

Dodam lahko .logo:link {color:#86cad9}, ostale (hover, active...) pa sploh ne zazna(v programu se ne obarva tako kot se link, čeprav je koda enaka.

Izrazoslovje, model.

lp
Death before dishonor!

martincek1 ::

Čaki, jquery scrollTop in barva linkov imata veze v katerem vesolju že?


sem vključil v html kodo. Glede na to, da se je link obarval tako kot drugje, predvidevam da je tu vse v redu, pač pa sem zafrknil nekje pri js kodi.

Kakšna koda v divu? A prov notr u divu je koda? JS, ki si ga prilepil je v redu, delovati bi moralo v vsakem primeru, lahko pejstaš HTML primer, kjer ti ne dela, ali pa jsfiddle link?


Na strani, kjer scrollTop deluje, je koda v html filu v istem divu, kjer je element. Na strani, kjer ne deluje, pa se div že pred tem konča. Bom prilepil...

Končni selektor bo a:visited.


Nisem razumel.

Izrazoslovje, model.


Priznam, sem izgubljen v kodiranju strani. Vem, kam moram vpisati link, visited, hover in active, ampak mi že program sam blokira(Aptana Studio). Kodo mi obarva samo za a:link in to deluje, pri ostalem pa ne.

Stvar sem dobil napol narejeno od "koderja", pa bi rad popravil..

Zgodovina sprememb…

emo panda ::

Zdravo!

Izdelujem eno spletno stran za en predmet v šoli...... No..malo me heca css. Rad bi da mi pomagate glede problema, ki ga lahko vidite spodaj na sliki. Hočem da bi bil tist "box" kjer nori piše hello visitors in je obkrožen z borderjem desno zgoraj poleg logotipa, in da bi bila vsebina(torej form) desno od menija. Torej zanima me kako bi naredil to poravnavo oz. s kakšnim ukazom bi jo naredil...

Hvala za vsak odgovor! :)

Lp, Andraž

 spletna

spletna

Tody ::

sedovsek ::

Zdravo!

Zanima me, če kdo pozna kako dobro/slabo spletno mesto (dve, tri, ... n), ki uporablja CSS multi column?

Se pravi:
column-count: |integer|;
oz.
column-width: |size|;

Hvala, lep teden!

emo panda ::

Tody je izjavil:

Na kratko takole : https://www.google.com/search?aq=0&oq=C...

Hvala! sem potem nekako rešil z position absolute :)

Gandalfar ::

sedovsek je izjavil:

Zdravo!

Zanima me, če kdo pozna kako dobro/slabo spletno mesto (dve, tri, ... n), ki uporablja CSS multi column?


http://www.quirksmode.org/css/multicolu...

Ce rabis docse. Mi smo nekaj experimentirali s tem, pa se je izkazalo za dosti buggy se.

sedovsek ::

@Gandalf, hvala!
Naceloma sem iskal spisek strani, ki to uporabljajo v praksi.
Na zalost sem jih nasel zelo malo,
http://galjot.si/multiple-columns#curre...

Lep vikend,
R.

neres ::

CSS začetnik. Imam en preprost nav element (sivo ozadje), kjer so noter tri li (z a linki):


Zakaj je na vrhu padding, čeprav sem dal 0?

nav {
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc; 
	border-top: 1px solid #ccc;
	overflow:hidden;
	padding: 0px;
}
nav li {
	display: inline;
}
nav li a {
	text-decoration: none;
	font-weight: bold;
	color: #069;
	padding: 8px;
	border-right: 1px solid #ccc; 
	float: left;
}
nav li a:hover {
	color: #c00;
	background-color: #fff;
}

Zgodovina sprememb…

  • spremenil: neres ()

bluefish ::

Kaj pa dela tisti padding pri nav li a?

Zgodovina sprememb…

  • spremenil: bluefish ()

Lion29 ::

ne mormo videt od cesa je padding ygoraj... ali ne to del NAVa ali od kakega predhodnega elementa.... ali uporabi jsfiddle da rekreiras problem al nam das link..... se najbolje pa da uporabis firebug in vidis direktno kateri elementi nagajajo
Founder and CTO @ Article-Fatctory.ai

neres ::

Tisto je da niso besede skupaj.. ampak če dam na 0 ne pomaga. Povsod sem poskusil dat padding 0, pa še vedno ostane tisti padding na vrhu.

Evo še html:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css" />
	<title>title</title>
</head>
<body>
	<nav>
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="articles.html">Articles</a></li>
			<li><a href="about.html">About</a></li>
		</ul>
	</nav>
</body>
</html>

Zgodovina sprememb…

  • spremenil: neres ()

Lion29 ::

resetirat moras vse elemente

nav, ul, li, a{margin:0; padding:0;}


to probaj dat na vrhu pred vsemi, pa mi povej, ce bo poamgalo...
Founder and CTO @ Article-Fatctory.ai

neres ::

Pomaga, ja. Hvala.

Sicer sem že slišal za "resetiranje" ampak nisem vedel, da je to nujno uporabljat..

Lion29 ::

ja, ni nujno, ce upostevas nastavitve, ki jih imajo doloceni elementi po defaultu...

ker pa je elementov cel kup in nastavitev tolko vec, je ze skoraj ustaljena praksa, da se pri vecjih projektih resetira vse skup in dela from "ground up"...

lahko pa je tudi overkill, ce imas simple splosno stran
Founder and CTO @ Article-Fatctory.ai

neres ::

Še nekaj me zanima. Bom dal kar link na jsfiddle: http://jsfiddle.net/kMzWd/
Malo sem poenostavil (vsaj zame) CSS. In sedaj če dam hover nad linke se belo ozadje ne pokaže povsem do levega roba pri desnih dveh linkih.
To se da enostavno rešit če dam v HTMLju li elemente takoj enega za drugega [torej ne vsakega v svojo vrsto]. To je sicer v redu.
Ampak me vseeno zanima če obstaja tudi kakšna elegantna rešitev v CSSju. Nekaj sem iskal in tudi našel v zvezi z white-space pa še eno drugo varianto.. ampak ne dela konsistentno v brskalnikih.

martincek1 ::

Eno začetniško vprašanje :)



To je izdelek, ki ga želim doseči. Do sedaj sem imel sliko eno pod drugo čez celo širino.

<div id="content">
	        <div id="cube">
				<img src="img.png" />
    	    </div>
		</div>


Ti divi se ponavljajo.


/* page content - cube */
#cube { float:none; width:231px; margin-right:12px; margin-top:0px;}


lp :)

Zgodovina sprememb…

martincek1 ::

Sem pozabil dodati:

/* page content */
#content {margin-bottom:12px; }

RockyS ::

.content{width:960px}
.cube{float:left;width:231px; height:231px; margin:12px 12px 0px 0px; background-color:#000;}

/* izpis */ 

<div class="content">
    <?PHP 
      $n = 16;
     for ($i=0; $i<$n; $i++)
     { ?>
       <div class="cube" <?PHP  if ($i%4 == 0){echo "style='margin-right:0px'"; ?>></div>
      <?PHP }
    ?>
</div>

martincek1 ::

Samo z html+css se tega ne da rešiti?

bluefish ::

Če se ti da za vsak kvadratek ročno določati pozicijo.

RockyS ::

Lahko, pač vsakemu četrtemu dodaš style="margin-right:0px;" in zadnji(spodnji vrsti) style="margin-bottom:0px"

Seveda priporočam, da se izogibaš inline stilom.

ampak potem dobiš to
<div class="content">
       
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube" style="margin-right:0px;"></div>
<div class="cube" style="margin-bottom:0px;"></div>
<div class="cube" style="margin-bottom:0px;"></div>
<div class="cube" style="margin-bottom:0px;"></div>
<div class="cube" style="margin-bottom:0px; margin-right:0px;"></div>
</div>

martincek1 ::

Superca, hvala RockyS.

HTML bo zadoščeval, ker bom imel na strani trenutno do 15 kvadratkov + kvadratek za link do .pdf datoteke.

Tody ::

Ne rabiš niti tega delat če se boš igral s paddingom.

Tole spodaj producira http://mcclabs.com/drama/gal2.html

Seveda 4x 231 ni enako 960 tko da boš mogu še kak pading dat ali kaj takega

#gal
{
position:absolute;
margin-top:317px;
width: 600px;
margin-left: 108px;
}

<div id="gal">
<a href="http://www.drama.si/ansambel/bevk-alida.html" class="masterTooltip" target="_blank" title="Alida Bevk" border="0" ><img src="images/AlidaBevk.jpg"  class="effectzoom" Width="114" Height="133" > </a>
<a href="http://www.drama.si/ansambel/aljaz-jovanovic.html" target="_blank" class="masterTooltip" title="Aljaž Jovanović" border="0">   <img src="images/AljazJovanovic.jpg""  class="effectzoom" Width="114" Height="133" >   </a>

tec ::

A je možno besedilo porezat po višini, glede na višino diva? Po dolžini mi je jasno in deluje, samo rad bi določil tudi fiskno višino elementa in da preko tega tekst ne gre, ampak ga odreže?

Hvala

Gandalfar ::

overflow: hidden

tec ::

O jebemti (pardon my french) sm glup...hvala. A veš, kako bi usposobil, da bi delalo z text-overflow: ellipsis; ? Rad bi dodal ... na koncu, kjer poreže

Gandalfar ::

Amm, point ellipsisa je de ne rabis overflowa. Pac imas elipsis po sirini, pa overflow po visini? :)

Skatey ::

ellipsis ti lahko naredi samo truncation na 1 vrstico. rabiš pa vklopt overflow:hidden, text-overflow:ellipsis in white-space:nowrap; in imeti določeno širino vrstice..
Design, elephants and stuff... www.yukaii.com/blog

tec ::

Ja, samo, če dam samo ellipsis mi vedno pokaže samo eno vrstico, skupaj z nowrap. Jaz pa bi rad imel 3 vrstice oz. neko določeno višino

evo primer

http://www.labcss.net/SFaKd/

Zgodovina sprememb…

  • spremenilo: tec ()

Skatey ::

Kakor sem napisal, ellipsisa na več kot 1 vrstico ne moreš narest. Tisti primer nima ellipsisa ampak samo overflow:hidden. Za več rešitev: http://stackoverflow.com/questions/5269... ampak boš moral vzet js.
Design, elephants and stuff... www.yukaii.com/blog
««
25 / 26
»»


Vredno ogleda ...

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

poravnava li elementov

Oddelek: Izdelava spletišč
81947 (1812) boss-tech
»

Wampserver in Firefox

Oddelek: Izdelava spletišč
61683 (1563) jonystar
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč
519184 (6983) nuuush
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč
62233 (2180) amaze646
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč
132897 (2763) Road Runner

Več podobnih tem