-
1. Re: Trying to fill the viewport on only one side of a centered website layout.
Ben Pleysier Feb 5, 2014 10:23 PM (in response to jyeager11)Is this what you are looking for?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
background-image: url(https://www.google.com.au/images/srpr/logo11w.png);
height: 100%;
background-repeat: repeat-y;
}
body {
width: 980px;
margin: auto;
height: 100%;
background: #E36C05;
}
</style>
</head>
<body>
<h1>My Project</h1>
</body>
</html>
-
2. Re: Trying to fill the viewport on only one side of a centered website layout.
jyeager11 Feb 6, 2014 6:58 AM (in response to Ben Pleysier)Ben Pleysier wrote:
Is this what you are looking for?
Almost. You actually just reminded me that I forgot an important part of the equation : the centered 980px wrapper div that contains all the content doesn't have its own background color or image. The background of the content area is the same that extends indefinitely to the right.
I've created this image to illustrate. The dotted lines are the wrapper, but its true borders are invisible to the user.
On a wider viewport, the center area remains as finite as it is -- 980px -- but the empty space around it gets wider.
This is why I thought to position a div to fill the left side, that would know to stop where the wrapper begins. I just don't know how to make that idea work. Maybe it can't be done.
All of a sudden, I'm thinking a 3-column table may be the way to go here. 100% width on the table, but 980px on the center column.
Would that work?
-
3. Re: Trying to fill the viewport on only one side of a centered website layout.
Jon Fritz II Feb 6, 2014 8:22 AM (in response to jyeager11)Could you simplify and just make the <body> background image into a roughly 970 pixel wide bar of color that is only repeated vertically with the background-color set to whatever you want to see on the other side of the wrapper, then set that behind the wrapper with it's own color/image background?
EDIT: the only time the "seams" would show is if someone extended their browser width to about 2960 pixels + and even then, the color that would show would basically act like left padding on the wrapper
-
4. Re: Trying to fill the viewport on only one side of a centered website layout.
Jon Fritz II Feb 6, 2014 8:26 AM (in response to Jon Fritz II)Here's an example of what I mean, just copy and paste this into a new document and create a bar 980x4 pixels wide and change the background-image to that...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Background fills left, disappears on right.</title>
<style>
html {
height:100%;
}
body {
margin:0;
height:100%;
background:url(images/black-bg-bar.jpg) repeat-y red; /* 980px x 4px black colored bar */
color:white;
}
#wrapper {
width:980px;
margin:auto;
background-color:red;
height:100%;
}
</style>
</head>
<body>
<div id="wrapper">
Plain text without a wrapping element (or some other content to avoid the parent/child margin issues of the wrapper and a starting <p> tag)
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
</body>
</html>
-
5. Re: Trying to fill the viewport on only one side of a centered website layout.
jyeager11 Feb 6, 2014 8:36 AM (in response to Jon Fritz II)Unfortunately, people are taking my demo image a little too literally. I only used flat colors to save time, but in hindsight they were misleading. My apologies. Since a picture is worth a thousand words, I believe this may better illustrate what I'm trying to do.
Again, I'm beginning to think a 3-column table is the way to go, here. 100% width on A + C, 980px width on B, plus a 50% transparent dark background on A.
People keep telling me to avoid using tables, but I can't see any other solution to this problem right now.
-
6. Re: Trying to fill the viewport on only one side of a centered website layout.
Jon Fritz II Feb 6, 2014 8:55 AM (in response to jyeager11)I think you're probably right, for simplicity's sake.
I would put a large image in the <body> then in the leftmost table cell, add an rgba background color so the gray is partially transparent and overlaid.
-
7. Re: Trying to fill the viewport on only one side of a centered website layout.
Jon Fritz II Feb 6, 2014 9:06 AM (in response to jyeager11)Here's what I whipped up (need to use min and max widths to make it work right)...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Background fills left, disappears on right.</title>
<style>
html {
height:100%;
}
body {
height:100%;
margin:0;
background:url(background-image.jpg) no-repeat;
}
table {
height:100%;
width:100%;
}
.leftmargin {
background-color:rgba(155,155,155,0.58);
max-width:50%;
}
.content {
width:980px;
min-width:980px;
}
.rightmargin {
max-width:50%;
}
</style>
</head>
<body>
<table>
<tr>
<td class="leftmargin"></td>
<td class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</td>
<td class="rightmargin"></td>
</tr>
</table>
</body>
</html>
-
8. Re: Trying to fill the viewport on only one side of a centered website layout.
jyeager11 Feb 6, 2014 9:15 AM (in response to Jon Fritz II)Thanks. Pretty much how I pictured doing it, just wanted to make sure there wasn't a simple non-table alternative I could have considered before going ahead with it.




