html/css pomoc

A

alexx_

nekaj v tem stilu
11. maj 2007
4.237
45
48
offline
nekaj me heca. kako resit ta problem, imam menu, ul li. klasika. menu gre po osi y. in pac vsakemu li dodam slikico/ikono (background-image) namesto teksta. zraven vsake slikice/ikone bi pa rad imel se eno slikico, desno od nje. kak to naredit? preprosto dodat li elemente brez linkov?
 
Nazadnje urejeno:
D

doto

Fizikalc
25. jul 2007
3.175
0
36
V meniju bi imel dve sliki? Enostavno daš img element v li. V css3 imaš sicer opcijo multiple background slik, samo to ne deluje v starejših browserjih in IE < 9.
 
A

alexx_

nekaj v tem stilu
11. maj 2007
4.237
45
48
offline
ne, ne morm dat img element v li, ker sta obe slikici dinamicni, tako da pride v postev samo css. sem probal multiple background, pa nikakor ne prime. tudi v komodu mi sintakso podcrta, pa ceprav sem prakticno copy/pasteal. bom se se hecal malo...

drugac pa poiskusam v css3. ostalo lepo dela, sam tole pa ne prime
 
P

philips

Guru
Osebje foruma
Administrator
17. avg 2007
9.878
698
113
Citat:
Uporabnik alexx_ pravi:
ne, ne morm dat img element v li, ker sta obe slikici dinamicni, tako da pride v postev samo css
Klikni za razširitev

To pa ne razumem najbolje. Tudi v CSS so fiksne poti do slik, tako da ni razlike ali dodaš <img> v <li> ali pa ga dodaš kot ozadje v CSS.
Če pa slučajno CSS generiraš dinamično, potem pa ne vem zakaj še HTMLja ne bi.

Mogoče bo lažje če skiciraš kako bi naj en <li> izgledal (da si bomo lažje predstavljali).
 
A

alexx_

nekaj v tem stilu
11. maj 2007
4.237
45
48
offline
ah, nerodno sem se izrazil! zelim da je css oz. oblika striktno locena od htmlja, pac lazje se je pol v samem cssju igrat pa spreminjat vse skup. saj mislim da vem kje delam napako, bom pol prilimal gor
smile-1.gif


drugac pa, za vizualno predstavo, kako bi naj zgledal ta meni, predstavljaj si windows phone 7 ikone, s tem da so slicice na levi linki z ikonami, slicice na desni pa so pac slicice. ampak obe sosednji slicici spadata pod en li.
ena izmed resitev je tud ta, da preprosto obe slicici prilepim kot eno x2 v dolzino, ker itak ko bom dal a:hover na ikono, bo se druga slicica tudi spremenila. tako imam vedno samo en background-image. pac, zanima me, ce se da se kak drugace to naredit
smile-1.gif
 
Nazadnje urejeno:
D

doto

Fizikalc
25. jul 2007
3.175
0
36
Verjetno imaš v meniju tudi link. Nekaj takega:

<ul id="meni">
<li><a href=""></a></li>
</ul>

Potem lahko v css nastaviš ločena background-image za li in za a.

ul#meni li{ background-image: url(...); }
ul#meni a{ background-image: url(...); display:block; width:...px; height:...px;}

Z background-position pa nastaviš, da se sliki ne prekrivata.
 
A

alexx_

nekaj v tem stilu
11. maj 2007
4.237
45
48
offline
ok, se nekaj, kako preveriti da ti zadeva deluje enako v vseh brskalnikih (ki podpirajo CSS3)? namestit vse, ali pa obstaja kaksna druga pot?
 
A

alexx_

nekaj v tem stilu
11. maj 2007
4.237
45
48
offline
spet se javljam, tokrat rabim eno pomoc v jquery. imam meni (#header), ki se na mouseover pripelje navzdol iz roba strani in pa odpelje navzgor na mouseleave. na zacetni strani to deluje zelo ql. ko pa v meniju kliknem na eno drugo (pod)stran, pa bi zelel da menu ob loadu (pod)strani ostane viden. hecno je tudi, ce ob loadu strani hitro misko premaknem iz hover polja (#hoverfield), se meni hitro pripelje dol in odpelje gor. tega ne zelim.

<script>
$(document).ready(function() {
$("#hoverfield").mouseenter(function(){
$("#header").animate({"top": "+=612px"});
});

$("#hoverfield").mouseleave(function(){
$("#header").animate({"top": "+=-612px"});
});
});
</script>
 
D

doto

Fizikalc
25. jul 2007
3.175
0
36
Najprej moraš imeti način, da v skripti ločiš prvo stran od podstrani. Recimo da je prva stran / ali /index. Potem lahko narediš nekaj takega:

Koda: 
<script>
$(document).ready(function() {
  var mo = false;
  var path = window.location.pathname;

  // če ni prva stran prikažeš menu
  if( path != '/' && path != '/index'){
     $("#header").css({"top": "+=612px"});
     mo = true;
  }

// nastaviš evente
   $("#hoverfield").mouseenter(function(){
      if(!mo){ // menu prikažeš samo, če še ni viden
         $("#header").animate({"top": "+=612px"});
         mo = true;
      }
   });

  $("#hoverfield").mouseleave(function(){ 
     if(mo){ // menu skriješ samo, če je  viden
         $("#header").animate({"top": "+=-612px"});
         mo = false;
      }

  });
});
</script>
 
A

alexx_

nekaj v tem stilu
11. maj 2007
4.237
45
48
offline
mi lahko mogoce podrobneje razlozis naslednje?

var = mo --> variabla, je vbistvu poljubno imenovana, ne?



if( path != '/' && path != '/index') --> kaj to dejansko naredi?

tukaj imam problem, na podstraneh dela ok, na prvi strani pa moram to vrstico odstranit. je to ok?
(vbistvu prva stran ni index.html, ampak je imenovana za brezveze index_sl. mogoce bi jo raje preimenoval v domov oz. home, trenutno imam v osnovnem index.html nastavljeno samo preusmeritev. sicer to vrjetno nima nobene veze)



razlika med (enkrat je klicaj, enkrat ni, zakaj?):

if(!mo)

if(mo)
 
Nazadnje urejeno:
A

amacar

Majstr
29. apr 2010
4.176
490
83
! pomeni negirano.
if( path != '/' && path != '/index')
ta stavek se vpraša: (je path različen od "/" in je različen od "index")
in če je, se izvede koda naprej v bloku, sicer pa se ne izvede.

if(mo) preeri, če je mo postavljena na true
if(!mo) preveri, če je mo nastavljena na false
 
A

alexx_

nekaj v tem stilu
11. maj 2007
4.237
45
48
offline
ta index je misljen kao za index.html? kaj torej ce prva strani ni index.html?

ker namesto indexa sm natipkal krnekaj, pa se zgodi enako...


edit: na podstraneh dela tak kot sem pac zelel, sem pa tisti index pri path vrgel ven, ker ni bilo razlike nobene.

Koda: 
<script>
$(document).ready(function() {
  var mo = false;
  var path = window.location.pathname;

  // če ni prva stran prikažeš menu
  if( path != '/'){
     $("#header").css({"top": "+=612px"});
     mo = true;
  }

// nastaviš evente
   $("#hoverfield").mouseenter(function(){
      if(!mo){ // menu prikažeš samo, če še ni viden
         $("#header").animate({"top": "+=612px"});
         mo = true;
      }
   });

  $("#hoverfield").mouseleave(function(){ 
     if(mo){ // menu skriješ samo, če je  viden
         $("#header").animate({"top": "+=-612px"});
         mo = false;
      }

  });
});
</script>
 
Nazadnje urejeno:
D

doto

Fizikalc
25. jul 2007
3.175
0
36
"index" pomeni to, kar se izpiše za domeno, ko se prikaže prva stran. Če je prva stran na naslovu http://domena.si/prva-stran , potem /index zamenjaš s /prva-stran.

Mo je flag, ki ima vrednost true/false in označuje, ali je menu prikazan ali ne. Namesto tega bi lahko tudi preverjal vrednost top atributa od #header.

V bistvu ta if preveri, če je prikazana prva stran. Če ni avtomatično prikaže meni in nastavi mo na true. S tem preprečiš, da bi se sprožila akcija eventa mouseenter.
 
A

alexx_

nekaj v tem stilu
11. maj 2007
4.237
45
48
offline
evo, se rabim micken pomoci. zanima me ta efekt, mislim da se uporablja jquery. rad bi dinamicno fadein fadeout ozadje, tocno tak kot deluje na tej strani tukaj, torej ko v meniju kliknes na novo stran, se nalozi tudi novo ozadje.

http://www.unitedpixelworkers.com/
 
D

doto

Fizikalc
25. jul 2007
3.175
0
36
Uporablja se position:absolute, se pravi da je vsa vsebina postavljena absolutno na top:0 left:0 z različnimi z-index vrednostmi. Torej en nad drugim. Spodaj imaš vse slike za ozadje, nad vsemi pa je v posebnem layerju ostala html vsebina. Za tranzicijo se pa v jqueryu spremeni vrstni red spodnjih slik, tako da je tista, ki se naj prikaže, na drugem mestu, trenutna ostane na prvem. Potem se pa neredi fade out animacija zgornje slike. Tako dobiš efekt, da se spodnja slika prikaže. Ko je animacija končana pa zgornjo sliko postaviš v ozadje in ji resetiraš opacity parameter.
 
D

disco

Fizikalc
21. jul 2007
1.102
0
36
Da ne odpiram nove teme....rabim, da mi en pogleda spodnjo kodo in pove zakaj ne gre čez validator. Najbrž sem spregledal kakšno bedno foro, ampak očitno sem slep, ker ne vidim nič.

<form id="searchForm" action="$sLinkSearch" method="post">
<input type="text" name="sPhrase" value="$sPhrase" class="input-search" size="20" id="search" maxlength="100" />
<input type="submit" value="$lang[search]" class="submit-search" />
</form>


hvala
 
P

philips

Guru
Osebje foruma
Administrator
17. avg 2007
9.878
698
113
Citat:
Uporabnik disco pravi:
Da ne odpiram nove teme....rabim, da mi en pogleda spodnjo kodo in pove zakaj ne gre čez validator. Najbrž sem spregledal kakšno bedno foro, ampak očitno sem slep, ker ne vidim nič.

<form id="searchForm" action="$sLinkSearch" method="post">
<input type="text" name="sPhrase" value="$sPhrase" class="input-search" size="20" id="search" maxlength="100" />
<input type="submit" value="$lang[search]" class="submit-search" />
</form>


hvala
Klikni za razširitev

Kaj pa ti javi? Če dam samo to kodo (in seveda vse potrebe html,head in body tage) je namreč valid.
Lahko pa probaš dati okrog obeh <input> elementov še en skupni <div>. Ker včasih validator nima rad da so <input> elementi kar znotraj <form>.
 
Za odgovor se prijavite ali registrirajte.
Na vrhu Bottom