Jump to content
  • Advertisement
Sign in to follow this  
Fuji

[web] html site border

This topic is 2823 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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
Advertisement
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
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
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
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!