Giúp đỡ giải quyết bài toán này với css

**imchicken** · 26-09-2010 18:17

Hì mình đọc hiểu mà nhỉ

hình nè ai giúp mình với

Tạo viền ấy. (ảnh 2 viền 4x1 px). Thanks

**maicon** · 26-09-2010 20:23

tách ra 3 div làm gì, tạo 1 cái wrapper chứa cái hình độ cao 1px chiều dài bao gồm cả 2 biên chứa hiệu ứng outner glow đó là được rồi, xài repeat-y

Hay ý bác này là wrapper thay đổi width được ? nếu vậy thì xài 3 div float left, sau đó viết js cho 2 div 2 bên có cùng height với div ở giữa.

Cái này table làm rất dễ, nhưng xử lý js cũng chả khó khăn là mấy.

à quên, 3 div đó phải nằm trong 1 div wrapper khác để nhảy ra giữa

**honnhienh** · 26-09-2010 22:12

Cái này có phải ý bác là như thế nào không? Cái content thì nó không thay đổi kích thước rùi đúng không (fixed width) ? màn hình có lớn ra thì chỉ có 2 cái biên nó dãn ra theo thôi đúng không ?(hai cái hình biên nó dãn ra). Cái backgorund menu dẫn ra hai bên theo luôn không (nội dung menu luôn lằm giữa bằng với kích thước content) ?

**imchicken** · 26-09-2010 22:29

@All cảm ơn đã reply

@honnhienh : fixed thì mình có thể background là 1 ảnh với width rộng còn h mình muốn chuyển sang fluid nên mình cắt 2 viền ấy thành 2 ảnh nhỏ. để tạo viền.

và vấn đề mình là code css thế nào ?. Mọi người rảnh thì viết vài dòng css cho mình luôn thì cảm ơn nhiều

.

**honnhienh** · 26-09-2010 23:09

zậy thì bạn làm cái background là cái hình viền đó luôn. Nội dung bạn dùng padding. lúc đó 2 cái viền theo ý bạn luôn mà.

chẳng hạn nhưng cái div lớn widh 100% div content 80% padding 0 10%; hi vọng được. Mình thấy cái background cùng màu mà có thể làm như zậy được.

**1024KB** · 26-09-2010 23:33

Giải pháp của mình là sử dụng 2 div left và right, kết hợp jQuery để có thể set height của div left và right.

Code cho bạn:

PHP Code:


//css
body { 
  padding: 0;
  margin: 0;
}
#container{
  margin: 0 auto; //center
  width: 1000px;
}
#bg-left {
  background: url(./images/bg_left.jpg) repeat-y; 
  width: 4px;
  float: left;
}
#bg-right {
  background: url(./images/bg_right.jpg) repeat-y; 
  width: 4px;
  float: right;
}
#wrapper {
  width: 992px; //1000 - 4x2 = 992px;
  float: left;
}

//html
...
<head>
   //include jQuery script
   <script type="text/javascript">
      $(function(){
         var height = $('#wrapper').height(); //lấy height của nội dung
         //set height left and right
         $('#bg-left').css('height', height);
         $('#bg-right').css('height', height);
      });
   </script>
</head>
<body>
<div id="container">
   <div id="bg-left"></div><!-- end #bg-left -->
   <div id="bg-right"></div><!-- end #bg-right -->
   <div id="wrapper">
      Your content goes here.
   </div>
</div><!-- end #container -->
</body>

**jdkhang** · 26-09-2010 23:55

Thử xem sao

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Fluid Layout</title>
<style>    
    #main {width: 100%; height: 100%;  background: url(body_bg.gif) repeat-y left top; margin: 0 auto;}
    #content {width: 100%; height: 100%; background: url(body_bg.gif) repeat-y right top;}
</style>
</head>
<body>
    <div id="main">
        <div id="content">
            CSS Fluid Layout CSS Fluid Layout CSS Fluid Layout CSS Fluid Layout CSS Fluid Layout CSS Fluid Layout CSS Fluid Layout 
        </div>
    </div>
    
</body>
</html>

Bạn chỉnh sửa lại cho phù hợp nhé.

**gorkiit** · 27-09-2010 16:40

Theo em nghĩ là dùng photoshop đưa 2 cái hình ấy sang 2 bên left và right rồi cứ thế mà cho vào chứ làm gì mà phức tạp thế

**jdkhang** · 27-09-2010 17:09

@1024KB: đang bàn về Fluid Layout mà, để width kiểu đó sao fluid được

**1024KB** · 27-09-2010 17:54

Thích Fluid Layout thì sửa 1 tý.

PHP Code:


//css
body { 
  padding: 0;
  margin: 0;
}
#container{
  margin: 0 auto; //center
  width: 100%;
}
#bg-left {
  background: url(./images/bg_left.jpg) repeat-y; 
  width: 4px;
  float: left;
}
#bg-right {
  background: url(./images/bg_right.jpg) repeat-y; 
  width: 4px;
  float: right;
}
#wrapper {
  /*width: 992px; //1000 - 4x2 = 992px;*/
  float: left;
}

//html
...
<head>
   //include jQuery script
   <script type="text/javascript">
      $(function(){
         var height = $('#wrapper').height(); //lấy height của nội dung
         //set height left and right
         $('#bg-left').css('height', height);
         $('#bg-right').css('height', height);
         
         $(window).resize(function(){
            var width = $('#container').width()-$('#bg-left').width()-$('#bg-right').width();
            $('#wrapper').css('width', width);
         });
      });
   </script>
</head>
<body>
<div id="container">
   <div id="bg-left"></div><!-- end #bg-left -->
   <div id="bg-right"></div><!-- end #bg-right -->
   <div id="wrapper">
      Your content goes here.
   </div>
</div><!-- end #container -->
</body>

Chủ đề: Giúp đỡ giải quyết bài toán này với css

Hỗ trợ

Rate This Thread

Bookmarks

Bookmarks

Quy định