» »

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.

««
23 / 26
»»

pizdarija1 ::

Z padding se spremeni velikost okenca to ne pride v poštev nekak se mora upoštevat margin na .notice ker se na strani pojavi dinamično. Če spremenim na div je enako.

CaqKa ::

lahko še probaš
span.notice:before{height:10px; display:block;}
span.notice:after{height:10px; display:block;}
ampak verjetno imaš še neki drugega okol kar ti zmrda vse skup.

Housy ::

Kaj pa če namesto span probaš uporabit paragraph in pač njemu določiš enake lastnosti?

<p class="notice">Tvoj tekst</p>

Zgodovina sprememb…

  • spremenil: Housy ()

emmentaler ::

edit

sem porihtal

Zgodovina sprememb…

inbox ::

Zanima me nekaj glede menijev. V CSS določim a:visited spremeni barvo borderja, ampak so potem črte skos takšne barve že nazačetku, brez da bi jih kliknil. Kolikor razumem je visited za takrat ko si na tistem linku (meniju) active pa samo takrat kadar klikneš?

Major ::

Malce napačno si predstavljaš, poglej si w3schools.
IT Developer & Photography enthusiast.

inbox ::

Sem si prebral pa še vedno ni tako kot naj bi bilo. Tako zgleda:
#meni ul li a:hover {
	border-bottom-style: solid;
	border-bottom-color: #900;
	color:#FF8080;
}
#meni ul li a:active{
	border-bottom-color: #FF0;
}

Torej na hover se spremeni barva, ko bi bilo active (torej ko bi bil na tistem meniju) bi bila zopet drugačna. Vendar ni.

PS: active je lahko tudi iste barve kot hover, vendar tudi to ne dela.

Zgodovina sprememb…

  • spremenil: inbox ()

Major ::

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked
Kaj tukaj ni jasno?
Če prav razumem hočeš doseči, da je link v navigaciji, ki prikazuje trenutno stran, drugačen. Tega ne moreš doseči s pseudo selektorji, temveč dinamično v HTMLju (dodaš class).

inbox ::

Major je izjavil:

Tega ne moreš doseči s pseudo selektorji, temveč dinamično v HTMLju (dodaš class).

To sem potreboval. Hvala.

bf4ed ::

Kako bi pa naredil da bi pri prijavi naložilo drug css in ob odjavi usera vrnilo spet na default?
Torej imam dva različna css-ja.

Nekaj enostavnega in razumljivega če ve kdo :)
Najraje bi imel v php, brez kakega javascript ali jquery če gre.

Ziga Dolhar ::

$css = (isset($_SESSION['moj user je prijavljen in obstaja user_id'])) ? $prijavljenegaUporabnikaCSS : $neprijavljenegaUporabnikaCSS;

In nato ustrezen izpis v head.
https://dolhar.si/

bf4ed ::

Nisem dovolj natančno napisal, imam samo 2 usera, torej css bi se spremenil že ko bi bil session, in ne rabi gledat točno kateri user je.

ni mi čist jasno to kaj si napisal...bi lahko kaj več napisal?
Vse to se doda v index?
In na katerem mestu v inedx-u.

Ustrezen izpis?
No zgleda že dovolj enostavno in kratko. Mogoče še ta vrstica za izpis še manjka.

Hvala.

CaqKa ::

Da dobiš css izpisan rabiš nekaj v smislu:
<head>
<title>title</title>
<?php 
$neprijavljenegaUporabnikaCSS = "neprijavljen.css";
$prijavljenegaUporabnikaCSS = "prijavljen.css";
$css = (isset($_SESSION['moj user je prijavljen in obstaja user_id'])) ? $prijavljenegaUporabnikaCSS : $neprijavljenegaUporabnikaCSS; ?>
<link rel="stylesheet" type="text/css" href="<?php echo $css; ?>"/>
</head>

če se ne motim moreš kodo ki jo je ziga napisal prej izvest kot tole zgornjo vrstico. pa nekje še morš definirat kje sploh sta cssja.

bf4ed ::

hmm...

sem zdaj to sprobal...

Za neprijavljenega uporabnika dela default...
ko se pa prijavim pa ne preklopi na drug css, niti če dam refresh v browseru.

<head>
<title>Naslov</title>
<?php  
	$neprijavljenCSS = "ne.css"; 
	$prijavljenCSS = "da.css"; 
	$css = (isset($_SESSION['user'])) ? $prijavljenCSS : $neprijavljenCSS
	?>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="StyleSheet" type="text/css" href="<?php echo $css; ?>" />
	<link rel="stylesheet" type="text/css" href="tabela.css" />
	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="icon" type="image/gif" href="animated_favicon1.gif" />
	<?php
		session_start();
		include_once "baza.php";
	?>	
</head>

CaqKa ::

Ker je tabela.css naložen za tistim od phpja, pomeni da ti bodo selektorji iz tabela.css overrideali one iz da ali ne.css
nevem če ampak mislim da ti manjka podpičje za neprijavljenCSS (konec 6. vrtice)
če pa je v delu z cookie kaj narobe pa naj kdo drug pove, tja mi ne seže zaenkrat še znanje :>

illion ::

session se drugače nardi čist na začetku, pred kakršnim koli izpisom. Prestavi session_start(); na začetek, pred head tag:
<?php
session_start();
?>
<head> 
<title>Naslov</title> 
<?php   
    $neprijavljenCSS = "ne.css";  
    $prijavljenCSS = "da.css"; 
...


kar se tiče tvojga problema, ti bo najlažje, če pogledaš v source kodo v browserju kaj se ti je includalo ko si prijavljen in ko nisi. Če sta se da.css in ne.css pravilno includala, potem je res problem v tabela.css, ki ti najbrž povozi selectorje..

bf4ed ::

CaqKa tabela.css je oblikovanje od tebele. Nevem če to kaj moti druge css-je. Saj jih imaš lahko več includanih. V teh css-jih ni enakih stvari.

O hvala illion (in drugim) to je blo to, session_start sem dal pred head in stvar deluje kot sem si zamislil

Zgodovina sprememb…

  • spremenil: bf4ed ()

inbox ::

Imam menu in imam besedilo. Besedilo bi moralo biti pod menujem za 85px, ampak kakorkoli ga postavim mi ga postavi čez menu (content). Nekaj mora biti narobe v CSS, vidi kdo ? :)
body{
				background:#333 url(bg.jpg) repeat top left;
				font-family:Arial;
			}
			span.reference{
				position:fixed;
				left:10px;
				bottom:10px;
				font-size:12px;
			}
			span.reference a{
				color:#aaa;
				text-transform:uppercase;
				text-decoration:none;
				text-shadow:1px 1px 1px #000;
				margin-right:30px;
			}
			span.reference a:hover{
				color:#ddd;
			}
			ul.sdt_menu{
				margin-top:10px;
				margin-left: auto;
				margin-right: auto;
			}

ul.sdt_menu{
	
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
}
ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}
ul.sdt_menu li{
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}
ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000 inset;
	-webkit-box-shadow:0px 0px 2px #000 inset;
	box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}
ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px; /*For dumbass IE7*/
	font-size:10px;
	letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:65px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:20px;
	color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:0px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}
.content{
	width: 950px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	top: 100px;
	position: relative;
}
#vsebina {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	margin top: 100px;
}
p{
	text-align: justify;
	float: left;
}

HTML
<div class="content">
            <div id="meni">
			<ul id="sdt_menu" class="sdt_menu">
				<li>
					<a href="http://www.google.com">
						<img src="images/2.jpg" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">O meni</span>
							<span class="sdt_descr">Kdo sem in kaj delam</span>
						</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/1.jpg" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Ponudba</span>
							<span class="sdt_descr">Moji izdelki</span>
						</span>
					</a>
					<div class="sdt_box"> ....itd

Vsebina je pa izven contenta. Div zase.

e: zrihtal.

Zgodovina sprememb…

  • spremenil: inbox ()

inbox ::

Imam #vsebino, kateri imam height na auto, vendar bi rad da je vedno odspodaj vsaj še 20px placa, da ne bo ravno "na knap". Margin-bottom ne prime, morda kaj drugega?

Major ::

Padding-bottom.
IT Developer & Photography enthusiast.

inbox ::

Ne mrda :|

Anže Jarni ::

Če imaš floaterje notri nastavi overflow:hidden; padding-bottom: 20px;

inbox ::

Če dam overflow: hidden mi vrže čist nekam na desno vse skup.

Anže Jarni ::

Spejstaj kodo, da vidimo...

inbox ::

#vsebina {
	width: 850px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
}
<div id="vsebina">
        	<p class="skatlica"></p>
            <div class="skatlica-img"></div>
           <p class="dabing"></p>
            <div class="dabing-img"></div>
            <p class="obesalnik"></p>
            <div class="obesalnik-img"></div>
        </div>    

Tole sta css in html, ostalo je pa na tak način, vse isto:
p.obesalnik{
	float: right;
	text-align: justify;
	margin-top: 160px;
	width: 400px;
	margin-right: 20px;
}
.obesalnik-img{
	float: left;
	position: relative;
	margin-top: 20px;
}

Major ::

Manjka ti float na #vsebina, nato bo padding deloval. Malce si preberi o float flowu.
IT Developer & Photography enthusiast.

Anže Jarni ::

Hm, zakaj bi floatal vsebino, ce jo želi imeti na sredini? naj doda overflow: hidden v #vsebina in pa najbrž clear: both; v .obesalnik-img;

Major ::

Spet narobe. Overflow nima nobene veze tukaj. Clear se navezuje na predhodni element.
Če želiš imeti vsebino na sredini, boš moral vse skupaj dati še v nek kontejner.
IT Developer & Photography enthusiast.

inbox ::

V #vsebina sem dal bg. image, vendar mi ga ne prikaže (pot in vse je pravilno). Očitno sliko nekaj prekriva. Problem?
  <div id="vsebina">
        	<p class="o-meni">..blabla...</p>
</div>

CSS:
#vsebina {
	width: 850px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	background-image: url(../images/voda-naslovna.jpg);
}

Tudi p.o-meni nima nima naštimane nobene slike ali barve da bi jo prekrivalo, razen barve fonta.

Tody ::

V css moreš uporabit samo images/voda-naslovna.jpg tiste pikce ga zjebejo :) Seveda če imaš css v direktorju v katerem je še mapa images

inbox ::

Tody je izjavil:

V css moreš uporabit samo images/voda-naslovna.jpg tiste pikce ga zjebejo :) Seveda če imaš css v direktorju v katerem je še mapa images

Hecaš glede pikic? :)) To si on sam dopiše, ker je v isti mapi. Ni napisano na roko, ampak z njegovo pomočjo (browse). Sicer mi v split varianti v DW pokaže slikco, ko prešaltam na live jo pa več ni, prav tako ne v predogledu na brskalniku.

Anže Jarni ::

Tiste pikice pomenijo da je direktorij images en direktorij visje proti rootu kot je direktorij, v katerem se nahaja css.
Mislim, da ti vseeno pot do slike nagaja.

Dejansko nevem, zakaj fantje nimate to na nekem strezniku, kamor se da dostopat. Debugiranje bi bilo precej hitrejše, kot da pejstate ene chunke kode sem.

inbox ::

Zanima me kako takšno sliko dat na body in da jo kar se da hitro naloži, ne da obiskovalec čaka da se mu dolgo nalaga. Zanima me tudi kako se naštima, da se slike ne da kliknit za prikaz za ozadje (desni klik, pokaži sliko za ozadje). Pač da je tako narejeno kot na tej strani http://www.rolandgarros.com/en_FR/index... .

bluefish ::

Z zaščito slike se nima smisla truditi, ker en simple pogled v kodo razkrije vse. Glede samega nalaganja pa naj bo ozadje ustrezne nepretirane kvalitete ter naj se po možnosti naloži na koncu.

inbox ::

Kakšna velikost predlagana, da bo na večini monitorjev pokazala isto sliko?

JayKay ::

1920x1080 je dovolj, pa kvaliteto zmanjšaš tak da bo velikost recimo 100 in nekaj KB.

JercSI ::

Imam težavo z IE7 in z-indexom (vertical menu). Na internetu sem že našel dve možnosti za moj problem: opcija 1 in opcija 2. Zadeva bi čisto delovala, vendar uporabljam CSS3 (http://css3pie.com/), ki vsem ostalim div-om nastavi position:absolute. Kar spet podre celo logiko.
Na IE8, 9 in ostalih brskalnikih te težave ni.
Zanima me ali obstaja še kakšen drug trik za reševanje težave?

inbox ::

A se da kako naštimat, da bi na vseh resolucijah pokazalo isto velikost slike? Torej da na manjših monitorjih ne bi rezalo? Slika je na uvodni strani čez celo stran.

Tody ::

max height in max widht stem da pač moreš nastavit neko vrednost.

CaqKa ::

inbox je izjavil:

A se da kako naštimat, da bi na vseh resolucijah pokazalo isto velikost slike? Torej da na manjših monitorjih ne bi rezalo? Slika je na uvodni strani čez celo stran.

Najprej definiraj kaj je to "ista velikost slike"
je to x pikslov? je to od roba do roba zaslona?
je to 3cm od roba zaslona? je to 10% od roba zaslona?
zasloni so različnih razmerij stranic...
torej kaj je ista velikost slike?

inbox ::

Slika je velikosti 1920x1080px.Rad bi, da jo prikaže celo tudi na manjših monitorjih in da je ne reže. Torej da je vedno 100% čez cel in vsak zaslon.

CaqKa ::

glede na to da je slika skorajda ratio 2:1, bo to zelo šalabajzersko. večina monitorjev je 4:3, ali pa 16:9(10), kar ni enak format kot tvoja slika. slika bo tako v večini porezana na straneh, ali pa da se jo skalira, kar pa popači proporcije in krog več posledično ni krog, ampak elipsa.

pomojem si je treba najprej odgovorit na vprašanja, kako želiš da se taka slika prikazuje na 1024x786 pixlih, kako na 1600x1200, ter kako na recimo 1280x720 (enak ratio kot 1920x1080, vendar manjša slika)

Tody ::

Edini pametni način za to bi bil javascript, preden se slika naloži pogledaš resulucijo in potem izbereš pravilno sliko.

inbox ::

Sej sliko lahko dam v katerokoli velikost, rad bi le, da je prikazano na večini zaslonov isto. Ker bi naročnik rad da se vidi en most na sliki, vendar ga večina monitorjev reže, ker je čisto na dnu.

JayKay ::

background-position: center bottom;

Zgodovina sprememb…

  • spremenil: JayKay ()

emmentaler ::

Dober dan....Dajte mi povedat, ali je kaj narobe napisano v tej html kodi..
<div id="povezave">
							<img width="299" height="32" src="odzadja/povezave.png"> //napis povezave
							<br><br>
							<a class="n"target="_blank" href="http://www.facebook.com/group.php?gid=259227384179">
							<img style ="float:right; padding-right:78px;"width="48" height="48" border="0" src="odzadja/f.png">
							</a> // link in ikona FB
							<a class="n"target="_blank" href="http://www.myspace.com/rockeband">
							<img style ="float:left; padding-left:78px;"width="48" height="48" border="0" src="odzadja/m.png">
							</a> //link in ikona MS
							<div id="rob">
								<img width="300" height="3" src="odzadja/rob.png">
							</div> //pač neka črta
						</div>


Tu me ubistvu motita dve zadevi...Prva je, da IE ne upošteva -img style-...Druga, ki mi je še manj jasna pa je, da #rob ne upošteva margin:10px, v vseh brskalnikih.....In to samo zaradi -img style-, zato ker še izbrišem -img style- iz zgornjih linkov, se mi rob prikaže pravilno....torej nevem....vejetno je nekaj narobe z tem -img stayle-...vse kar bi rad dosegel je to, da se ti dve ikonci lepo prikazujeta v divu povezave(obe 78px od roba ter da je med njima 48px praznega prostora), ki ima width 300px::
Hvala vsem glavcam ki se trudite tu za nas:D
lp
#povezave
{
	padding-top:20px;
	padding-bottom:20px;
}
#rob
{
	margin-top:10px;
}
a.n:link{text-decoration:none;}

Zgodovina sprememb…

CaqKa ::

imaš v kodi dejansko med "style" in "=" presledek?

emmentaler ::

da....kolikor je meni znano, se notepadu++ fučka za presledke....
sem probal brez pa je enako...

CaqKa ::

pa pred target="_blank" daj presledek.
lahko style za tisto sliko namečeš v css. pa tisti celi style pobrišeš skupaj z tag propertyji.

#povezave a.n > img {
float:left;
padding-left:78px;
width:48px;
height:48;
border:0;
}

Zgodovina sprememb…

  • spremenil: CaqKa ()

emmentaler ::

Če dam presledek pred target, ni efekta...tud če dol zbrišem target blank, je vse enako...
Če dam pa zgoraj omejeno kodo v css pa v htmlju izbrišem propertyji, je pa popolmoma enako kot pa če bi imel propertyje napisane v htmlju...#rob ne šmirkla margina, IE ne upošteva ama ništa...pe huje, neko obrobo naredi okoli slike....

hm....bom uploadal na testni server...bo lažje.....

Zgodovina sprememb…

««
23 / 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šč
519181 (6980) 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