JavaScript, không biết tôi đang làm gì

Tôi đang cố gắng sử dụng JavaScript để đặt chiều rộng phần tử tương ứng với chiều rộng độ phân giải màn hình của chúng. Tôi sẽ giải thích một chút lý do tại sao ... Tôi có hình ảnh này: http://i.stack.imgur.com/HeXvu.png JavaScript, không biết tôi đang làm gì

Tôi muốn đây là tiêu đề của tôi, bởi tôi không muốn nó là một hình ảnh hoàn toàn tĩnh, tôi muốn tiêu đề mở rộng với độ phân giải màn hình, vì vậy tôi thiết lập CSS của tôi và một cái gì đó HTML như thế này ...

HMTL:

<html> 
    <body> 
     <div class="globalContainer"> 
      <div id="headerMain"> 
       <div class="headerLeft"> 
       </div> 
       <div class="headerRight"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

CSS:

#headerMain { 
    height: 79px; 
    background-image: url(../img/global/middleHeader.png); 
    background-repeat: repeat-x; 
} 
.headerLeft { 
    width: 63px; 
    height: 79px; 
    background-image: url(../img/global/leftHeader.png); 
    background-repeat: no-repeat; 
    float: left; 
} 
.headerRight { 
    width: 63px; 
    height: 79px; 
    background-image: url(../img/global/rightHeader.png); 
    background-repeat: no-repeat; 
    float: right; 
}

Bây giờ, những gì tôi đang cố gắng để làm ở đây là, đã xác định trước w idths và heights cho phần bên trái và bên phải được chữa khỏi của header, và sử dụng div header đầu tiên (với hình ảnh giữa được đặt làm background). Vấn đề duy nhất tôi gặp phải ở đây chính là nền của div chính (một phần có phần giữa của tiêu đề), hiển thị phía sau hình ảnh là đường cong bên phải của tiêu đề, như sau: http://i.stack.imgur.com/XEq85.png

Làm thế nào Tôi có được xung quanh để làm điều này? Một cách tôi có thể nghĩ là sử dụng JavaScript. Dưới đây là những gì tôi đã suy nghĩ, đầu tiên kịch bản lấy chiều rộng màn hình người dùng bằng cách sử dụng "screen.width", sau đó trừ "63" từ giá trị (chiều rộng của phần cong bên phải của tiêu đề) và đặt giá trị đó làm tiêu đề chính chiều rộng của phần tử, mà về mặt lý thuyết nên khắc phục vấn đề nền. Vấn đề duy nhất là, tôi có ít hoặc không có kinh nghiệm JavaScript và không biết cách làm bất cứ điều gì, lý do duy nhất tôi biết về một vài điều tôi làm, chủ yếu là vì tôi đã sao chép/dán một vài mã JS khác trong một vài các trang của tôi ... Yeah. Khá xấu. Vì vậy, tôi phải làm gì? o_o

Nguồn

2012-03-27 Nyanja

Hãy thử lấy đúng div ra và đặt nó lên trên div chính sao cho nó là anh chị em. –

Vui lòng đặt tiêu đề mô tả cho câu hỏi của bạn. –

Bạn có thể thử dùng trái và tiêu đề đúng divs ra khỏi div headerMain và đặt chúng cùng cấp trong DOM. Sau đó, sử dụng CSS được sửa đổi này:

#headerMain { height: 79px; background-image: url(../img/global/middleHeader.png); background-repeat: repeat-x; position:absolute; top:0px; left:63px; right:63px;} 

.headerLeft { width: 63px; height: 79px; background-image: url(../img/global/leftHeader.png); background-repeat: no-repeat; position:absolute; top:0px; left:0px;} 

.headerRight { width: 63px; height: 79px; background-image: url(../img/global/rightHeader.png); background-repeat: no-repeat; position:absolute; top:0px; right:0px;}

Nguồn

2012-03-27 02:27:22 KodeKreachor

Làm việc tuyệt vời, cảm ơn rất nhiều! : O – Nyanja

Bạn được chào đón nhiều nhất – KodeKreachor

bạn có thể muốn làm điều gì đó like this:

<div id="header"> 
    <div class="leftCurve"></div> 
    <ul> 
     <li> 
      <a href="#">link</a> 
     </li> 
     <li> 
      <a href="#">link</a> 
     </li> 
     <li> 
      <a href="#">link</a> 
     </li> 
    </ul> 
    <div class="rightCurve"></div> 
</div> 

#header{ 
    overflow:hidden; 
    zoom:1; 
} 

#header > *{ 
    float:left; 
} 

#header .leftCurve{ 
    /*curve image*/ 
    width:100px; /*adjust dimensions accordingly*/ 
    height:100px; /*adjust dimensions accordingly*/ 
    background:blue; 
} 

#header .rightCurve{ 
    /*curve image*/ 
    width:100px; /*adjust dimensions accordingly*/ 
    height:100px; /*adjust dimensions accordingly*/ 
    background:blue; 
} 

#header ul{ 
    /*repeating bg image*/ 
    overflow:hidden; 
    zoom:1; 
    width: 20%; 
} 
#header ul li{ 
    float:left; 
    width:33%; /* 100/number of items, in percent */ 
} 

#header ul li a{ 
    display:block; 
    background:red; 
    border: 1px solid #0F0; 
}

Nguồn

2012-03-27 02:26:01 Joseph

Đây là ví dụ làm việc về những gì bạn đang cố gắng đạt được - http://jsfiddle.net/Tq33c/.

Nguồn

2012-03-27 02:44:38 tjscience

JavaScript, không biết tôi đang làm gì

Trả lời

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