CSS írásban segítség?
Az a helyzet, hogy egy ideje már szenvedek CSS írással, mert nem értek hozzá, de azért nagyjából összehoztam, amit akartam. Egy apróság hiányzik. A weboldalam felső menüsorának a háttere sötét narancssárga. Azt szeretném elérni, ha az egeret ráviszem akkor a háttér megváltozzon világosabbra. Az almenüpontoknál ez sikerült is, de a fő menüsorban nem tudom, mit és hova kellene írni a CSS-ben. Tudna valaki segíteni benne?
A menü sötét alapszíne: #EA9736
Ha ráviszük az egeret, ilyen kellene, hogy legyen: #F1A54C
A betű mindig fehér.
Kommentárban bemásolom a CSS menüre vonatkozó részét. Nagyon hálás lennék, ha valaki meg tudná mondani, mit hova kellene beírnom, hogy elérjem a célom.
Gondolom valami "hover" dolog kéne, de tényleg nem értek hozzá, csoda, hogy eddig összehoztam, amit tudtam.
/* header menu */
/*
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at [link]
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements. */
/* main menu - right aligned */
.menu-box ul {
float: right;
list-style-type: none;
margin: 0;
text-align: right;
}
.menu-box ul ul {
background: white;
border-top: 1px white;
width: 212px;
z-index: 110;
}
.menu-box ul li {
float: left;
height: 108px;
line-height: 108px;
margin-left: 37px;
position: relative;
}
.menu-box ul ul li {
border-bottom: 1px white;
display: block;
height: auto;
line-height: 39px;
margin: 0;
min-height: 39px;
position: relative;
width: 212px;
}
#wrapper #wrapper-header .menu-box ul ul .last-menu-item {
border-bottom: white;
}
.menu-box a,
.menu-box a:visited {
color: white;
display: block;
float: left;
font-size: 15px;
font-weight: normal;
height: 110px;
line-height: 110px;
text-align: right;
text-decoration: none;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-o-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}
#wrapper-header .menu-box ul ul a,
#wrapper-header .menu-box ul ul a:visited {
color: white;
display: block;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 39px;
margin: 0;
min-height: 39px;
padding-right: 12px;
text-align: right;
width: 200px;
}
#wrapper-header .menu-box ul ul ul a,
#wrapper-header .menu-box ul ul ul a:visited {
color: white;
}
.menu-box a:hover,
.menu-box :hover > a {
color: white;
}
#wrapper-header .menu-box ul ul a:hover,
#wrapper-header .menu-box ul ul :hover > a {
background-color: white;
border-bottom: white;
color: white;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
-o-transition: background-color 1s ease;
-ms-transition: background-color 1s ease;
transition: background-color 1s ease;
}
.menu-box ul ul {
height: 0;
position: absolute;
right: 0px;
top: 109px;
visibility: hidden;
width: 212px;
}
.menu-box ul ul ul {
left: -212px;
top: -1px;
width: 212px;
}
.menu-box ul li:hover ul,
.menu-box ul a:hover ul,
.top-navigation ul li:hover ul,
.top-navigation ul a:hover ul {
height: auto;
padding-bottom: 0;
visibility: visible;
}
.menu-box ul :hover ul ul,
.top-navigation ul :hover ul ul {
visibility: hidden;
}
.menu-box ul :hover ul :hover ul ul,
.top-navigation ul :hover ul :hover ul ul {
visibility: hidden;
}
.menu-box ul :hover ul :hover ul,
.top-navigation ul :hover ul :hover ul {
visibility: visible;
}
.menu-box ul :hover ul :hover ul :hover ul,
.top-navigation ul :hover ul :hover ul :hover ul {
visibility: visible;
}
#wrapper-header .menu-box .current-menu-item > a,
#wrapper-header .menu-box .current-menu-ancestor > a,
#wrapper-header .menu-box .current_page_item > a,
#wrapper-header .menu-box .current-page-ancestor > a {
color: white;
}
#wrapper-header .menu-box .sub-menu .current-menu-item > a,
#wrapper-header .menu-box .sub-menu .current-menu-ancestor > a,
#wrapper-header .menu-box .sub-menu .current_page_item > a,
#wrapper-header .menu-box .sub-menu .current-page-ancestor > a {
color: white;
}
/* main menu - centered */
.menu-panel-wrapper {
background: #EA9736;
border-bottom: 1px white;
}
.menu-panel {
min-height: 45px;
text-align: center;
width: 100%;
z-index: 200;
}
.menu-panel ul {
list-style-type: none;
margin: 0;
position: relative;
text-align: center;
}
.menu-panel ul ul {
background: #EA9736;
border-top: 1px white;
width: 212px;
z-index: 110;
}
.menu-panel ul li {
display: inline-block;
height: 45px;
line-height: 45px;
margin: 0;
position: relative;
vertical-align: bottom;
}
.menu-panel ul ul li {
border-bottom: 1px white;
display: block;
height: auto;
line-height: 39px;
margin: 0;
min-height: 39px;
position: relative;
width: 212px;
}
#wrapper #wrapper-header .menu-panel ul ul .last-menu-item {
border-bottom: white;
}
.menu-panel a,
.menu-panel a:visited {
color: white;
float: left;
font-size: 15px;
font-weight: normal;
height: 45px;
line-height: 45px;
padding: 0 16px;
text-decoration: none;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-o-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}
#wrapper-header .menu-panel ul ul a,
#wrapper-header .menu-panel ul ul a:visited {
color: white !important;
display: block;
float: none;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 39px;
margin: 0;
min-height: 39px;
padding: 0 0 0 16px;
text-align: left;
width: 196px;
}
#wrapper-header .menu-panel ul ul ul a,
#wrapper-header .menu-panel ul ul ul a:visited {
color: white !important;
}
.menu-panel a:hover,
.menu-panel :hover > a {
color: white;
}
#wrapper-header .menu-panel ul ul a:hover,
#wrapper-header .menu-panel ul ul :hover > a {
background-color: #F1A54C!important;
color: white !important;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
-o-transition: background-color 1s ease;
-ms-transition: background-color 1s ease;
transition: background-color 1s ease;
}
.menu-panel ul ul {
height: 0;
position: absolute;
left: 0px;
top: 44px;
visibility: hidden;
width: 212px;
}
.menu-panel ul ul ul {
left: 212px;
top: -1px;
width: 212px;
}
.menu-panel ul li:hover ul,
.menu-panel ul a:hover ul {
height: auto;
padding-bottom: 0;
visibility: visible;
}
.menu-panel ul :hover ul ul {
visibility: hidden;
}
.menu-panel ul :hover ul :hover ul ul {
visibility: hidden;
}
.menu-panel ul :hover ul :hover ul {
visibility: visible;
}
.menu-panel ul :hover ul :hover ul :hover ul {
visibility: visible;
}
#wrapper-header .menu-panel .current-menu-item > a,
#wrapper-header .menu-panel .current-menu-ancestor > a,
#wrapper-header .menu-panel .current_page_item > a,
#wrapper-header .menu-panel .current-page-ancestor > a {
color: white;
}
#wrapper-header .menu-panel .sub-menu .current-menu-item > a,
#wrapper-header .menu-panel .sub-menu .current-menu-ancestor > a,
#wrapper-header .menu-panel .sub-menu .current_page_item > a,
#wrapper-header .menu-panel .sub-menu .current-page-ancestor > a {
color: white;
}
#wrapper .sticky-nav {
background-color: #F1A54C;
position: fixed;
top: 0;
z-index: 200;
}
.admin-bar .sticky-nav {
top: 32px !important;
}
.selectnav {
display: none;
}
/* main content
-------------------------------------------------------------- */
válasza:Két helyen jelenik meg a szín: .menu-panel-wrapper és .menu-panel ul ul, amik közül mintha csak a második változna hover hatására. Vagyis:
#wrapper-header .menu-panel ul ul a:hover,
#wrapper-header .menu-panel ul ul :hover > a
helyett
.menu-panel-wrapper,
#wrapper-header .menu-panel ul ul a:hover,
#wrapper-header .menu-panel ul ul :hover > a
a szelektor. De nem lehetne ezt a túlbonyolított kódot valamivel átláthatóbbá tenni?
válasza:Ha nem értesz hozzá, akkor minek foglalkozol vele?
Egyébként meg, nev:hover {background-color:#F1A54C;}
A "nev" a hoverben az az elem/tag/id/class vagy amit beleírtál, amire rakellene vinni az egeret.
Mert kell egy weboldal, de nem akarok/tudok fizetni érte. Az ingyenes sablonos dolgok pedig gagyik vagy a kellő funkciók túl drágák. Így marad, hogy szenvedek a CSS-sel.
Egyébként köszönöm a válaszokat!
De még mindig nem teljesen tiszta. A bemásolt CSS részen belül hova kellene írnom? És csak ennyit, amit írtál? Illetve a "nev" helyére ha bírom, ahová rá kellene vinni az egeret. az ugye a teljes főmenü. Szóval a főmenüsor minden menüpontjának nevét kéne egyesével így megírni vagy a főmenüsor nevét írjam be (ami main menu - centered (?) ?
Ez ugye a főmenü alapszíne:
/* main menu - centered */
.menu-panel-wrapper {
background: #EA9736;
Ez az almenüpontoké:
.menu-panel ul ul {
background: #EA9736;
Ez meg az almenüké, mikor ráviszem az egeret, hogy a háttér megváltozzon:
#wrapper-header .menu-panel ul ul a:hover,
#wrapper-header .menu-panel ul ul :hover > a {
background-color: #F1A54C!important;
color: white !important;
Na és ez hiányzik a főmenünél, de nem tudom, mit kéne beírnom, mert ha ennek mintájára ugyanezt bemásolom, csak a nevét megváltoztatom, akkor nem lesz jó.
Sajnos teljesen hülye vagyok ehhez, ezeket is csak innen-onnan másolgattam össze, ezért ilyen bonyolult, de csak így tudtam megcsinálni, ahogy elterveztem.
válasza:Ezzel kezdtem, de mivel senki nem javított ki, hogy lehagytam a szelektor második felét, persze, hogy nem működött. De ezek szerint nem próbáltad ki te sem.
Ez:
#wrapper-header .menu-panel ul ul a:hover,
#wrapper-header .menu-panel ul ul :hover > a
helyett ez:
.menu-panel-wrapper:hover,
#wrapper-header .menu-panel ul ul a:hover,
#wrapper-header .menu-panel ul ul :hover > a
(mivel a tulajdonságok már léteznek, nem kell átírnod csak a szelektort).
De ha nincs pénz, akkor tanulj! Valamit valamiért.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!