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

ฉันต้องการมีหน้าเว็บที่มีคำที่กึ่งกลางหนึ่งคำ ฉันต้องการให้คำนี้วาดด้วยอนิเมชั่นเช่นที่หน้า "เขียน" คำนั้นในลักษณะเดียวกับที่เราต้องการคือมันเริ่มต้นที่จุดหนึ่งแล้วลากเส้นและเส้นโค้งเมื่อเวลาผ่านไปซึ่งผลลัพธ์สุดท้ายคือ glyph ฉันไม่สนใจว่าสิ่งนี้จะทำด้วย<canvas>หรือ DOM และฉันไม่สนใจว่ามันจะทำกับ JavaScript หรือ CSS การขาดงานของ jQuery จะดี แต่ไม่จำเป็น ฉันจะทำสิ่งนี้ได้อย่างไร ฉันค้นหาอย่างละเอียดโดยไม่มีโชค

229 javascript  css  canvas  html5-canvas  css-shapes 

มีวิธีที่จะมีลูก DIV ในคอนเทนเนอร์หลัก DIV ที่กว้างกว่าพาเรนต์หรือไม่ DIV ลูกต้องเป็นความกว้างเท่ากันของวิวพอร์ตเบราว์เซอร์ ดูตัวอย่างด้านล่าง: DIV ลูกจะต้องอยู่ในฐานะลูกของผู้ปกครอง ฉันรู้ว่าฉันสามารถตั้งค่าระยะขอบลบโดยพลการบน div เด็กเพื่อให้กว้างขึ้น แต่ฉันไม่สามารถหาวิธีทำให้ความกว้าง 100% ของเบราว์เซอร์เป็นหลัก ฉันรู้ว่าฉันสามารถทำสิ่งนี้: .child-div{ margin-left: -100px; margin-right: -100px; } แต่ฉันต้องการให้เด็กมีความกว้างเท่ากับเบราว์เซอร์ที่เป็นแบบไดนามิก ปรับปรุง ขอบคุณสำหรับคำตอบของคุณดูเหมือนว่าคำตอบที่ใกล้ที่สุดคือการทำให้ตำแหน่ง DIV ของเด็ก: สัมบูรณ์และตั้งค่าคุณสมบัติซ้ายและขวาเป็น 0 ปัญหาต่อไปที่ฉันมีคือผู้ปกครองมีตำแหน่ง: ญาติซึ่งหมายความว่าคุณสมบัติด้านซ้ายและขวายังคงสัมพันธ์กับผู้ปกครอง div และไม่ใช่เบราว์เซอร์ดูตัวอย่างที่นี่: jsfiddle.net/v2Tja/2 ฉันไม่สามารถลบตำแหน่งที่สัมพันธ์กันจากผู้ปกครองได้โดยไม่พลาดทุกสิ่ง

229 css  html 

ฉันอ่านต่อไปทุกที่ว่า CSS ไม่ได้ตรงตามตัวพิมพ์ใหญ่ - เล็ก แต่ฉันมีตัวเลือกนี้ .holiday-type.Selfcatering สิ่งที่เมื่อฉันใช้ใน HTML ของฉันแบบนี้จะถูกหยิบขึ้นมา <div class="holiday-type Selfcatering"> หากฉันเปลี่ยนตัวเลือกด้านบนเช่นนี้ .holiday-type.SelfCatering จากนั้นสไตล์จะไม่ถูกหยิบขึ้นมา มีคนบอกเรื่องโกหก

229 html  css  css-selectors 

ฉันพยายามที่จะทำสำเนาจดหมายที่ฉันได้รับใน Gmail ของฉันโดยดูที่รหัส ฉันเห็นสิ่งนี้มากมายในผู้ชมหลายแหล่ง: <td style=3D"border-bottom: 1px dotted rgb(153,157, 147); border-top: 1px solid rgb(28, 140, 78);" width=3D"90">=A0</td> <td style=3D"border-bottom: 1px dotted rgb(153,157, 147); border-top: 1px solid rgb(28, 140, 78);" align=3D"right" width=3D"110"> 3D เป็นจดหมายที่ฉันไม่รู้จักใช่มั้ย

229 html  css  html-email 

คุณสามารถนำเข้าไฟล์. css เป็นไฟล์ .less ... ได้หรือไม่ ฉันคุ้นเคยกับมันน้อยกว่าและใช้เพื่อการพัฒนาของฉันทั้งหมด ฉันใช้โครงสร้างเป็นประจำดังนี้: @import "normalize"; //styles here @import "mixins"; @import "media-queries"; @import "print"; การนำเข้าทั้งหมดเป็นไฟล์ .less อื่น ๆ และใช้งานได้ตามที่ควรจะเป็น ปัญหาปัจจุบันของฉันคือสิ่งนี้: ฉันต้องการนำเข้าไฟล์. css ไปที่. เว้นแต่ว่าการอ้างอิงสไตล์ที่ใช้ในไฟล์. css ดังต่อไปนี้: @import "../style.css"; .small { font-size:60%; .type; } // other styles here ไฟล์. css มีคลาสที่เรียกว่า.typeแต่เมื่อฉันพยายามคอมไพล์ไฟล์ .less ฉันได้รับข้อผิดพลาดNameError: .type is undefined ไฟล์ …

228 css  import  less 

ฉันกำลังสร้างเว็บไซต์โดยใช้ Twitter Bootstrap ใหม่ ไซต์ดูดีและทำงานได้ในเบราว์เซอร์ที่จำเป็นทั้งหมดยกเว้น IE8 ใน IE8 ดูเหมือนว่าจะแสดงองค์ประกอบของรุ่นมือถือ แต่ขยายไปทั่วหน้าจอเต็มของเดสก์ท็อปของฉัน ฉันเชื่อว่าปัญหาที่ฉันมีก็คือ Twitter bootstrap นั้นเป็นอุปกรณ์พกพาก่อน ดังนั้นด้วยเหตุผลบางอย่าง IE8 จึงเป็นไปได้สำหรับตัวเลือกนี้ ฉันยังสังเกตเห็นว่าcontainerคลาสดูเหมือนจะไม่ถูกดึงในคุณสมบัติ CSS ความกว้างสูงสุดตามที่ต้องการ ทุกคนสามารถเห็นสิ่งที่ฉันทำผิดได้ไหม <!-- Favicon --> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- Bootstrap --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"> <script src="/SiteFiles/js/modernizr.js"></script> <!-- CSS --> <link href="/SiteFiles/css/main.css" rel="stylesheet"> <header> <div …

228 html  css  twitter-bootstrap  internet-explorer-8  twitter-bootstrap-3 

ฉันใช้visibility:hiddenเพื่อซ่อนองค์ประกอบบางอย่าง แต่พวกเขายังคงใช้พื้นที่บนหน้าเว็บในขณะที่ซ่อนอยู่ ฉันจะทำให้พวกเขาหายตัวไปอย่างสิ้นเชิงได้อย่างไรราวกับว่าพวกเขาไม่ได้อยู่ใน DOM เลย (แต่ถ้าไม่ได้ลบพวกเขาออกจาก DOM)?

228 html  css 

ฉันกำลังสร้างเว็บไซต์ด้วยDIVs ทุกอย่างทำงานได้ยกเว้นเมื่อฉันสร้าง DIV ฉันสร้างพวกเขาเช่นนี้ (ตัวอย่าง): newdiv { width: 200px; height: 60px; padding-left: 20px; text-align: left; } เมื่อฉันเพิ่มpadding-leftคุณสมบัติความกว้างของการDIVเปลี่ยนแปลงเป็น 220px และฉันต้องการให้อยู่ที่ 200px สมมติว่าฉันจะสร้างอีกDIVชื่อanotherdivเหมือนกับnewdivและวางไว้ภายในnewdivแต่newdivไม่มีช่องว่างและมีanotherdiv padding-left: 20pxฉันได้สิ่งเดียวกันnewdivความกว้างของมันจะเท่ากับ 220px ฉันจะแก้ไขปัญหานี้ได้อย่างไร

227 html  css  padding 

ฉันใช้ jQuery และ jQuery-ui และต้องการเคลื่อนไหวคุณลักษณะต่าง ๆ บนวัตถุต่าง ๆ เพื่ออธิบายปัญหาที่นี่ฉันได้ทำให้มันง่ายขึ้นสำหรับ div หนึ่งที่เปลี่ยนจากสีน้ำเงินเป็นสีแดงเมื่อผู้ใช้เลื่อนเมาส์ไปที่มัน ฉันสามารถรับพฤติกรรมที่ฉันต้องการได้เมื่อใช้animate()อย่างไรก็ตามเมื่อทำเช่นนั้นสไตล์ที่ฉันเคลื่อนไหวต้องอยู่ในรหัสภาพเคลื่อนไหวและแยกจากสไตล์ชีตของฉัน (ดูตัวอย่างที่ 1 ) ทางเลือกที่จะใช้addClass()และแต่ฉันไม่ได้รับสามารถที่จะสร้างใหม่อีกครั้งพฤติกรรมที่แน่นอนว่าผมจะได้รับกับremoveClass() animate()(ดูตัวอย่างที่ 2 ) ตัวอย่างที่ 1 ลองดูรหัสที่ฉันมีanimate(): $('#someDiv') .mouseover(function(){ $(this).stop().animate( {backgroundColor:'blue'}, {duration:500}); }) .mouseout(function(){ $(this).stop().animate( {backgroundColor:'red'}, {duration:500}); }); มันแสดงพฤติกรรมทั้งหมดที่ฉันกำลังมองหา: เคลื่อนไหวได้อย่างราบรื่นระหว่างสีแดงและสีน้ำเงิน ไม่มีภาพเคลื่อนไหว 'overqueue-ing' เมื่อผู้ใช้เลื่อนเม้าส์เข้าและออกจาก div อย่างรวดเร็ว หากผู้ใช้เลื่อนเมาส์ออก / เข้าในขณะที่ภาพเคลื่อนไหวยังคงเล่นอยู่จะช่วยลดความถูกต้องระหว่างสถานะ 'ครึ่งทาง' ปัจจุบันและสถานะ 'เป้าหมาย' ใหม่ แต่เนื่องจากการเปลี่ยนแปลงสไตล์ถูกกำหนดไว้ในanimate()ฉันต้องเปลี่ยนค่าสไตล์ที่นั่นและไม่สามารถชี้ไปที่สไตล์ชีทของฉันได้ 'การแตกแฟรกเมนต์' ซึ่งสไตล์ถูกกำหนดเป็นสิ่งที่รบกวนจิตใจฉันอย่างแท้จริง …

225 javascript  jquery  css  jquery-ui  jquery-animate 

ปุ่มของฉันมีจุดเด่นอยู่รอบ ๆ หลังจากที่ฉันคลิก นี่คือใน Chrome <button class="btn btn-primary btn-block"> <span class="icon-plus"></span> Add Page </button> ฉันใช้ Bootstrap ด้วยธีม แต่ฉันค่อนข้างแน่ใจว่าไม่ใช่: ฉันกำลังสังเกตเห็นสิ่งนี้มาก่อนในโครงการอื่น มันจะหายไปถ้าผมใช้แท็กแทน<a> <button>ทำไม? ถ้าฉันต้องการใช้<button>ฉันจะทำให้มันหายไปได้อย่างไร

225 html  css  twitter-bootstrap 

เป็นไปได้ที่จะจัดรูปแบบตัวยึดข้อความของตัวป้อนข้อมูลด้วยวิธีต่อไปนี้: -webkit-input-placeholder { color: red; } ฉันกำลังดูเว็บไซต์ออนไลน์และฉันต้องการใช้สีตัวยึดตำแหน่งเดียวกับที่ทำ เป็นไปได้ไหมที่จะใช้สีอะไร? ฉันต้องการรวมค่าอัลฟาใด ๆ ดังนั้นฉันจึงไม่สามารถลองสีด้วยเครื่องมือแก้ไขภาพได้ เมื่อฉันตรวจสอบองค์ประกอบด้วย Chrome Dev Tools ฉันเห็น: เครื่องมือ Dev ไม่ได้ให้ข้อมูลเกี่ยวกับองค์ประกอบตัวแทนเมื่อทำการตรวจสอบองค์ประกอบอินพุต มีวิธีอื่นอีกไหม?

225 html  css 

บางสิ่งที่ฉันสงสัยในขณะทำการออกแบบ CSS มีการวางตำแหน่งทศนิยมในความกว้างของ CSS หรือไม่ หรือว่าพวกเขาถูกปัดเศษ? .percentage { width: 49.5%; } หรือ .pixel { width: 122.5px; }

225 html  css 

ฉันใช้รหัสนี้เพื่อจัดตำแหน่งปุ่มขวา <p align="right"> <input type="button" value="Click Me" /> </p> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล แต่<p>แท็กเสียพื้นที่บางส่วนจึงมองหาที่จะทำเช่นเดียวกันกับหรือ<span><div>

225 html  css 

ฉันมีการ@mediaตั้งค่านี้: HTML : <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS : @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @media only screen and (max-device-width: 480px) { /* STYLES HERE */ } ด้วยการตั้งค่านี้มันทำงานบน …

225 css  mobile  media-queries 

ดังนั้นปัจจุบันฉันมี: #div { position: relative; height: 510px; overflow-y: scroll; } อย่างไรก็ตามฉันไม่เชื่อว่าจะมีผู้ใช้บางคนที่ชัดเจนว่ามีเนื้อหาเพิ่มเติม พวกเขาสามารถเลื่อนหน้าลงโดยไม่ทราบว่า div ของฉันมีเนื้อหามากขึ้น ฉันใช้ความสูง 510px เพื่อตัดข้อความบางส่วนออกไปในบางหน้าดูเหมือนว่ามีเนื้อหามากกว่านี้ แต่มันใช้ไม่ได้กับทุกคน ฉันใช้ Mac และใน Chrome และ Safari แถบเลื่อนแนวตั้งจะแสดงเฉพาะเมื่อเมาส์อยู่เหนือ Div และคุณเลื่อนอย่างแข็งขัน มีวิธีที่จะแสดงมันเสมอ?

225 css  macos  scroll  overflow