Vse, kar ste si želeli vprašati o CSS, pa si niste upali. @ Slo-Tech

Forum » Izdelava spletišč »
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 :: 4. apr 2011, 21:12

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 :: 5. apr 2011, 00:34

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 :: 5. apr 2011, 13:47

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 (5. apr 2011 ob 13:49)

emmentaler :: 19. apr 2011, 17:12

edit

sem porihtal

Zgodovina sprememb…

spremenil: emmentaler (19. apr 2011 ob 18:32)

inbox :: 2. maj 2011, 12:20

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 :: 2. maj 2011, 13:23

Malce napačno si predstavljaš, poglej si w3schools.

IT Developer & Photography enthusiast.

inbox :: 2. maj 2011, 13:54

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 (2. maj 2011 ob 14:06)

Major :: 2. maj 2011, 15:01

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 :: 2. maj 2011, 15:16

Major je 2. maj 2011 ob 15:01 izjavil:

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

To sem potreboval. Hvala.

bf4ed :: 4. maj 2011, 10:59

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 :: 4. maj 2011, 11:02

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

In nato ustrezen izpis v head.

https://dolhar.si/

bf4ed :: 4. maj 2011, 11:10

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 :: 4. maj 2011, 12:39

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 :: 4. maj 2011, 13:06

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 :: 4. maj 2011, 13:14

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 :: 4. maj 2011, 13:24

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 :: 4. maj 2011, 13:38

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 (4. maj 2011 ob 13:40)

inbox :: 10. maj 2011, 21:24

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 (11. maj 2011 ob 17:28)

inbox :: 12. maj 2011, 23:34

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 :: 12. maj 2011, 23:42

Padding-bottom.

IT Developer & Photography enthusiast.

inbox :: 12. maj 2011, 23:44

Ne mrda

Anže Jarni :: 12. maj 2011, 23:45

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

inbox :: 12. maj 2011, 23:50

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

Anže Jarni :: 12. maj 2011, 23:51

Spejstaj kodo, da vidimo...

inbox :: 12. maj 2011, 23:55

#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 :: 13. maj 2011, 00:00

Manjka ti float na #vsebina, nato bo padding deloval. Malce si preberi o float flowu.

IT Developer & Photography enthusiast.

Anže Jarni :: 13. maj 2011, 00:25

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 :: 13. maj 2011, 01:23

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 :: 18. maj 2011, 09:30

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 :: 18. maj 2011, 10:43

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 :: 18. maj 2011, 13:41

Tody je 18. maj 2011 ob 10:43 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 :: 18. maj 2011, 23:29

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 :: 24. maj 2011, 15:09

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 :: 24. maj 2011, 15:12

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 :: 24. maj 2011, 15:44

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

JayKay :: 24. maj 2011, 15:49

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

JercSI :: 27. maj 2011, 12:07

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 :: 5. jun 2011, 22:16

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 :: 6. jun 2011, 08:51

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

CaqKa :: 6. jun 2011, 10:59

inbox je 5. jun 2011 ob 22:16 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 :: 6. jun 2011, 12:52

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 :: 6. jun 2011, 13:54

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 :: 6. jun 2011, 14:21

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

inbox :: 6. jun 2011, 18:48

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 :: 6. jun 2011, 19:00

background-position: center bottom;

Zgodovina sprememb…

spremenil: JayKay (6. jun 2011 ob 19:01)

emmentaler :: 7. jun 2011, 12:36

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…

spremenil: emmentaler (7. jun 2011 ob 12:43)

CaqKa :: 7. jun 2011, 12:40

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

emmentaler :: 7. jun 2011, 12:46

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

CaqKa :: 7. jun 2011, 12:51

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 (7. jun 2011 ob 13:00)

emmentaler :: 7. jun 2011, 18:45

Č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…

spremenil: emmentaler (7. jun 2011 ob 18:47)

«« «

23 / 26

»»»

Vredno ogleda ...

	Tema	Sporočila	Ogledi	Zadnje sporočilo
	Tema	Sporočila	Ogledi	Zadnje sporočilo
»	poravnava li elementov boss-tech Oddelek: Izdelava spletišč	8	2153 (2018)	boss-tech 1. okt 2012 08:19:03
»	Wampserver in Firefox jonystar Oddelek: Izdelava spletišč	6	1856 (1736)	jonystar 4. maj 2012 07:59:32
»	CSS problemi (strani: 1 2 ) Tody Oddelek: Izdelava spletišč	51	9871 (7670)	nuuush 20. mar 2010 18:15:37
»	[CSS]Pozicioniranje footer diva amaze646 Oddelek: Izdelava spletišč	6	2464 (2411)	amaze646 2. dec 2009 22:26:32
»	CSS background-image in IE6? para! Oddelek: Izdelava spletišč	13	3079 (2945)	Road Runner 12. jun 2008 19:07:09

Več podobnih tem

Forum » Izdelava spletišč » 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.