Sat, 2010-07-24 07:06
If anybody can design this box
design it for me
with auto height
as you see this box belong to a persian language (a rtl language)
| Attachment | Size |
|---|---|
| rahro_26.jpg | 15.25 KB |
Sat, 2010-07-24 07:16
#1
By "design this box" you mean
By "design this box" you mean what exactly?
If it's a fixed width box then you simply need to make three slices of the graphic horizontally, and each slice is set on a series of nested divs or elements such as UL if in use.
Top slice is all of the top down to a point where there are no longer any non repeating parts of the graphic.
Middle slice is the thinnest strip across the center which is placed on the outer parent element and repeated on the Y axis sit it runs from top to bottom of the whole box.
The top slice is set on the first child element and set to 'no-repeat' it will sit over the middle slice.
The bottom graphic will be placed on the inner element and set 'no-repeat' and positioned at the bottom of the element.
Sat, 2010-07-24 07:42
#2
By "design this box" i mean
design this box in simple and static html and css
for me
i try so many ways, one of them is that you mention it
Sat, 2010-07-24 10:35
#3
Then show us, if you've done
Then show us, if you've done what Hugo suggests then you must simply have made a mistake as its a perfect solution. Show us the html and css you used and we can look over it for you or provide a link to somewhere you've tried it.
Sun, 2010-08-15 07:47
#4
here it is
i design it for u
if there is any other simple or advanced problem say it to me.
thanks for your answers
i attached images that i sliced
and here is my 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> <title>box</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #block{ width:500px; height:500px; background:green; margin:0 auto; } #box{ } #box-top{ width:186px; height:106px; background:url(top.gif) ; } #box-main{ width:160px; background:url(repeat-y.gif) repeat-y; padding:0 13px; } #box-bot{ width:196px; height:145px; background:url(bottom.gif) ; } </style> </head> <body> <div id="block"> <div id="box"> <div id="box-top"></div> <div id="box-main">content goes here. content goes here. content goes here. content goes here. content goes here. content goes here</div> <div id="box-bot"></div> </div> </div> </body> </html>
| Attachment | Size |
|---|---|
| top.gif | 8.94 KB |
| repeat-y.gif | 1.64 KB |
| bottom.gif | 7.5 KB |
Sun, 2010-08-15 10:29
#5
No I'm sorry you
At a quick glance of the markup it looks as though you have the wrong idea on how to work the divs. The divs are nested one after the other otherwise you will not get the height expansion based on the innermost one.