I need some help with this, i want to have a sidebar and a content div using bootstrap fluid layout but i cant make the sidebar to be scrollable and the content div not. I already tried using overflow:hidden; on body and applying overflow:auto on the sidebar div but it doesnt works, what am i missing?
Heres my scss code:
#main-container{
margin-left:0;
margin-top:60px;
padding:0px;
.span3{
background-color:white;
ul{
margin: 0;
li#song{
background-image: url($images+'chevron.png');
background-position: right center;
background-repeat: no-repeat;
background-color:white;
color: #666;
border-top: 1px solid #B4B4B4;
list-style-type: none;
padding: 10px 10px 10px 10px;
}
}
}
}
.maxheight{
height:100%;
}
.no-overflow{
overflow-y:hidden;
}
.scrollable{
height:100%;
overflow-x:hidden;
}
Here is the example code, the left div is what i want to scroll: http://jsfiddle.net/xYDRg/
You need to set height for that div:
#lista-canciones{
height: 350px;
}
http://jsfiddle.net/xYDRg/1/
Related
I have a webpage with a menu bar, banner (div) and a main section (container div). The menu bar extends past the visible region of the window when the window is resized (made smaller), which triggers the horizontal scrollbar. But if I then scroll to the right in the resized window, the banner and container stay where they are and the background of the website is exposed.
Also I have a min-width enabled right now for the menu bar because I don't want the menu bar pieces collapsing down to the next available line in a messy fashion on resize.
Is there a way to get the bar to collapse in an organized manner on resize, for example: first row with 4 blocks, second row with 3 blocks. Or any other suggestions for how to deal with the menu bar during resize?
I've also had difficulty properly centering the menu bar.
Here is the jsfiddle for the page with the relevant sections of html and css. http://jsfiddle.net/dj99aq6e/
<div id="dtitle">
<h2 id="title">Title</h2>
</div>
piece of code for the menu bar:
<!--menu bar STARTS -->
<ul id="sddm">
<li><a href=""
onmouseover="mopen('m1')"
onmouseout="mclosetime()">test</a>
</li>
CSS:
body{
font-family: sans-serif;
background-color: #b2b2b2;
background-color: rgba(0, 0, 0, .2);
margin:0;
padding:0;
height:100%;
width:100%;
overflow-x: auto;
}
html{
margin:0;
padding:0;
height: 100%;
width: 100%;
overflow:hidden;
}
#dtitle{
background-color:black;
padding:0;
height:8%;
width:100%;
overflow:hidden;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;
}
#sddm{
display:table;
margin:10px auto;
margin-bottom: 2px;
padding-left: 0;
min-width: 1050px;
z-index:30;
}
#sddm li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font:14px sans-serif
}
#sddm li a{
display: block;
margin: 0 1px 0 0;
padding: 8px 10px;
width: 128px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none
}
#sddm li a:hover{
background: #49A3FF}
#sddm div{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2
}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 12px sans-serif
}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
Is this what you are going for? http://jsfiddle.net/dj99aq6e/1/
I took out the overflow: hidden from #dtitle and adjust the text with padding
#dtitle{
background-color:black;
padding:0;
padding-top: 5px;
margin-top: -15px;
height:8%;
width:100%;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;
}
OK, I figured it out.
I gave #about (the main content container) a min-width of 1000px, and #dtitle a min-width of 1050px. The 1050px min-width matches the min-width on the menu bar which was the key. Now upon resize and then horizontal scroll the previous gap on the right disappears!
I also put a div around the contact information div and gave it a min-width of 1050px so it stays positioned properly.
Here is the updated code: http://jsfiddle.net/dj99aq6e/2/
#dtitle{
background-color:black;
padding:0;
height:8%;
min-width:1050px;
overflow:hidden;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;
im using this css code:
/* status update page style */
#content_wrapper {
display: inline;
width: 80%;
padding: 0;
margin: 0 auto;
}
#content_update {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_maintainance {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_sidebar {
display: block;
float: right;
width: 230px;
padding: 20px;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
/* FOOTER */
#footer {
width:100%;
height:580px;
position:absolute;
bottom:0;
left:0;
border-top:4px solid #ed1c24;
background-color:#eeeeee;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footerTop {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
#footerTopLeft {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopMid {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopRight {
width:30%;
height:420px;
float:left;
display:inline;
padding:0 15px 10px 15px;
}
but the divs are displaying behind the footer divs. i have created a fiddle here so you can see the html too - http://jsfiddle.net/wmrhC/
It's because you have set the footer div to be absolutely positioned at the bottom of the browser window with a height of 580px. This takes the div out of the regular document flow, which means other elements can start hiding behind it, and since it is 580px high, most other elements on the page will hide behind it. You could fix this by setting the z-index on the footer to -1, but that's probably not what you are after, as it would just mean that the div's will start floating over the top of the footer instead of behind the footer, and that still doesn't look pretty.
You should get rid of the absolute positioning which you have set currently, and maybe look at something like CSS sticky footer for an approach which will let you set a footer which sticks to the bottom of the page instead of to the bottom of the browser window.
When working with position: absolute or fixed you should always be aware that these elements can cover other parts of your site, and you have to manage their depth manually
You can do this using the z-index property.
Let's say that you would like that the footer part appears below all contents.
You could add the z-index property like this:
#footer {
/* other styles */
z-index: -1;
}
See it in action
Though note, that this only fixes the "content is displayed behind" problem. But looking at your page you have more positioning problems to solve.
As stated in other answers, it's because you've positioned your footer div to be fixed.
Something along this line (regarding HTML and CSS) should help for your page lay-out:
JSFiddle demo
This is the CSS (see the JS Fiddle for the full code):
...
.wrapper {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
background-color: #cccccc
}
.left1 {
position: relative;
float: left;
left: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.left2 {
position: relative;
float: left;
left: 1.50%;
width: 32.00%;
background-color: #ccccff
}
.right {
position: relative;
float: right;
right: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.footer {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
margin: 10px 0px;
background-color: #cfcfcf
}
...
As you can see, none of these items are positioned absolute or fixed.
Be sure to check this link too, which explains how you can create a sticky footer:
CSS Sticky footer (As indicated by another answer).
I have a three column site that will display all three columns or just one. If it displays just one column, my example below is the column it will be displaying. This intro wrapper is the center column that needs to grow in the event that the columns to the left and right of this wrapper are not present. Specifically, the first div in the intro wrapper. The second div has a static image in it and should not change.
I've used min/max-width but the content never reaches the maximum but rather stays at the minimum.
.intro is the wrapper. The min-width for this wrapper should be 801px and can grow up to a max of 1200px. The first inner div (.intro-left) should be a minimum of 531px and can grow up to a maximum of 979px.
Can someone have a look and tell me where I'm going wrong?
Here is my code.
.intro{
float:left;
min-height:200px;
width:801px;
padding:10px 0;
}
.intro .intro-right{
display:inline;
float:left;
height:200px;
width:250px;
background:#ccc;
}
.intro .intro-right img{
height:190px;
width:240px;
margin:5px 0 0 5px;
border:1px solid #777;
}
.intro .intro-left{
display:inline;
float:left;
width:531px;
min-height:200px;
margin-right:20px;
}
<div class="intro">
<div class="intro-left">
<h2>Test</h2>
<p>test</p>
</div>
<div class="intro-right">
<img alt="" src="1.jpg">
</div>
</div>
display:table solves your issue,. here is the CSS, ive made some changes while testing that you may want to remove.. such as making the left div resizeable so that you can see it work in action.
div.intro {border:2px dotted red;
min-height: 200px;
max-width:1200px;
min-width:801px;
padding: 10px 0;
margin:0 auto;
display:table;
}
.intro-right, .intro-left{display:inline-block;vertical-align:top;}
.intro-right {
height: 200px;
width: 250px;
background: #ccc;
outline: 2px solid green;
}
.intro-right img {
height: 190px;
width: 240px;
margin: 5px 0 0 5px;
border: 1px solid #777;
}
.intro-left {
width: 531px;
height: 200px;
margin-right: 20px;
outline: 2px solid blue;
resize:both;
overflow:auto;
}
Here is my code for css div based layout. I want a search box inside the #header div. But when I add margin or padding to the #header .search class, it will add this to height of #header div. Please help me how can I get it correctly. I want the search box at 10px margin-bottom from where #header div ends.
#container {
margin:0px auto;
width:984px;
border-left:#FFFFFF solid 1px;
border-right:#FFFFFF solid 1px;
}
#header {
height:150px;
background: url(./images/header.png) no-repeat;
border-bottom:#FFFFFF solid 1px;
}
#header .search {
margin:0px auto;
text-align:center;
width:620px;
}
You could position the search box absolutely inside the #header
#container {
margin:0px auto;
width:984px;
border-left:#FFFFFF solid 1px;
border-right:#FFFFFF solid 1px;
}
#header {
height:150px;
background: url(./images/header.png) no-repeat;
border-bottom:#FFFFFF solid 1px;
position:relative; // parent container
}
#header .search {
margin:0px auto;
text-align:center;
width:620px;
position:absolute;
left:0; bottom:10px;
}
This way your search box won't ever affect the parent containers.
Demo: http://jsfiddle.net/fparent/AyyZG/
insert a display on both tags, and add a margin-bottom. should work
I have designed the header with the following CSS:
.Navigation { height: 84px; background: url(../images/Navigation.png) repeat-x; border-bottom: 1px solid #919191; }
#NavigationInside { padding-left: 15px; width: 945px; margin: 0 auto; }
This is fixed height and width header whereas I want it relative to the screen size. Both end of the header should touch the left and right corner of the screen.
Please help me out to make changes in the CSS.
.Navigation {
width:100%;
margin:0;
padding:0;
...