New to using bootstrap, and am having trouble with a div rectangle that I would like to stretch full-width across the top of the page (much like the SO grey bar at the top). I have tried sizing to 100% and resetting margins, but nothing is working. I also tried taking the rectangle out of the container div, but then it disappears :(. I then tried making the rectangle a well instead, but that doesn't seem to want to let me set its height to 20px.
I've tried most of the rearranging-of-divs or using the !important as suggested on SO, but, for whatever reason, the divs aren't cooperating. I just want a blue bar to stretch across the top of the page, as per my bosses request :P
I'm a bit frustrated, and wonder if anyone can help me?
<body>
<div class="container">
<div class="rectangle span12"></div>
<div class="container">
<div class="row-fluid">
<span class="span12">
<img src="images/one-pager-blogcta-08.png" class="pull-right image">
</span>
</div>
</div>
and the CSS
body {
padding-left: 0;
padding-right: 0;
}
/* Set floating dom-heading margins to 0 */
[class*="dom-heading"] {
margin: 0;
}
.container .rectangle {
background: #1f2f5f;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
border-radius: 0px;
margin-left: 0px !important;
border: none;
height: 20px;
width:100%;
}
Site: intervalmed.com
Html:
<body>
<div class="navbar rectangle">
<div class="container-fluid">
<!--menu items-->
</div>
</div> <!-- .navbar -->
<div class="container">
<div class="container">
<div class="row-fluid">
<span class="span12">
<img src="images/one-pager-blogcta-08.png" class="pull-right image">
</span>
</div>
</div>
CSS:
.rectangle {
background: #1f2f5f;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
border-radius: 0px;
margin-left: 0px !important;
border: none;
height: 20px;
width:100%;
}
If you just want the bar on top, you can just set a border to <body>
body {
border-top: solid 20px #1f2f5f;
}
If you want an actual <div> with 100% of the document's width, then it should be outside the container, since the container is the one that wraps things with max-width
So just move your div outside container and set the height explicitly in your CSS (<div> elements will always fill it's parents width)
HTML
<body>
<div class="rectangle"></div>
<!-- THE REST OF YOUR PAGE -->
</body>
CSS
.rectangle {
background: #1f2f5f;
height: 20px;
}
Related
I want create this.
What I have so far is this, but it is not responsive as screen size changes. It stays on specific width, that is why i am thinking to replace this with image
<div class="container-fluid">
<div class="betn-footer">
</div>
</div>
.betn-footer{
background-color:#f4f3f3;
height:50px;
text-align:center;
position:absolute;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
margin-top:-20px;
margin-left:65px;
width:973.88px;
box-shadow: 0 21px 30px -10px #080808;
}
Tell me if there is any other option to do this. Thank you!
Just remove your fixed widths and margins:
.container-fluid { margin-bottom: 2em; }
.betn-footer {
background-color: #f4f3f3;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
box-shadow: 0 21px 30px -10px #080808;
}
<div class="container-fluid" style="width:200px;">
<div class="betn-footer"></div>
</div>
<div class="container-fluid" style="width:500px;">
<div class="betn-footer"></div>
</div>
<div class="container-fluid" style="width:1000px;">
<div class="betn-footer"></div>
</div>
You should not use margin-left and instead center the footer / your content with margin: 0 auto. Then you can set your footer width to a flexible width via using %
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
it will always display a picture in the center of the page.
i have this fiddle: http://jsfiddle.net/z715whdj/1/ don't know what you need from css so please take a look at the fiddle.
<div class="container">
<div class="head">
<!-- Slogen and meta-links -->
</div>
<div class="carousel">
<!-- Maybe some headpics or a slider -->
</div>
<div class="logo">
<!-- Main Logo -->
</div>
<div class="navi">
<div class="logos">
<ul>
<li></li>
<li></li>
<!-- Placeholder for some logos -->
</ul>
<div class="clr"></div>
</div>
<div class="nav">
<!-- Navi UL -->
</div>
</div>
<div class="content">
<!-- Content comes here -->
</div>
<div class="footer">
<!-- Footer -->
</div>
</div>
the left blue bar should be the navi and it should be as high as the content+footer is (overlapping over footer). How can i get that?
I got the min-height aspect but it seems to be struggling because i get a scrollbar. i read through some of the questions here but i wasn't able to get some aspects of them.
is there a possibility to stretch the height of the navi in function of the content+footer or do i have to write a workaround and if i have to, how to write this workaround?
Try to set position:relative to container and position:absolute for navi. Set top property to compensate header height, and bottom to 0 to let navi fullfill container height.
CSS:
.container {
width: 970px;
padding-right: 3px;
padding-left: 3px;
background-color: #fff;
margin: auto;
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.65);
z-index: 1;
font-family: Verdana, sans-serif;
font-size: 14px;
color: #575756;
min-height: 100%;
height: 100%;
position:relative;
}
.container .navi {
float: left;
margin-left: 30px;
z-index: 3;
background-color: #233872;
padding: 20px 10px 20px 10px;
border: 3px solid #fff;
border-bottom: 0;
position: relative;
width: 220px;
position:absolute;
top:50px;
bottom:0px;
}
jsFiddle
EDIT:
As requested, I've created a new (simpler) layout to let container fullfill 100% height without vertical scrollbar: jsFiddle
The text inside of my progress bars are getting cut off on the top. I'd like to move the text to the middle of the progress bar.
How can I do so?
I've tried position: relative; and top: 40px but that is causing issues for me when I dynamically change the number (with JS). Oddly, the number is getting cut off on the top even when it appears in the middle of the progress bar. Even more odd is that is only happening in Chrome (FF and IE work fine).
Notice in this image, only the bottom changed, but the top part didn't:
So, I included a live example WITHOUT the relative positioning, I'm thinking that that is the reason things are wacky. Can you guys figure out how to just move the text down to the middle without relative positioning? Or just figure out how to prevent the number from getting cut off with the relative positioning?
Also, I don't want absolute positioning either because the number needs to remain in the middle of each individual progress bar.
LIVE EXAMPLE: http://jsfiddle.net/SeTXK/1/
HTML:
<div class="row">
<div class="col-md-12">
<div class="content">
<h2>Summary</h2>
<div class="progress text-center">
<div class="progress-bar progress-bar-success" role="progressbar">
<span id="output-expenses">$0.00</span>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar">
<span>$0.00</span>
</div>
<div class="progress-bar progress-bar-danger" role="progressbar">
<span>$0.00</span>
</div>
<div class="progress-bar progress-bar-income" role="progressbar">
<span id="output-income"></span>
</div>
</div>
</div>
</div>
</div>
CSS:
.progress {
height: 100px;
margin-bottom: 0;
border-radius: 10px;
/*background-color: #c4ffc4;*/
}
.progress span {
/*position: relative;
top: 40px;*/
color: #292929;
font-weight: bold;
font-size: 4em;
font-family: 'Cinzel', serif;
text-align: center;
vertical-align: middle;
width: 100%;
}
.progress-bar-success {
width: 30%;
}
.progress-bar-warning {
width: 20%;
}
.progress-bar-danger {
width: 20%;
}
.progress-bar-income {
background-color: #f5f5f5;
-webkit-box-shadow: inset 0 5px 8px rgba(0,0,0,0.1);
box-shadow: inset 0 5px 8px rgba(0,0,0,0.1);
width: 30%;
}
If you add padding-top:75px; display:inline-block; to the .progress span rule, it will achieve the desired effect.
jsFiddle
i got problem with setting my layout right, elemnts doesn't align way i want to and i'm running out of ideas, or repeat same misteakes.
There is wrapper(green) thats fits its size to page width, container that i want to center (blue) that shrinks or expands depending on page width and then rectangular elements(brown) that i want to center inside container (blue) and allow them to rearrange according to width of container (size and amount is not constant)
HTML
<div id="tiles_wrap">
<div id="tiles">
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaab</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaav</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaaa</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">bbbv</div>
</div>
</div>
</div>
</div>
CSS
#tiles_wrap {
width: 100%;
display:block;
position: relative;
background-color: rgba(0, 255, 0, 0.3);
float: left;
padding-left:25%;
padding-right:25%;
}
#tiles {
margin: 0 auto;
height: 100%;
display:block;
float: center;
Padding: 40px;
line-height: 0.7em;
font-size: 12px;
background-color: rgba(0, 0, 255, 0.3);
}
.tilewrap {
padding: 5px;
float: left;
}
.tilebg {
height: 55px;
width: 70px;
background-color: brown;
display:block;
position: relative;
float:left;
}
.ribbon {
color: #fff;
padding:2px;
background-color: rgba(255, 0, 0, 0.5);
display:block;
position: absolute;
z-ndex: 22;
}
Thanks in advance fr all help!
You can't use float for this, there is no float: center; so that's one of your problems. Also, absolutely positioning elements tends to fix them to a particular spot, so they're not very good for centering and re-arranging depending on width of container.
You can, however, use display: inline-block; along with text-align: center; to do what you're after.
Also, don't forget that if you set the width of an object to 100%, then add 25% padding on the left and right sides, you are making the total width of that object 150% of its parent (in the normal content-box model.)
http://jsfiddle.net/UQ34L/1/
To get the blue to center, you need to set a width for #tiles, then remove the padding from #tiles_wrap. There is no such thing as float:center, so that is ignored.
Try this
#tiles_wrap {
width: 100%;
display: block;
background-color: rgba(0, 255, 0, 0.3);
float: left;
}
#tiles {
width: 65%;
margin: 0 auto;
Padding: 40px;
font-size: 12px;
background-color: rgba(0, 0, 255, 0.3);}
Try this
JSFiddle
As suggested by others, I've added display: inline-block to get the divs to sit alongside each other. As well as this, I added a wrapper div with id="wrapper" and applied a text-align: center to have the tiles align in the center.
Also I added a div with id="tiles_left" for the left margin div with a width of 30% and removed your "tiles_wrap" div as it is not needed with the changes I made. The "tiles" div with a width of 70%
<div id="tiles_left">
hello
</div>
<div id="tiles">
<div id="wrapper">
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaab</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaav</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaaa</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">bbbv</div>
</div>
</div>
</div>
I have a page with 4 <div>'s that have float: left applied to them inside of a container element. The container has background: #ffffff applied to it, but it is not working as I would expect in IE (8, specifically). It works fine in Chrome and FireFox.
I know that if I remove my slider from the container, everything displays as I would expect it. So it has something to do with that, I'm just not sure what it is.
Here is how it should look:
Here is how it is displaying in IE:
CSS:
/* Container */
.main-content {
margin-bottom: 15px;
background: #ffffff;
border: 1px solid #e1e1e1;
}
/* Columns (Wrecked Vehicles, Welcome, Inv Search) */
.col {
float: left;
width: 289px;
padding: 10px;
margin: 5px;
}
/* Slider */
.slider {
float: left;
padding: 10px;
margin: 5px;
}
HTML:
<div class="main-content">
<div class="col n1">
...
</div>
<div class="slider">
...
</div>
<div class="col n2">
...
</div>
<div class="col n3">
...
</div>
<div class="clear"></div>
</div>
Try adding overflow:hidden to the .main_content. The reason the backgorund isn't showing is because, due to all the children floating, the container has zero "real" height.