can somebody please explain me why there is this small yellow padding below the image? I know that the yellow space on the right of the image is normal but why below? Any idea how to fix this?
Thank you!
http://jsfiddle.net/uu0dggmr/
HTML:
<body>
<div id="page">
<div class="box">
<div class="info" style="background:yellow">
<img src="https://placehold.it/350x150" style="max-width:100%;height:auto">
</div>
<div class="info">Text</div>
</div>
<footer>Footer</footer>
</div>
</body>
CSS:
body{margin:0;font-size:100%}
#page{margin: 0 auto}
footer{background:black;color:white}
.box {background:white}
.info {background:orange}
#media screen and (min-width:480px) {
.box {width:100%;float:left}
.info {width:50%;float:left}
}
The img is an inline element, so it takes the line-height into consideration. To avoid the space below the image you can do one of the following things:
set float: left on the image
set display: block on the image
set line-height: 0 on the .info div
It's a whitespace, like a line break. You could set another css tag for it. when the holder has an image to set the line-height to zero.
<body>
<div id="page">
<div class="box">
<div class="info image-holder" style="background:yellow">
<img src="https://placehold.it/350x150" style="max-width:100%;height:auto">
</div>
<div class="info">Text</div>
</div>
<footer>Footer</footer>
</div>
</body>
CSS
body{margin:0;font-size:100%}
#page{margin: 0 auto}
footer{background:black;color:white}
.box {background:white}
.info {background:orange}
.info.image-holder {
line-height: 0;
}
#media screen and (min-width:480px) {
.box {width:100%;float:left}
.info {width:50%;float:left}
}
Related
I'm using Boostrap 3 and have a problem with backgrounds on elements that appear too wide. The container is in desktop mode 1170px and has 15px padding left and right which makes the content appear with 1140px width.
When I'm adding an element with a different background color (let's say body + .container both has same background), then the element will appear as 1170px wide due to the background showing in the padding area as well.
I could add CSS for each element with deviating background in each screen width (media queries) to solve the problem. But I hope there is a better way to achieve this since I can't be the only person with this problem. Does anyone know some Boostrap class / function to solve this issue, or know some best practise for this?
Try wrapping the rows and/or inner content, you can see how I have done it here; http://jsfiddle.net/w7wowg94/
HTML
<div id="master-wrap">
<div class="container">
<div class="wrap-class-one">
<div class="row">
<div class="col-md-6">Content 1</div>
<div class="col-md-6">Contnent 2</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4">
<div class="inner-wrap">Content 1</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
</div>
</div>
</div>
CSS
#master-wrap {
margin: 0 auto;
background-color: #eee;
padding: 15px;
}
.wrap-class-one {
background-color: #ccc;
padding: 15px;
}
.inner-wrap {
padding: 15px;
background-color: #ccc;
}
I am using Bootstrap 3, and have a problem getting a div to sit over a jumbotron header.
I am using the jumbotron class to give me a full width, responsive header with a background image as below...
<div class="container-fluid">
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-8">text here</div>
<div class="col-md-4">text here</div>
</div>
</div>
</div>
Here is the rest of the site...
<div class="container">rest of site goes here
</div>
What I want to do is have my entire site/container BELOW the jumbotron - slide up and cover half of it's height. Obviously as is, the container for the site content is cleared below the jumbotron, but i need a solution to get it up about 100px to cover the lower half of jumbotron.
I have tried both z-index methods and absolute positioning but can't get either to work. Any suggestions?
A SAMPLE TO WORK WITH HERE - http://jsfiddle.net/9b9Da/7/
As stated in comments, Bootstrap 3 doesn't have a .container-fluid class, which was removed in Bootstrap 2.3.2 as .rows are full width by default (Mobile first approach). position: relative was then used to offset your overlying content <div> to appear half way over the .jumbotron
<div class="jumbotron">
<div class="col-md-8 jumbotext">text here</div>
<div class="col-md-4 jumbotext">text here</div>
</div>
<div class="container" id="content">
<div class="row">
This content needs to float over the Jumbotron above
</div>
</div>
<style>
#content {
position: relative;
bottom: 80px;
z-index: 500;
opacity: 0.6;
}
#content > .row {
min-height: 400px;
background: #cccccc;
}
.jumbotron > .jumbotext {
z-index: 700;
}
</style>
Fiddle: http://jsfiddle.net/9b9Da/9/
I'm using bootstrap 3 and it has .container-fluid. It's also listed in the bootstrap docs and on the W3.
Bootstrap classes
I am having an issue with a horizontal layout: http://jsfiddle.net/GqH6s/4/
It seems the parent #content div gets its width from its first child (#projects), not the total of all its children.
I know I could work around it with jQuery but I'd like to use CSS if possible.
Thanks for your help!
The basic html:
<div id="content">
<div id="projects" class="section">
<div class="block">Content</div>
</div>
<div id="profile" class="section">
<div class="block">Content</div>
</div>
<div id="team" class="section">
<div class="block">Content</div>
</div>
</div>
And CSS:
#content {
white-space: nowrap;
display: inline-block;
}
.section {
display: inline-block;
}
.block {
white-space: normal;
}
You need to place the #profile and #team div's within the #project div so that they appear inline with the rest of the sections.
Should looks something like this:
Im working on my very first website/freelance project. I have some knowledge of html/css ruby rails and bootstrap so far.
I was wondering if you could help me out with something I havn't been able to look up. I have tried to find out how to make certain part of the page take up the entire portion of the browser's window. The site I am working on is 1 long page, with 4 different sections, each of which needs to take the entire browser's view. I was wondering if there was an easy way with bootstrap to do this? Any help is appreciated, thanks so much.
Use the fluid grid (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem) and add 100% width to your container divs, like:
css:
<style type="text/css">
/* after your bootstrap css inclusing */
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container
{
width: 100%;
}
</style>
html:
<div class="container">
<div class="row-fluid">
<div class="span4" style="background-color:red;">...</div>
<div class="span8" style="background-color:yellow;">...</div>
</div>
</div>
update:
Split in rows of 50% height:
css:
<style type="text/css">
/* after your bootstrap css inclusing */
body, html, .container,.row-fluid .hunderd{ height:100%; min-height:100%; !important;}
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container
{
width: 100%;
}
.fifty {height:50%;min-height:50%;}
</style>
html:
<div class="container">
<div class="row-fluid fifty">
<div class="span6 hunderd" style="background-color:red;">...</div>
<div class="span6 hunderd" style="background-color:yellow;">...</div>
</div>
<div class="row-fluid fifty">
<div class="span6 hunderd" style="background-color:blue;">...</div>
<div class="span6 hunderd" style="background-color:orange;">...</div>
</div>
</div>
I'm trying to slice an box with rounded corners. The image is sliced horizontal in 3parts (top-middle-bottom). The problem in IE7 is that the top div is larger than the actual size I set.
Here is the HTML & CSS code
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle' >
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
.recent-box {
width: 127px;
float:left;
display:block;
}
.recent-box-top {
float:left;
background-image: url('images/recent-foto-top.png');
background-repeat:no-repeat;
width: 100%;
}
.recent-box-middle {
float:left;
background-image: url('images/recent-foto-middle.png');
background-repeat:repeat-y;
width: 100%;
}
.recent-box-bottom {
float:left;
background-image: url('images/recent-foto-bottom.png');
background-repeat:no-repeat;
width: 100%;
}
Thanks for helping me out!
Ward
The font-size and line-height properties might be the offensive ones. If you are not placing any text in the top box, use something like
.recent-box-top {
font-size: 0;
line-height: 0;
}
Found the solution!
Just put in the div and it works like a charm!
found on http://archivist.incutio.com/viewlist/css-discuss/39150