Chiều rộng divml 100% không hoạt động

Có một số vấn đề với HTML của tôi, vì vậy tôi đang đăng mã.Chiều rộng divml 100% không hoạt động

Thẻ đầu tiên là div với id="header". Tôi đã cho nó 100% chiều rộng và cho nó một hình nền.

Bên trong tiêu đề có một số div khác với id="header-contents". Tôi muốn nó tập trung vào trang vì vậy tôi đã cho nó một chiều rộng và sau đó margin:0 auto. Nó hoạt động tốt với trình duyệt có kích thước tối đa nhưng khi tôi phóng to hoặc thay đổi kích thước chiều rộng của trình duyệt thành khoảng một nửa, nền của div tiêu đề bắt đầu biến mất tại một số điểm và không lấp đầy chiều rộng 100%.

Đây là cách nó nhìn đầu tiên (và nên luôn luôn tìm kiếm): intended look http://i49.tinypic.com/3505fnk.png

Đây là cách nó trông khi tôi phóng to hay thay đổi kích thước trình duyệt: after resize http://i46.tinypic.com/2lqg7r.png

HTML thích hợp và CSS là gì cho nó? Dưới đây là các mã:

<!DOCTYPE HTML> 
<html> 
<style> 
body 
{ 
    margin:0; 
    padding:0; 
} 
.clear 
{ 
    display:block; 
    clear:both; 
} 
#header 
{ 
    min-height:156px; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
} 
#head-contents 
{ 
    width:974px; 
    margin:0 auto; 
    height:156px; 
} 
#header ul 
{ 
    margin:85px 23px 0 0; 
    float:right; 
    list-style-type:none; 
} 
#header ul li 
{ 
    display:inline; 
} 
#header ul li a 
{ 
    margin-left:46px; 
    font-size:19px; 
    color:#fff; 
    text-decoration:none; 
} 
#header ul li a:hover , 
#header ul li a.active 
{ 
    color:#FD7600 
} 
</style> 
<body> 
<div id="header"> 

<div id="head-contents"> 

<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRRlklPBeTiVsV7dycvDxqFyrU02d0grYf4rTUqL-2ZzGb8Qvbwimb37HgO" /> 

<ul> 
<li><a href="#" class="active">Home</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 

<div class="clear"></div> 

</div> 

</div> 

</body> 

</html>

Nguồn

2012-06-25 UmeRonaldo

Bạn nên học cách sử dụng jsfiddle vì vậy chúng tôi có thể giúp dễ dàng hơn. Google nó! – Samson

Đây là fiddle http://jsfiddle.net/eYrg8/ – UmeRonaldo

Đây là style sheet mà làm việc với tôi:

body{  
    margin:0;  
    padding:0; 
} 
    .clear{  
    display:block; 
    clear:both; 
}  
    #header{ 
    min-height:156px; 
    display: block; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
} 
    #head-contents{  
    width:974px;  
    margin-left:200px; 
    height:156px; 
} 
    #header ul {  
    margin:85px 23px 0 0;  
    float:right; 
    list-style-type:none; 
} 
    #header ul li {  
    display:inline; 
}  
    #header ul li a { 
    margin-left:46px; 
    font-size:19px; 
    color:#fff; 
    text-decoration:none; 
} 

    #header ul li a:hover ,  
    #header ul li a.active {  
    color:#FD7600; 
}

Thay đổi kích thước cửa sổ và thiết lập lề cho ô tô sẽ vít vị trí của div bên trong của bạn bởi vì nó là chiều rộng không khớp với cửa sổ.

Nguồn

2012-06-25 20:32:37 Samson

Tôi đang tìm một giải pháp – UmeRonaldo

nhấp vào liên kết! :) – Samson

tôi đã làm, tôi nghĩ rằng tôi đã không làm cho vấn đề của tôi đủ rõ ràng. – UmeRonaldo

Đi ra thuộc tính background-image từ # header và áp dụng phong cách này để thẻ nội dung:

background: url('http://www.webdesignideas.org/images/bellevueBg.gif') 0 0 repeat-x #fff;

Bạn sẽ không còn có vấn đề bạn mô tả. Tất cả những gì bạn cần làm bây giờ là cắt giảm hình nền xuống 156px chiều cao, sử dụng gói phần mềm chỉnh sửa hình ảnh như Photoshop.

Edit: đây là jsfiddle cập nhật cho thấy các giải pháp: http://jsfiddle.net/eYrg8/35/

Nguồn

2012-06-25 21:33:39 Rob

tôi đã tìm thấy các giải pháp:

#header { 
    height: 156px; 
    min-width: 990px; 
    background-image: url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
    display: block; 
} 

#head-contents { 
    width: 974px; 
    margin: 0 auto; 
    height: 156px; 
}

Đó là tất cả một vấn đề của min-width trong # header. Tôi đã kiểm tra trang đăng nhập của facebook và tìm ra nó.

Nguồn

2012-06-26 08:30:13 UmeRonaldo

Working FIDDLE Demo

Bạn phải thiết lập các width của head-contents của bạn như là min-width của header của bạn:

#header { 
    min-height:156px; 
    display: block; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 

    min-width: 974px; /* this is width of head-contents */ 
}

Nguồn

2013-05-21 02:30:08

#header { 
    min-height:156px; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
}

Nguồn

2014-09-13 15:18:02

Chiều rộng divml 100% không hoạt động

Trả lời

Các vấn đề liên quan