PDA

View Full Version : Tạo css từ ảnh này khó quá



Quartermain
12-04-2008, 16:29
Ai biết xin hướng dẫn tạo css bằng div với bức ảnh này với
Nội dung ở giữa background đấy, cột 2 bên co giãn theo nội dung.Nội dung gồm có ảnh và text. Các bro xin chỉ giáo với

http://upload.cat68.com/linhtinh/bgGT.jpg

[=========> Bổ sung bài viết <=========]

có bác nào lên đây trả lời hộ cái. Đang bó tay ko biết cắt thế nào

Spirit
13-04-2008, 00:04
Làm cái này thì hơi rườm ra mà hiệu quả ko cao nếu nội dung ko fix width với height.

Cái phía trên nếu bác fix width thì nguyên tắc là bác có 7 cái div
Nếu ko fix height thì bác có 9 cái div.

=D Hiện giờ em chưa rãnh lắm nên ko viết luôn hộ bác dc. =D Rãnh em sẽ thử, nhưng khi thiết kế bác nên hạn chế mấy cái như thế (nếu nội dung ko fix dc width/height)

Quartermain
14-04-2008, 18:22
Làm cái này thì hơi rườm ra mà hiệu quả ko cao nếu nội dung ko fix width với height.

Cái phía trên nếu bác fix width thì nguyên tắc là bác có 7 cái div
Nếu ko fix height thì bác có 9 cái div.

=D Hiện giờ em chưa rãnh lắm nên ko viết luôn hộ bác dc. =D Rãnh em sẽ thử, nhưng khi thiết kế bác nên hạn chế mấy cái như thế (nếu nội dung ko fix dc width/height)


thank bạn. Nhưng tại mình không nghĩ được là làm thế nào để khi cho text nó vào giữa thì background 2 bên nó co giãn theo nội dung. Không mường tượng dược dùng div như thế nào. Vì theo cách của mình nghĩ thì nó không thể co giãn mỗi khoảng trắng ở giữa, mà background nó vẫ giữ được cái khung đấy :-s

hontruongba
14-04-2008, 22:56
Mình không rành lắm nhưng mình thấy trang http://moclangquan.uk.to có cái khung nó xài 8 div co dãn theo nội dung bên trong bạn wiew source (http://hieukinhquangthai.com) rồi nghiên cứu thử xem

2_lua_IT
15-04-2008, 00:59
ít nhất là 8 div(tương ứng với 4 border và 4 đường line), tuy nhiên design có chút vấn đề, nếu co giản thì đường line ngang sẽ khó canh đó vì màu ở giữa là trắng nên khi giản theo chiều rộng hổng màu trắng ở giữa nhiều. Tuy nhiên khi thiết kế bạn cần chú ý đến nội dung để design chứ kô phải design xong rồi ghép nội dung vô. Khi sửa cũng mệt, code cũng mệt kô kém. Khi nào rãnh tui sẽ làm trường hợp của bạn.

Quartermain
15-04-2008, 01:56
Khi nào rãnh tui sẽ làm trường hợp của bạn.

Mọi người trong diễn đàn có lẽ quá bận rộn thì phải. Mình thấy câu này quen quen :D

to hontruongba : http://moclangquan.uk.to/ Cái này thì đơn giản bạn ah

2_lua_IT
15-04-2008, 09:36
Mọi người trong diễn đàn có lẽ quá bận rộn thì phải. Mình thấy câu này quen quen :D

Quen lắm phải kô pác ? Nhưng những người hỏi thì càng quen hơn. Kô chịu làm mà toàn chờ hưởng kô ? Mọi người chia sẻ giải pháp thôi chứ. Khi nào rãnh code thì mới code chứ. Code dài dằng dằng thì làm biếng bỏ xừ - chủ nhân còn kô dám code thì ai mà dám.

Quartermain
15-04-2008, 14:27
Quen lắm phải kô pác ? Nhưng những người hỏi thì càng quen hơn. Kô chịu làm mà toàn chờ hưởng kô ? Mọi người chia sẻ giải pháp thôi chứ. Khi nào rãnh code thì mới code chứ. Code dài dằng dằng thì làm biếng bỏ xừ - chủ nhân còn kô dám code thì ai mà dám.


Cái này làm mãi ko được nên hỏi ai biết thì trả lời dùm thôi. Chưa nghĩ ra được phương án vẹn toàn cắt bức ảnh đấy :-s. Nếu bạn rảnh thì có thể viết sơ qua cho mình được ko

phongjalvn
16-04-2008, 11:01
Nếu bạn làm lại tấm đó, kéo dài kích thước tấm hình ra, thì có thể thử xài cách của mình trong bài "Bo góc bằng css" kiếm đi nhé.
Tuy nhiên, bạn vẫn phải set min-width và min-height để đạt hiệu quả cao nhất

Quartermain
16-04-2008, 12:36
Nếu bạn làm lại tấm đó, kéo dài kích thước tấm hình ra, thì có thể thử xài cách của mình trong bài "Bo góc bằng css" kiếm đi nhé.
Tuy nhiên, bạn vẫn phải set min-width và min-height để đạt hiệu quả cao nhất

Mình đọc cái bài bo góc của bạn rồi. Nhưng cái "Bo góc bằng css" và cái này thì khác 1 trời 1 vực

michaelphan
17-04-2008, 09:24
với cái bg như trên thì dùng div chồng div. Nếu như tôi thấy thì frame đó thì tôi thấy cần ít nhất 7div để có thể code vào phần content bên trong.
<div id="bgtopleft"><!-- cho bg là cái bo trên cùng bên trái của bạn cho no-repeat,bg position top left -->
<div id="bgtopright"><!-- cho bg là cái bo trên cùng bên phải của bạn cho no-repeat ,bg position top right-->
<div id="bgbottomleft"><!-- cho bg là cái bo dưới cùng bên trái của bạn cho no-repeat,bg position bottom left -->
<div id="bgbottomright"><!-- cho bg là cái bo dưới cùng bên phải của bạn cho no-repeat,bg position bottom right -->
<div id="borderleft"> <!-- cho bg là cái borderline xám trái của bạn cho repeat-y,bg position left -->
<div id="borderleft"> <!-- cho bg là cái borderline xám phải của bạn cho repeat-y,bg position right -->
<div id="content">
content bắt đầu từ đây.
</div>
</div>
</div>
</div>
</div>
</div>
</div>

mỗi div thì bạn cho css min-height và min-width=frame width mà bạn design để khi nhỏ đến giới hạn thì ko nhỏ hơn nữa mà vẫn giữ đúng layout (bg 1 div không đè lên bg div khác).

Quartermain
17-04-2008, 11:19
với cái bg như trên thì dùng div chồng div. Nếu như tôi thấy thì frame đó thì tôi thấy cần ít nhất 7div để có thể code vào phần content bên trong.
<div id="bgtopleft"><!-- cho bg là cái bo trên cùng bên trái của bạn cho no-repeat,bg position top left -->
<div id="bgtopright"><!-- cho bg là cái bo trên cùng bên phải của bạn cho no-repeat ,bg position top right-->
<div id="bgbottomleft"><!-- cho bg là cái bo dưới cùng bên trái của bạn cho no-repeat,bg position bottom left -->
<div id="bgbottomright"><!-- cho bg là cái bo dưới cùng bên phải của bạn cho no-repeat,bg position bottom right -->
<div id="borderleft"> <!-- cho bg là cái borderline xám trái của bạn cho repeat-y,bg position left -->
<div id="borderleft"> <!-- cho bg là cái borderline xám phải của bạn cho repeat-y,bg position right -->
<div id="content">
content bắt đầu từ đây.
</div>
</div>
</div>
</div>
</div>
</div>
</div>

mỗi div thì bạn cho css min-height và min-width=frame width mà bạn design để khi nhỏ đến giới hạn thì ko nhỏ hơn nữa mà vẫn giữ đúng layout (bg 1 div không đè lên bg div khác).



thank bạn. Cái của bạn có một vấn đề là khi nội dung dài hơn cái borderLeft thì lúc nó cái bg của nội dung chính không phải là màu trắng.
Cái borderLeft, borderRight nó sẽ lặp lại. Mà mình cần là cái lặp lại bg màu trắng ở giữa khi nội dung text dài ra :-s

michaelphan
17-04-2008, 14:45
khi đó trong css chỗ id bg top left bạn cho cái bg color FFF vào.

haductrung
17-04-2008, 22:42
Chà anh em làm cái này vất vả quá nhỉ? Vậy sao mình hông cắt cái hình đó ra làm 3. Cho top, midle, Và botom thể? Nếu cắt như thế thì sự việc nó đơn giản hơn nhiều mà nó cũng đâu mất đi thuộc tính như bạn. Hồi trước có cái hình cũng làm như của bạn nhưng giờ nếu mình cắt ra thì thấy việc viết code css cho nó thật là đơn giản???

2_lua_IT
18-04-2008, 16:51
Sặc với pác @haductrung luôn á. Yêu cầu là width và height tự giản theo data pác ơi. Chứ fix thì nói làm j.

haductrung
19-04-2008, 07:31
đồng ý cách của tớ thì widtht sẽ hông co giãn theo dât. Nhưng khi bạn viết như trên thì rắc rối vô cùng?

Sặc với pác @haductrung luôn á. Yêu cầu là width và height tự giản theo data pác ơi. Chứ fix thì nói làm j.
Với lại mình cũng kém lắm nên hông có thể làm như bạn nên đề xuất cách thế này thôi. Còn bạn hong đồng ý thì thôi chứ "sặc" hay hông "sặc" gì ở đây coi chừng "sặc" nhiều quá thì bị "Đứng Hơi" đó bạn ơi. Vậy thì diễn đàn sẽ thiếu một "NHÂN TÀI" như bạn đó và anh em cũng phải mất công "thương và tiếc" nữa

Spirit
19-04-2008, 21:17
đồng ý cách của tớ thì widtht sẽ hông co giãn theo dât. Nhưng khi bạn viết như trên thì rắc rối vô cùng?

Với lại mình cũng kém lắm nên hông có thể làm như bạn nên đề xuất cách thế này thôi. Còn bạn hong đồng ý thì thôi chứ "sặc" hay hông "sặc" gì ở đây coi chừng "sặc" nhiều quá thì bị "Đứng Hơi" đó bạn ơi. Vậy thì diễn đàn sẽ thiếu một "NHÂN TÀI" như bạn đó và anh em cũng phải mất công "thương và tiếc" nữa

Không phải kém hay không, mà vấn đề là đang cần tìm giải pháp cho 1 vấn đề mà bác lại phủ nhận vấn đề đó để đưa ra giải pháp có thể gọi là lạc đề nên người đọc thấy thất vọng tí xíu thôi :rolleyes:

michaelphan
21-04-2008, 22:46
đồng ý cách của tớ thì widtht sẽ hông co giãn theo dât. Nhưng khi bạn viết như trên thì rắc rối vô cùng?

Với lại mình cũng kém lắm nên hông có thể làm như bạn nên đề xuất cách thế này thôi. Còn bạn hong đồng ý thì thôi chứ "sặc" hay hông "sặc" gì ở đây coi chừng "sặc" nhiều quá thì bị "Đứng Hơi" đó bạn ơi. Vậy thì diễn đàn sẽ thiếu một "NHÂN TÀI" như bạn đó và anh em cũng phải mất công "thương và tiếc" nữa

hy vọng bác khóc thương thêm 1 lần nữa cho em. ặc ặc....:blink:
Ko đọc kỹ đề bài mà đưa đáp án ngầu thiệt.:punk:
Bác Quartermain vào confirm là làm được hay chưa nhé!

2_lua_IT
22-04-2008, 16:40
đồng ý cách của tớ thì widtht sẽ hông co giãn theo dât. Nhưng khi bạn viết như trên thì rắc rối vô cùng?

Với lại mình cũng kém lắm nên hông có thể làm như bạn nên đề xuất cách thế này thôi. Còn bạn hong đồng ý thì thôi chứ "sặc" hay hông "sặc" gì ở đây coi chừng "sặc" nhiều quá thì bị "Đứng Hơi" đó bạn ơi. Vậy thì diễn đàn sẽ thiếu một "NHÂN TÀI" như bạn đó và anh em cũng phải mất công "thương và tiếc" nữa

Cảm ơn vì đã quá khen. 2_lúa kô thể nào ngủm vì sặc đâu bạn. Nếu có ngủm thì bạn cũng bị đi tù đó. Nếu sợ khó thì tốt nhất bạn log off luôn cho rồi đọc topics này làm gì rồi để trở thành kẻ giết người hàng loạt. Nguy hiểm quá. hehe

Quartermain
23-04-2008, 16:38
Mấy hôm bận quá ko lên đây được.Nghĩ mãi trường hợp này vẫn ko ra. Có bác nào đọc quyển css của bọn wrox chưa.Tìm mãi mà chả thấy cái vụ này. hic hic chả nhẽ bó tay ah.

ah còn cái này nữa. Khi mình ghép bằng div thì bị trường hợp là FF thì nó khít còn IE thì nó không khít.

Cái HTML này gồm 3 phần, phần đầu, phần thân giữa và phần cuối.Trên FF thì 3 phần đầu, thân, cuối thì khít. Nhưng trên IE thì nó lại để 1 khoảng trống giữa 3 phần đó. Không hiểu vì sao, ai giúp với

đây là phần html
<code>


<div>
<div class="tbtt_c">
<div class="tbtt_l">
<div class="tbtt_r">
<div class="txtTitleLogin"><img src="images/iconTinMoi.gif" /><span>Các tin khác</span></div>
<div class="clearer"></div>
</div>
</div>
</div>
<div class="tbtt_md" valign="top">
<div class="noiDungTinMoi">

<div class="txtNoiDungTinMoi">
<a href="#"><img src="images/anhTinMoi_71.jpg" class="imgNoiDung" /></a> <a href="#">Ngân hàng Liên Việt khai trương trụ sở mới</a> </div>
<div class="clearer"></div>
<div class="txtNoiDungTinMoi"> <a href="#"><img src="images/anhTinMoi_71.jpg" class="imgNoiDung" /></a> <a href="#">Ngân hàng Liên Việt khai trương trụ sở mới</a></div>
<div class="clearer"></div>
</div>
</div>
<div class="tbbtt_c">
<div class="tbbtt_l">
<div class="tbbtt_r"></div>
</div>
</div>
</div>
</code>
Đây là css
<code>

.tbtt_c{
background:url(../images/TOGI-01_66.jpg) repeat-x left;
height:9px;}
.tbtt_l{
background:url(../images/TOGI-01_65.jpg) no-repeat left;
height:9px;}
.tbtt_r{
background:url(../images/TOGI-01_67.jpg) no-repeat right;
height:9px;
text-align:left;
color:#000;
}

.tbtt_md { background: #fff; border-left: 1px #cecece solid; border-right: 1px #cecece solid }

.tbbtt_c{
background:url(../images/TOGI-01_71.jpg) repeat-x left;
height:8px;}
.tbbtt_l{
background:url(../images/TOGI-01_70.jpg) no-repeat left;
height:8px;}
.tbbtt_r{
background:url(../images/TOGI-01_72.jpg) no-repeat right;
height:8px;
}

.noiDungTinMoi{
width:170px;
font:11px Tahoma, Arial;
color:#000;

}

.imgNoiDung{
margin:5px 5px 5px 0px;
border:0px;
float:left;}

</code>

TOGI-01_66.jpg tất cả các jpg loại này là img bo góc

[=========> Bổ sung bài viết <=========]

alo có ai ở đây ko ???

[=========> Bổ sung bài viết <=========]

hic hic. Mấy bác đâu hết rồi

lamthien
10-05-2008, 02:50
Lỗi này bác khắc phục bằng cách cho thêm overflow: hidden vào trong cái div nào mà có height bé hơn 16px gì đó. Thằng MS die dog (đối chọi với Moz firefox) nó không chấp nhận div có độ cao bé vậy.
Cái này tớ nghĩ ra giải pháp co giãn được chiều ngang và dọc, cso điều code ko được trong sáng lắm, nhiều code html thừa chỉ dùng để định dạng. Nói chung bạn muốn áp dụng 1 kỹ thuật náo đó cho web UI thì yahoo là trang tìm hiểu hay nhất. Code của yahoo viết rất chặt chẽ và rõ ràng. Tuy nhiên đọc code Yahoo muốn hiểu sâu thì phải tìm hiểu thêm về cái YUI(Yahoo User Interface) của nó. Bạn chỉ cần tìm hiểu kỹ về YUI thì có thể xử lý hầu hết mọi tình huống trên client. Đây là một bộ thư viện rất đáng để học hỏi về cả html, css và js, tuy nhiên nếu dùng vào websie bé thì hơi nặng.