asked on CSS/HTML: Sideborders and having them cut off when the window is too small.
I have the following image here for an example; ![background]()
As you can see, I have two side borders and the main content area. It looks like it works here (ignore the white area atm) but I have an issue.
If you size your browser down (aka size the window or have a smaller monitor) the page starts at the sidebar image. I want it to slowly crop out until only the MAIN area is there. Thing is it would need to crop out both sides evenly, I've seen some sites that do it but I'm not sure how.
So in the end there would be no side borders and only the main content area as the minimum width. It shouldn't consider the sidebar images as part of the content, thus making it so the minimum window size is alot larger.
My coding is pretty simplistic:
and the HTML is:
Does anyone have an idea on what I should do here?
As you can see, I have two side borders and the main content area. It looks like it works here (ignore the white area atm) but I have an issue.
If you size your browser down (aka size the window or have a smaller monitor) the page starts at the sidebar image. I want it to slowly crop out until only the MAIN area is there. Thing is it would need to crop out both sides evenly, I've seen some sites that do it but I'm not sure how.
So in the end there would be no side borders and only the main content area as the minimum width. It shouldn't consider the sidebar images as part of the content, thus making it so the minimum window size is alot larger.
My coding is pretty simplistic:
.outer {
width:1187px;
margin-left:auto;
margin-right:auto;
border:0;
background:#000000 url('../images/bg-left.png') repeat-y left top;
padding-left:109px;
height:100%;
}
.inner {
background-color: #FFF;
background-image: url('../images/bg-right.png'), url('../images/bg-middle.png');
background-repeat: repeat-y, no-repeat;
background-position: right top, left top;
padding-right:113px;
height:100%; margin: 0 auto -4em;
}
* html .inner {height:1%}
and the HTML is:
<div class="outer">
<div class="inner">
</div></div>
Does anyone have an idea on what I should do here?
CSSHTMLPHP
Last Comment
s8web
ASKER
Will this work? (Still has the same issue). Split up the right area against the main area.
.outer {
width:1187px;
margin-left:auto;
margin-right:auto;
border:0;
background:#000000 url('../images/bg-left.png') repeat-y left top;
padding-left:109px;
height:100%;
}
.innerright {
background-color: #FFF;
background-image: url('../images/bg-right.png');
background-repeat: repeat-y;
background-position: right top;
padding-right:113px;
height:100%; margin: 0 auto -4em;
}
* html .innerright {height:1%}
.innermain {
background-color: #FFF;
background-image: url('../images/bg-middle.png');
background-repeat: no-repeat;
background-position: left top;
height:100%;
}
<div class="outer">
<div class="innerright"><div class="innermain">
</div></div></div>
ASKER
.outerleft {
float:left;
width:109px;
margin-left:-109px;
border:0;
background:#000000 url('../images/bg-left.png') repeat-y left top;
height:100%;
}
.outerright {
float:right;
width:109px;
margin-right:-109px;
border:0;
background:#000000 url('../images/bg-right.png') repeat-y right top;
height:100%;
}
.inner {
margin-left:auto;
margin-right:auto;
background:#000000 url('../images/bg-middle.png') no-repeat left top;
width:1074px;
height:100%;
}
Works on one side (The left now) but not the other.
I did this without your backgrounds, but tried to keep your code intact. Try it and let me know if it addresses your needs. (The PRE section is just filler.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset
<meta name="Author" content="?">
<meta name="Keywords" content="?">
<meta name="Description" content="?">
<style type="text/css">
.outerleft {
float:left;
width:8.5%;
margin-left:-109px;
border:0;
background:#000000 url('../images/bg-left.png
height:100%;
}
.outerright {
float:right;
width:8.5%;
margin-right:-109px;
border:0;
background:#000000 url('../images/bg-right.pn
height:100%;
}
.inner {
margin-left:auto;
margin-right:auto;
background:#000000 url('../images/bg-middle.p
width:83%;
height:100%;
}
</style>
</head>
<body>
<div class="outer">
<div class="innerright"><div class="inner"><pre>
</pre>
</div></div></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset
<meta name="Author" content="?">
<meta name="Keywords" content="?">
<meta name="Description" content="?">
<style type="text/css">
.outerleft {
float:left;
width:8.5%;
margin-left:-109px;
border:0;
background:#000000 url('../images/bg-left.png
height:100%;
}
.outerright {
float:right;
width:8.5%;
margin-right:-109px;
border:0;
background:#000000 url('../images/bg-right.pn
height:100%;
}
.inner {
margin-left:auto;
margin-right:auto;
background:#000000 url('../images/bg-middle.p
width:83%;
height:100%;
}
</style>
</head>
<body>
<div class="outer">
<div class="innerright"><div class="inner"><pre>
</pre>
</div></div></div>
</body>
</html>
ASKER
Hello,
Unfortunately that did not seem to work. The right sidebar doesn't seem to vanish when sizing down the window screen as it should.
Unfortunately that did not seem to work. The right sidebar doesn't seem to vanish when sizing down the window screen as it should.
Give this a shot:
A few notes:
Your container is pretty wide. Users with displays that are smaller are going to have a hard time. Consider 980px including padding as a max. You can do CSS media queries if you want to target different display sizes.
Many browsers (read IE) don't support multiple background images.
In this case, height:100% isn't going to do much.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{text-align:center;}
.outer {
width:1187px;
margin:0 auto;
border:0;
background:#000000 url('../images/bg-left.png') repeat-y left top;
height:100%;
}
.inner {
background-color: #FFF;
background-image: url('../images/bg-right.png'), url('../images/bg-middle.p ng');
background-repeat: repeat-y, no-repeat;
background-position: right top, left top;
height:100%;
margin: 0 auto -4em;
}
* html .inner {height:1%}
</style>
<title>Test</title>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
A few notes:
Your container is pretty wide. Users with displays that are smaller are going to have a hard time. Consider 980px including padding as a max. You can do CSS media queries if you want to target different display sizes.
Many browsers (read IE) don't support multiple background images.
In this case, height:100% isn't going to do much.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Ugh, I was over complicating it by far.
This actually worked well, with min-width I can set the minimum size thus removing the side-borders when you shrink it.
I'll have to remember not to get so crazy next time, this worked great.
Your previous example seemed to have an issue, the right sidebar in FF on my end was sticking to the right side, so large monitors would see the right border on that side. But this second example worked great.
Thanks for the size tip, I actually saw that before too and was going to reduce the size to support 1024 monitors as well :)
Thanks!
This actually worked well, with min-width I can set the minimum size thus removing the side-borders when you shrink it.
I'll have to remember not to get so crazy next time, this worked great.
Your previous example seemed to have an issue, the right sidebar in FF on my end was sticking to the right side, so large monitors would see the right border on that side. But this second example worked great.
Thanks for the size tip, I actually saw that before too and was going to reduce the size to support 1024 monitors as well :)
Thanks!
Cool, my pleasure. Take care.
You may want to address that issue and then provide a working sample page. What you've provided is a good start, but it doesn't produce the image you've uploaded and it makes us guess at where we need to fill in the blanks.