ฟลอยด์
โปสเตอร์ต้นฉบับ- 7 เม.ย. 2548
- มอนเตร์เรย์ เม็กซิโก
- 27 มี.ค. 2549
ฉันมีสอง divs อันหนึ่งมีความสูงคงที่ และฉันต้องการให้อีกอันหนึ่งเติมพื้นที่แนวตั้งที่เหลืออยู่บนหน้าต่าง หากฉันตั้งค่าความสูงของ div หลังเป็น 100% จะทำให้มีความสูงเท่ากับหน้าต่าง แต่ฉันต้องการให้เป็นความสูงของหน้าต่างลบด้วยความสูงของ div แรก
นี่คือรหัสที่ฉันใช้:
รหัส: |_+_|
ฉันยังรวมรูปภาพบางภาพที่แสดงว่าฉันต้องการจะทำและสิ่งที่ฉันสามารถทำได้จนถึงตอนนี้ ขอบคุณล่วงหน้า
เอกสารแนบ
NS
NoNameBrand
- 17 พ.ย. 2548
- แฮลิแฟกซ์ แคนาดา
- 27 มี.ค. 2549
มิฉะนั้น ฉันไม่สามารถคิดวิธีที่คุณจะได้ในสิ่งที่คุณต้องการ
สตีฟ
- 13 ต.ค. 2547
- สหราชอาณาจักร
- 27 มี.ค. 2549
ลอง:
เอกสารไม่มีชื่อ
ถึง
NS
ค
NS
และ
ปล. ฉันโกงโดยการทำใน DW เพิ่มเนื้อหาบางส่วนในเลเยอร์ที่สองแล้วยุ่งกับรหัส - DW ชอบสิ่งต่าง ๆ ที่มีช่องว่างภายในขอบและแม้ว่าคุณจะระบุในกล่องโต้ตอบที่คุณต้องการให้เลเยอร์ เริ่มต้นที่ 0px จากมุมด้านบน คุณต้องบอกสองครั้งโดยใช้มุมมองโค้ด ฉันต้องอยู่แล้ว
ฟลอยด์
โปสเตอร์ต้นฉบับ- 7 เม.ย. 2548
- มอนเตร์เรย์ เม็กซิโก
- 27 มี.ค. 2549
NoNameBrand กล่าวว่า: ทำไมไม่ซ้อนที่ 1 ใน 2?
มิฉะนั้น ฉันไม่สามารถคิดวิธีที่คุณจะได้ในสิ่งที่คุณต้องการ
ขอบคุณ มันใช้งานได้จริง แต่ div ที่สองจะเป็นคอนเทนเนอร์สำหรับเลย์เอาต์นี้ ดังนั้นฉันยังต้องการให้มันมีขนาดที่เหมาะสมเพื่อให้เนื้อหาของมันสืบทอดมา
ดังนั้นมันอาจจะเป็นไปไม่ได้? บางทีฉันอาจต้องใช้จาวาสคริปต์เล็กน้อยเพื่อให้ทำงานได้
สตีฟ พูดว่า: ลอง:ขอบคุณ แต่ฉันใช้งานไม่ได้ คุณใช้เบราว์เซอร์อะไร
ฟลอยด์
โปสเตอร์ต้นฉบับ- 7 เม.ย. 2548
- มอนเตร์เรย์ เม็กซิโก
- 27 มี.ค. 2549
โอเค นี่คือภาพเป้าหมายสูงสุดของฉัน จนถึงตอนนี้ฉันก็ค่อยๆ ทำไป บางทีปัญหาอาจมาจากแนวทางเริ่มต้นของฉัน พวกคุณจะเข้าหาสิ่งนี้ได้อย่างไร (ฉันแค่ต้องการความคิด)? คุณจะใช้ pure css หรือคุณจะยอมจำนนต่อตารางหรือเฟรม?
เอกสารแนบ
สตีฟ
- 13 ต.ค. 2547
- สหราชอาณาจักร
- 27 มี.ค. 2549
บิตที่คุณต้องเล่นด้วยคือ:
#เลเยอร์1 {
ตำแหน่ง:แน่นอน;
ซ้าย:0px;
ด้านบน:0px;
ความกว้าง:100%;
ความสูง:180px;
ดัชนี z: 1;
สีพื้นหลัง: #99CCFF;
}
หยาบหน้าของคุณบนแผ่นกระดาษเพื่อให้คุณได้ตำแหน่งที่ถูกต้อง และนั่นจะทำให้คุณมีตำแหน่งของมุม LH บนสุดของแต่ละเลเยอร์ ความสูงของชั้นที่ 1 จะเป็นตัวกำหนดตำแหน่งเริ่มต้นของชั้นที่ 2 - ในกรณีนี้ ชั้นที่ 2 จะต้องมี aด้านบน:180px;บรรทัดของรหัส
หากคุณต้องการ 3 เลเยอร์ดังที่คุณแสดงในโพสต์ล่าสุด เลเยอร์ด้านซ้ายสุดจะเป็น:
#เลเยอร์1 {
ตำแหน่ง:แน่นอน;
ซ้าย:0px;
ด้านบน:0px;
ความกว้าง:200px;
ความสูง:100%;
ดัชนี z: 1;
สีพื้นหลัง: #336699;
}
และชั้น RH บนสุดจะเป็น:
#เลเยอร์1 {
ตำแหน่ง:แน่นอน;
ซ้าย:200px;
ด้านบน:0px;
ความกว้าง:100%;
ความสูง:180px;
ดัชนี z: 2;
สีพื้นหลัง: #33CCFF;
}
และชั้นที่ 3 เพื่อเติมส่วนที่เหลือของหน้าต่าง (อย่างไรก็ตาม มันถูกปรับขนาด) ควรเป็นดังนี้:
#เลเยอร์1 {
ตำแหน่ง:แน่นอน;
ซ้าย:200px;
ด้านบน:180px;
ความกว้าง:100%;
ความสูง:100%;
ดัชนี z: 3;
สีพื้นหลัง: #99CCFF;
}
เป็นการดีที่สุดที่จะใส่เนื้อหาจำลองในแต่ละเลเยอร์หากคุณใช้ Dreamweaver ในกรณีที่เลเยอร์ลดขนาดลงเหลือเพียงการดูหน้าเว็บ ดังนั้น 'a,b,c ฯลฯ' ใน html ดั้งเดิมด้านบน
ปล.ผมไม่ใช่ผู้เชี่ยวชาญ ผมอาจจะคิดผิดแต่หวังว่ามันจะช่วยได้ สิ่งที่ฉันสามารถพูดได้ก็คือโค้ดแรกของฉันดูเหมือนจะใช้งานได้ โดยส่วนตัวแล้วฉันจะไม่ซ้อนเลเยอร์ถ้าฉันช่วยได้ แต่นั่นเป็นแค่ฉัน - ฉันทำง่าย ๆ เท่านั้น NS
NoNameBrand
- 17 พ.ย. 2548
- แฮลิแฟกซ์ แคนาดา
- 27 มี.ค. 2549
นี่คือสิ่งที่ฉันจะทำ:
รหัส:
ฟู คุณเชื่อ!
-
- 14 มิ.ย. 2546
-
-
- MD / VA / DC
- 27 มี.ค. 2549
ดีคอนเซปต์ ...
ลองดู FlashObject และในการดาวน์โหลดจะมีโค้ดสำหรับสร้าง div แบบเต็มหน้าจอ.. บางทีมันอาจปรับแต่งตามที่คุณต้องการก็ได้
http://blog.deconcept.com/flashobject/ ฟลอยด์
โปสเตอร์ต้นฉบับ -
- 7 เม.ย. 2548
-
-
- มอนเตร์เรย์ เม็กซิโก
- 28 เม.ย. 2549
ขอบคุณสำหรับความช่วยเหลือทุกคน แต่ฉันเพิ่งรู้ว่ารูปแบบที่แน่นอนที่ฉันต้องการนั้นเป็นไปไม่ได้ด้วยการรวมกันของความกว้าง/ความสูงคงที่และเปอร์เซ็นต์ ฉันเขียนใหม่โดยใช้เปอร์เซ็นต์เท่านั้นและตอนนี้ก็ใช้ได้ หากคุณสนใจในมาร์กอัปแจ้งให้เราทราบแล้วฉันจะโพสต์ให้ สตีฟ
-
- 13 ต.ค. 2547
-
-
- สหราชอาณาจักร
- 28 เม.ย. 2549
floyde กล่าวว่า: หากคุณสนใจมาร์กอัปบอกฉันแล้วฉันจะโพสต์
ฉันอยากจะดูว่าถ้าคุณมีเวลาจะโพสต์อีกครั้ง
NoNameBrand กล่าวว่า: อะไรคือ 'เลเยอร์' นี้? นั่นคือ Dreamweaver-esque สำหรับ 'break stuff real-good' หรือไม่?
ฉันไม่รู้เกี่ยวกับ 'สิ่งที่ทำลาย' แต่ฉันเดาว่าคุณคงสงสัยว่าฉันไม่ใช่ CSS boff - เลเยอร์เป็นชื่อที่สะดวกที่ DW มอบให้กับสิ่งที่ฉันคิดว่าควรเรียกว่า 'องค์ประกอบที่มีตำแหน่ง CSS' - และ ฉันคิดว่าพวกเขาเรียกมันว่าการทำให้คนที่ชอบฉันจากพื้นหลัง DTP / Photoshop รู้สึกสบายใจขึ้นเล็กน้อย การดูโค้ดที่คุณรวมไว้ในโพสต์ NoNameBrand นั้นดูสง่างามกว่าของฉันมาก - ฉันจะต้องพยายามอย่างมากที่จะเอาหัวของฉันไปรอบ ๆ แท็ก div ขอบคุณสำหรับ OP และการตอบกลับ NS NoNameBrand
-
- 17 พ.ย. 2548
-
-
- แฮลิแฟกซ์ แคนาดา
- 28 เม.ย. 2549
stevep กล่าวว่า: ฉันไม่รู้เกี่ยวกับ 'สิ่งที่แตกหัก' แต่ฉันเดาว่าคุณคงสงสัยว่าฉันไม่ใช่ CSS boff - เลเยอร์เป็นชื่อที่สะดวกที่ DW มอบให้กับสิ่งที่ฉันคิดว่าควรเรียกว่า 'องค์ประกอบที่มีตำแหน่ง CSS '
พวกเขายังมีดัชนี z ซ้อนอยู่ด้วย - ซึ่งวางตำแหน่งสิ่งต่าง ๆ จากด้านหน้าไปข้างหลังบนหน้า ฉันเคยเห็นเลเยอร์ DW มาก่อนที่ทำลายไซต์โดยสิ้นเชิง แต่ไม่เช่นนั้นก็ไม่ค่อยได้รับความสนใจมากนัก (นั่นก็เพียงพอแล้วจริงๆ)
ฉันจะต้องแทงเพื่อให้หัวของฉันไปรอบ ๆ แท็ก div
A เป็นเพียงบล็อกตามอำเภอใจ - มันไม่ได้มีความหมายอะไรในทางที่ทำ (ย่อหน้าของข้อความ) NSเป็นความคิดเดียวกัน แต่สำหรับสิ่งในบรรทัด (เช่น a แท็ก แต่อีกครั้ง ความหมายฟรี)
สิ่งที่ง่ายที่สุดที่จะทำเพื่อเรียนรู้สิ่งนี้คือการหยุดใช้ Dreamweaver ฉันออกแบบไซต์ของฉันใน Photoshop แล้วบันทึกองค์ประกอบกราฟิกที่ฉันต้องการ พร้อมกับจดรหัสสีและการวัดพิกเซลคร่าวๆ เพื่อจุดประสงค์ในการจัดตำแหน่ง จากนั้นจึงเขียนโค้ดไซต์ใน TextWrangler หรือ VIM ฟลอยด์
โปสเตอร์ต้นฉบับ -
- 7 เม.ย. 2548
-
-
- มอนเตร์เรย์ เม็กซิโก
- 28 เม.ย. 2549
stevep กล่าวว่า: ฉันต้องการดูว่าคุณมีเวลาโพสต์อีกครั้งหรือไม่
มีภาษาสเปนอยู่บ้าง หวังว่าจะไม่สับสนเกินไป:
รหัส:Grand Scheme html { ความสูง: 100%; } ร่างกาย { ระยะขอบ: 0; ช่องว่างภายใน: 0; ความสูง: 100%; ความกว้าง: 100%; } #left, #right { ลอย: ซ้าย; } #left { ความสูง:100%; พื้นหลังสี: ส้ม; ความกว้าง: 10%; } #right { ความสูง: 100%; ตำแหน่ง:ญาติ; ความกว้าง: 90%; } #top { สีพื้นหลัง: สีน้ำเงิน; ความสูง: 10%; } #fotos { ตำแหน่ง: ญาติ; ความสูง: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { ความสูง: 50%; ความกว้าง: 50%; ล้น: อัตโนมัติ; ตำแหน่ง: สัมบูรณ์; } #foto_sup_izq, #foto_sup_der { ด้านบน: 0; } #foto_sup_der, #foto_inf_der { ซ้าย: 50%; } #foto_inf_izq, #foto_inf_der { ด้านบน: 50%; } 
เอกสารแนบ
โพสต์ยอดนิยม