CSS Alternatywy dla stylu = "display: none"

Wdrażam bazę komponentów JSF, w której należy zastąpić używane css lub użyć jego domyślnego css. Próbuję ukryć próbując ukryć div i próbowałem ustawić styl klasy rich-panelbar-header-act = "display: none", ale potem wciąga domyślne css. Czy istnieje sposób na dodanie atrybutu stylu do bogatego panelu-paska-nagłówka-aktu (ponieważ muszę zaimplementować klasę), która ukrywa element div? Podaję mój CSS i HTML beloCSS Alternatywy dla stylu = "display: none"

CSS:

element.style { 
} 
Matched CSS Rules 
.rich-panelbar-header-act { 
background-image: url(/spot-main-web/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.GradientA/DATB/eAGLj48PDQ1lBAAJswIe.html); 
background-position: top left; 
background-repeat: repeat-x; 
vertical-align: middle; 
color: #FFF; 
background-color: #555; 
font-size: 11px; 
font-weight: bold; 
font-family: Arial,Verdana,sans-serif; 
} 
.rich-panelbar-header-act { 
border: 0 solid red; 
padding: 0 1px 1px 5px; 
cursor: pointer; 
} 
user agent stylesheetdiv { 
display: block; 
} 
Inherited from body.browserChrome.browserChrome2 
body { 
font: 12px/17px Helvetica, Arial, Verdana; 
}

HTML:

<html version="XHTML 2.0" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head></head> 
<body> 
<div class="rich-panelbar rich-panelbar-b " id="j_id95" style="padding: 0px; height: 400px; width: 500px; none"> 
<div class="rich-panelbar rich-panelbar-interior " id="j_id96" style="none"><div class="rich-panelbar-header " style=";">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-header-act " style=";;;;display: none;">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-content-exterior" style="display: none; width: 100%;"><table cellpadding="0" cellspacing="0" style="height: 100%;" width="100%"><tbody><tr><td class="rich-panelbar-content " style=";"> 

Ajax4jsf is fully integrated into the JSF lifecycle. While other frameworks only 

give you access to the managed bean facility, Ajax4jsf advantages the action and value 

change listeners as well as invokes server-side validators and converters during the 

AJAX request-response cycle.</td></tr></tbody></table></div></div> 
</div> 
</body> 
</html>

Źródło

2013-04-06 c12

Proszę po prostu wpisać kod CSS. Nie rozumiem, dlaczego wyświetlać: żaden nie działa. Użyj bardziej szczegółowego selektora? –

@ExplosionPills posted css/html – c12

width: 0; height: 0;

lub

visibility: hidden;

lub

opacity: 0;

lub

position: absolute; top: -9999px; left: -9999px;

lub po prostu

Źródło

2013-04-06 20:48:25 Kaloyan

Uwaga na temat dostępności: czytniki ekranu zignorują elementy ukryte z 'display: none' oraz' visibility: hidden' (to jest cel tak dobry), ale wciąż odczytują te umieszczone poza oknem podglądu (poprzez negatyw tłumaczenie tekstowe lub tłumaczenie lewe/prawe). Myślę, że jeden czytnik ekranu (czy to VoiceOver?) Zignoruje elementy z 'height: 0', ale inne nie. Strzeż się więc, że niektórzy użytkownicy nadal będą postrzegać Twoją (nie tak) ukrytą zawartość, podczas gdy myślałeś, że tak jest. * Pozycjonowanie poza rzutnią * jest często nazywane '.visually-hidden' w frameworkach CSS i szablonach CMS, aby wyrazić to. – FelipeAls

Powiązane: NIE używaj 'top: -9999px', ponieważ może to spowodować przeskoki obrazu na górę strony i powrót do poprzedniej pozycji, w przypadku osób używających klawiatury do poruszania się po zawartości. "left: -9999px" (lub prawo w językach RTL) jest w porządku, ponieważ nie przesuwa pozycji przewijania w pionie i jest wystarczający. Dotyczy to elementów, które można skupiać (linki, elementy formy zasadniczo), ale ponieważ poperty lewostronne jest wystarczające, lepiej unikać najwyższej całkowicie – FelipeAls

Kilka lat później wydaje się to również interesującą alternatywą: 'line-height: 0; przepełnienie: ukryte; wypełnienie: 0; margin: 0' –

Przypuszczam visibility:hidden; pomoże. :)

Źródło

2013-04-06 20:48:12 FeRtoll

Wykorzystanie ważne, aby zatrzymać go coraz nadpisane -

.rich-panelbar-header-act { 
    display:none !important; 
}

Również można użyć JavaScript jako kopię zapasową -

function hidediv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('DIVIDNAME').style.display = 'none'; 
}else { 
if (document.layers) { // Netscape 4 
document.DIVIDNAME.display = 'hidden'; 
}else { // IE 4 
document.all.DIVIDNAME.style.display = 'none'; 
}}} 
</script>

Źródło

2013-04-06 20:48:28 Vector

Działa to dla mnie ..

!important może” t należy używać w wersji wzmacniacza, więc zamiast display:none; użyj tego:

position: absolute; top: -9999px; left: -9999px;

Źródło

2017-06-28 10:27:45

CSS Alternatywy dla stylu = "display: none"

Odpowiedz

Powiązane problemy