PDA

View Full Version : Resolved Help floating a repeat-y border to right of content



FatalException
Apr 19th, 2010, 01:06 AM
Hello everyone - first post here, so I'm not sure how much info is needed.

I can't get the right-side border to show up on the page I'm working on. Ignore the funky color scheme - it helps me figure out what's being inherited, etc. with the styles while I'm coding.

What I want is the white border all the way around - but I want the drop-shadow, so I'm using sliced pieces of a Photoshop image and using background-repeat: repeat-y and background-repeat: repeat-x to make the border look the way I want.

The border is not showing up on the right side, even though I think I have the code right. I've been working on this one bug all afternoon and could use a fresh - and more experienced - set of eyes to tell me what I'm doing wrong with the right border.

You can see what I've got here: http://www.tinaandkevin.com/testsite/index.html

The CSS is here: http://www.tinaandkevin.com/testsite/mainstyle.css

FatalException
Apr 19th, 2010, 01:54 AM
Solved it.

This post on this other email site helped a lot: http://archivist.incutio.com/viewlist/css-discuss/65274 - and the follow-up: http://archivist.incutio.com/viewlist/css-discuss/65276

It is for some high school yearbook page, but the concept is the same for mine. I have put the finished product up on my site for anyone who wants to use this for reference later.

Working HTML: http://www.tinaandkevin.com/testsite/fixed.html
Working CSS: http://www.tinaandkevin.com/testsite/fixed.css

Excavator
Apr 19th, 2010, 05:27 AM
Building a good layout with images for all 4 sides and corners can be a little confusing.
Have a look at this approach -

<div id="main_container">
<div id="corner_tl"></div>
<div id="corner_tr"></div>
<div id="border_top"></div>
<div id="border_left">
<div id="content_container">
<div id="header">
</div>
Additional content will go here.<br>
Additional content here.
</div>
<!--<div id="border_right"></div> DELETE THIS-->
</div>
<div id="footer">
<div id="corner_bl"></div>
<div id="corner_br"></div>
<div id="border_bottom"></div>
<!--end footer--></div>




</div>


And some new CSS -
/* CSS layout */
body {
margin: 0;
padding: 0;
background:#555555;
}
#main_container{
margin:0px auto;
padding: 0;
width: 916px;
background-color:#FF66FF;
overflow: auto; /*to clear the floats*/
}
#border_top {
margin: 0 18px;
height:18px;
background:url('http://www.tinaandkevin.com/images/background/edge_t.png') repeat-x;
}
#corner_tl {
width:18px;
height:18px;
float:left;
background: url('http://www.tinaandkevin.com/images/background/corner_tl.png');
}
#corner_tr {
width:18px;
height:18px;
float:right;
background:url('http://www.tinaandkevin.com/images/background/corner_tr.png');
}
#border_left {
float:left;
width:18px;
background:url('http://www.tinaandkevin.com/images/background/edge_l.png') repeat-y;
}
#content_container{
width: 898px;
margin: 0 0 0 18px;
background: url('http://www.tinaandkevin.com/images/background/edge_r.png') right 0 repeat-y;
}
#header {
width: 880px;
height: 270px;
background: url('http://www.tinaandkevin.com/images/header.png');
}

#footer {
clear: both;
overflow: auto;
}
#corner_bl {
height:18px;
width: 18px;
float: left;
background:url('http://www.tinaandkevin.com/images/background/corner_bl.png') left 0 no-repeat;
}
#corner_br{
height:18px;
width:18px;
float: right;
background:url('http://www.tinaandkevin.com/images/background/corner_br.png');

}
#border_bottom {
margin: 0 18px;
height: 18px;
background:url('http://www.tinaandkevin.com/images/background/edge_b.png') repeat-x;

}