<div class="row">
<div id="cover" class="span12"></div>
</div>
<div class="row">
<div id="first_left" class="span6 left">
<h3>aa</h3>
</div>
<div id="first_right" class="span5">
ee
</div>
</div>
And less:
#cover{
background: url('couv.jpg') no-repeat;
width: 960px;
height: 280px;
}
h3{
color: #212121;
font-size: 18px;
font-weight: normal;
float: left;
text-transform: uppercase;
margin: 0 0 25px 0;
text-shadow: 1px 2px 2px #FFF;
}
.left{
background: url('grille.jpg');
padding: 15px;
}
The "first_right" span displays below first_left, and only if the 15px padding is present. With padding 15, first_left becomes 490px wide instead of 460px. Why is that ?
Also, is it ok to have padding on a span if I want to nest some more rows in it ?
The default value for box-sizing is content-box. This does not include padding. The padding extends the width (if set) of the element. You need to set border-box to include the padding and borders in the element width.
.left{
background: url('grille.jpg');
padding: 15px;
box-sizing: border-box;
}
Now the width includes padding and borders.
Read more about box-sizing
Related
I have a div block i want to apply border-bottom just beneath the text and not throughout the whole div block
the div block is
#info-header {
font-size: 40px;
text-align: center;
margin:100px 10px 10px 10px;
font-family: Poiret One;
color:lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
find us through
</div>
You can wrap your text in an inline element like <span> and apply border to it.
HTML:
<div id="info-header">
<span>some text here...</span>
</div>
CSS:
#info-header span {
border-bottom: 1px solid whitesmoke;
display: inline-block;
vertical-align: top;
}
Note: You can make your element inline-block if you wants to apply block level properties but keep it behaving like an inline element. This way you can also control the border-width and the distance between text and border line.
body {
background: green;
min-height: 100vh;
margin: 0;
}
#info-header {
font-size: 40px;
text-align: center;
margin:100px 10px 10px 10px;
font-family: Poiret One;
color:lightyellow;
}
#info-header span {
border-bottom: 1px solid whitesmoke;
display: inline-block;
vertical-align: top;
}
<div id="info-header">
<span>some text here...</span>
</div>
Add css property text-decoration: underline
You should use text-decoration property.
In your case its:
text-decoration: underline;
You can also use text-decoration for overline and line-through read about CSS text-decoration Property
You can change the display value for an another block level.
html {
background: lightgray
}
#info-header {
font-size: 40px;
/*text-align: center;
margin:100px 10px 10px 10px;*/
display: table;/* shrinks on content */
margin: 10px auto;/* margin:auto instead text-align for this block */
font-family: Poiret One;
color: lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
find us through
</div>
codepen
Give the <div> a fixed width and give it a {margin: 0 auto} for centering
body {
background: #131418;
text-align: center;
}
#info-header {
font-size: 40px;
margin: 0 auto;
width: 300px;
color: lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">this is a nice title</div>
I thought bootstrap 3 used box-sizing:border-box so when I tried to add a margin class to the 2 box-sizing:border-box they stack on top of each other instead of sitting next to each other from sm upwards in size.
<div class="blueBox col-sm-6">
<input type="checkbox">foo</input>
</div>
<div class="blueBox col-sm-6" >
<input type="checkbox">boo</input>
</div>
css
.blueBox {
background-color: #26a8e0;
color: white;
height: 100px;
margin: 20px;
box-sizing: border-box;
padding: 20px;
}
The box-sizing : border-box; property doesn't include margin in the size of the elements. It includes border width and paddding. That is why they don't stay inline.
border-box
The width and height properties include the padding and
border, but not the margin.[...]
source : MDN
To simulate margin, you can use border with the same colour as the background :
.blueBox {
background-color: #26a8e0;
color: white;
height: 100px;
border: 20px solid #fff;
box-sizing: border-box;
padding: 20px;
}
I am using the following lay-out: http://peterned.home.xs4all.nl/examples/csslayout1.html
Right now, I'm trying to create something like this: http://imgur.com/P64BojY
What I would like to have is a header, two divs in the middle of the page and a fixed footer. All of the divs (except for the footer) should be of the same size.
Basically, what I'm trying to do is to divide the central div (from the lay-out I've mentioned before) into two divs of the same size, I need the footer to stay at the bottom of the page though.
For my other pages I'll need to be using the same lay-out, except for the bottom div, which has to be divided in 3 divs, like this: http://imgur.com/XuxxlAE
I'm not sure how to do any of this, since I'm working with the min-height 100%...
So yeah... any help would be appreciated! Thanks
is this what you want? easier to just show you a jsfiddle so you check the css needed.
<div class="container">
<div class="containerDivs">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
<div class="footer">
footer
</div>
</div>
http://jsfiddle.net/QcG7a/
Try this solution, I have replaced div content with two divs with class content
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
html, body {
background: none repeat scroll 0 0 #808080;
color: #666666;
font-family: arial,sans-serif;
font-size: small;
height: 100%;
margin: 0;
padding: 0;
}
h1 {
font: 1.5em georgia,serif;
margin: 0.5em 0;
}
h2 {
font: 1.25em georgia,serif;
margin: 0 0 0.5em;
}
h1, h2, a {
color: #FFA500;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
background: none repeat scroll 0 0 #F0F0F0;
height: auto !important;
margin: 0 auto;
min-height: 100%;
position: relative;
width: 750px;
}
div#header {
background: url("../csslayout.gif") no-repeat scroll 98% 10px #DDDDDD;
border-bottom: 6px double #808080;
padding: 1em;
}
div#header p {
font-size: 1.1em;
font-style: italic;
margin: 0;
}
#a{padding: 1em 1em 0em 1em;}
#b{padding: 0em 1em 6em 1em;}
div#content p {
padding: 0 1em;
text-align: justify;
}
div#footer {
background: none repeat scroll 0 0 #DDDDDD;
border-top: 6px double #808080;
bottom: 0;
position:absolute;
width: 100%;
}
div#footer p {
margin: 0;
padding: 1em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
<p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
</div>
<!--div content duplicated-->
<div class="content" id="a">
<h2>Min-height</h2>
<p>Lorem ipsum...</p>
</div>
<div class="content" id="b">
<h2>Min-height</h2>
<p>Lorem ipsum...</p>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
</body>
</html>
i am creating images with a polaroid like effect using padding around the image and setting the background colour to white
img.team {
background: none repeat scroll 0 0 white;
box-shadow: 0 9px 25px -5px #000000;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
padding: 12px 12px 50px;
}
what I would like to do is write a caption within the space under the image and between padding, kind of like if i had wrote on it with a felt pen. Im using bootstraps thumbnails as my images.
I have tried a negative margin on the h5
h5 {
color: #333333;
font-size: 1.1em;
margin-top: -35px;
text-align: center;
}
HTML is
<div class="container">
<div class="row">
<div class="span4">
<div class="thumbnail">
<img class="team" src="http://placehold.it/160x120" title="Swimming" alt="Swimming" ></a>
<h5>Swimming</h5>
</div><!--End of thumbnail-->
</div><!--End of span4-->
however when i place another row of polaroids underneath they overlap the top ones because of this margin.
has anyone done anything like this before? any help appreciated
Instead of styling the <img>, style div.thumbnail instead:
<div class="thumbnail">
<img class="team" src="http://placehold.it/160x120" title="Swimming" alt="Swimming" ></a>
<h5>Swimming</h5>
</div>
CSS:
div.thumbnail {
background: none repeat scroll 0 0 white;
box-shadow: 0 9px 25px -5px #000000;
padding: 12px;
display: inline-block;
}
Here is a demo for you. Note that you should remove the negative margin from the <h5> too.
I want to align the text in my div ('what' and 'where') but now that I have the text a the bottom it has pushed the divs (search-field1 and searchfield2) further down the page!
How can I have it so the text doesnt affect this? Is it something to do with the cellpadding/spacing?
Sorry im not the best at CSS I'm teaching myself it.
HTML:
<center>
<div class="what"><p>what?</div>
<div class="where">where?</div>
<div>
</center>
<center>
<div class="search-field1">
</div>
<div class="search-field2">
</div>
</center>
CSS:
.what{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #151515;
display: inline-block;
vertical-align: center;
}
.where{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #ffffff;
display: inline-block;
verticle-align: center;
}
.search-field1{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
verticle-align: center;
}
.search-field2{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
horizontal-align: center;
}
Thanks!
James
James is this what you are looking for? http://jsfiddle.net/jkeyes/WFPK2/
Set the line-height for your containers (in this case .what and .where to be the same as the height:
line-height: 35px;
sounds like you need float:left on your center tags
Html:
<div class="center">
<div class="what">what?</div>
<div class="where">where?</div>
</div>
<div class="center">
<div class="search-field1"></div>
<div class="search-field2"></div>
</div>
CSS:
If you use float:left on the enclosing div's it will allow the two center div's to float side by side.
.center {
float:left;
}
Another option would be to set your line height to zero on the hidden div like so:
line-height: 0px;
Then add padding to the surrounding divs. Like so:
padding-top: 10px;
Hope that helps someone.