Css+menu -> link, a, hover

(Maryo) #1

witam

mam menu zrobione w cssie. pod linkiem tekstowym jest czarny jpg, po najechaniu zmienia sie na niebieski a po kliknieciu jest zielony. wszystko ładnie dziala w operze a w IE i FF zielonego koloru nie ma.

o co moze biegac?

(adpawl) #2

Wklej kod, bo w zgadywanie to my się bawić nie będziemy…

(Maryo) #3

w htmlu:

Home

…

w css:

#p7TBM {

font-family: Arial, Helvetica, sans-serif;

line-height: normal !important;

}

#p7TBMroot {

background-image: url(…/images/bevel_bottom.jpg);

background-repeat: repeat-x;

padding: 0 0 15px 0;

background-position: left bottom;

}

#p7TBMrootbox {

background: url(…/images/menu1.jpg);

}

#p7TBMroot img {

border: 0;

}

#p7TBMroot ul {

margin: 0 auto;

padding: 0;

background: url(…/images/menu1.jpg);

width: 770px;

font-size: .9em;

}

#p7TBMroot li {

list-style-type: none;

display: inline;

}

#p7TBMroot li a {

float: left;

}

#p7TBMroot .p7TBMtext li a {

color: #CCCCCC;

padding: .2em 10px;

text-decoration: none;

line-height: 1.2em;

}

#p7TBMroot .p7TBMtext .p7TBMdown, #p7TBMroot .p7TBMtext .p7TBMdown:hover #p7TBMt01:hover {

color: #FFFFFF!important;

background: url(…/images/menu3.jpg)!important;

font-weight: bold;

}

/*

The Root Level Hover. This also locks the Hover state while

the root item’s associated sub-menu is visible.

DO NOT CHANGE SELECTOR NAMES*/

.p7ie6Fix:active,

#p7TBMroot .p7TBMtext .p7TBMon,

#p7TBMroot .p7TBMtext li a:focus,

#p7TBMroot .p7TBMtext li a:active {

color: #FFFFFF;

background: url(…/images/menu2.jpg);

}

#p7TBMsubwrap{

font-size: .8em;

position: relative;

height: auto;

margin: 0 auto;

width: 770px;

}

.p7TBMsub {

position: absolute;

visibility:hidden;

left: 0;

top: 0;

width: 100%;

}

.p7TBMsubbox {

padding: 0;

}

.p7TBMsub ul {

margin: 0 auto;

padding: 0 0 18px 0;

background-image: url(img/iebfix.gif);

background-color: transparent;

}

.p7TBMsub li {

list-style-type: none;

display: inline;

white-space: nowrap;

}

.p7TBMsub li a {

color: #959595;

padding: 2px 10px;

display: block;

float: left;

text-decoration: none;

border: 1px solid #CCCCCC;

margin: 0 .5em 0 0;

}

.p7TBMsub li a:hover,

.p7TBMsub li a:active,

.p7TBMsub li a:focus {

color: #000000;

border-color: #6B6B6B;

}

#p7TBM br {

clear: both;

height: 0;

line-height: 0.0;

font-size: 1px;

}

/* current marker style */

.p7TBMsub .p7TBMmark,

.p7TBMsub .p7TBMmark:hover,

.p7TBMsub .p7TBMmark:active,

.p7TBMsub .p7TBMmark:focus {

color: #333333;

font-weight: bold;

}

(adpawl) #4

test test

(Maryo) #5

kurcze nie moge tego ustawić za nic.

mam 3 jpgi i robie aby tak bylo:

link pod sobą ma img1.jpg

najezdzany link ma pod sobą img2.jpg

naciskany linka ma img2.jpg

na tej stronie na ktorej jestesmy link ma img3.jpg

jak to zrobić?

Złączono Posta : 15.09.2006 (Pią) 23:18

znalazlem problem w moim kodzie. nie mozna uzywac jpg a tylko kolory np #ffffff

#p7TBMt01:hover {

background: url(…/images/menu3.jpg)!important;

dlaczego kolor # dziala w kazdej przeglądarce a jpg tylko w operze??

(Skr3czu) #6

bo to zależy od przęgladarki :] i to jeden z największych problemów ponieważ coś działa poprawnie pod IE ,a nie działa pod Opere a jak to naprawisz i działa pod opere i pod IE to znowu nie działa pod mozille i tak cały czas ;/

(Maniooo666) #7

Witam,

Wszystko (prawie) się da, trzeba:

  1. pogooglać.

  2. zadać pytanie w taki sposób, aby było zrozumiałem.

Moja interpretacja - pogooglaj na css rollover.

(Maryo) #8

dokladnie chodzi o takie menu jak na tej stronie:

http://www.projectseven.com/tutorials/navigation/index.htm

(Maniooo666) #9

Witam,

samo podświetlanie pozycji w menu zrobisz przy pomocy czystego CSS:

http://www.kurshtml.boo.pl/style/pseudoklasy.html

Co do wyskakujących pozycji pod spodem - nie wiem.

(Kubarek) #10