I have my html as below
<div id="main">
<div id="tabs" class="pages">
</div>
<div id="rows">
</div>
css
.pages {
float: left;
width: 100%;
margin-bottom: 20px;
background: #fff;
border-bottom: 1px solid #d5d5d5;
}
How can I stop tabs div from scrolling when the user scrolls the main div?
Related
I want to have a fixed navigation bar on a mobile website. So far, I'm trying to do so by setting position: fixed to the navigation bar. PLUS My navigation bar is expandable, so the div below has to react to the height of the navigation bar. I want the div below to stay scrollable.
1) #bar{position: fixed} and #content{}
2) #bar{position: fixed} and #content{position: relative; top:58px;}
EDIT Here's some of my code.
<div id="navigation">
<div id="icons" class="mobile">
<img alt="Logo Header" src="res/logo_small_w.png"/>
<img id="menu_icon" alt="Menu Logo" onclick="menu()" style="float:right;" src="res/menu_icon.png"/>
</div>
<div class="menu_items">
<h2>
Nächster Hotspot
Termine
Berichte
Feedback
</h2>
</div>
</div>
<div id="content">
<div id="load_container"></div>
</div>
CSS:
#navigation {
box-shadow: 0px 2px 2px #005b00;
position: fixed;
left: 0px;
right: 0px;
}
#content {
position: relative;
top: 58px;
}
.menu_items {
display: none;
width: 100%;
}
.menu_items a {
border-top: 1px solid grey;
color: inherit;
display: block;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
}
Trying to center a bootstrap row and it's contents inside a div. The code is below:
HTML:
<div class="horizontal-layout">
<div class="row">
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_coversheet_blue.png" style="height:100px; width:100px; cursor:pointer;">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_onepager_pink.png" style="height:100px; width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_user_profile_green.png" style="height:100px;width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_create_packet.png" style="height:100px; width:100px;cursor:pointer">
<h4>View</h4>
</div>
</div>
</div>
CSS:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
}
.packet-icon {
text-align: center;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
min-height: 140px;
min-width: 140px;
}
RESULT:
But When I go and make changes to parent div(horizontal-layout) be displayed flex and the child div to align-middle, my width of row changes.
After Css Change:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.horizontal-layout > div {
display: inline-block;
vertical-align: middle;
}
OUTPUT:
Can anyone fix the row with issue?
By default, div was display: block, so that the width was automatically 100%.
Specifying .horizontal-layout > div to display: inline-block changed that behavior, so if you want to keep that, you have to set width manually:
.horizontal-layout > div {
...
width: 100%;
}
I have three divs on the same line and want to connect them with a line:
Unfortunately, every way I tried collided with the method of display, e.g. inline-block and vertically aligned spacer divs of height 50% with bottom-border.
http://codepen.io/anon/pen/QwOOZp
if it stands on 1 line, you could add pseudo element and filter first and last box, to draw or not a line aside.
div.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
margin-right: 5em;
position:relative
}
.boxItem:before,
.boxItem:after
{
content:'';
width:5em;/* size of your margin */
border-bottom:1px solid;
position:absolute;
top:50%;
}
:after {
left:100%;
}
:before {
right:100%;
}
.boxItem:first-of-type:before,
.boxItem:last-of-type:after {
display:none;
}
.myBox {
white-space:nowrap;
/* */ text-align:center;
}
body {
}
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
<div class="boxItem">3</div>
<div class="boxItem">4</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
<div class="boxItem">3</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
</div>
fork of your pen
Try this:
div.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
}
div.line {
display: inline-block;
border-top: 1px solid black;
width: 2em;
}
<div class="boxItem">1</div><!--
--><div class="line"></div><!--
--><div class="boxItem">2</div><!--
--><div class="line"></div><!--
--><div class="boxItem">3</div>
Note: I used <!-- and --> to comment out the white space ensuring the line actually touches the divs. More info on that bit: https://stackoverflow.com/a/19038859/2037924
EDIT: Same in CodePen, for the case you like that more for some reason: https://codepen.io/anon/pen/wBPPRz
You could add a div with the width of your margin:
<div class="boxItem">1</div>
<div class="emptyDiv"></div>
<div class="boxItem">2</div>
<div class="emptyDiv"></div>
<div class="boxItem">3</div>
CSS:
div {
display: inline-block;
}
div.emptyDiv{
border: 1px solid black;
width:25em;
}
div.boxItem {
border: 1px solid black;
padding: 1em;
}
My goal (and the question of how-to) is to have an opaque / white background with black fields over the opaque area to serve as content holders. Here is what I have now:
/* translucent background*/
.background
{
width:950px;
height:1024px;
margin: 9px auto 10px;
background-color:#ffffff;
opacity:0.35;
filter:alpha(opacity=35); /* For IE8 and earlier */
border-radius: 15px;
-moz-border-radius: 15px;
z-index:0;
}
/*content wrapper*/
.content
{
font-family: Arial;
font-size: 11px;
width:950px;
height:1024px;
margin: 9px auto 10px;
border-radius: 15px;
-moz-border-radius: 15px;
z-index:1;
}
/*one of three content fields*/
.anounce_bar
{
font-family: Arial;
font-size: 16px;
width:940px;
height:225px;
float: left;
border: 5px 5px 5px 5px;
background-color: black;
border-radius: 15px;
-moz-border-radius: 15px;
z-index:2;
}
<div class="background"></div>
<div class="content">
<!--Top announcement bar-->
<div class="anounce_bar">
</div>
<!--Left side nav bar-->
<div class="nav" style="height: 1024px; ">
</div>
<!--Right side content window-->
<div class="content_window">
</div>
</div>
Right now its showing the anounce_bar below the translucent background.. how do I get the bar (and subsequent nav & content_window) to go on top of .background?
Note: I have other content, including a top 'masthead' image and a background JPG that might be screwing with this.
Any help would be GREATLY appreciated.
Update:
This was an issue with opacity inheritance - the work around I used is described very well here
'background' class became #background without any opacity, and a new item was added:#background .transparency with absolute positioning and opacity.
<div id="background">
<div class='transparency'></div>
/*OTHER STUFF*/
</div>
Change the order
<div class="anounce_bar"></div>
<div class="background"></div>
That should work.
<div class="background">
<div class="content">
<!--Top announcement bar-->
<div class="anounce_bar" style="color: white">Anounce Bar</div>
<!--Left side nav bar-->
<div class="nav" style="height: 24px; width: 940px; background-color: green; float:left;">Nav</div>
<!--Right side content window-->
<div class="content_window" style="height: 24px; width: 940px; background-color: yellow; float:left;">Content Window</div>
</div>
</div>
Sample Code
I am attaching my HTML and CSS hoping that someone can help me. Basically I have a right sidebar div where the content will not push to the top. When I play around with position and height properties, the content just floats all over the page and doesn't even stay in the right sidebar. I hope someone can point me in the right direction, I have looked at numerous posts and nothing I try seems to work.
HTML:
<div id="container">
<div id="head">
</div>
<div id="menuTop">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
CSS:
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 250px;
}
CSS Box Model 101 - the actual width of a div (or any element) is width + padding + borders
So your two floated divs add up to 1001px
the content div # 750px + 1px border is actually 751px wide, make it's width 749px and all should be well
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
display:block;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 200px;
}
<div id="container">
<div id="head">head
</div>
<div id="menuTop">
</div>
<div id="content">ssss
</div>
<div id="sidebar">ffff
</div>
<br style="clear:both;" />
<div id="footer">
</div>
</div>