CSS – Anzeige: keine; funktioniert nicht

Lesezeit: 8 Minuten

Ich versuche, ein mobiles Stylesheet zu entwickeln und möchte in diesem Stylesheet ein bestimmtes Div entfernen.

Im HTML-Code des Div füge ich eine ID namens „tfl“ ein, wie unten gezeigt:

<div id="tfl" style="display: block; width: 187px; height: 260px; font-family: Verdana, Arial, Helvetica, sans-serif !important; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/widget-panel.gif) #fff no-repeat; font-size: 11px; border: 1px solid #103994; border-radius: 4px; box-shadow: 2px 2px 3px 1px #ccc;">
            <div style="display: block; padding: 30px 0 15px 0;">
                <h2 style="color: rgb(36, 66, 102); text-align: center; display: block; font-size: 15px; font-family: arial; border: 0; margin-bottom: 1em; margin-top: 0; font-weight: bold !important; background: 0; padding: 0">Journey Planner</h2>
                <form action="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2" id="jpForm" method="post" target="tfl" style="margin: 5px 0 0 0 !important; padding: 0 !important;">
                    <input type="hidden" name="language" value="en" />
                    <!-- in language = english -->
                    <input type="hidden" name="execInst" value="" /><input type="hidden" name="sessionID" value="0" />
                    <!-- to start a new session on JP the sessionID has to be 0 -->
                    <input type="hidden" name="ptOptionsActive" value="-1" />
                    <!-- all pt options are active -->
                    <input type="hidden" name="place_origin" value="London" />
                    <!-- London is a hidden parameter for the origin location -->
                    <input type="hidden" name="place_destination" value="London" /><div style="padding-right: 15px; padding-left: 15px">
                        <input type="text" name="name_origin" style="width: 155px !important; padding: 1px" value="From" /><select style="width: 155px !important; margin: 0 !important;" name="type_origin"><option value="stop">Station or stop</option>
                            <option value="locator">Postcode</option>
                            <option value="address">Address</option>
                            <option value="poi">Place of interest</option>
                        </select>
                    </div>
                    <div style="margin-top: 10px; margin-bottom: 4px; padding-right: 15px; padding-left: 15px; padding-bottom: 15px; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom;">
                        <input type="text" name="name_destination" style="width: 100% !important; padding: 1px" value="232 Kingsbury Road (NW9)" /><select style="width: 155px !important; margin-top: 0 !important;" name="type_destination"><option value="stop">Station or stop</option>
                            <option value="locator">Postcode</option>
                            <option value="address" selected="selected">Address</option>
                            <option value="poi">Place of interest</option>
                        </select>
                    </div>
                    <div style="background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom; padding-bottom: 2px; padding-top: 2px; overflow: hidden; margin-bottom: 8px">
                        <div style="clear: both; background: url(http://www.tfl.gov.uk/tfl-global/images/options-icons.gif) no-repeat 9.5em 0; height: 30px; padding-right: 15px; padding-left: 15px"><a style="text-decoration: none; color: #113B92; font-size: 11px; white-space: nowrap; display: inline-block; padding: 4px 0 5px 0; width: 155px" target="tfl" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&amp;ptOptionsActive=1" onclick="javascript:document.getElementById('jpForm').ptOptionsActive.value="1";document.getElementById('jpForm').execInst.value="readOnly";document.getElementById('jpForm').submit(); return false">More options</a></div>
                    </div>
                    <div style="text-align: center;">
                        <input type="submit" title="Leave now" value="Leave now" style="border-style: none; background-color: #157DB9; display: inline-block; padding: 4px 11px; color: #fff; text-decoration: none; border-radius: 3px; border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font: bold  13px/1 Arial,Helvetica,sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); line-height: 1;" />
                    </div>
                </form>
            </div>
        </div>

Dieser Code stammt nicht von mir, da es sich um einen eingebetteten Code handelt, der von der TFL-Website bereitgestellt wird.

Ich möchte dieses Div ausblenden, um es für einen mobilen Benutzer benutzerfreundlicher zu machen. Ich habe Folgendes getan:

#tfl {
display: none;
}

Dieser Code funktioniert bei mir jedoch nicht, und ich habe ihn sogar auf den entsprechenden Header davor angewendet, und das hat nicht funktioniert, wie noch einmal gezeigt:

h3.tfl {
display: none;
}

Was ist hier das Problem? Dieser Code funktionierte auf einer anderen Seite eines zugeordneten Bildes. (Ich kann weder jQuery noch JavaScript verwenden (Uni-Zuordnung mit Blick auf CSS)).

  • Ist das eine Medienabfrage? Haben Sie versucht, einen spezifischeren Selektor zu verwenden oder !important zu display:none hinzuzufügen? Übrigens sucht h3.tfl nach einem h3 mit der Klasse tfl darauf. Du meinst vielleicht h3 .tfl

    – Kai Qing

    18. Dezember 2013 um 16:45 Uhr

  • Haben Sie versucht, Sichtbarkeit: versteckt zu Ihrer Klasse hinzuzufügen? Normalerweise verwende ich beides. Ändern Sie möglicherweise die Farbe, um sicherzustellen, dass Ihr Stil tatsächlich angewendet wird.

    – Tim

    18. Dezember 2013 um 16:46

Benutzer-Avatar von Brian Phillips
Brian Phillips

Dies liegt am Inline-Stil display:block überschreibt Ihr CSS. Sie müssen diesen Inline-Stil entweder entfernen oder Folgendes verwenden:

#tfl {
  display: none !important;
}

Dies überschreibt Inline-Stile. Beachten Sie, dass mit !important wird im Allgemeinen nicht empfohlen, es sei denn, es handelt sich um den letzten Ausweg.

Vinay Pratap Singh Bhadaurias Benutzeravatar
Vinay Pratap Singh Bhadauria

Entfernen display: block; im div #tfl Stil-Eigenschaft

<div id="tfl" style="display: block; width: 187px; height: 260px;

Inline-Stile haben Vorrang vor einer externen CSS-Datei.

Versuchen Sie, dies zu Ihrem CSS hinzuzufügen

#tfl {
display: none !important;
}

Quibbles Benutzeravatar
Streiterei

Ein weiterer Trick ist die Verwendung 

.class {
position: absolute;
visibility:hidden;
display:none;
}

Dies wird Ihren Flow wahrscheinlich nicht durcheinander bringen (da es ihn aus dem Flow bringt) und stellt sicher, dass der Benutzer ihn nicht sehen kann, und wenn ja, dann ist das nicht der Fall display:none Funktioniert später wird es funktionieren. Denk daran, dass visibility:hidden Möglicherweise wird es nicht aus Bildschirmleseprogrammen entfernt.

Akaryatrhs Benutzeravatar
Akaryatrh

In der bereitgestellten HTML-Quelle das Element #tfl hat einen Inline-Stil “display:block“. Der Inline-Stil überschreibt immer Stylesheet-Stile …

Dann haben Sie einige Optionen (während Sie, wie Sie sagten, weder den HTML-Code ändern noch Javascript verwenden können):

  • Gewalt display:none mit !important Regel (nicht empfohlen)

  • Bringen Sie das Div mit diesen Regeln außer Sicht:

    #tfl {
    position: absolute;
    left: -9999px;
}

Überprüfen Sie den folgenden HTML-Code. Ich habe display:block aus dem Stil entfernt 

<div id="tfl" style="width: 187px; height: 260px; font-family: Verdana, Arial, Helvetica, sans-serif !important; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/widget-panel.gif) #fff no-repeat; font-size: 11px; border: 1px solid #103994; border-radius: 4px; box-shadow: 2px 2px 3px 1px #ccc;">
        <div style="display: block; padding: 30px 0 15px 0;">
            <h2 style="color: rgb(36, 66, 102); text-align: center; display: block; font-size: 15px; font-family: arial; border: 0; margin-bottom: 1em; margin-top: 0; font-weight: bold !important; background: 0; padding: 0">Journey Planner</h2>
            <form action="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2" id="jpForm" method="post" target="tfl" style="margin: 5px 0 0 0 !important; padding: 0 !important;">
                <input type="hidden" name="language" value="en" />
                <!-- in language = english -->
                <input type="hidden" name="execInst" value="" /><input type="hidden" name="sessionID" value="0" />
                <!-- to start a new session on JP the sessionID has to be 0 -->
                <input type="hidden" name="ptOptionsActive" value="-1" />
                <!-- all pt options are active -->
                <input type="hidden" name="place_origin" value="London" />
                <!-- London is a hidden parameter for the origin location -->
                <input type="hidden" name="place_destination" value="London" /><div style="padding-right: 15px; padding-left: 15px">
                    <input type="text" name="name_origin" style="width: 155px !important; padding: 1px" value="From" /><select style="width: 155px !important; margin: 0 !important;" name="type_origin"><option value="stop">Station or stop</option>
                        <option value="locator">Postcode</option>
                        <option value="address">Address</option>
                        <option value="poi">Place of interest</option>
                    </select>
                </div>
                <div style="margin-top: 10px; margin-bottom: 4px; padding-right: 15px; padding-left: 15px; padding-bottom: 15px; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom;">
                    <input type="text" name="name_destination" style="width: 100% !important; padding: 1px" value="232 Kingsbury Road (NW9)" /><select style="width: 155px !important; margin-top: 0 !important;" name="type_destination"><option value="stop">Station or stop</option>
                        <option value="locator">Postcode</option>
                        <option value="address" selected="selected">Address</option>
                        <option value="poi">Place of interest</option>
                    </select>
                </div>
                <div style="background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom; padding-bottom: 2px; padding-top: 2px; overflow: hidden; margin-bottom: 8px">
                    <div style="clear: both; background: url(http://www.tfl.gov.uk/tfl-global/images/options-icons.gif) no-repeat 9.5em 0; height: 30px; padding-right: 15px; padding-left: 15px"><a style="text-decoration: none; color: #113B92; font-size: 11px; white-space: nowrap; display: inline-block; padding: 4px 0 5px 0; width: 155px" target="tfl" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&amp;ptOptionsActive=1" onclick="javascript:document.getElementById('jpForm').ptOptionsActive.value="1";document.getElementById('jpForm').execInst.value="readOnly";document.getElementById('jpForm').submit(); return false">More options</a></div>
                </div>
                <div style="text-align: center;">
                    <input type="submit" title="Leave now" value="Leave now" style="border-style: none; background-color: #157DB9; display: inline-block; padding: 4px 11px; color: #fff; text-decoration: none; border-radius: 3px; border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font: bold  13px/1 Arial,Helvetica,sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); line-height: 1;" />
                </div>
            </form>
        </div>
    </div

1452030cookie-checkCSS – Anzeige: keine; funktioniert nicht

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy