Can someone help me this? About margins.

Forum Moderators: not2easy

Message Too Old, No Replies

Can someone help me this? About margins.

wll6568

8:56 am on Nov 17, 2006 (gmt 0)

Hello all,

Say I have this:

body{
margin:0;
text-align:center;
background: #FFFFFF url("rightsidebg.gif");
background-repeat:repeat-x;
}

body #rightborder{
background-image:url(rightbordershadow.gif);
background-repeat:no-repeat;
margin-left:120px;
}

then I have

and my purpose is to add a right border to the main body, just aside the main body, so that the body has shadow effect. But everytime I move the rightborder from left, it pushes the whole thing to the left.

Can someone help?

Thanks a lot!

penders

12:02 pm on Nov 17, 2006 (gmt 0)

Hi wll6568, I think I get what you are trying to do, but not sure how you are going about it... where is your #rightborder (a DIV I guess) element in your <body>? Are you trying to add a shadow right border to the actual BODY or to a DIV container within your BODY?

But everytime I move the rightborder from left, it pushes the whole thing to the left.

Is that 'move' as in 'move with the mouse'? Not quite sure what you mean by 'move the rightborder from left', please clarify.

Maybe you can

float:right;

your #rightborder or set

position:absolute;

and

right:0;

instead of setting a margin-left ...?

wll6568

1:52 pm on Nov 17, 2006 (gmt 0)

Hello,

Yeah, sorry, the rightboarder i mean here is actually left border. Sorry, got it mistakened, lol. Yeah, I am trying to move the left shadow pic from left but it seems like it pushes the main body too...

penders

3:18 pm on Nov 17, 2006 (gmt 0)

Do you have a more complete code example you can post?

jessejump

9:24 pm on Nov 17, 2006 (gmt 0)

>>>>> the rightboarder i mean here is actually left border.

You have to be clearer.

wll6568

1:50 am on Nov 18, 2006 (gmt 0)

Let;s say I have this:

------------------------------
<body><div id="leftborder"><div id="rightborder">
<div id="content">

<table width="780" height="563" cellpadding="0" cellspacing="0" >
//My stuff...
</table>

</div>
</div> // end left border
</div> // end right border
</body>
------------------------------

The main content div is at the center and I am trying put add two border with shadow images to the right border and left border. The css is:

body{
margin:0;
text-align:center;
background: #FFFFFF url("bg.gif");
background-repeat:repeat-x;

}

leftborder{
background-image: url("leftborder.gif");
margin-left:150px;

}

Notice the margin-left of leftborder style? It pushes the main content from left too...How can I move it to the position I want?

Thanks.

floriniri

6:39 am on Nov 18, 2006 (gmt 0)

position: absolute usually works for me, but I never tried what you want.
I'd like a solution too, any ideeas?

ramX

8:03 am on Nov 18, 2006 (gmt 0)

You can do what you want with one div element. All you need to do is create a border-image that will be tiled vertically on the whole div.

There is 10px padding added to the sides of the div which we will render our borders in, to avoid the content leaking into the border .


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Borders on fixed width box</title>
<style type="text/css">
body, html {
height: 100%;
padding: 0;
margin: 0;
background: green;
text-align: center;
}
div#container {
width: 800px;
height: 563px;
margin: 0 auto;
padding: 0 10px;
background: #fff url(/path/to/our/bg.ext) repeat-y;
text-align: left;
}
</style>
</head>
<body>
<div id="container">
</div><!--#container-->
</body>
</html>

[edited by: ramX at 8:05 am (utc) on Nov. 18, 2006]