im trying to get some background images around a content div. Thing is, the content div should have a flexible width (no problem). The background pics should always be left and right attached to the content div. BUT: the horizontal scrollbar should only be triggered, when the user reduces the window to the width of the content div.
Picture: Structure
I came up with something like this:
<div>
<div class="header">/div>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="content">Content</div>
</div>
<div class="footer">/div>
</div>
.wrapper{
margin:auto;
width:950px;
position:relative;
}
.left {
background:transparent url(../images/left.png) no-repeat scroll 0 0;
position:absolute;
top:0;
left:-120px;
width:120px;
height:500px;
}
.right {
background:transparent url(../images/right.png) no-repeat scroll 0 0;
position:absolute;
top:0;
right:-120px;
width:120px;
height:500px;
}
Scrollbars always appear when window hits the right absolute div. I need them to be two divs (left/right) because the content div should be flexible and not hide the background when it extends to much.
Someone got a tecnique for this?
you have an unnamed plain root container div.
Add this style for that div (or give a class/id name to wire css deceleration).
Main point is min-width... Keep it same with your container div's width.
also adding body,html{margin:0;padding:0;} will be nicer.
style="width:100%;overflow:hidden;min-width:950px;position:relative; height:100px;"
this will work fine exept for ie6.
For ie, you can apply some js magic.
Let's assume you're using jquery library and you gave id name "shell" to your root container div.
Then try this script only for ie6. (create exclusion or something like that):
$(document).ready(function(){
$('#shell').each(function(){
var that = this;
var contentWidth = 950;
check();
$(window).resize(check);
function check() {
var winWidth = Math.ceil($('body').width());
if(winWidth <= contentWidth) {
$(that).css({'width':contentWidth});
} else {
$(that).css({'width':'100%'});
}
}
});
});
This script will make "shell"s width 100%. (if browser's width is larger than 950px) otherwise it'll lock shell's width with 950px and that will enable scrollbar.
I did something similar for a website, the solution I came with was this:
I created an image with the left and right content on the background and the space of the content in the middle to just be a solid color, even though the image is 1400 x 539 it weights 12 KB, so it's pretty good.
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
body {
background: #fff url(left-and-right.jpg) no-repeat center top;
text-align: center;
}
#wrapper {
margin: auto;
text-align: left;
width: 960px;
}
Related
I have quite an annoying problem, for which I don't seem to be able to find an easy fix. Consider the following HTML:
<html>
<body>
<div id="page">
<!-- Some HTML here -->
<div id="menu"><!-- Some stuff here --></div>
<!-- Some HTML here -->
</div>
</body>
</html>
With the following CSS:
body {
text-align: center;
}
#page {
margin: 0px auto;
max-width: 1200px;
}
#menu {
width: 100%;
padding: 0px 2000px;
margin-left: -2000px;
}
This would give a centered page div, with a menu bar in there. Thing is, whenever the browser width becomes > 1200px, the div will not grow any further, but the menu div must at all times stretch all the way to the window edges. And the problem with this approach now is, that I get a horizontal scrollbar because the menubar is bigger than the screen. So, I am looking for a solution for this. Something that disables the scrollbar from having impact on the horizontal scrollbar would do. Disabling the horizontal scrollbar isn't an option however, since the content must be scrollable on small devices as well...
I am aware that I could fix this by pulling the menu bar outside of the page div, but that is hard, since I am editing a Drupal theme and I want this change to have as little impact as possible.
Thanks in advance for any suggestions!
What you mean is that you want the div to stay 100% width all the way but to have scrolling inside of it? If so then you should have a wider div inside the main div.
Something like this-
<div id="full-width">
<div id="scrolling-div">
</div>
</div>
<style type="text/css">
#full-width {
float:left;
width:100%;
height:500px;
overflow-x:visible;
}
#scrolling-div {
float:left;
width:300%;
height:500px;
}
</style>
I tested this code, it works :)
You can easy fix this by setting your html and body styling like this:
html, body {
overflow-x:hidden;
}
body {
margin: 0;
}
This should do it with the current code you have now.
I am trying to create a page footer with some text on the left, on the right, and centered on the page. I've been following examples such as this and I'm having the same problem with all of them: The content in the center div is centered between the borders of the left and right divs, not centered on the body. That is, if left/right are not the same width then the center is off-center.
I can't use fixed widths because I know neither the content nor the font size. I do know the content will be just a few words each.
I can't use explicit proportional widths either for similar reasons; I don't know the proportions of the content and e.g. the center may be short with a left or right side greater than 1/3 of the page width.
I don't actually have to use divs, I just am because that seems to be the way this is done... but anything that will get me a left + body centered + right aligned footer-style layout will work (as long as it works on all common browsers).
I don't care what happens when contents overlap; they can either overlap, or word-wrap, or do something else ugly.
Currently the closest I've gotten is this CSS:
#left { float:left; }
#right { float:right; }
#center { float:none; text-align:center; }
And this HTML:
<div id="container">
<div id="left">...</div>
<div id="right">...</div>
<div id="center">...</div>
</div>
But I am seeing this (an extreme example):
Here is a fiddle: http://jsfiddle.net/HCduT/
I've tried various combinations of float, display, overflow, and margin, but I can't seem to get this right.
Edit: I've also tried http://jsfiddle.net/nshMj/, recommended by somebody elsewhere, but it's got the same issue (with the disadvantage that I don't really understand what it does).
How do I make the content in the center div aligned to the page, rather than centered between the left and right divs (which have different sizes)?
I'm not 100% sure what you're after. Here's what I did get:
You want the left div on the left
You want the right div on the right
You want don't want to limit the width of those to 33%;
You want the center to always be dead center.
You don't care about overlapping content
If I got that right, then try this out: DEMO
CSS:(The color is just so you can distinguish the content, as it overlaps)
#content {
text-align:center;
}
#container {
position: relative;
}
#left {
float:left;
}
#right {
float:right;
color: #ccc;
}
#center {
text-align:center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: red;
}
After some research i ended with this:
html
<body>
<div id="content">center point V center point</div>
<div id="container">
<div id="left">L</div>
<div id="center">C</div>
<div id="right">RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR</div>
<br style="clear: left;" />
</div>
</body>
css
#content {
text-align:center;
}
#left {
width:33%;
float:left;
}
#right {
width:33%;
float:left;
overflow:hidden !important;
}
#center {
float:left;
width:33%;
text-align:center;
}
#container{
width:100%;
}
fiddle
So. My code is something along the lines of
<html>
<body>
<div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
<img src="header_image.svg" />
</div>
<div id="content" style"display:block">
Some content
</div>
</body>
</html>
I have an svg in the header that I have set so that it matches the width of the window and the height scales to preserve the svg. Then I have the rest of the page in another div. I would like it so that the page doesn't scroll and this content div fills to fit the rest of the window. The problem is that since the height of the header changes with the width of the window, I can't set the content div in pixels or percentage or anything concrete.
How can I set the height of the content div to change dynamically with the height of the header?
I don't know Javascript or JQuery (I know, I know - I should), but ideally the height of the content div would be set to be something like height:(height of viewport)-(height of header), but I haven't a clue how to do this.
you don't have to use a script for that.
and also: I recommend you to separate your styling from your markup.
HTML
<div id="wrapper">
<div id="header">
<img src="header_image.svg" alt="the img is empty"/>
</div>
<div id="content">Some content</div>
</div>
add this to your CSS
html, body {
height: 100%;
margin: 0px;
}
/* this is the big trick*/
#wrapper:before {
content:'';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
color: white;
}
#header {
background-color:#000;
}
#content {
background-color: gray;
}
/* this is the big trick*/
#content:after {
content:'';
display: block;
clear: both;
}
Working Fiddle
Tested on: IE10, IE9, IE8, FF, Chrome.
didn't use absolute positioning
didn't use Script (Pure CSS solution)
fluid layout
cross-browser
Explanation:
with pseudo element, I'm creating a floating element (without content or width, so he's invisible)
that has 100% of the container height.
and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.
Say, for example, I have two divs like so:
<body>
<div id="header">
MY CONTENTS
</div>
<div id="main">
MY OTHER CONTENTS
</div>
</body>
The first div has the attributes position:fixed; and width:100%; in CSS, the other div is just a div with much content inside.
Ok, there is a scrollbar in the right side, as usual. But this scrollbar affects all of the divs. I want the scrollbar to only affect the second div, is possible?
I tried everything with overflow:auto, overflow:hidden, and overflow:scroll but I didn't reach my goal...
EDIT: Here my jsfiddle: http://jsfiddle.net/upcfp/
Do you want to do something like that?
jsfiddle Example 1
I edited your jsfiddle and removed some of the not needed parts for your question:
edited version of your jsfiddle
seems like there was a
</div>
missing in the #header, but is that what you wanted to get?
Is this what you had in mind?
This is a simple method. I have the header at the top, absolutely positioned, at a height of 100 pixels. Below that, I have the main content area, which has a height of 100%, a transparent top border of 100 pixels (so the content appears below the absolutely positioned header).
The box-sizing property in CSS allows us to fit the entire element into the width and height we specify, including padding and borders. So including the top border, the height of the main content is 100%, and the scrollbar appears only on the main content div.
The trick here, by the way, is setting the height of both html and body to 100%. This wouldn't work otherwise.
CSS:
html,body {
height:100%;
}
#header {
position:absolute;
width: 100%;
height: 100px;
background:#c3c3c3;
z-index:1;
}
#main {
background: #eee;
height:100%;
border-top:100px solid transparent;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
Here is your fiddle using my solution.
Try:
#div2 {
overflow-y: scroll;
}
That will only put the scrollbars when needed. To always display them use overflow-y: scroll;. I had prefixed the second div's ID with div as you should not use only numbers for IDs or attributes in general.
The # signifies that the rule will apply to an element with the ID that follows the #. If you wanted it applied to all div then you would use a class instead.
Demo: http://jsfiddle.net/6EVtN/
Without seeing more code, the issue could be due to browser compatibility. Example above was tested in Mozilla Firefox 13.0.1 and IE 8.
Updated Demo: http://jsfiddle.net/j4uAM/
Ok, I solved my problem, I used this code:
body{
overflow: hidden;
}
#main{
overflow: scroll;
}
#maincontent{
height: 1500px;
}
I specified the height in content of #main and it just worked, thanks to everybody!
This a perfect solution, but I don't know how to keep code format in stackoverflow:
<script>
$("#cart").bind("mousewheel", function(e){
var intElemScrollHeight = document.getElementById("cart").scrollHeight;
var intElemClientHeight = document.getElementById("cart").clientHeight;
if( intElemScrollHeight - $("#cart").scrollTop() === intElemClientHeight) {
$(document).bind("mousewheel", function(event) {
event.preventDefault();
});
}
if(e.originalEvent.wheelDelta /120 > 0 ) {
if($("#cart").scrollTop() != 0) {
$(document).unbind("mousewheel");
} else {
event.preventDefault();
}
}});
$("#cart").on("mouseleave", function(event) {
$(document).unbind("mousewheel");
});
</script>
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;.