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

คำถามของฉันคล้ายกับสิ่งนี้: ASP.NET MVC 4 Minification & ภาพพื้นหลัง ยกเว้นว่าฉันต้องการที่จะยึดติดกับการรวมกลุ่มของ MVC ถ้าฉันสามารถทำได้ ฉันประสบปัญหาสมองล้มเหลวในการพยายามคิดออกว่ารูปแบบที่ถูกต้องคืออะไรสำหรับการระบุบันเดิลสไตล์เช่นชุด css แบบสแตนด์อโลนและชุดรูปภาพเช่น jQuery UI ฉันมีโครงสร้างเว็บไซต์ MVC ทั่วไปที่มี/Content/css/ที่มี CSS styles.cssฐานของฉันเช่น ภายในโฟลเดอร์ css นั้นฉันยังมีโฟลเดอร์ย่อยเช่น/jquery-uiที่มีไฟล์ CSS และ/imagesโฟลเดอร์ เส้นทางรูปภาพใน jQuery UI CSS นั้นสัมพันธ์กับโฟลเดอร์นั้นและฉันไม่ต้องการยุ่งกับมัน ตามที่ฉันเข้าใจเมื่อฉันระบุStyleBundleฉันจำเป็นต้องระบุเส้นทางเสมือนซึ่งไม่ตรงกับเส้นทางเนื้อหาจริงเนื่องจาก (สมมติว่าฉันเพิกเฉยเส้นทางไปยังเนื้อหา) IIS จะพยายามแก้ไขเส้นทางนั้นเป็นไฟล์ทางกายภาพ ดังนั้นฉันจึงระบุ: bundles.Add(new StyleBundle("~/Content/styles/jquery-ui") .Include("~/Content/css/jquery-ui/*.css")); แสดงผลโดยใช้: @Styles.Render("~/Content/styles/jquery-ui") ฉันเห็นคำขอไปที่: http://localhost/MySite/Content/styles/jquery-ui?v=nL_6HPFtzoqrts9nwrtjq0VQFYnhMjY5EopXsK8cxmg1 นี่เป็นการส่งคืนการตอบสนอง CSS ที่ถูกต้องและลดขนาดลง แต่เบราว์เซอร์ก็ส่งคำขอรูปภาพที่เชื่อมโยงกันเป็น: http://localhost/MySite/Content/styles/images/ui-bg_highlight-soft_100_eeeeee_1x100.png 404ซึ่งเป็น ผมเข้าใจว่าส่วนสุดท้ายของ URL …

293 css  jquery-ui  asp.net-mvc-4  bundle  asp.net-optimization 

ฉันต้องการโหลดภาพแบนเนอร์ในแอป HTML5 แบบไดนามิกและต้องการรุ่นที่แตกต่างกันสองรุ่นเพื่อให้เหมาะกับความกว้างของหน้าจอ ฉันไม่สามารถระบุความกว้างหน้าจอของโทรศัพท์ได้อย่างถูกต้องดังนั้นวิธีเดียวที่ฉันสามารถทำได้คือการเพิ่มภาพพื้นหลังของ div และใช้ @media เพื่อกำหนดความกว้างของหน้าจอและแสดงภาพที่ถูกต้อง ตัวอย่างเช่น: <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span> เป็นไปได้หรือไม่มีใครมีคำแนะนำอื่น ๆ ?

293 html  css  media-queries 

ฉันมีเลย์เอาต์ 2 คอลัมน์แบบง่ายพร้อมส่วนท้ายที่ล้างทั้ง div ขวาและ left ใน markup ของฉัน ปัญหาของฉันคือฉันไม่สามารถให้ส่วนท้ายอยู่ที่ด้านล่างของหน้าในเบราว์เซอร์ทั้งหมด ใช้งานได้ถ้าเนื้อหาดันส่วนท้ายลง แต่ก็ไม่ได้เป็นเช่นนั้นเสมอไป

291 css  html  footer  sticky-footer 

ฉันกำลังพยายามปรับแต่ง CSS การพิมพ์และพบว่ามันพิมพ์ลิงก์ออกมาพร้อมกับhrefค่าเช่นเดียวกับลิงค์ นี่คือใน Chrome สำหรับ HTML นี้: <a href="http://www.google.com">Google</a> มันพิมพ์: Google (http://www.google.com) และฉันต้องการให้พิมพ์: Google

290 css  printing  hyperlink  print-css 

ตามที่เป็นอยู่ในปัจจุบันคำถามนี้ไม่เหมาะสำหรับรูปแบบคำถาม & คำตอบของเรา เราคาดหวังคำตอบที่จะได้รับการสนับสนุนจากข้อเท็จจริงการอ้างอิงหรือความเชี่ยวชาญ แต่คำถามนี้มีแนวโน้มที่จะเรียกร้องการอภิปรายการโต้แย้งการหยั่งเสียงหรือการอภิปรายเพิ่มเติม หากคุณรู้สึกว่าคำถามนี้สามารถปรับปรุงและเปิดใหม่ได้โปรดไปที่ศูนย์ช่วยเหลือเพื่อขอคำแนะนำ ปิดให้บริการใน8 ปีที่ผ่านมา คำแนะนำใด ๆ สำหรับ CSS minifier? ฉันจะหยั่งรากรอบ ๆ Google และทดลองใช้งาน แต่ฉันสงสัยว่าชุมชน StackOverflow ที่ชาญฉลาดมีความเชี่ยวชาญและมีความอยากรู้อยากเห็นอาจประเมินข้อดีและข้อเสียของรุ่นใหญ่แล้ว

289 css  minify 

ฉันใช้ jQuery SVG ฉันไม่สามารถเพิ่มหรือลบคลาสไปยังวัตถุ ใครทราบความผิดพลาดของฉัน SVG: <rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" /> jQuery ที่จะไม่เพิ่มคลาส: $(".jimmy").click(function() { $(this).addClass("clicked"); }); ฉันรู้ว่า SVG และ jQuery ทำงานร่วมกันได้ดีเพราะฉันสามารถกำหนดเป้าหมายวัตถุและเริ่มการแจ้งเตือนเมื่อมีการคลิก: $(".jimmy").click(function() { alert('Handler for .click() called.'); });

289 javascript  jquery  css  svg  jquery-svg 

โดยทั่วไปฉันสงสัยว่าอะไรคือข้อดี / วัตถุประสงค์ของการใช้@importเพื่อนำเข้าสไตล์ชีทไปยังสไตล์ชีทที่มีอยู่เมื่อเทียบกับการเพิ่มอีก ... <link rel="stylesheet" type="text/css" href="" /> ถึงส่วนหัวของเอกสาร?

288 html  css 

ขณะนี้ฉันมีรหัสนี้: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } มันกะพริบ แต่จะกะพริบเฉพาะใน "ทิศทางเดียว" ฉันหมายความว่ามันจะจางหายไปเท่านั้นและจากนั้นก็ปรากฏขึ้นopacity: 1.0อีกครั้งจากนั้นก็จางหายไปปรากฏขึ้นอีกครั้งและอื่น ๆ ... ผมอยากให้มันหายไปแล้ว "เพิ่ม" opacity: 1.0จากจางนี้กลับมาอีกครั้งเพื่อ เป็นไปได้ไหม

288 html  css  css-animations  opacity 

ฉันมีปัญหาแปลก ๆ ... ในทุกเบราว์เซอร์และเวอร์ชันมือถือฉันพบปัญหานี้: เบราว์เซอร์ทั้งหมดมีเมนูด้านบนเมื่อคุณโหลดหน้าเว็บ (แสดงแถบที่อยู่เป็นต้น) ซึ่งจะเลื่อนขึ้นเมื่อคุณเริ่มเลื่อนหน้า บางครั้งจะคำนวณ100vh เฉพาะในส่วนที่มองเห็นได้ของวิวพอร์ตดังนั้นเมื่อแถบเบราว์เซอร์เลื่อนขึ้น 100vh จะเพิ่มขึ้น (ในรูปของพิกเซล) เลย์เอาต์ทั้งหมดทาสีใหม่และปรับใหม่เนื่องจากขนาดมีการเปลี่ยนแปลง เอฟเฟ็กต์ที่แย่มากสำหรับประสบการณ์ของผู้ใช้ จะหลีกเลี่ยงปัญหานี้ได้อย่างไร? ตอนที่ฉันได้ยิน viewport-height ครั้งแรกฉันรู้สึกตื่นเต้นและฉันคิดว่าฉันสามารถใช้มันสำหรับบล็อกความสูงคงที่แทนที่จะใช้ javascript แต่ตอนนี้ฉันคิดว่าวิธีเดียวที่ทำได้คือ javascript ที่มีการปรับขนาดบางอย่าง ... คุณสามารถดูปัญหาได้ที่: ไซต์ตัวอย่าง ใครสามารถช่วยฉันด้วย / แนะนำวิธีแก้ปัญหา CSS? รหัสทดสอบง่าย ๆ : แสดงตัวอย่างโค้ด /* maybe i can track the issue whe it occours... */ $(function(){ var resized = -1; $(window).resize(function(){ …

288 html  css  viewport-units 

ฉันต้องทำให้ปุ่มดูเหมือนลิงค์โดยใช้ CSS การเปลี่ยนแปลงจะเสร็จสิ้น แต่เมื่อฉันคลิกที่มันจะแสดงให้เห็นราวกับว่ามันผลักเหมือนปุ่ม แนวคิดใดที่จะลบออกเพื่อให้ปุ่มทำงานเป็นลิงก์แม้เมื่อคลิก

287 css  button  hyperlink 

RGBA เป็นเกมที่สนุกสุดขีดและก็เป็น-webkit-gradientเช่น-moz-gradientนั้นและเอ่อ ... progid:DXImageTransform.Microsoft.gradient... ใช่ :) มีวิธีการรวมทั้งสอง RGBA และการไล่ระดับสีเพื่อให้มีการไล่ระดับสีของความโปร่งใสอัลฟาโดยใช้รายละเอียด CSS ปัจจุบัน / ล่าสุด

286 css  gradient 

ฉันกำลังพยายามสร้างกฎแนวนอนพร้อมข้อความอยู่ตรงกลาง ตัวอย่างเช่น: ----------------------------------- ชื่อของฉันที่นี่ ------------ ----------------- มีวิธีทำใน CSS หรือไม่? ไม่มีเครื่องหมาย "-" ทั้งหมด

286 html  css  cross-browser 

ฉันใช้เส้นประสไตล์ในกล่องของฉันเช่น .box { width: 300px; height: 200px; border: dotted 1px #f00; float: left; } ฉันต้องการที่จะเพิ่มช่องว่างระหว่างจุดของเส้นขอบแต่ละ

286 html  css  border 

ฉันกำลังพยายามเปลี่ยนเอฟเฟกต์ด้วยbackground-colorเมื่อเลื่อนเมาส์ไปที่รายการเมนู แต่มันไม่ทำงาน นี่คือรหัส CSS ของฉัน: #content #nav a:hover { color: black; background-color: #AD310B; /* Firefox */ -moz-transition: all 1s ease-in; /* WebKit */ -webkit-transition: all 1s ease-in; /* Opera */ -o-transition: all 1s ease-in; /* Standard */ transition: all 1s ease-in; } นี่#nav divคือulรายการเมนูของรายการ

286 css 

มีวิธีใดที่จะทำให้องค์ประกอบ html อยู่กึ่งกลางแนวตั้งหรือแนวนอนภายในพ่อแม่หลัก

285 css  twitter-bootstrap