8
मैं मोबाइल स्टाइलशीट विकसित करने की कोशिश कर रहा हूं और इस स्टाइलशीट में मैं एक विशेष div को हटाना चाहता हूं।सीएसएस - प्रदर्शन: कोई नहीं; काम नहीं कर रहे
div के एचटीएमएल कोड में, मैं एक आईडी "टीएफएल" कहा जाता है, जैसा कि नीचे दिखाया गया है:
<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&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>
इस कोड को इस एक एम्बेडेड टीएफएल वेबसाइट द्वारा दिए गए कोड के रूप में खानों नहीं है।
मैं इस लिए इसे और अधिक एक मोबाइल उपयोगकर्ता के लिए अनुकूल बनाने के लिए div छुपाना चाहते हैं, मैंने किया था:
#tfl {
display: none;
}
इस कोड को मुझे हालांकि काम नहीं करता है, और मैं भी यह पहले इसी हेडर के लिए आवेदन किया और जो काम नहीं करता, जैसा कि दिखाया गया है:
h3.tfl {
display: none;
}
यहां क्या समस्या है? यह कोड किसी मैप किए गए छवि पर किसी अन्य पृष्ठ पर काम करता है। (मैं jQuery और न ही जावास्क्रिप्ट का उपयोग नहीं कर सकता (यूनी assingment सीएसएस देख रहे हैं))।
क्या मीडिया क्वेरी में है? क्या आपने अधिक विशिष्ट चयनकर्ता या जोड़ने का प्रयास करने की कोशिश की है! प्रदर्शित करने के लिए महत्वपूर्ण: कोई नहीं? वैसे, h3.tfl उस पर कक्षा tfl के साथ एक h3 की तलाश में है। आप का मतलब हो सकता है h3 .tfl –
क्या आपने दृश्यता जोड़ने का प्रयास किया है: अपनी कक्षा में छिपा हुआ है? मैं आमतौर पर दोनों का उपयोग करता हूं ... शायद यह सुनिश्चित करने के लिए रंग बदलें कि आपकी शैली वास्तव में लागू की जा रही है। – Tim