A
ataraxia2500
thanx to alistapart i've been able to find out how to do rounded corners,
but I would also like to do left, right, top and bottom borders and how to
"pixelize" the rest.
for now this is what it looks like:
http://www.prestigesecurity.biz/gg/index2.html
this is what I want it to look like:
http://www.prestigesecurity.biz/gg/example.png
this is the slyle i use:
http://www.prestigesecurity.biz/gg/test.css
i use 9 images for that: 4 corners, 4 borders and the 'pixel' image for the
middle (they're all here http://www.prestigesecurity.biz/gg/blue/From/).
this is what my css look like:
div.Article {
background:
url(blue/From/tl.png)
top left no-repeat;
width:35%;
}
div.Article h2 {
background:
url(blue/From/tr.png)
top right no-repeat;
font-size:1.3em;
padding:15px;
margin:0;
}
div.ArticleBody {
background:
url(blue/From/mr.png)
top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
}
div.ArticleBodyLeft {
background:
url(blue/From/ml.png)
top left repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
}
div.ArticleFooter {
background:
url(blue/From/bl.png)
bottom left no-repeat;
}
div.ArticleFooter p {
background:
url(blue/From/br.png)
bottom right no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;
}
div.ArticleFooterMiddle p {
background:
url(blue/From/bm.png)
bottom middle no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;
}
div.ArticleHeaderMiddle p {
background:
url(blue/From/tm.png)
top middle repeat-x;
display:block;
padding:15px;
margin:-2em 0 0 0;
}
this is my html part:
<div class="Article">
<h2> <center>hey</center> </h2>
<div class="ArticleBodyLeft">
</div>
<div class="ArticleBody">
</div>
<div class="ArticleFooter">
</div>
</div>
tell me if u know
thanx in advance
but I would also like to do left, right, top and bottom borders and how to
"pixelize" the rest.
for now this is what it looks like:
http://www.prestigesecurity.biz/gg/index2.html
this is what I want it to look like:
http://www.prestigesecurity.biz/gg/example.png
this is the slyle i use:
http://www.prestigesecurity.biz/gg/test.css
i use 9 images for that: 4 corners, 4 borders and the 'pixel' image for the
middle (they're all here http://www.prestigesecurity.biz/gg/blue/From/).
this is what my css look like:
div.Article {
background:
url(blue/From/tl.png)
top left no-repeat;
width:35%;
}
div.Article h2 {
background:
url(blue/From/tr.png)
top right no-repeat;
font-size:1.3em;
padding:15px;
margin:0;
}
div.ArticleBody {
background:
url(blue/From/mr.png)
top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
}
div.ArticleBodyLeft {
background:
url(blue/From/ml.png)
top left repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
}
div.ArticleFooter {
background:
url(blue/From/bl.png)
bottom left no-repeat;
}
div.ArticleFooter p {
background:
url(blue/From/br.png)
bottom right no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;
}
div.ArticleFooterMiddle p {
background:
url(blue/From/bm.png)
bottom middle no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;
}
div.ArticleHeaderMiddle p {
background:
url(blue/From/tm.png)
top middle repeat-x;
display:block;
padding:15px;
margin:-2em 0 0 0;
}
this is my html part:
<div class="Article">
<h2> <center>hey</center> </h2>
<div class="ArticleBodyLeft">
</div>
<div class="ArticleBody">
</div>
<div class="ArticleFooter">
</div>
</div>
tell me if u know
thanx in advance