I'm trying to set up a site that has a "carousel" of divs that are all side-by-side (floated left) each with a full-screen width. Using javascript i plan to move different divs into view by moving the "carousel."
My problem is that for some reason when I set overflow:hidden on the div that contains the carousel all the content is hidden. When I inspect with firebug the divs show up in the correct places but none of the content is visible.
Here is the HTML:
<div id="content_window">
<div id="carousel">
<div id="p_home" class="pane">
Home!
</div>
<div id="p_about" class="pane">
About!
</div>
<div id="p_services" class="pane">
Services!
</div>
<div id="p_contact" class="pane">
Contact!
</div>
</div>
</div>
And the CSS:
#content_window
{
position:relative;
width:100%;
overflow:hidden;
}
#carousel
{
position:absolute;
width:400%;
top:50px;
left:0;
overflow:hidden;
}
.pane
{
float:left;
width:25%;
color:White;
text-align:left;
margin-top:50px;
}
If I take the overflow:hidden off of #content_window then the content in the panes becomes visible but horizontal scrollbars are added and you can scroll across and see all the panes. Does anyone know what I'm doing wrong?
When a div contains nothing except floated or positioned elements, its height becomes 0. That is the problem with div#content_window. Try adding a height to that div:
#content_window
{
height: 120px;
}
There's no need to use absolute positioning at all. Just have the content_window clip the viewport for the carousel. See http://jsbin.com/uhubij/edit#html.
The CSS is much simpler:
#content_window {
width:100%;
overflow:hidden;
}
#carousel {
width:400%;
}
.pane {
float:left;
width:25%;
text-align:left;
margin-top:50px;
}
To switch between the panes, add a margin-left to #carousel. The first pane is at margin-left: 0% (default). The second pane is at margin-left: -100%;. The third pane is at margin-left: -200%;, etc... For example, here is pane 2: http://jsbin.com/uhubij/2/edit#html
The HTML is basically the same (except I added a clearing div for you):
<div id="content_window">
<div id="carousel">
<div id="p_home" class="pane">
Home!
</div>
<div id="p_about" class="pane">
About!
</div>
<div id="p_services" class="pane">
Services!
</div>
<div id="p_contact" class="pane">
Contact!
</div>
<div style="clear: both;"></div>
</div>
</div>
Related
I've a peculiar situation where I have a menu that displays an position:absolute; div that should render over other content, but the text in the scrollable div below it renders over the menu.
I cannot seem to find the combination of tags which would fix this. adjusting the z-index property does along with adjusting the position property of the divs
This below code snippit demonstrates what is going on. What works and what doesn't, I require that the parent div be relative to position the menu icon within its parent div and I'm somewhat at a loss on how to have this render correctly.
.scrollable-r {
padding-top:12px;
overflow: auto;
width:100px;
height:50px;
position:relative;
}
.scrollable {
padding-top:12px;
overflow: auto;
width:100px;
height:50px;
}
.menu {
position:absolute;
background:white;
}
<div class="menu">
<div>
Text1
</div>
<div>
text2
</div>
</div>
<div class="scrollable-r">aasdfafqfgqgqgqgqgqre</div>
<div>
<div class="menu">
<div>
Text1
</div>
<div>
text2
</div>
</div>
<div class="scrollable">aasdfafqfgqgqgqgqgqre</div>
</div>
Im trying to overlap an element with a absolute position .tools outside of its uppermost parent element #canvas_area which has an overflow:scroll, however this doesn't seem to work, but it does work if you remove the overflow:scroll attribute.
HTML:
<div id="canvas_area">
<div class="container">
<div class="blocks">
<div class="tools">
x
</div>
</div>
<div class="blocks">
<div class="tools">
x
</div>
</div>
</div>
</div>
CSS:
#canvas_area{
overflow:scroll; // remove this and it works
height:400px;
width:400px;
background-color:black;
margin: 0 auto
}
.container{
position:relative;
}
.blocks{
overflow:hidden;
width:200px;
height:100px;
background-color:white;
margin-bottom:10px;
}
.tools{
position:absolute;
color:green;
left:-40px;
}
I need #canvas_area to have a scroll, is their a way around this?
here is the jsfiddle: https://jsfiddle.net/2exn6oq5/
remove overflow:scroll from #canvas_area and you will see the green x outside the body, which is what I want it to do.
I'm trying to place two divs one above the other. The top div should stay always visible (not scrolling). The div below contains a list, and if the list is too long, and overflows the window/containing div, the div should be scrollable. When defining the height of the top div, it's good, but the content of the top div may change, so the height should not be fixed (like in this question).
My attempt on Plunker.
Is it possible with pure CSS, without JavaScript calculation?
Edit:
The list should strech to the bottom of the screen/container div.
You need to use some not too obvious CSS trickery to get the behaviour you're after, importantly any scrollable content needs to be within a separate container in a CSS table's cell, with overflow-y set, and a height of 100%. The top cell then needs a height of 1% to auto expand as appropriate.
Then all you need to do is set the tables height and max-height as appropriate.
By using CSS tables, you get a lot more flexibility when it comes to layout calculation/manipulation in terms of relating the sizes of elements
Demo Fiddle
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
height:100%;
width:100%;
max-height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
.row:first-of-type >.cell {
background:lightgreen;
height:1%;
}
.row:last-of-type >.cell {
background:pink;
}
#list {
height:100%;
overflow-y:auto;
}
HTML
<div class='table'>
<div class='row'>
<div class='cell'>This is text in the <strong>list-head</strong>, it's content may change, so the height of the div shouldn't be fixed, but should stay always visible (not scrolling).</div>
</div>
<div class='row'>
<div class='cell'>
<div id="list">
<div class="list-element">These are list elements.</div>
<div class="list-element">If the list is too long</div>
<div class="list-element">and reaches the bottom</div>
<div class="list-element">the list should be scrollable.</div>
<div class="list-element">(And only the list</div>
<div class="list-element">not together with the <strong>list-head</strong>.)</div>
</div>
</div>
</div>
</div>
Will this work for you ?
<div id="top" >
</div>
<div id="bottom">
</div>
<style>
#top{
display:block;
width:100%;
}
#bottom{
overflow:scroll;
display:block;
height:500px;
width:100%;
}
</style>
use this structure
<div class="main">
<div class="header">
</div>
<div class="content">
</div>
</div>
.main{
height:100%;
}
.header{
height:50px;
position:fixed;
top:0;
background:#454546;
width:100%;
}
.content{
margin-top:53px;
background:#ffffff;
}
Demo
Im trying to create a header of a website that has the logo left aligned, a navigation div that is 960px wide and centered and a log in area that is right aligned.
Here is a screen shot of my progress
The issue is that the login breaks to a new line and I don't know how to prevent it. Floating the elements doesn't work.
Here is a Fiddle
But it doesnt produce the same results I'm seeing when I run it locally.
HTML
<div id="header"><!-- Outside Container, Holds Logo and Log In -->
<div id="logoHolder">
<p>logo</p>
</div>
<div id="navigation">
<p>navigation</p>
</div>
<div id="loginHolder">
<p>login</p>
</div>
</div>
CSS
/*Header Options*/
#header{
width:100%;
background-color:green;
height:125px;
}
#logoHolder{
float:left;
}
#navigation{
width:960px;
background-color:blue;
margin-left:auto;
margin-right:auto;
}
#loginHolder{
float:right;
}
Just re-order your HTML to the following (move loginHolder above navigation) and it works fine:
<div id="header">
<!-- Outside Container, Holds Logo and Log In -->
<div id="logoHolder">
<p>logo</p>
</div>
<div id="loginHolder">
<p>login</p>
</div>
<div id="navigation">
<p>navigation</p>
</div>
</div>
jsFiddle example
You've got to be careful with widths. The navigation width is overwhelming the other divs. And, if I'm not mistaken, div has a built in line break. the answer above has one solution, I played with a couple edits also: you can copy in this css:
/Header Options/
header {
width:100%;
background-color:green;
height:125px;
}
logoHolder {
width: 100px;
background-color: red;
float:left;
}
navigation {
width:344px;
background-color:blue;
float:left;
}
loginHolder {
width:100px;
background-color:yellow;
float:left;
}
I have solutions that work in all browsers except IE, so I'd appreciate if the answers worked in IE.
<div id="content">
<div id="redBar"></div>
<div id="main">
<div id="header">
<img src="images/header.gif" id="logo1">
</div>
<div id="explanation">
Next div.
</div>
</div>
<div id="footer">
</div>
</div>
I guess I'll just give the CSS too:
#main
{
padding-left:229px;
padding-right:229px;
}
#logo1
{
width:auto;
z-index:1;
position: relative;
left:250px;
}
#main
{
//background-image:url('../images/indexBack.gif');
background-repeat:repeat-xy;
width:980px;
}
Well what you're trying to do is relatively simple but you're putting your logo nested in a few block elements that might mess it up because they don't have the necessary styling applied to them...
A visual image of the different areas would help but heres what I think you're trying to do. I am asuming you want the entire page centered too (if not then it is impossible with your current html).
(Also you defined the css class for #main twice)
<div id="content">
<div id="redBar"></div>
<div id="main">
<div id="header">
<img src="images/header.gif" />
</div>
<div id="explanation">
Next div.
</div>
</div>
<div id="footer">
</div>
</div>
<style>
#main
{
background-image:url('../images/indexBack.gif');
background-repeat:repeat-xy;
width: 980px;
margin: 0 auto;
}
#header img /* don't put un-needed ids on elements */
{
display:block; /* img is an inline element by default but we want it as a block so margin works */
margin: 0 auto;
}
</style>
If you know the dimensions of the logo then you can use absolute positioning. Lets say your logo is 200x100:
#logo1 {
position:absolute;
top:50%;
left:50%;
margin-top:-50px; /* half the logo height */
margin-left:-100px; /* half the logo width */
}
This does rather assume that your element's container fills the size of the screen too though.