I am using the css from this jsfiddle:
http://jsfiddle.net/fh6p4/
And as you can see, the text is not scrolling .
I know it is related to being position:fixed but i don't know how to fix this ..
SO forces me to show the js fiddle code, so here it is:
$('#button').toggle(
function() {
$('#right').animate({ left: 250 }, 'slow', function() {
$('#button').html('Close');
});
},
function() {
$('#right').animate({ left: 0 }, 'slow', function() {
$('#button').html('Menu');
});
}
);
* {
padding: 0px;
margin: 0px;
}
#menubar {
width:100%;
background-color:#444;
color: #fff;
padding: 10px;
}
#button {
cursor:pointer;
}
#menu, #right {
display:inline;
}
#menu li a {
padding: 10px;
display: block;
color: white;
text-decoration: none;
}
#right {
width:100%;
background-color: #fff;
z-index: 5;
position: fixed;
left: 0px;
height: 100%;
-webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#right p {
padding: 10px;
}
#menu {
float:left;
width: 350px;
height: 100%;
}
#menu li {
background-color:#444;
border-bottom: 1px solid #888;
}
<div id="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>Menu Item 6</li>
<li>Menu Item 7</li>
<li>Menu Item 8</li>
<li>Menu Item 9</li>
<li>Menu Item 10</li>
<li>Menu Item 11</li>
<li>Menu Item 12</li>
</ul>
</div>
<div id="right">
<div id="menubar">
<div id="button">
Menu
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
</div>
Adding an overflow: scroll to your code will allow you to scroll inside a fixed element:
$('#button').toggle(
function() {
$('#right').animate({ left: 250 }, 'slow', function() {
$('#button').html('Close');
});
},
function() {
$('#right').animate({ left: 0 }, 'slow', function() {
$('#button').html('Menu');
});
}
);
* {
padding: 0px;
margin: 0px;
}
#menubar {
width:100%;
background-color:#444;
color: #fff;
padding: 10px;
}
#button {
cursor:pointer;
}
#menu, #right {
display:inline;
}
#menu li a {
padding: 10px;
display: block;
color: white;
text-decoration: none;
}
#right {
width:100%;
background-color: #fff;
z-index: 5;
position: fixed;
left: 0px;
height: 100%;
overflow: scroll;
-webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#right p {
padding: 10px;
}
#menu {
float:left;
width: 350px;
height: 100%;
}
#menu li {
background-color:#444;
border-bottom: 1px solid #888;
}
<div id="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>Menu Item 6</li>
<li>Menu Item 7</li>
<li>Menu Item 8</li>
<li>Menu Item 9</li>
<li>Menu Item 10</li>
<li>Menu Item 11</li>
<li>Menu Item 12</li>
</ul>
</div>
<div id="right">
<div id="menubar">
<div id="button">
Menu
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
</div>
However, I think this is the wrong approach. Your main content almost never has a reason to be fixed, only your menu should be fixed. Just as an example, view the below as a simple and easy way to create a menu like the one you are trying to make and see how easy it could be if you separate out some elements and keep your content rigidly detached from your data.
document.getElementById('menuButton').addEventListener('click', function(e){
e.preventDefault();
this.className = this.className === 'active' ? '' : 'active';
});
// This code is here to quickly create some content
for(var i = 0; i < 1000; i++){
document.querySelector('article').textContent += 'Lorem Ipsum Dolor Sit Amet. ';
}
nav {
width: 400px;
left: -400px;
top: 0;
position: fixed;
height: 100%;
background: green;
-webkit-transition: left .5s;
transition: left .5s;
}
div {
position: fixed;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: red;
-webkit-transition: left .5s;
transition: left .5s;
}
div.active {
left: 410px;
}
div.active + nav {
left: 0;
}
article {
padding-top: 40px;
}
<div id="menuButton"></div>
<nav>
<ul>
<li>Menu Link</li>
<li>Menu Link</li>
<li>Menu Link</li>
<li>Menu Link</li>
</ul>
</nav>
<article>
Content
</article>
Adding overflow:scroll; to #right creates the scrollbar. However, it also allows the menu bar to be scrolled.
#right {
overflow:scroll;
}
Add this bit of code to your css style sheet at #right{..}
#right {
max-height:250px; //edit your own height
overflow:scroll;
}
Still not sure the answer, but this fiddle might be a little closer to your desired behavior... still problems to work out
http://jsfiddle.net/eqLypgs1/2/
$('#button').toggle(
function() {
$('#right').animate({
left: 250
}, 'slow', function() {
$('#button').html('Close');
});
},
function() {
$('#right').animate({
left: 0
}, 'slow', function() {
$('#button').html('Menu');
});
});
* {
padding: 0px;
margin: 0px;
}
#menubar {
width: 100%;
background-color: #444;
color: #fff;
padding: 10px;
}
#button {
cursor: pointer;
}
#menu,
#right {
display: inline;
}
#menu li a {
padding: 10px;
display: block;
color: white;
text-decoration: none;
}
#right {
width: 100%;
background-color: #fff;
position: absolute;
z-index: 5;
left: 0px;
height: 90%;
-webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#right p {
padding: 10px;
display: block;
}
#menu {
float: left;
width: 350px;
height: 100%;
}
#menu li {
background-color: #444;
border-bottom: 1px solid #888;
}
<div id="menu">
<ul>
<li>Menu Item 1
</li>
<li>Menu Item 2
</li>
<li>Menu Item 3
</li>
<li>Menu Item 4
</li>
<li>Menu Item 5
</li>
<li>Menu Item 6
</li>
<li>Menu Item 7
</li>
<li>Menu Item 8
</li>
<li>Menu Item 9
</li>
<li>Menu Item 10
</li>
<li>Menu Item 11
</li>
<li>Menu Item 12
</li>
</ul>
</div>
<div id="menubar">
<div id="button">Menu</div>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
</div>
Related
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I've created a layout for a panel system I am working on (see code below). This is working fine, except that I need to use calc() in order to determine the height of the element minus their siblings. Since in the final stage the height of the sibling elements is dynamic it will not scale.
My question is, how could I make the following code example work without calc() where the values used inside of it will be dynamically determined?
body {
display: flex;
margin: 0;
}
.frame {
position: relative;
width: 250px;
height: 500px;
margin: 100px auto;
border: 2px solid black;
}
.panel {
position: absolute;
top: -64px;
bottom: 0;
width: 100%;
background-color: hotpink;
}
.panel-header {
width: 100%;
height: 64px;
background-color: lime;
flex-shrink: 0;
}
.panel-content {
width: 100%;
height: calc(100% - 64px);
background-color: aquamarine;
}
.panel-handle {
width: 100%;
height: 32px;
background-color: purple;
}
.panel-content-inner {
width: 100%;
height: calc(100% - 32px);
overflow-y: scroll;
}
<div class="frame">
<div class="panel">
<div class="panel-header"></div>
<div class="panel-content">
<div class="panel-handle"></div>
<div class="panel-content-inner">
<h4>Lorem impsum</h4>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
porttitor et.
</p>
<h4>Lorem impsum</h4>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
porttitor et.
</p>
<h4>Lorem impsum</h4>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
porttitor et.
</p>
<h4>Lorem impsum</h4>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
porttitor et.
</p>
</div>
</div>
</div>
</div>
I would like to know the best way to implement a header/nav that sits over the top of a home page banner div so that the banner's background shows through the header. The content of the header would be located in a template file, while the content of the homepage banner would be outside the template. Because of this, I don't think I can/should nest the header inside the banner. Also, because I'm using a template, the same header will be used on pages other than the home page that don't have a banner.
So far I've got something that sort of works, but I had to do some things that seem a bit inelegant:
1) I had to code the header after the banner. It's probably not a big deal, but I suppose it would be better for screen readers if the first part came first and the second part second.
2) In order for the content text to clear the absolutely positioned banner, I put a bunch of padding at the top of the #content div. But unless the banner is a fixed height, the amount of padding required will vary. Also, on pages that don't have a banner, I'd have to remove that padding entirely.
What's the better way?
body {
font-family: helvetica;
margin: 0;
}
#banner {
background-image: url('http://toprival.com/temp/jsfiddle/background.jpg');
margin: 0;
padding: 100px 30px 30px 30px;
position: absolute;
top: 0;
width: 100%;
background-size:cover;
}
#banner h1 {
font-size: 3em;
}
header {
position: absolute;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
right:0;
padding: 30px;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin-right: 30px;
list-style-type: none;
}
#menu li a {
text-decoration: none;
color: #FFF;
}
#menu li a:hover {
color: aqua;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
#content {
padding: 260px 30px 30px 30px;
}
<div id="banner">
<h1>Supacool Website Title Here</h1>
</div>
<header>
<ul id="menu" class="clearfix">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</header>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
I have a fixed header working as a menu. In this header, I want to show the logo (on the left) and the navigation (on the right). Both will be fixed as I scroll the page.
My navigation is already working. How can I place another DIV for my logo?
Also, how can I make all this content (logo and navigation) vertically align?
Preview: http://baskra.com/teste/teste.html
Here's what I tried, but it didn't work.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bask.ra</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- COMECO DO NIVO SLIDER -->
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- FIM DO NIVO SLIDER -->
<!-- COMECO DO MENU FIXO -->
<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('.menu-fundo');
$(window).scroll(function () {
if ($(this).scrollTop() > 0) {
nav.addClass("f-menu");
} else {
nav.removeClass("f-menu");
}
});
});
</script>
<!-- FIM DO MENU FIXO -->
</head>
<body>
<div class="menu-fundo">
<div class="menu">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<div class="logo">
<img src="images/logo.png" />
</div>
<ul id="menutop">
<li>CONTATO</li>
<li>EQUIPE</li>
<li>QUEM SOMOS</li>
<li>COMO FAZEMOS</li>
<li>O QUE FAZEMOS</li>
</ul>
</div>
</div>
<script>
$("#menutop a").click(function(){
var menuid = $(this).attr("href");
$("body").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow");
return false;
});
</script>
<div class="elementos">
<div id="slider" class="nivoSlider theme-default">
<img src="images/slide1.png"/>
<img src="images/slide2.png"/>
<img src="images/slide3.png"/>
</div>
<div class="o-que-fazemos">
<a id="que"></a>
O QUE FAZEMOS?<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
<div class="como-fazemos">
<a id="como"></a>
<h1 class="como-fazemos-title">COMO FAZEMOS?</h1>
<p align="center"><img src="images/comofazemos.png" /></p>
</div>
<div class="quem-somos">
<a id="quem"></a>
QUEM SOMOS?<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
<div class="a-equipe">
<a id="equipe"></a>
EQUIPE<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
<div class="o-contato">
<a id="contato"></a>
CONTATO<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
html,body {
height:100%;
margin:0;
padding:0;
border:0;
}
div {
margin:0;
border:0;
}
logo {
padding:0;
border:0;
z-index:9999;
float:left;
}
.menu-fundo {
background: #fff repeat-x 0 0;
left: 0;
top: 0;
z-index: 9999;
position:fixed;
}
.f-menu {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
} /* isso vai fazer o menu ficar fixo no topo */
.menu {
height: 100px;
left: 0;
top: 0;
z-index:
9999;
background: #fff repeat-x 0 0;
position:fixed; width:100%
}
.menu ul {
list-style: none;
font-family: 'Source Sans Pro', sans-serif;
font-size:17px;
font-weight:bold;
}
.menu ul li {
float: right;
padding-right:30px;
padding-top:0px;
}
.menu ul li:first-child {
padding-left: 0;
}
.menu ul li a {
color:#000;
text-decoration:none;
border-top:3px solid #999;
}
.menu ul li a:hover {
color: #6D6D6D;
border-top:3px solid #EA0000;
}
.o-que-fazemos {
background-image: url('images/oqfazemosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.como-fazemos {
background-image: url('images/comofazemosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
padding: 50px;
}
.como-fazemos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#FFF;
font-weight:900;
letter-spacing: 2px;
}
.quem-somos {
background-image: url('images/quemsomosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.a-equipe {
background-image: url('images/EQUIPE-FUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.o-contato {
background-image: url('images/contato-FUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.banner {
position: relative;
overflow: auto;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
}
Add some styles to .menu ul
.menu ul {
list-style: none;
font-family: 'Source Sans Pro', sans-serif;
font-size:17px;
font-weight:bold;
/* add this */
position: fixed;
top: 0;
right: 0;
}
Better way is to use css table display to vertically align elements. Additionally menu will not be over the logo on smaller screens.
.login {
display: table-cell;
}
.menu ul {
display: table-cell;
vertical-align: middle;
width: 100%;
}
I am using the js for before hack in IE 7.It displays the background image for the class.But now I want to position the image.Because it is sprite.I dont know why its not working .below is my code.
JS hack.http://jquery.lukelutman.com/plugins/pseudo/
.magento{
list-style-type: none;
margin:0; padding:0;
padding-left: 20px;
}
.magento li:before
{
display: inline-block;
position: absolute;
margin: 9px 0 0 -20px;
min-height: 9px;
background: url(images/bulletsprite.png) no-repeat -116px 0px;
*before: url(images/bulletsprite.png);
*background-position-x: -116px;
*background-position-y:0px;
content:"";
// vertical-align: middle;
width: 9px;
height: 9px;
float:left;
}
HTML code
<ul class="magento">
<li>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.</span>
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
</li>
</ul>
Also its in IE7 standard mode only . why the background-position is not working. The same code works fine in IE8.
IE7 didn't come out until October of 2006. The plugin you're using says that it was last updated on February 6th, 2006. I'm guessing it was never made to work with anything other than IE 5 and IE 6.
I need to arrange multiple div's like,
code:
<style>
#div1 {
background: yellow;
float:left;
position:relative;
width:177px;
}
#div2 {
background: green;
overflow: hidden;
position:relative;
width: 177px;
clear: left;
}
#div3 {
background: blue;
margin-left:180px;
position:relative;
}
#div4 {
position: relative;
}
</style>
<div id="div1">
<p><strong>DIV1:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div4">
<div id="div2">
<p><strong>DIV2:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div3">
<p><strong>DIV3:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus. Donec venenatis, nulla et ultrices varius, ligula sapien pharetra dolor, eget vulputate justo felis ac leo. Morbi nec ullamcorper purus. Nulla mollis dignissim nisi in imperdiet. Phasellus convallis ante a felis tincidunt hendrerit. Praesent ipsum lorem, mollis sed dignissim non, consectetur non ipsum. Nam euismod, nisi ut ultricies aliquet, lorem erat pretium tortor, eget volutpat lectus tellus at magna. Curabitur a est ante, interdum faucibus ipsum. Mauris vitae tincidunt nisl. Praesent semper erat sit amet augue pharetra tristique. Morbi imperdiet, magna et malesuada interdum, massa ipsum venenatis est, sit amet egestas risus sem a purus.</p>
<p>Duis in sagittis justo. Quisque sit amet felis in tortor pharetra bibendum. Mauris eget purus sit amet magna vulputate ultricies. Nam non dignissim nisl. Suspendisse pretium malesuada dolor, non lacinia tellus imperdiet ullamcorper. Sed commodo placerat lacus eu bibendum. In id elit sed velit iaculis pulvinar et id elit. Cras sagittis porttitor tristique. Vivamus sed sodales lectus. Nulla interdum, mi sit amet volutpat feugiat, nunc erat consectetur neque, rutrum rutrum lorem nisl pellentesque magna. Maecenas mollis consequat fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu mi pellentesque turpis faucibus vestibulum quis in ligula. Donec mollis tempor velit, eget vestibulum ante elementum ac. In gravida, purus sed faucibus rhoncus, arcu augue pretium nibh, ut faucibus justo ante vitae metus. Nunc sit amet mauris urna.</p>
</div>
</div>
Please help on this div3 to go top
Thanks in advance.
Based on the beginning of your question :
I need to arrange multiple div's like,
[ div1 ] [ div3 ]
[ div2 ] [ "" ]
I simply ignored the code you supplied. I noticed you wanted a 2 columns system.
Here's a jsfiddle of my suggestion.
Code :
.col {float:left; border:2px solid red;}
.row{width:100px;border:1px solid blue; margin:3px;}
<div class="col">
<div class="row">row1</div>
<div class="row">row2</div>
</div>
<div class="col">
<div class="row">row3</div>
<div class="row">row4</div>
</div>
Would that work for you? If not, why?
Do you mean something like this fiddle?
Tested on Win7 in IE8, IE9, Opera 11.50, FF4, FF5, Safari 5, Chrome 12.
Only IE7 fails. For that you need an extra conditional stylesheet like in this fiddle:
<!--[if lt IE 8]>
<style type="text/css">
body {
position: relative;
}
#div3 {
position: absolute;
margin-left: 0;
top: 0;
}
</style>
<![endif]-->
If you really want it cross browser compatible, without consitional stylesheet for IE7, then I suppose there is no way around partially absolute positioning. See this demo fiddle.
This worked, Thanks NGLN, Your suggestion helped me a lot.
<style>
#div1 {
background: yellow;
float:left;
width:177px;
}
#div2 {
background: green;
overflow: hidden;
width: 177px;
clear: left;
float: left;
}
#div3 {
background: blue;
margin-left: 185px;
position: relative;
}
#div4 {
display: inline;
}
</style>
<div id="div1">
<p><strong>DIV1:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div4">
<div id="div2">
<p><strong>DIV2:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div3">
<p><strong>DIV3:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus. Donec venenatis, nulla et ultrices varius, ligula sapien pharetra dolor, eget vulputate justo felis ac leo. Morbi nec ullamcorper purus. Nulla mollis dignissim nisi in imperdiet. Phasellus convallis ante a felis tincidunt hendrerit. Praesent ipsum lorem, mollis sed dignissim non, consectetur non ipsum. Nam euismod, nisi ut ultricies aliquet, lorem erat pretium tortor, eget volutpat lectus tellus at magna. Curabitur a est ante, interdum faucibus ipsum. Mauris vitae tincidunt nisl. Praesent semper erat sit amet augue pharetra tristique. Morbi imperdiet, magna et malesuada interdum, massa ipsum venenatis est, sit amet egestas risus sem a purus.</p>
<p>Duis in sagittis justo. Quisque sit amet felis in tortor pharetra bibendum. Mauris eget purus sit amet magna vulputate ultricies. Nam non dignissim nisl. Suspendisse pretium malesuada dolor, non lacinia tellus imperdiet ullamcorper. Sed commodo placerat lacus eu bibendum. In id elit sed velit iaculis pulvinar et id elit. Cras sagittis porttitor tristique. Vivamus sed sodales lectus. Nulla interdum, mi sit amet volutpat feugiat, nunc erat consectetur neque, rutrum rutrum lorem nisl pellentesque magna. Maecenas mollis consequat fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu mi pellentesque turpis faucibus vestibulum quis in ligula. Donec mollis tempor velit, eget vestibulum ante elementum ac. In gravida, purus sed faucibus rhoncus, arcu augue pretium nibh, ut faucibus justo ante vitae metus. Nunc sit amet mauris urna.</p>
</div>
</div>