Sign in to follow this  
Fuji

[web] html site border

Recommended Posts

Fuji    205
I've waited a few hours in irc channels and talking to folks trying to get a definitive answer, but it's been a waste of time. Simply, I wish to use an image along the left and right sides of my site but I'm having no such luck.


<div id="leftPillar" class="leftPillar">

</div>
<div id="rightPillar" class="rightPillar">

</div>


This is formatted by this css:


#leftPillar
{
background-image: url(../images/pillar.png);
background-repeat: repeat-y;
position: absolute;
left: 0px;
top: 0px;
text-decoration: none;
}
#rightPillar
{
background-image: url(../images/pillar.png);
background-repeat: repeat-y;
position: absolute;
right: 0px;
top: 0px;
text-decoration: none;
}



The image does not show at all for some unknown reason. Please help me

Share this post


Link to post
Share on other sites
JDuke    145
Looks like you probably need to specify a width and height for your pillars. I assume height should be 100% and width would be the width of your PNG, like 15px.

Also I'd put "position: relative" on the body.

Additionally, if you don't want your pillars to move if your content goes beyond the bottom of the browser window, you might want to use position: fixed instead of absolute on your pillars.

Share this post


Link to post
Share on other sites
pulpfist    528
It depends on what styling you have on the site already but I guess you could try using the float attribute.

Something along these lines


<html>
<head>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#leftcol {
background: #f00;
float: left;
width: 20px;
}
#content {
background: #fff;
float:left;
}
#rightcol {
background: #f00;
float: right;
width: 20px;
}
-->
</style>
</head>
<body>
<div id="leftcol">L</div>
<div id="content">Content</div>
<div id="rightcol">R</div>
</body>
</html>

Share this post


Link to post
Share on other sites
Exogenesis    100
What I usually do is create one broad background to go into the body instead of making to separate pillars. This might not be the best solution, but it has worked well for my needs.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this