I have a page with a vertical navbar on the left side of the page, and a "content" area to the right of the navbar. I want the width of the "content" area to fill the remainder of the screen, and the height to match the navbar height.
Here is what I have so far: jsFiddle
Preferably I am looking for a pure CSS solution to this problem.
Typically, the Faux Columns technique is used to fill in the space that isn't filled with content. You'll need to replace your CSS gradients with images, and it's much easier to set up with fixed dimensions (but still possible with fluid dimensions).
Essentially, you'd need to structure your HTML elements like this:
<div id="header"></div>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Your CSS would do the work for you as far as stretching the content goes:
/* The top part of the rounded container */
#header {
background: url(images/bg_top.gif) 100% 100% no-repeat; /* sit on top */
}
/* The background for your content */
#wrapper {
background: url(images/bg_tile.gif) 100% 0 repeat-y; /* repeat on the right */
}
/* The bottom of your content */
#footer {
background: url(images/bg_bottom.gif) 100% 0 no-repeat; /* sit on the bottom */
}
You'll definitely need to play around with some negative margins to get things to sit perfectly.
Apply a min height to your content area:
#content {
position: absolute;
margin-left: 200px;
width: 100%;
min-height:328px;
}
Check out the updated fiddle: http://jsfiddle.net/hsGN6/6/
It's crude, but it works.
Related
I am wondering if it is possible to keep an img inside a div always centered regardless of the browser size? By being centered I mean that the left/right sides of the image gets cropped to ensure the image stays centered without modifying the height. Also, is it possible to prevent the horizontal scroll bar from appearing when the browser width is less then the image width?
I'm sure this is really easy to do if my image is located in a background-url tag in CSS, but because this image is being housed inside the SlidesJS carousel the image has to be from an img tag.
At the moment, I have used margin:0 auto; to keep the image centered as long as the browser width is larger then the image. Once the browser width shrinks, the image does not resize with the shrinking browser size. I also have yet to figure out how to remove the horizontal scroll bar when the browser width is too small.
This is what I'm trying to achieve: http://imgur.com/Nxh5n
This is an example of what the page layout is suppose to look like: http://imgur.com/r9tYx
Example of my code: http://jsfiddle.net/9tRZG/
HTML:
<div id="wrapper">
<div id="slides">
<div class="slides_container">
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 200px;
margin: 0 auto;
}
Try this: http://jsfiddle.net/9tRZG/1/
#wrapper {
max-width: 200px; /* max-width doesn't behave correctly in legacy IE */
margin: 0 auto;
}
#wrapper img{
width:100%; /* the image will now scale down as its parent gets smaller */
}
To have the edges cropped, you can do this: http://jsfiddle.net/9tRZG/2/
#wrapper {
max-width: 600px; /* so this will scale down when the screen resizes */
margin: 0 auto;
overflow:hidden; /* so that the children are cropped */
border:solid 1px #000; /* you can remove this, I'm only using it to demonstrate the bounding box */
}
#wrapper .slides_container{
width:600px; /* static width here */
position:relative; /* so we can position it relative to its parent */
left:50%; /* centering the box */
margin-left:-300px; /* centering the box */
}
#wrapper img{
display:block; /* this allows us to use the centering margin trick */
margin: 2px auto; /* the top/bottom margin isn't necessary here, but the left/right is */
}
Jeff Hines linked putting image always in center page where ShankarSangoli explained how to achieve this.
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
I am not sure about the align center looks proper to me as for the scroll bar.
You can use the following:
overflow-x: hidden;
I want to recreate the following header:
The problem is that the content is centered in the white section. Grey is the background of body and the header is 100% of screen.
What I have now is:
CSS
.top_left {
background:#3c4d74;
}
.top_right {
background:#2f3a5a;
}
.top_center {
background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top;
height:140px;
}
#page,
.top_center {
max-width:1000px;
margin:0 auto;
}
#page {
background:#FFF;
}
body {
background:#DEDEDE;
}
HTML
<body>
<div id="top-header">
<div class="top_left"></div>
<div class="top_center">
LOGO
</div>
<div class="top_right"></div>
</div>
<div id="page" class="hfeed">
MY content bla bla bla
</div>
</body>
Which you can see working on http://jsfiddle.net/gTnxX/ (I put max width 600px instead of 1000px so you can see it on fiddle).
How can I make the left side soft blue and right side hard blue at any resolution?
To do this you need to be very aware of how positioning works.
The #header-bg is positioned so it falls below #wrapper. It is 100% width, 140px high with 2 divs which both take up 50% of that space and they both get a different colour for left/right.
The #wrapper is relatively positioned to make z-index work, putting it above the #header-bg. Width is set at 600px, and margin: 0 auto; centers it.
The #header is a simple div which has a height set to it and the background it requires.
Content follows the #header in normal flow.
Here is a jsfiddle with the requested behaviour.
http://jsfiddle.net/sg3s/cRZxN/
This even degrades nicely and lets you scroll horizontally if the content is larger than the screen (something I noticed from the original jsfiddle).
Edit:
To make it IE7 compatible I made some changes to fix 2 bugs. I had to add left: 0; and top: 0; explicitly to #header-bg to fix a positioning bug. Made the divs inside #header-bg 49% instead of 50% or else IE7 would not resize them properly and make the right div bump down. To compensate for the small gap that created I made the right div float: right;.
I am writing a website in Html using CSS; in my website I have a text logo that I want to place in the top center size of the site, I am using CSS as indicated below
background-color:#4d5152;
position:fixed;
width:970px;
top: 0%;
padding-right:200px;
padding-left:200px;
My question is, how can I position my logo in the upper center and have the left and right size of the logo the same color of the logo without righting the values to the padding left and right; so it will be generic for all computer monitor size and browsers
hope I am clear enough
Thank for the help
Typically, I would write something like this:
HTML
<html>
<body>
<div id="wrapper">
<h1 id="logo">My Company</h1>
</div>
</body>
</html>
CSS
#wrapper {
width:960px; /* Width of the containing 'wrapper' or content area */
margin:0 auto; /* This will center the wrapper. 0px margin on the top and bottom, and 'auto' on the left and right (let the browser decide the amount of margin). */
}
h1#logo {
text-align:center; /* If you don't define a width the h1 will be 100% as its parent (#wrapper). This centers the text. */
}
Here's an example showing this: http://jsfiddle.net/V5Cff/1/embedded/result/
I would like to has a scrollable div but scrollbar should be on the right side of browser as default (but not on the right side of div). I've seen that on facebook (ceter div - contentArea is scrolled by right side browser scrollbar).
The way Facebook does it is by having all the content that doesn't scroll have a position of fixed. This way the native browser scrollbar will appear to scroll the center area only, while it's actually the rest of the page that is fixed in position.
A very simple example of this:
http://jsfiddle.net/tcaVN/
Now imagine the above, but with all non-scrollable items setup like the #header.
EDIT
Here is a slightly more complex example, with three columns:
http://jsfiddle.net/tcaVN/1/
Actually, the div your are talking about is not scrollable, the other div elements are fixed
That gives you the impression the scrollbar is outside the div, while you are actually scrolling the whole page, the left and right div elements are fixed. i.e: by using the style position: fixed;
I hope this helps a lot... see what you can do from here, i tried to comment on the code as much as possible...
<html>
<head>
<title>Example</title>
<style>
#head{
position:fixed; /* this will make the div stay in the same place */
width:100%; /* this will size the dive to the width of the window */
height: 42px; /* this will make the height of the div 42px */
top:0px; /* make sure the div is at the very top */
left:0px; /* make sure the div is as far left as possible */
background: #009933; /* this will make the background of the div into a green color */
}#head_slack{ /* we make this one the same size so no text is ever covered */
width:100%; /* make sure the width of the slack is 100% */
height: 42px; /* make sure the hight of the slack is the same as the head fixed */
}body{
margin: 0px; /* takes out the default white border around the page */
}#leftFixed{
width 150px; /* set the width the same as the with of the table data cell containing the div */
position: fixed; /* make sure it stays in place */
left: 0px; /* make sure the div is at the left */
top: 45px; /* make sure the div is below the head div */
}#rightFixed{
width 200px; /* set the width the same as the with of the table data cell containing the div */
position: fixed; /* make sure it stays in place */
right: 0px; /* make sure the div is at the right */
top: 45px; /* make sure the div is below the head div */
}
</style>
</head>
<body>
<div id="head">This is the fixed header</div>
<div id="head_slack">this is the header that takes the slack</div>
<table width="100%">
<tr>
<td width="150px" valign="top">
<div id="leftFixed">This is fixed content on the left</div>
</td>
<td>
This is the scrollable content
</td>
<td width="200px" valign="top">
<div id="rightFixed">this is fixed content on the right</div>
</td>
</tr>
</table>
</body>
</html>
A simple way I have found is:
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scoll;
}
For some reason this displays the scroll bar outside the div
I have the following HTML and CSS:
<div class="content">
<div class="leftbg"></div>
<div class="innercontent"><p>Some content goes here</p></div>
<div class="rightbg"></div>
</div>
.content {
overflow: hidden;
}
.leftbg {
background: url("./leftbg.png") repeat-y scroll top left transparent;
margin-left: 0;
float: left;
width: 10px;
}
.innercontent {
width: 600px;
float: left;
margin-left: 0;
}
.rightbg { /* similar to left bg except for the right side */ }
The problem that I am having is the leftbg image is only repeating until it reaches the height of the paragraph in the innercontent div. I am accessing a database to grab the content for the innercontent div and hence the content will be of variable height. Is there any way to make it so that it repeats until it reaches the bottom of the leftbg (and rightbg) div? What I mean by that is for it to repeat until it is at the bottom of the innercontent div without setting the height as static (e.g. height: 200px;) because the height will be variable.
This equal height column layout tutorial from smashing magazine might help you. With lot of explanation of all the whys.
I think the problem you are facing is that leftbg and rightbg don't have any content. The height of the <div class="content"> element equals the height of it's "tallest" child (innercontent in this case).
Maybe if you post a mockup of what you want as a final result I can help you further. Also, the markup would be helpful.