การเขียนโปรแกรม css

9

อะไรคือวิธีที่ดีที่สุด (ถ้ามี) ในการทำให้ภาพปรากฏเป็น "สีเทา" ด้วย CSS (เช่นโดยไม่ต้องโหลดรูปภาพที่เป็นสีเทาแบบแยกต่างหาก) บริบทของฉันคือฉันมีแถวในตารางที่ทั้งหมดมีปุ่มในเซลล์ที่เหมาะสมที่สุดและบางแถวต้องดูเบากว่าคนอื่น ดังนั้นฉันสามารถทำให้ตัวอักษรจางลงได้อย่างง่ายดายแน่นอน แต่ฉันก็ต้องการทำให้ภาพจางลงโดยไม่ต้องจัดการสองภาพแต่ละภาพ

183 css

18

วิธีแทรกช่องว่าง / แท็บในข้อความโดยใช้ HTML / CSS

วิธีที่เป็นไปได้: <pre> ... </pre> หรือ style="white-space:pre" มีอะไรอีกไหม

183 html css tabs space pre

9

ข้อเสนอแนะ typeahead.js ของ Twitter ไม่ได้ถูกจัดรูปแบบ (ไม่มีขอบพื้นหลังโปร่งใส ฯลฯ )

ฉันใช้ประเภท twitter ของ twitter 0.9.3และดูเหมือนว่าคำแนะนำของฉันจะไม่ได้รับการออกแบบเลย ฉันได้รับสิ่งนี้: แทนที่จะเป็นสิ่งนี้: (นำมาจากหน้าตัวอย่าง ) JavaScript เปิดใช้งานหัวพิมพ์: $('.search-typeahead').typeahead({ name: 'videos', remote: { url: '/api/v1/internal/videos/typeahead?text=%QUERY' } }); องค์ประกอบอินพุต HTML: <input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/> หมายเหตุเพิ่มเติม: เว็บไซต์ที่ฉันใช้งานมี jQuery 1.10.1 และไม่ใช้ twitter bootstrap มี CSS จำนวนมากที่ฉันไม่ได้เขียนและไม่คุ้นเคยกับสิ่งที่ฉันกลัวว่าจะรบกวน แต่ดูเหมือนว่าปลั๊กอินจะเพิ่มสไตล์ของตัวเอง (ไม่มีไฟล์. css ประกอบ) ดังนั้นจึงไม่ควรที่จะแทนที่สิ่งต่าง ๆ ? ฉันสับสนว่าทำไมสไตล์ของฉันจึงใช้งานได้ แต่สิ่งที่เพิ่มโดยปลั๊กอินไม่ได้ทำให้เกิดข้อเสนอแนะที่มีพื้นหลังโปร่งใสไม่มีเส้นขอบ ฯลฯ

182 javascript css typeahead.js

8

วิธีสร้างตารางโดยใช้แท็ก <div> และ Css เท่านั้น

ฉันต้องการสร้างตารางโดยใช้<div>แท็กและ CSS เท่านั้น นี่คือตารางตัวอย่างของฉัน <body> <form id="form1"> <div class="divTable"> <div class="headRow"> <div class="divCell" align="center">Customer ID</div> <div class="divCell">Customer Name</div> <div class="divCell">Customer Address</div> </div> <div class="divRow"> <div class="divCell">001</div> <div class="divCell">002</div> <div class="divCell">003</div> </div> <div class="divRow"> <div class="divCell">xxx</div> <div class="divCell">yyy</div> <div class="divCell">www</div> </div> <div class="divRow"> <div class="divCell">ttt</div> <div class="divCell">uuu</div> <div class="divCell">Mkkk</div> </div> </div> …

182 html css

9

ปิดใช้งานตัวเลือกการพิมพ์ของเบราว์เซอร์ (ส่วนหัวส่วนท้ายระยะห่าง) จากหน้าเว็บหรือไม่

ฉันได้เห็นคำถามนี้ถามในสองวิธีที่แตกต่างกันใน SO และเว็บไซต์อื่น ๆ แต่ส่วนใหญ่มีความเฉพาะเจาะจงเกินไปหรือล้าสมัย ฉันหวังว่าบางคนสามารถให้คำตอบที่ชัดเจนได้ที่นี่โดยไม่ต้องเปลี่ยนไปเก็งกำไร มีวิธีอย่างใดอย่างหนึ่งกับ CSS หรือ javascript เพื่อเปลี่ยนการตั้งค่าเครื่องพิมพ์เริ่มต้นเมื่อมีคนพิมพ์ภายในเบราว์เซอร์ของพวกเขา และแน่นอนโดย "พิมพ์จากเบราว์เซอร์" ฉันหมายถึง HTML บางรูปแบบไม่ใช่ PDF หรือปลั๊กอิน mime-reliant ชนิดอื่น โปรดทราบ: หากเบราว์เซอร์บางตัวเสนอสิ่งนี้และอื่น ๆ ไม่มี (หรือถ้าคุณรู้วิธีการทำสำหรับเบราว์เซอร์บางตัวเท่านั้น) ฉันยินดีต้อนรับโซลูชันเฉพาะเบราว์เซอร์ ในทำนองเดียวกันหากคุณรู้จักเบราว์เซอร์กระแสหลักที่มีข้อ จำกัด เฉพาะกับการทำเช่นนี้สิ่งนี้ก็มีประโยชน์เช่นกัน แต่เอกสารบางอย่างที่เป็นปัจจุบันจะได้รับการชื่นชม (เพียงแค่พูดว่า "ขัดกับนโยบายความปลอดภัยของ XYZ" ไม่น่าเชื่อมากเมื่อ XYZ ทำการเปลี่ยนแปลงที่สำคัญในนโยบายดังกล่าวในช่วงสามปีที่ผ่านมา) ในที่สุดเมื่อฉันพูดว่า "เปลี่ยนการตั้งค่าการพิมพ์เริ่มต้น" ฉันไม่ได้ตั้งใจตลอดไปเพียงแค่สำหรับหน้าของฉันและฉันหมายถึงเฉพาะขอบพิมพ์หัวกระดาษและท้ายกระดาษ ฉันตระหนักดีว่า CSS มีตัวเลือกในการเปลี่ยนการวางแนวของหน้ารวมถึงระยะขอบของหน้า หนึ่งในหลาย ๆ การต่อสู้คือ Firefox ถ้าฉันตั้งค่าระยะขอบของหน้ากระดาษเป็น 1 นิ้วมันจะเพิ่มค่านี้เป็นครึ่งนิ้วที่มันถูกวางไว้แล้ว ฉันต้องการลดการใช้ …

182 javascript html css browser printing

16

เหตุใดข้อความค้นหาสื่อ CSS3 ของฉันจึงไม่ทำงาน

ใน styles.css ฉันใช้คิวรีสื่อซึ่งทั้งคู่ใช้รูปแบบของ: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } ไซต์ปรับขนาดเป็นเลย์เอาต์ที่ฉันต้องการในเบราว์เซอร์ปกติ (Safari, Firefox) เมื่อฉันย่อขนาดหน้าต่างอย่างไรก็ตามเลย์เอาต์มือถือไม่แสดงเลยบนโทรศัพท์ แต่ฉันเพิ่งเห็น CSS เริ่มต้น ใครช่วยชี้ฉันในทิศทางที่ถูกต้องได้ไหม

182 html css media-queries mobile-website

12

ปุ่มความกว้างคงที่พร้อม Bootstrap

Bootstrap รองรับปุ่มที่มีความกว้างคงที่หรือไม่? ขณะนี้ถ้าฉันมี 2 ปุ่ม "บันทึก" และ "ดาวน์โหลด" ขนาดของปุ่มจะเปลี่ยนไปตามเนื้อหา อะไรคือวิธีที่เหมาะสมในการขยาย Bootstrap?

182 css twitter-bootstrap

18

มี css hack สำหรับ Safari ไม่ใช่ Chrome เท่านั้นหรือไม่

ฉันพยายามที่จะค้นหาแฮ็ค CSS สำหรับซาฟารีไม่ใช่โครเมี่ยมฉันรู้ว่านี่เป็นทั้งเบราว์เซอร์ webkit แต่ฉันมีปัญหากับการจัดแนว div ใน chrome และซาฟารีซึ่งแต่ละจอแสดงผลแตกต่างกัน ฉันพยายามใช้สิ่งนี้ แต่มีผลกับโครเมี่ยมเช่นกัน @media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } } ไม่มีใครรู้ของอีกคนหนึ่งที่จะนำไปใช้กับซาฟารีโปรด?

182 css safari

11

การตั้งค่าความยาวอักขระสูงสุดใน CSS

ฉันกำลังสร้างเว็บไซต์ที่ตอบสนองต่อโรงเรียนและคำถามของฉันคือ: ฉันจะกำหนดความยาวอักขระสูงสุดของประโยค (ด้วย CSS) บนเว็บไซต์ของฉันได้อย่างไร (เช่น 75 ตัวอักษร) ว่าเมื่อฉันมีหน้าจอขนาดใหญ่มากประโยคจะไม่เกิน 75 ตัวอักษร ฉันได้ลองความกว้างสูงสุดแล้ว แต่นั่นก็ทำให้เค้าโครงของฉันยุ่ง ฉันใช้คำสั่ง flexbox และคำสั่งสื่อเพื่อให้ตอบสนองได้

182 html css text

4

เหตุใด z-index จึงไม่ทำงาน

ดังนั้นถ้าฉันเข้าใจz-indexอย่างถูกต้องมันจะสมบูรณ์แบบในสถานการณ์นี้: ฉันต้องการที่จะวางภาพด้านล่าง (แท็ก / บัตร) ด้านล่าง div ข้างต้นนั้น ดังนั้นคุณจะไม่เห็นขอบคม ฉันจะทำสิ่งนี้ได้อย่างไร z-index:-1 // on the image tag/card หรือ z-index:100 // on the div above ไม่ทำงานเช่นกัน ไม่มีการรวมกันของสิ่งใดเช่นนี้ มาทำไม

182 html css z-index

13

ตัวอักษรภาษาอังกฤษตัวใดที่ใช้พิกเซลมากที่สุด?

ฉันกำลังพยายามเขียนโปรแกรมแบบไดนามิกตามจำนวนตัวอักษรในประโยค ตัวอักษรภาษาอังกฤษตัวใดที่ใช้พิกเซลมากที่สุดบนหน้าจอ

181 css char

8

หยุดการเคลื่อนไหวของ CSS3 ในเฟรมสุดท้าย

ฉันมีภาพเคลื่อนไหว CSS3 4 ส่วนที่เล่นอยู่บนการคลิก - แต่ส่วนสุดท้ายของภาพเคลื่อนไหวนั้นมีจุดประสงค์เพื่อนำมันออกจากหน้าจอ อย่างไรก็ตามมันจะกลับไปสู่สถานะดั้งเดิมเสมอเมื่อเล่นแล้ว ใคร ๆ ก็รู้ว่าฉันจะหยุดมันได้อย่างไรในเฟรม css สุดท้าย (100%)หรืออื่น ๆ วิธีกำจัด div ทั้งหมดในครั้งเดียวที่มันเล่น @keyframes colorchange { 0% { transform: scale(1.0) rotate(0deg); } 50% { transform: rotate(340deg) translate(-300px,0px) } 100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); } }

181 css css-animations

12

ฉันสามารถหยุดกล่องข้อความความกว้าง 100% ไม่ให้ขยายออกไปนอกคอนเทนเนอร์ได้หรือไม่

ให้บอกว่าฉันมีกล่องข้อความที่ฉันต้องการเติมทั้งบรรทัด ฉันจะทำให้มันมีสไตล์เช่นนี้: input.wide {display:block; width: 100%} สิ่งนี้ทำให้เกิดปัญหาเนื่องจากความกว้างขึ้นอยู่กับเนื้อหาของกล่องข้อความ กล่องข้อความมีระยะขอบเส้นขอบ & ช่องว่างภายในโดยค่าเริ่มต้นซึ่งทำให้กล่องข้อความความกว้าง 100% มีขนาดใหญ่กว่าคอนเทนเนอร์ ตัวอย่างเช่นที่นี่ทางด้านขวา: มีวิธีใดที่จะทำให้กล่องข้อความเติมความกว้างของคอนเทนเนอร์โดยไม่ขยายออกไป? นี่คือตัวอย่าง HTML เพื่อแสดงสิ่งที่ฉันหมายถึง: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <style type="text/css"> #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px} #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;} …

181 html css

8

วิธีรับความกว้างของเบราว์เซอร์โดยใช้รหัส JavaScript

ฉันพยายามเขียนฟังก์ชัน JavaScript เพื่อรับความกว้างของเบราว์เซอร์ปัจจุบัน ฉันพบสิ่งนี้: javascript:alert(document.body.offsetWidth); แต่ปัญหามันล้มเหลวถ้าร่างกายมีความกว้าง 100% มีฟังก์ชั่นอื่น ๆ ที่ดีกว่าหรือวิธีแก้ปัญหา?

180 javascript jquery html css

15

จะมั่นใจได้อย่างไรว่าฟิลด์ฟอร์ม <select> ถูกส่งเมื่อปิดการใช้งาน

ฉันมีselectเขตข้อมูลฟอร์มที่ฉันต้องการทำเครื่องหมายเป็น "อ่านได้อย่างเดียว" เนื่องจากในผู้ใช้ไม่สามารถแก้ไขค่าได้ แต่ค่านั้นยังคงส่งมาพร้อมกับแบบฟอร์ม การใช้disabledแอ็ตทริบิวต์ป้องกันผู้ใช้จากการเปลี่ยนค่า แต่ไม่ส่งค่าด้วยแบบฟอร์ม readonlyแอตทริบิวต์จะใช้ได้เฉพาะinputและtextareaสาขา แต่ที่เป็นพื้นสิ่งที่ฉันต้องการ มีวิธีใดบ้างที่จะทำงานนี้ได้? สองความเป็นไปได้ที่ฉันกำลังพิจารณารวมถึง: แทนที่จะปิดใช้งานให้ปิดการselectใช้งานทั้งหมดoptionและใช้ CSS เพื่อเลือกตัวเลือกสีเทาเพื่อให้ดูเหมือนว่าถูกปิดใช้งาน เพิ่มตัวจัดการเหตุการณ์การคลิกไปที่ปุ่มส่งเพื่อให้สามารถเปิดใช้งานเมนูดร็อปดาวน์ที่ปิดใช้งานทั้งหมดก่อนส่งแบบฟอร์ม

180 javascript html css forms html-select

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