คำถามติดแท็ก css

ดังนั้นฉันกำลังมีปัญหา ฉันมองไปรอบ ๆ และมองไปรอบ ๆ แต่ไม่มีโชค ฉันต้องการทำให้พื้นหลังของร่างกายโปร่งใส แต่ปล่อยให้ข้อความไม่โปร่งใส อย่างที่เป็นอยู่ตอนนี้ฉันทำให้ทั้งสองมีความทึบเท่ากัน นี่คือรหัสของฉัน: @charset "utf-8"; body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, …

87 html  css  text  opacity 

(เพื่อไม่ให้สับสนกับXunitซึ่งเป็นไลบรารีการทดสอบหน่วย. Net ยอดนิยม) วันนี้ด้วยความเบื่อหน่ายฉันเริ่มตรวจสอบ Gmails DOM (ใช่ฉันเบื่อมาก) ทุกอย่างดูตรงไปตรงมาจนกระทั่งฉันสังเกตเห็นข้อกำหนดที่น่าสนใจเกี่ยวกับความกว้างขององค์ประกอบบางอย่าง Googlites ที่มีชื่อเสียงได้ระบุจำนวนตาราง Cols โดยใช้หน่วย 'ex' ที่หายาก width: 22ex; ตอนแรกฉันนิ่งงัน ("อะไรคือ 'แฟนเก่า'? จากข้อมูลจำเพาะ CSS3 : [ หน่วยอดีตคือ] เท่ากับที่ใช้ x ความสูงของตัวอักษรที่มีอยู่ครั้งแรก x-height ถูกเรียกเช่นนี้เพราะมักจะเท่ากับความสูงของตัวพิมพ์เล็ก "x" อย่างไรก็ตามมีการกำหนด "ex" ไว้สำหรับแบบอักษรที่ไม่มี "x" ดีและดี แต่ฉันไม่เคยเห็นมันใช้มาก่อน (ใช้น้อยกว่ามาก) ฉันใช้ ems ค่อนข้างบ่อยและเห็นคุณค่าของมัน แต่ทำไม "อดีต"? ดูเหมือนมาตรฐานการวัดน้อยกว่า em มากและมีประโยชน์น้อยกว่ามาก หนึ่งในไม่กี่หน้าผมพบว่าการอภิปรายหัวข้อนี้เป็นสตีเฟ่น Poley ของhttp://www.xs4all.nl/~sbpoley/webmatters/emex.html Stephen ให้ประเด็นที่ดีอย่างไรก็ตามการสนทนาของเขาดูเหมือนจะสรุปไม่ได้สำหรับฉัน …

87 css  specifications  units-of-measurement 

เครื่องมือ / API จำนวนมากมีวิธีการเลือกองค์ประกอบของคลาสหรือ ID เฉพาะ นอกจากนี้ยังสามารถตรวจสอบสไตล์ชีทดิบที่เบราว์เซอร์โหลดได้อีกด้วย อย่างไรก็ตามสำหรับเบราว์เซอร์ในการแสดงผลองค์ประกอบพวกเขาจะรวบรวมกฎ CSS ทั้งหมด (อาจมาจากไฟล์สไตล์ชีตอื่น) และนำไปใช้กับองค์ประกอบ นี่คือสิ่งที่คุณเห็นจาก Firebug หรือ WebKit Inspector - โครงสร้างการสืบทอด CSS แบบเต็มสำหรับองค์ประกอบ ฉันจะสร้างคุณลักษณะนี้ใหม่ใน JavaScript บริสุทธิ์โดยไม่ต้องใช้ปลั๊กอินเบราว์เซอร์เพิ่มเติมได้อย่างไร บางทีตัวอย่างอาจให้ความกระจ่างสำหรับสิ่งที่ฉันกำลังมองหา: <style type="text/css"> p { color :red; } #description { font-size: 20px; } </style> <p id="description">Lorem ipsum</p> ที่นี่องค์ประกอบคำอธิบาย p # มีการใช้กฎ CSS สองกฎ: สีแดงและขนาดตัวอักษร 20 px …

87 javascript  css 

ฉันต้องการลิงค์ที่ไม่ทำอะไรเลย ฉันไม่ต้องการสิ่งนี้: <a href="#"> แล้วเพราะ URL something.com/whatever/#ที่จะกลายเป็น เหตุผลเดียวที่ฉันต้องการลิงก์คือเพื่อให้ผู้ใช้เห็นว่าพวกเขาสามารถคลิกที่ข้อความได้ จาวาสคริปต์ถูกใช้เพื่อดำเนินการบางอย่างดังนั้นฉันจึงไม่จำเป็นต้องใช้ลิงก์เพื่อไปที่ใดก็ได้ แต่ฉันต้องการให้มันดูเหมือนลิงค์! ฉันสามารถใช้แอตทริบิวต์ข้อมูลบางอย่างและบอกให้ CSS ทำให้องค์ประกอบดูเหมือนลิงก์หากมีแอตทริบิวต์นี้ แต่ดูเหมือนจะใช้งานมากเกินไป

87 html  css 

ฉันมีคลาสตัวเลื่อนแบบนี้และฉันต้องการเปลี่ยนสไตล์แอตทริบิวต์style = "left: 336px" <div id="range-cont"> <div class="slider"> <div class="progress" style="width: 350px;"></div> <a class="handle" href="#" **style="left: 336px;"**></a> </div> <input id="percentage" class="range" type="range" value="14" name="percentage" min="0" max="100"> <p id="percent-label">%</p> </div> </div> ฉันลอง $('.handle').css({'style':'left: 300px'})แล้วแต่มันไม่ได้ผล ไม่แน่ใจว่าฉันทำอะไรผิดที่นี่

87 javascript  jquery  css 

คุณพบบทเรียนมากมายบนแถบเมนูใน HTML แต่สำหรับกรณีเฉพาะนี้ (แม้ว่า IMHO ทั่วไป) ฉันไม่พบวิธีแก้ปัญหาที่เหมาะสม: # THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD BE # # ^ ^ # รายการเมนูแบบข้อความเท่านั้นมีจำนวนแตกต่างกันไปและเค้าโครงหน้าเว็บก็ลื่นไหล รายการเมนูแรกควรจัดชิดซ้ายรายการเมนูสุดท้ายควรจัดชิดขวา รายการที่เหลือควรกระจายอย่างเหมาะสมที่สุดบนแถบเมนู จำนวนจะแตกต่างกันดังนั้นจึงไม่มีโอกาสคำนวณความกว้างที่เหมาะสมล่วงหน้า โปรดทราบว่า TABLE จะไม่ทำงานที่นี่เช่นกัน: หากคุณอยู่กึ่งกลาง TD ทั้งหมดรายการแรกและรายการสุดท้ายจะไม่ถูกจัดเรียงอย่างถูกต้อง ถ้าคุณจัดชิดซ้ายและจัดชิดขวาของการตอบสนองแรก รายการสุดท้ายระยะห่างจะไม่เหมาะสม ไม่แปลกที่ไม่มีวิธีที่ชัดเจนในการนำสิ่งนี้ไปใช้อย่างสะอาดตาโดยใช้ HTML และ CSS?

87 html  css 

ฉันต้องการใช้ไอคอนที่เป็นสี (และจะเป็นลิงค์) และเปลี่ยนเป็นสีเทาจนกว่าผู้ใช้จะวางเมาส์เหนือไอคอน (ซึ่งจะทำให้ภาพเป็นสี) เป็นไปได้หรือไม่และในลักษณะที่รองรับ IE & Firefox

87 css  mouseover  grayscale 

สิ่งที่ฉันต้องการคือสามารถเปลี่ยนสีของสัญลักษณ์แสดงหัวข้อย่อยในรายการเป็นสีเทาอ่อนได้ ค่าเริ่มต้นเป็นสีดำและฉันคิดไม่ออกว่าจะเปลี่ยนอย่างไร ฉันรู้ว่าฉันสามารถใช้รูปภาพได้ ฉันไม่ควรทำอย่างนั้นถ้าฉันสามารถช่วยได้

87 html  css  html-lists 

ฉันมีเซิร์ฟเวอร์การผลิตและการพัฒนา ปัญหาคือโครงสร้างไดเร็กทอรี การพัฒนา: http://dev.com/subdir/images/image.jpg http://dev.com/subdir/resources/css/style.css การผลิต: http://live.com/images/image.jpg http://live.com/resources/css/style.css ฉันจะมีโฟลเดอร์style.cssin cssที่ใช้บนเซิร์ฟเวอร์ทั้งสองเส้นทางเดียวกันสำหรับbackground: urlคุณสมบัติได้อย่างไร มีเคล็ดลับที่ฉันสามารถใช้กับเส้นทางสัมพัทธ์ได้หรือไม่

87 css  relative-path  absolute-path 

ฉันกำลังพยายามสร้างปุ่มซึ่งเมื่อผู้ใช้คลิกปุ่มนั้นจะเปลี่ยนรูปแบบขณะที่กดปุ่มเมาส์ค้าง ฉันยังต้องการให้เปลี่ยนรูปแบบในลักษณะเดียวกันหากสัมผัสในเบราว์เซอร์มือถือ สิ่งที่เห็นได้ชัดสำหรับฉันคือการใช้ CSS: active pseudo-class แต่ไม่ได้ผล ฉันพยายาม: โฟกัส แต่มันก็ไม่ได้ผลเช่นกัน ฉันลอง: วางเมาส์เหนือและดูเหมือนจะใช้งานได้ แต่มันยังคงรูปแบบไว้หลังจากที่ฉันเอานิ้วออกจากปุ่ม การสังเกตทั้งหมดนี้อยู่ใน iPhone 4 และ Droid 2 มีวิธีใดบ้างที่จะจำลองเอฟเฟกต์บนเบราว์เซอร์มือถือ (iPhone, iPad, Android และอื่น ๆ อีกมากมาย) ตอนนี้ฉันกำลังทำสิ่งนี้: <style type="text/css"> #testButton { background: #dddddd; } #testButton:active, #testButton.active { background: #aaaaaa; } </style> ... <button type="button" id="testButton">test</button> ... <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script> <script …

87 javascript  jquery  html  css  mobile 

ฉันได้ค้นหาและค้นหา แต่ไม่พบวิธีแก้ปัญหาสำหรับความต้องการของฉัน ฉันมีตาราง HTML แบบธรรมดา ฉันต้องการมุมรอบสำหรับมันโดยไม่ต้องใช้ภาพหรือ JS เช่นบริสุทธิ์CSS เท่านั้น แบบนี้: มุมโค้งมนสำหรับเซลล์มุมและ1pxขอบหนาสำหรับเซลล์ จนถึงตอนนี้ฉันมีสิ่งนี้: table { -moz-border-radius: 5px !important; border-collapse: collapse !important; border: none !important; } table th, table td { border: none !important } table th:first-child { -moz-border-radius: 5px 0 0 0 !important; } table th:last-child { -moz-border-radius: 0 5px 0 …

87 html  css  html-table  rounded-corners 

ฉันกำลังลองใช้Bootstrapและฉันสงสัยว่าฉันจะแก้ไขส่วนท้ายที่ด้านล่างได้อย่างไรโดยไม่ให้มันหายไปจากหน้าหากเนื้อหาถูกเลื่อน?

87 html  css  twitter-bootstrap  footer 

ฉันมีปัญหาเกี่ยวกับความสูงของเส้นที่ไม่สามารถคาดเดาได้ รหัสต่อไปนี้จะจัดกึ่งกลางภาพภายใน div: CSS .bar { height: 800px; width: 100%; line-height:800px; background-color: #000; text-align: center; } .bar img { vertical-align: middle; } HTML <div class="bar"> <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" /> </div> อย่างไรก็ตามหากฉันเปลี่ยนความสูงของเส้นเป็น 100% ความสูงของเส้นจะไม่มีผล (หรืออย่างน้อยก็ไม่กลายเป็น 100% ของ div) ตัวอย่าง jsfiddle มีใครรู้บ้างว่าฉันทำผิด?

87 css 

ฉันใช้ twitter bootstrap เพื่อสร้างแท็บที่สลับได้ นี่คือ css ที่ฉันใช้: <div class="container"> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> </div> html นี้แสดงแท็บอย่างถูกต้อง แต่ดึงไปทางซ้าย (ซึ่งเป็นสิ่งที่ควรจะเกิดขึ้น) ฉันได้ลองปรับแต่ง CSS เพื่อให้แท็บอยู่ตรงกลางของหน้า แต่ยังไม่มีโชค ฉันคิดว่าคนที่มีประสบการณ์ css มากกว่าจะรู้วิธีทำสิ่งนี้ โปรดทราบว่ามีคำถามอื่นเกี่ยวกับการวางยา nav ไว้ตรงกลางซึ่งฉันได้ลองใช้แล้ว แต่ไม่ได้ผลกับแท็บ nav ธรรมดาเท่านั้น ขอบคุณ.

87 html  css  twitter-bootstrap 

<!DOCTYPE html> <html> <head> <title>Width issue</title> <style type="text/css"> body { margin: 0; } #left { width: 50%; background: lightblue; display: inline-block; } #right { width: 50%; background: orange; display: inline-block; } </style> </head> <body> <div id="left">Left</div> <div id="right">Right</div> </body> </html> JSFiddle: http://jsfiddle.net/5EcPK/ โค้ดด้านบนพยายามวาง #left div และ #right div เคียงข้างกันในแถวเดียว แต่อย่างที่คุณเห็นใน …

87 html  css