This content has been marked as final.
Show 6 replies
-
1. Re: Image for div border, how is it done?
Newsgroup_User May 29, 2007 9:42 AM (in response to BruceCSI2)Probably with a background image that does not tile.
--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"BruceCSI2" <webforumsuser@macromedia.com> wrote in message
news:f3hj1n$31k$1@forums.macromedia.com...
> I've seen this on some sites, where instead of a dashed or solid line,
> there is
> an image. Sometimes it's a gradient or something similar that runs down
> the
> side of the div containing the content of the page. I'd like to do this on
> one
> of my sites. How is it done?
> Thanks.
>
-
2. Re: Image for div border, how is it done?
Newsgroup_User May 29, 2007 9:54 AM (in response to BruceCSI2)BruceCSI2 wrote:
> I've seen this on some sites, where instead of a dashed or solid line, there is
> an image. Sometimes it's a gradient or something similar that runs down the
> side of the div containing the content of the page. I'd like to do this on one
> of my sites. How is it done?
> Thanks.
>
Its just a repeating background image attached to a container that is
slighlty larger than the container within it.
In the case of the html/css below create an image 760px wide then create
a shadow effect which occupies 40px at either end of it, fill in the
680px center section in white. Save the image into a folder named
'images' in your site root folder. Copy and paste the code below into a
new DW document, save it to your site root folder then you should see
the shadow effect running down both sides of the outerWrapper <div>. If
not you've done something wrong or my instructions aren't clear enough.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#outerWrapper {
width: 760px;
margin: 0 auto;
background-image: url(images/shadow.jpg);
background-repeat: repeat-y;
}
#innerWrapper {
width: 680px;
margin: 0 auto;
border: 1px solid #000;
}
p {
margin: 0 0 8px 0;
}
</style>
</head>
<body>
<div id="outerWrapper">
<div id="innerWrapper">
<p>This is some content</p>
<p>This is some content</p>
<p>This is some content</p>
<p>This is some content</p>
<p>This is some content</p>
<p>This is some content</p>
<p>This is some content</p>
<p>This is some content</p>
<p>This is some content</p>
<p>This is some content</p>
</div></div>
</body>
</html>
-
3. Re: Image for div border, how is it done?
BruceCSI2 May 29, 2007 9:55 AM (in response to BruceCSI2)I'm looking at http://www.csszengarden.com/?cssfile=/191/191.css&page=1 and I just can't figure it out... -
4. Re: Image for div border, how is it done?
Newsgroup_User May 29, 2007 9:58 AM (in response to BruceCSI2)BruceCSI2 wrote:
> I'm looking at http://www.csszengarden.com/?cssfile=/191/191.css&page=1 and I just can't figure it out...
Works on the same principle I have just described in my previous post
It has a top image:
http://www.csszengarden.com/191/cover_top.png
and a repeating image down the side:
http://www.csszengarden.com/191/cover.png
and a bottom image:
http://www.csszengarden.com/191/cover_bot.png
-
5. Re: Image for div border, how is it done?
VVebbie May 29, 2007 12:06 PM (in response to Newsgroup_User)http://www.eskimo.com/~bloo/indexdot/css/properties/colorbg/bgposit.htm
http://www.eskimo.com/~bloo/indexdot/css/properties/colorbg/bgrepeat.htm
Write something like:
<div><div><div><div> <== Borders
<div><div><div><div> <== Corners
Content
</div></div></div></div>
</div></div></div></div>
And... go! -
6. Re: Image for div border, how is it done?
Newsgroup_User May 29, 2007 5:57 PM (in response to BruceCSI2)I have an example of a shadowed background image here:
http://www.dreamweaverresources.com/tutorials/pagebackgrounds/examplevert.htm
I've used a table - but doable with divs too :-)
Generally you create your layout in your graphics app and slice it up so
that you have a header portion, (may include your header image also), a
slice for the content and use that to repeat down the page and then the
footer area.
--
Nadia
Adobe® Community Expert : Dreamweaver
----------------------------------------
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
----------------------------------------------------
"BruceCSI2" <webforumsuser@macromedia.com> wrote in message
news:f3hj1n$31k$1@forums.macromedia.com...
> I've seen this on some sites, where instead of a dashed or solid line,
> there is
> an image. Sometimes it's a gradient or something similar that runs down
> the
> side of the div containing the content of the page. I'd like to do this on
> one
> of my sites. How is it done?
> Thanks.
>


