ugrás a tartalomhoz

CSS :active probléma

levipadre · 2007. Jún. 6. (Sze), 01.35
Sziasztok!

Van egy olyan problémám, hogy:
menü-gomboknak saját készítésű képek használtam (különleges betűtípus miatt).Minden megy is, ahogy kell. Hover tulajdonsággal is elláttam, azzal sincs gond, viszont az :active tulajdonság nem akar működni. Próbáltam rá keresni gyógyírt a neten,de semmi, talán ti tudtok segíteni.
A HTML-kód: 
<div id="menu">
               <ul>
                  <li id="bemutList"><a href="index.php?sid=#[sid]&act=bemutatkozas"></a></li>
                  <li id="szolgList"><a href="index.php?sid=#[sid]&act=szolgaltatasok"></a></li>
                  <li id="referList"><a href="index.php?sid=#[sid]&act=referenciak"></a></li>
                  <li id="kapcsList"><a href="index.php?sid=#[sid]&act=kapcsolat"></a></li>
               </ul>
            </div>
A CSS-kód (csak az első linkre):
#menu {
      position: relative;
      top: 45px;
      left: 60px;
      margin-left: auto;
      margin-right: auto;
      float: left;
      width: 259px;
      margin: 0;
      padding: 0;
      display: block;
      }

#menu ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
      width: 259px;
      text-align: left;
}

#menu ul li{
      margin: 0;
      padding: 8px 0px;
}

#bemutList a{
            text-decoration: none;
            width: 173px;
            height: 15px;
            display: block;
            background: url(../images/btn_bemut.jpg) no-repeat;
            }

#bemutList a:hover {
                   background: url(../images/btn_bemut_h.jpg) no-repeat;
                   text-decoration: none;
                   }
                                        
#bemutList a:active { 
                     background: url(../images/btn_bemut_h.jpg) no-repeat;
                     text-decoration: none;
                     }
Hát ez lenne a drágaságom.
A segítséget előre is köszönöm!
‹ settimeout - cleartimeout, de hogyan ? alt='hogyan irja ki -gond ›
 ■
1

és mi változik?

erenon · 2007. Jún. 7. (Cs), 19.00
és elárulnád hogy minek kéne történnie? Ugyanis a hover és az active egyezik.
2

tudom

levipadre · 2007. Jún. 7. (Cs), 20.35
Persze, hogy egyezik a kép, és éppen ez lenne a célom, hogy a background-image a hover-nél és active-nál ugyanaz legyen. Ebből a hover tulajdonság megy is, de ha a pl. a Bemutkozás oldalra (#bemutList) kattintok, a backgrund-image (btn_bemut_h.jpg) nem marad meg, hanem csak az alapértelmezett (btn_bemut.jpg).
Hát ez lenne a célom.
8

biztos nem értjük félre egymást?

Táskai Zsolt · 2007. Jún. 8. (P), 09.34
ebből én azt veszem le, hogy az active-on valami mást értesz, mint a HTML szabvány és a többi hozzászóló. 'active' az a link, amit épp kattintanak, vagy amin tabbal rajta állunk. nekem úgy tűnt, te a rákattintás után akarod megtartani az aktívságot, vagyis valami "you are here" infót akarsz mutatni. én értem félre?
9

khmmm!

levipadre · 2007. Jún. 8. (P), 10.54
Hát, a fórum elején felvetettem annak a lehetőségét, hogy béna vagyok, úgy tűnik, most be is bizonyosodott.
Eddig még ezt nem használtam, csak számomra ez evidensnek tűnt,de hát tévedtem.

Akkor van arra mód, hogy megtartsa azt a bizonyos aktívságot, amelyik oldalon éppen vagyok? Pl. ahogy Tomek73 honlapján van.
11

css

Tomek73 · 2007. Jún. 8. (P), 11.24
Nagyon sok "üres" div elemed van. Ezeket szvsz csökkentsd le.
Amiből sokat tanultam: http://www.maxdesign.com.au/presentation/
http://www.456bereastreet.com/
http://www.positioniseverything.net/
ezek szerintem sok alapötletet adnak az oldal kialakításában, valamint design, accesibility megoldásokban is. Sok linket is tartalmaznak a felmerülő problémák megoldására.
12

Köszi

levipadre · 2007. Jún. 8. (P), 11.35
Köszönöm szépen Tomek, és neked is Zsolt, nagyon kedvesek vagytok. Már ezért érdemes volt beírni. belebújok ezekbe az oldalakba, és megnézem mit tehetek.
3

nekem működik

Tomek73 · 2007. Jún. 7. (Cs), 22.40
Nos én ma csak linuxon tudtam megnézni Firefoxon, két általam készített képpel, tökéletesen működött. Milyen böngészőn nézted? Egyébként a "régi" ajánlás szerint a linkek megadása :link, :visited, :active, :hover sorrendben történjen az egyes böngészők anomáliáinak elkerülése végett.
4

nekem nem

levipadre · 2007. Jún. 8. (P), 00.28
Windows platform: Firefox 2.0.0.4; IE 7.0; Opera 9.0.
Ezeken próbáltam és sehol se működött. Localhoston se produkált semmit. Köszi a tippet a sorrendet illetően, kipróbáltam, de az se segített.
Kezdek nagyon elszomorodni, de azért köszönöm a segítséget. ha valakinek van még ötlete,..... :)
5

windowson is működik

Tomek73 · 2007. Jún. 8. (P), 07.32
Szia, kipróbáltam win alatt is IE6, 7 Opera 9.2, Firefox alól is. Nekem működött. Csak szimplán ez a kód nem működik, vagy az oldalba beillesztve? Sőt úgy is működött, hogy az :active részt kivettem.

Viszont szvsz a linkeknél add meg a linkek neveit, és css-ből tüntesd el, így az elérhetőségi szempontoknak jobban megfelel az oldal.
6

Bocs

Tomek73 · 2007. Jún. 8. (P), 07.41
az álmosságtól nem látok. Tehát szvsz ha ugyanaz az attribútum tartozik több kiválasztóhoz, akkor add meg egy helyen, esetleg bővítsd ki a :focus tulajdonsággal.

#bemutList a:hover, #bemutList a:focus, #bemutList a:active
{
background: url(../images/btn_bemut_h.jpg) no-repeat;
text-decoration: none;
}
7

Ezt is kipróbáltam

levipadre · 2007. Jún. 8. (P), 08.54
Szia Tomek73!

Köszi, hogy ennyit foglalkozol a témával. Megnéztem a honlapodat, és ugyanezt akarom elérni a menüvel, mint te. MOst már kezdem magam teljesen bénának hinni.
Ha van rá időd és kedved, nézz rá a készülő oldalra, ahol szeretném az :active tulajonságot elérni.

www.lwdesign.extra.hu

Itt pedig a teljes kód:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
      <meta http-equiv="content-language" content="hu" />
      <meta name="description" content="kresz-oktatás" />
      <meta name="keywords" content="lwdesign,webdegign,design,honlap,honlapkészítés,logo,céglogo,névjegykártya,készítés,tervezés" />
      <meta name="author" content="Kósa Levente" />
      <meta name="copyright" content="Kósa Levente, 2007" />
<head>
<link rel="shortcut icon" href="images/logo_s.ico" />
<link rel="stylesheet" type="text/css" href="template/style.css" />
<title>LW Design</title>
</head>
   <body>
      <div id="container">
         <div id="header">
            <div id="headerLeft">
            </div>
            <div id="headerRight">
               <div id="headerRightTop">
                  <div id="iconHome">
                     <div id="home">
                        <a href="index.php?sid=#[sid]&act=bemutatkozas"></a>
                     </div>
                  </div>
                  <div id="iconMail">
                     <div id="mail">
                        <a href="mailto: levente.kosa##kukac##yahoo.com"></a>
                     </div>
                  </div>
                  <div id="nameDate">
                     #[maidatum]&nbsp; | &nbsp;<script type="text/javascript" language="javascript" src="template/nevnapok.js"></script>
                  </div>
               </div>
               <div id="headerRightBottom">
                  <div class="fenyujsag">
                     <marquee scrollamount="3">Webdesign, &nbsp;&nbsp;Arculattervezés, &nbsp;&nbsp;Honlap- és logó készítés, &nbsp;&nbsp;Grafika, &nbsp;&nbsp;Névjegykártya tervezés</marquee>
                  </div>
               </div>
            </div>
         </div>
         <div id="main">
               #[details]
            <div id="menu">
               <ul>
                  <li id="bemutList"><a href="index.php?sid=#[sid]&act=bemutatkozas"></a></li>
                  <li id="szolgList"><a href="index.php?sid=#[sid]&act=szolgaltatasok"></a></li>
                  <li id="referList"><a href="index.php?sid=#[sid]&act=referenciak"></a></li>
                  <li id="kapcsList"><a href="index.php?sid=#[sid]&act=kapcsolat"></a></li>
               </ul>
            </div>
         </div>
         <div id="footer">
            <div id="footerLeft">
               Copyright &copy; Levi's Webdesign 2007.
            </div>
            <div id="footerRight">
               All Rights Reserved.
            </div>
         </div>
      </div>
   </body>
</html>
CSS: 
body {
     background: url(../images/background.jpg) repeat;
     font: 14px Arial;
     color: #000;
     }

#container {
           position: absolute;
           top: 25px;
           left: 45px;
           width: 914px;
           margin: 0;
           padding: 0;
           }

#header {
        position: relative;
        top: 0;
        left: 0;
        width: 914px;
        height: 227px;
        margin: 0;
        padding: 0;
        }

#headerLeft {
            position: relative;
            top: 0;
            left: 0;
            width: 259px;
            height: 227px;
            float: left;
            background-image: url(../images/header_left.jpg);
            background-repeat: no-repeat;
            }

#headerRight {
             float: right;
             }

#headerRightTop {
                width: 655px;
                height: 43px;
                background-color: #2c2927;
                }

#iconHome {
          position: absolute;
          left: 270px;
          top: 24px;
          }

#home a {
        width: 22px;
        height: 13px;
        display: block;
        float: left;
        background: url(../images/home.gif) no-repeat;
        text-decoration: none;
        }

#home a:hover {
              width: 22px;
              height: 13px;
              display: block;
              float: left;
              background: url(../images/home_h.gif) no-repeat;
              text-decoration: none;
              }

#iconMail {
          position: absolute;
          left: 300px;
          top: 24px;
          }

#mail a {
        width: 22px;
        height: 13px;
        display: block;
        background: url(../images/mail.gif) no-repeat;
        text-decoration: none;
        }

#mail a:hover {
              width: 22px;
              height: 13px;
              display: block;
              background: url(../images/mail_h.gif) no-repeat;
              text-decoration: none;
              }

#nameDate {
          position: absolute;
          text-align: right;
          right: 5px;
          top: 24px;
          font: 11px Arial;
          color: #c3c1c2;
          }

#headerRightBottom {
                   width: 655px;
                   height: 184px;
                   background-image: url(../images/header_right_bottom.jpg);
                   background-repeat: no-repeat;
                   }
                   
div.fenyujsag
            {
            position: absolute;
            top: 150px;
            width: 655px;
            height: 30px;
            margin: 0 0;
            background-color: #fff;
            border: none;
            /* for IE */
            filter:alpha(opacity=70);
            /* CSS3 standard */
            opacity:0.7;
            /* for Mozilla */
            -moz-opacity:0.7;
            }
div.fenyujsag marquee {
                      position: relative;
                      top: 8px;
                      margin: 0;
                      padding: 0;
                      font: 12px MS Serif, Arial;
                      font-weight: bold;
                      color: #000;
                      }

#main {
      position: relative;
      top: 0;
      left: 0;
      float: right;
      width: 914px;
      text-align: justify;
      padding: 0;
      background-image: url(../images/content.jpg);
      background-repeat: repeat-y;
      }

#content {
         float: right;
         width: 590px;
         min-height: 290px;
         padding: 0;
         margin-right: 30px;
         margin-top: 30px;
         margin-bottom: 15px;
         }

#menu {
      position: relative;
      top: 45px;
      left: 60px;
      margin-left: auto;
      margin-right: auto;
      float: left;
      width: 259px;
      margin: 0;
      padding: 0;
      display: block;
      }

#menu ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
      width: 259px;
      text-align: left;
}

#menu ul li{
      margin: 0;
      padding: 8px 0px;
}

#bemutList a{
            text-decoration: none;
            width: 173px;
            height: 15px;
            display: block;
            background: url(../images/btn_bemut.jpg) no-repeat;
            }

#bemutList a:hover, #bemutList a:focus, #bemutList a:active{
                                                           background: url(../images/btn_bemut_h.jpg) no-repeat;
                                                           text-decoration: none;
                                                           }

#szolgList a{
            text-decoration: none;
            width: 173px;
            height: 15px;
            display: block;
            background: url(../images/btn_szolg.jpg) no-repeat;
}

#szolgList a:hover, #szolgList a:focus, #szolgList a:active{
                                                           background: url(../images/btn_szolg_h.jpg) no-repeat;
                                                           text-decoration: none;
                                                           }

#referList a{
            text-decoration: none;
            width: 173px;
            height: 15px;
            display: block;
            background: url(../images/btn_refer.jpg) no-repeat;
            }

#referList a:hover, #referList a:focus, #referList a:active {
                                                            background: url(../images/btn_refer_h.jpg) no-repeat;
                                                            text-decoration: none;
                                                            }

#kapcsList a{
            text-decoration: none;
            width: 173px;
            height: 15px;
            display: block;
            background: url(../images/btn_kapcs.jpg) no-repeat;
            }

##kapcsList a:hover, ##kapcsList a:focus, ##kapcsList a:active{
                                                           background: url(../images/btn_kapcs_h.jpg) no-repeat;
                                                           text-decoration: none;
                                                           }

#footer {
        position: relative;
        top: 0;
        left: 0;
        width: 914px;
        height: 29px;
        clear: both;
        background-color: #2c2927;
        margin-bottom: 20px;
        }
        
#footerLeft {
            position: relative;
            top: 7px;
            left: 295px;
            float: left;
            color: #c3c1c2;
            font-size: 11px;
            font-weight: bold;
            }

#footerRight {
              position: relative;
              top: 7px;
              right: 30px;
              text-align: right;
              color: #c3c1c2;
              font-size: 11px;
              font-weight: bold;
              }

.refImages {
           text-align: center;
           border: none;
           }

.refImages img {
               opacity: 0.7;
               filter:alpha(opacity=70);
               -moz-opacity: 0.7;
               border: 1px solid transparent;
               margin: 12px;
               }

.refImages img:hover {
                     opacity: 1;
                     filter:alpha(opacity=100);
                     -moz-opacity: 1;
                     border: 1px solid #999;
                     }

table {
      width: 590px;
      border: none;
      padding: 0;
      margin: 0;
      }

td {
   width: 290px;
   border-right: 1px dotted #999;
   text-align: left;
   }

td a {
     text-decoration: underline;
     font-weight: 900;
     color: #000;
     }
Még lesz benne preload image is, azt most ne nézd légyszi!
Amúgy jó az oldalad Tomek:)
Köszi!
10

Hoppá

Tomek73 · 2007. Jún. 8. (P), 11.09
Zsolt írásából leesett, hogy mi a valós probléma. Mire elkezdtem írni a választ, már írtad, hogy érted.

Attól függően, hogy kattintható linknek akarod-e meghagyni pl hozzáadsz egy span tag-et, aminek tulajdonságnak ugyanazt adod meg, mint a :hover-nek.
13

megint én

levipadre · 2007. Jún. 8. (P), 14.17
Tudom már a ... tele van, ahogy nekem is, de nem tudom megoldani ezt a problémát.
Ezt a hatást szeretném elérni(vagyis ha a Bemutatkozás oldalon vagyok, a Bemutatkozás link legyen aktív, ha meg pl. a Kapcsolat oldalon,akkor pedig a Kapcsolat link legyen aktív.)
Tudom, ezt nektek nem kell magyaráznom, inkább csak próbálok pontosítani.

http://img505.imageshack.us/img505/2329/activexb1.jpg

Légyszíves, utoljára segítsetek, mit-hova?
14

Nos

Tomek73 · 2007. Jún. 8. (P), 14.33
ez is egy megoldás:

#bemutList a{
text-decoration: none;
width: 173px;
height: 15px;
display: block;
background: url(../images/btn_bemut.jpg) no-repeat;
text-indent: -9999px;
}

#bemutList span {
text-decoration: none;
width: 173px;
height: 15px;
display: block;
background: url(../images/btn_bemut_h.jpg) no-repeat;
text-indent: -9999px;
}
#bemutList a:hover, #bemutList a:focus, #bemutList a:active
{
background: url(../images/btn_bemut_h.jpg) no-repeat;
text-decoration: none;
}

<div id="menu">
<ul>
<li id="bemutList"><span>Bemutatkozás</span></li>
<li id="szolgList"><a href="index.php?sid=#[sid]&act=szolgaltatasok">Szolgáltatások</a></li>
<li id="referList"><a href="index.php?sid=#[sid]&act=referenciak">Referenciák</a></li>
<li id="kapcsList"><a href="index.php?sid=#[sid]&act=kapcsolat">Kapcsolat</a></li>
</ul>
</div>
18

talán

levipadre · 2007. Jún. 8. (P), 15.29
én ezt: 
<div id="menu">
               <ul>
                  <li id="bemutList"><a href="index.php?sid=#[sid]&act=bemutatkozas"></a></li>
                  <li id="szolgList"><a href="index.php?sid=#[sid]&act=szolgaltatasok"></a></li>
                  <li id="referList"><a href="index.php?sid=#[sid]&act=referenciak"></a></li>
                  <li id="kapcsList"><a href="index.php?sid=#[sid]&act=kapcsolat"></a></li>
               </ul>
            </div>
nem alakíthatom át ezzé:
<div id="menu">
<ul>
<li id="bemutList"><span>Bemutatkozás</span></li>
<li id="szolgList"><a href="index.php?sid=#[sid]&act=szolgaltatasok">Szolgáltatások</a></li>
<li id="referList"><a href="index.php?sid=#[sid]&act=referenciak">Referenciák</a></li>
<li id="kapcsList"><a href="index.php?sid=#[sid]&act=kapcsolat">Kapcsolat</a></li>
</ul>
</div>
,vagyis nem vehetem ki a href-et, mivel ez az index.htm, és e mögött php fut. Az egész rendszer sablonkezelésű. Van egyetlen egy oldal (index.htm) tartalom nélkül,de teljes vázzal, és vannak a tartalmi oldalak (bemutatkozas.htm;kapcsolat.htm stb.),amiket meghív a php.

E helyére megy a csupasz tartalom: #[details] --->ez fent találáható,a teljes kódleírásban

Ha több oldalam lenne lenne, kivehetném az aktuális oldalból a href-et.

DE: talán még azzal próbálkozhatok, hogy a tartalomba beleveszem a menüket is, és így az is vele együtt fog változni.
20

:))))))

levipadre · 2007. Jún. 8. (P), 15.57
OK. Sikerült. Kipróbáltam azt, amit legutóbb írtam. Bár nem így szerettem volna,de a azokba az oldalakba, amelyekben a tartalom van, belekerült a menü is. De a span tényleg kellett hozzá.

Eredmény: www.lwdesign.extra.hu

Nagyon szépen köszönöm mindenkinek. A prog.hu-n pontokat szoktak adni a legjobbnak, ha itt is így lenne, tőlem mindenki kapna fejenként legalább 100 pontot.
22

baj van: nincs szöveges link

Táskai Zsolt · 2007. Jún. 8. (P), 17.13
várj-várj-várj. most átestél a ló túlsó oldalára. már a taralom is CSS-ben van meghatározva. nevezetesen nincs szöveges tartalma a linkeknek!
23

?

levipadre · 2007. Jún. 8. (P), 18.17
A link szöveges tartalma alatt a link nevét érted?
Ha igen,akkor azért nincs, mert a background-image egy olyan kép,melyen a szöveg is rajta van. Azért kellett, mert különleges betűtípus kell hozzá.

Ha nem erre gondoltál,akkor nem tudom mire.
24

Linkek

Tomek73 · 2007. Jún. 8. (P), 19.35
Szöveges tartalma eddig sem volt, ezt jeleztem is valamelyik hozzászólásomban, ezért írtam egy olyan megoldást, ahol van szövek, pl: Bemutatkozás, de css-ben el van tüntetve. Erre több megoldás is van, ez csak az egyik.
Jó ha van tényleges szöveg is a linkekben, mert a szöveg alapú böngészők is "látják". Én biztos úgy oldottam volna meg ennek a design-nak a megvalósítását, hogy a szöveg látszik, és a hátteret megadom színnel, csak az előtte lévő nyilat raktam volna be css háttérképként. Ezzel a megoldással biztosíthatod egyszerűen a szövegek nagyíthatóságát.
25

Igaz.

levipadre · 2007. Jún. 8. (P), 21.04
Teljesen igazad van, én is így szoktam csinálni,de ha egy olyan betűtípusod van, hogy "Zrinc", akkor azt biztosan nem fogja ismerni egyik böngésző sem. Nem szoktam különleges fontokat alkalmazni,de ez most egy ilyen kivétel volt.
15

id vagy class

gex · 2007. Jún. 8. (P), 14.52
mivel php-ból generálod az oldalt, nem túl sok munka az aktuális linknek (bemutatkozás oldalon a bemutatkozásnak, kapcsolat oldalon a kapcsolatnak) egy id-t vagy class-t adni. az ehhez tartozó stílust pedig könnyedén megadhatod a cssben, pl:

<ul id="menu">
    <li><a href="#">Bemutatkozás</a></li>
    <li><a href="#" class="selected">Kapcsolat</a></li>
</ul>


#menu a { background: white; }
#menu a.selected { background: gray; }
16

nem jó

Táskai Zsolt · 2007. Jún. 8. (P), 14.58
ez a módszer nagyon egyszerű, de nem jó. ugyanis lesz egy linked az aktuális oldalra, ami megzavarhatja a felhasználót ("akkor hol vagyok most?").

Tamás megoldása szebb.
17

szerintem meg igen

gex · 2007. Jún. 8. (P), 15.20
mivel pont az a lényeg, hogy hogyan tudjuk megkülönböztetni az aktuális linket a többitől, nem hiszem hogy nagyon megzavarná a felhasználót.
a kérdezőnek - én úgy érzem - az egyszerűbb módszer jobban fekszik majd.

ha eltekintünk a megjelenítéstől és egy szimpla html oldalt veszünk alapul, én bizony hamar eltévednék rajta, ha csak az a és span elemeket váltogatnák a menüben. ha pedig láthatóan (css, design segítségével) meg van jelölve az aktuális menüpont, szvsz igazából mindegy, hogy a vagy span elem van a háttérben.
igazából jó ötletnek tartom, de nem hiszem, hogy ezen kell múlnia egy navigációnak.
21

valóban a feedback a lényeg

Táskai Zsolt · 2007. Jún. 8. (P), 17.08
valóban nem az a lényeg, hogy A vagy SPAN, hanem hogy jól látsszon, hogy "itt vagyok" és "ide mehetek". csak az egérrel kaszáló látogatónak segít pluszban az A mellőzése.
19

Egyszerű megoldás

attlad · 2007. Jún. 8. (P), 15.43
Így a legegyszerűbb, mert szerver oldalon könnyebben megadható a BODY elemnek az éppen megfelelő osztály mint a menü szerkezetét variálni.

<style type="text/css">
.introductionPage #navigationMenu #introduction a, .servicesPage #navigationMenu #services a {
	background: gray;
	color: #000;
	cursor: default;
	text-decoration: none;
}
</style>

<body class="servicesPage">
<ul id="navigationMenu">
	<li id="introduction"><a href="bemutatkozas">Bemutatkozás</a></li>
	<li id="services"><a href="szolgaltatasok">Szolgáltatások</a></li>
</ul>