CSS Alternative a style = "display: none"

Sto implementando una base di componenti JSF in cui devi eseguire l'override del css in uso o utilizzerà il suo css predefinito. Sto cercando di nascondere cercando di nascondere il div e ho provato a impostare lo stile di classe rich-panelbar-header-act = "display: none", ma poi inserisce il suo css predefinito. C'è un modo per aggiungere un attributo di stile a rich-panelbar-header-act (dato che devo implementare la classe) che nasconde il div? Ho incluso il mio CSS e HTML beloCSS Alternative a style = "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>

fonte

2013-04-06 c12

Si prega di inviare solo il codice CSS. Non capisco perché display: nessuno non funziona. Usa un selettore più specifico? –

@ExplosionPills postato css/html – c12

width: 0; height: 0;

visibility: hidden;

opacity: 0;

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

o semplicemente

fonte

2013-04-06 20:48:25 Kaloyan

Nota sull'accessibilità: gli screen reader ignoreranno gli elementi nascosti con 'display: none' e' visibility: hidden' (che è l'intento così fine) ma continueranno a leggere quelli posizionati al di fuori del viewport (via negativo traduzione del testo o sinistra/destra). Penso che uno screen reader (è VoiceOver?) Ignorerà gli elementi con 'height: 0' ma altri no. Quindi, fai attenzione che alcuni utenti continueranno a percepire il tuo contenuto (non così) nascosto mentre tu pensi che sia. * Posizionato fuori dal viewport * è spesso chiamato '.visually-hidden' nei framework CSS e nei template CMS per esprimere questo. – FelipeAls

Correlati: NON usare 'top: -9999px' poiché potrebbe causare salti visivi nella parte superiore della pagina e tornare alla posizione precedente per le persone che usano la tastiera per navigare nei tuoi contenuti. 'left: -9999px' (o destra nelle lingue RTL) va bene poiché non sposta la posizione di scorrimento verticalmente ed è sufficiente. Ciò riguarda gli elementi focalizzabili (collegamenti, essenzialmente gli elementi del modulo), ma siccome la trama sinistra è sufficiente, meglio evitare la parte superiore completamente – FelipeAls

Pochi anni dopo questa sembra essere un'alternativa interessante anche: 'line-height: 0; overflow: hidden; padding: 0; margin: 0 ' –

suppongo visibility:hidden; vi aiuterà. :)

fonte

2013-04-06 20:48:12 FeRtoll

Usa importante per fermarlo ottenere sovrascritto -

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

Inoltre è possibile utilizzare JavaScript come back up -

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>

fonte

2013-04-06 20:48:28 Vector

Questo funziona per me ..

!important puo' essere usato nella versione di amplificatore così invece di display:none; utilizzare questo:

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

fonte

2017-06-28 10:27:45

CSS Alternative a style = "display: none"

risposta

Problemi correlati