I'm trying to create a "tile" (square block) with content centered perfectly in the middle of it.
Here's the HTML
<div class="tile-facebook">
<h5>Facebook</h5>
<div class="tile-notification">4</div>
<h4>notifications</h4>
</div>
And the CSS
.tile-facebook{
width:175px;
height:175px;
background: #3b5998 ;
text-align: center;
border-radius: 10px;
border-style: solid;
border-color: #ccc;
border-width:1px;
color: white;
}
.tile-notification{
font-size:80px;
font-weight:bold;
padding:10px 0px;
}
I've got the text in the middle of the block, however I want it to be directly in the middle with the same padding from the top and bottom. Thoughts?
You might not set the height , but use a pseudo or extra element to draw your square from any width of your boxe.
vertical padding at 100% + inline-block is a way to draw a square and add content in its middle.
<div class="tile-facebook">
<div class="wrapper">
<h5>
Facebook
</h5>
<div class=" tile-notification ">
4
</div>
<h4>
notifications
</h4>
</div>
</div>
.tile-facebook {
width:175px;
background: #3b5998;
text-align: center;
border-radius: 10px;
border-style: solid;
border-color: #ccc;
border-width:1px;
color: white;
}
.tile-notification {
font-size:80px;
font-weight:bold;
}
.tile-facebook .wrapper * {
margin:0;
}
.tile-facebook:before {
padding-top:100%;
content:'';
}
.tile-facebook:before,
.wrapper {
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/cnq82/
some explanation about vertical % padding or margin : http://www.w3.org/TR/CSS2/box.html#padding-properties & http://www.w3.org/TR/CSS2/box.html#propdef-margin-top
So, (hope it makes it a bit more clear : ) )
If you give a vertical padding of 100% its height will be equal to width of parent.
If you want height to be taller of 20px you can do : padding:100% 0 20px 0 ; or padding:20px 0 100% 0;
If you want a box with a ration of 4:3 , just do padding-top:75%; or padding:50% 0 25% 0;.
pseudo or extra element can be floatting, or inline-block for vertical alignment.
You do not need to set a width in parent's CSS.
This fix tequires that the contents height never changes, and you need to add another <div>.
<div class="tile-facebook">
<div class="center">
<h5>Facebook</h5>
<div class="tile-notification">4</div>
<h4>notifications</h4>
</div>
</div>
And add the CSS:
.title-facebook {
position: relative;
}
.center {
position: absolute;
top: 50%;
margin-top: -[half height];
left:0;
width: 100%;
}
Where [half height] is half the height of the .center div.
Add margin: -30px; to your CSS here:
.tile-notification {
font-size:80px;
font-weight: bold;
padding: 10px 0px;
margin: -30px;
}
Related
I have split my footer tag into 2 seperate tags, 1 being a disclaimer and the other being contact but the children tags wont inherit the background color i want to set.
<footer role="contentinfo" id="contentinfo">
<div class="disclaimer">
</div>
<div class="contact">
</div>
</footer>
footer {
color: #FFF8BF;
width: 100%;
padding:0 px;
background-color: #1C1C1C;
margin-top: 0px;
margin-bottom: 0px;
bottom: 0;
display: block;
/*border-radius: 0px 0px 10px 10px ;*/
}
.disclaimer {
float: left;
color: white;
max-width: 50%;
}
.contact {
color:white;
float:right;
text-align: left;
padding-right: 20px;
padding-top:0px;
padding-bottom:0px;
margin: 0px;
max-width: 50%;
}
Thanks for any help
Blockquote
Either you set a height of the footer:
CSS
footer {
min-height: 100px;
}
Or you could insert content into the footers' children and set the overflow:auto property for the footer
HTML
<footer role="contentinfo" id="contentinfo">
<div class="disclaimer">
Sample content
</div>
<div class="contact">
Sample content
</div>
</footer>
CSS
footer {
overflow: auto;
}
Here's an example Fiddle.
Background color property cannot be inherited
you can achieve what you want by adding this in your code before closing footer tag
<br style='clear:both'></footer>
Actually, the background color is shown in your child divs, but since you are using float in them, and didn't set a specific height on your footer, the height of your footer is 0 since floating elements don't expand the parent container. At least not for block elements. Unless you set a different display attribute like display: table.
so change your footer class to:
footer {
color: #FFF8BF;
width: 100%;
padding:0 px;
background-color: #1C1C1C;
margin-top: 0px;
margin-bottom: 0px;
bottom: 0;
display: table; // <---- change this to table instead of block
/*border-radius: 0px 0px 10px 10px ;*/
}
You do not have a height at the moment, as the content and disclaimer are empty
if you add overflow:auto; with footer it will work. Try giving a width and height. Also for testing you can always add a border: 1px solid red; or something
EDIT: For now instead of max-width use width or min-width as with max-width the max width will be 50% yes BUT it can be 0% as it is in this case
I have two divs in my application. How can I make my left div to fit all space till right div. Right one can be text or image with any width.
<div id="header" class="header">
<div class="logo">
<img src="/Content/images/my_logo.png" alt="" />
</div>
<div class="logoClient">
Test Client /*here can be text or image with ANY SIZE */
</div>
<div class="clear"></div>
</div>
In this example I've done with fixed widths(700px and 200px), but this is wrong, because right one's text is dynamic and I want to left green bar be dynamic too.
http://jsfiddle.net/C5GL6/1/
Another approach with table, table-cell css options... but again... can't make left green bar fit all space.
http://jsfiddle.net/sjfQj/
How can I achieve this?
Remove width and add float:left to both the divs
.header
{
width: 950px;
font-family:Helvetica, Arial, sans-serif;
display:table
}
.logo {
height: 55px;
padding: 10px 20px;
background: #004B35;
display:table-cell;
}
.logoClient
{
display:table-cell;
height: 55px;
line-height: 55px;
padding: 10px 0px;
margin:0px -10px 0px 0px;
font-size: 30px;
color: #004B35;
overflow:hidden;
font-weight: bold;
text-align: right;
background: red;
}
DEMO Updated
Remove the width size in div
Edited fiddle
http://jsfiddle.net/C5GL6/2/
.logo {
float: left;
height: 55px;
padding: 10px 20px;
background: #004B35;
}
I'm currently learning HTML. I'm trying to add 3 images inside a div, the images need to have the same amount of space between them. How to do this?
Example: https://docs.google.com/drawings/d/1WZdL0WVz-VndX2qP0Ig0S8fZnCGW2k37RHvWXLdgWz0/edit?usp=sharing
The code I currently have:
<style type="text/css">
.maindiv{
position: relative;
width:90%;
height:50%;
border-style:solid;
border-color:Red;
border-width:2px;
}
.imgbott{
height:auto;
width:auto;
max-width:200px;
max-height:200px;
float:left;
text-align: center;
}
</style>
<body>
<div class="maindiv">
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
</div>
</body>
Code runing: https://script.google.com/a/macros/itcld.com.br/s/AKfycbyjeAIFhKnAXzvXd8lS3S-ND4H0n63i-FBxr-i9Z1omeFmBYtA/exec
Thank you.
Change your css to:
.imgbott{
margin: 0px 10px;
height:auto;
width:auto;
max-width:200px;
max-height:200px;
float:left;
text-align: center;
}
The margin: 0px 10px means 0px margin to the top and bottom, and 10px margin to the left and right. Maybe one would expect 20px margin between the divs then, but there is a effect called "margin collapsing" which prevents that.
is this what you looking for
http://jsfiddle.net/Gfnjz/
.box {
display:table;
table-layout:fixed;
min-width:900px; /* some minimum width is a good idea. */
border-spacing:20px 0; /* note that spacing is also applied to right and left ends */
background-color:#666;
margin:0 auto;
}
.box div {
display:table-cell;
width:33%;
vertical-align:middle;
border:1px solid #bbb;
background-color:#eee;
padding:30px;
}
You can do something like this:
.divName{
width:300px;
display: inline-block;
margin: 0 20px 0 0;
float: left;
}
Then for the last box, apply a .lastBox class as well to force no margin, that way they are perfectly centered, assuming your parent container is centered that is:
.lastBox{
margin-right: 0;
}
The HTML:
<div class="divName">
<p>stuff</p>
</div>
<div class="divName">
<p>stuff</p>
</div>
<div class="divName lastBox">
<p>stuff</p>
</div>
if you only want the same space between the "imgbott" divs, set their margin instead of width attribute.
Your class will looks like
.imgbott{
margin: 0px 10px;
float: left;
text-align: center;
}
.imgbott a
{
display:block;
}
Then doesn't matter what is the width of the images inside, the space will always be 20px between the images.
In additional you can remove the margin-left of the first image using the first-child selector
.imgbott:first-child {
margin-left:0px;
}
You can achieve this result by using inline-blocks and text-align: justify, with adding some fake content before and after the divs to be aligned via pseudo-elements:
.maindiv{
width:90%;
border: 2px solid red;
text-align: justify; /* turns on justification 'magic' */
line-height: 0; /* removes extra space below divs because of extra line */
}
.maindiv:before {
font-size: .1px;
content: 'i'; /* adds nearly invisible fake content in the beginning of the line */
}
.maindiv:after {
font-size: .1px;
content: 'i i'; /* adds nearly invisible fake content in the of the line */
word-spacing: 99in; /* huge word-spacing assures that the 2nd 'i' wraps to the next line making 'justify' work */
background: #ccc;
}
.imgbott{
display: inline-block;
line-height: 1; /* restore the normal line height inside divs */
}
JSFiddle
Optionally, you can prohibit the wrapping of the divs if the container is narrower than the sum of their widths by adding white-space: nowrap to the container and normal to its :after: see edited JSFiddle
This solution may look a bit tricky, but it works for arbitrary number of blocks of arbitrary (possibly different) widths.
I'm trying to achieve a 1 column flexible / 1 column fixed layout. 'col-a' should be flexible, taking up 100% - 110px, 'col-b' should be fixed and aligned right.
I' trying to use negative margins but having little luck.
<div class="cont">
<div class="col-a">
Be flexible
</div>
<div class="col-b">
Be fixed
</div>
</div>
.cont {
background-color: #00f;
padding: 10px;
overflow:hidden;
}
.col-a {
background-color: #0ff;
padding-right: 110px;
margin-right: -110px;
float: left;
}
.col-b {
background-color: #ff0;
width: 110px;
float: left;
}
Can it be done using just this mark-up?
/*Answer found */
Here is the solution
.cont {
background-color: #00f;
overflow:hidden;
padding: 10px;
}
.col-a {
width: 100%;
background-color: #0ff;
margin-right: -110px;
float: left;
}
.col-b {
background-color: #ff0;
width: 110px;
float: right;
}
I wouldn't use a negative margin for this.
This is how I would set it up.
Set your column parent container to position relative.
Set your column A to have a padding-right of 110px (to make space for Column B)
Set your column B to be absolutely positioned to the top, right with a fixed width of 110px.
This will allow your Column A to expand 100% horizontally, while leaving space on the right for Column B.
Here's an example of what I outlined above: http://jsfiddle.net/NPn8d/
How about something like this, then.
<style type="text/css">
.cont{position:relative;}
.col-a{
border:1px solid #0000ff;
width:auto;
margin:0,110,0,0;
}
.col-b{
border:1px solid #ff0000;
width:110px;
float:right;
top:0;
position:absolute;
margin:0,0,0,-110
}
</style>
<div class="cont">
<div class="col-a">Be flexible</div>
<div class="col-b">Be fixed</div>
</div>
Like the example above. I've found some helpful script with the a small img which I do like however I don't know how to get the padding about the title so the line doesn't go straight through.
h3.line {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url(../images/line.jpg);
background-origin: padding-box;
background-position: center;
background-repeat: repeat-x;
background-size: auto auto;
display: block;
margin-bottom: 20px;
}
Which shows this.
Any suggestion or ideas?
You can have a 1px dot image which you can place as a background on the H3. Then have a span element in between which have a background on.
CSS:
h3 {
background: url(images/dot.png) left center repeat-x;
padding: 10px;
text-align: center;
}
h3 span { background: #fff; display: inline-block; padding: 10px 15px; }
HTML:
<h3><span>About</span></h3>
You can put a <span> for example in your <h3> and make it have the same background as your <h3> but without the line so the <span> effectively overlaps the <h3>.
You can say this to your span:
span {
display: block;
margin-left: auto;
margin-right: auto;
}
to make it center. You can add width and height to it too. line-height helps place your text to the middle vertically.
If you want to spare images than you can use text-decoration: line-through; to draw a line through your text.
Here is a solution using the CSS border property instead of an image.
the html:
<h2>
<span>This is a test</span>
<div></div>
</h2>
And here is the CSS:
h2 {
text-align:center;
background-color:#EFEFEF;
line-height:26px;
position:relative;
}
span {
background-color:#EFEFEF;
padding-right:5px;
padding-left:5px;
position:relative;
z-index:2;
}
h2 > div {
border-bottom:1px solid grey;
position:relative;
z-index:1;
top:-13px; /* half the line-height of the containing element */
}
A fiddle Demonstration
The <div> is placed inside the heading element, and positioned half-way up by settings its top position to one-half the height of the heading element, which is the headings line-height. z-index is used on the span and div so that the span gets a higher stack order than the div and obscures the (border) line where there is overlap.
I just stumbled upon another way of achieving this.
h1
{
position: relative;
padding: 0 26%;
}
h1:before,
h1:after
{
width: 25%;
background-color: rgba( 0, 0, 0, .5 );
content: '';
position: absolute;
top: 0;
bottom: 0;
}
Taken from: http://osvaldas.info/blog/background-independent-css-bars