http://jsfiddle.net/8zkqu/1/
<div id="button" class="g">
<p>Discover me!</p>
</div> <!-- id button class g -->
and .css file looks like that
#button{
z-index: 1;
font-size: 20px;
border-radius: 5px;
width: 130px;
height: 40px;
position: absolute;
top:20px;
right: 20px;
font-weight: bold;
text-align: center;
}
.g {
background-color: rgb(94,179,74);
color: white;
border: 3px solid green;
position: absolute;
}
Its start to being annoying! How to center text inside buttoN?
I assume you're looking to vertical-align the element ?
Try with display:table-cell
HTML
<div id="button" class="g">
<span>Discover me!</span>
</div> <!-- id button class g -->
CSS
#button{
z-index: 1;
font-size: 20px;
border-radius: 5px;
width: 130px;
height: 40px;
display:table-cell;
vertical-align:middle;
font-weight: bold;
text-align: center;
}
.g {
background-color: rgb(94,179,74);
color: white;
border: 3px solid green;
}
JSFiddle.
Text-aling:center centers the element horinzontal and vertical-align:middle vertical.
This update to the CSS should do the trick:
.g p {
margin: 0;
line-height: 40px;
}
Working Example
Add this to your css:
#button p{
margin: 0px;
line-height: 40px;
}
Margins are added to <p> elements by default, the code above removes them. And line-height centers the text in the button, to achieve this in the future set the line-height to be equal to the button height.
Another option: Add this to your CSS:
#button p{
line-height:0px;
}
Related
I am trying to get this to happen.
what I want
So far, I don't know how to overlap one img-div with another text-div and keep white space on the top of the text-div. You will see. What I have right now is:
<div id="some">
<img src="photos/some.png">
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
With some CSS that doesn't make it very appealing: what it looks like
#some{
margin-top: 20px;
background-color: red;
}
#some img{
width: 30%;
float: left;
}
#box{
padding-top: 220px;
margin-right: 40px;
font-family: "Eusthalia";
text-align: right;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
I am wondering if my whole approach with divs is wrong. I was researching and I found that right:0; doesn't work and stuff like that. How do I get a border to overlap behind the image? How do I give it a width and a height but make it push to the right?
Do I have to make the main div width 100% and then give the img a width 30% and the colored filled in text box 70%? But how would I have the box behind the img?
Drearo, I think you're doing fine with div tags. You just may need a bit more of them to help things along.
I would suggest the divs be position: absolute with the image in one of those. The box of text needs it too. Aside from that, a little CSS would get you the positioning you want. See here:
<div id="some">
<div class="my_img">
<img src="photos/some.jpg" />
</div>
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
css:
#some{
margin-top: 20px;
height: 100vh;
width: 100vw;
border: 1px solid #000;
position: relative;
}
.my_img {
position: absolute;
top: 5em;
left: 5em;
z-index: 200;
}
.my_img img {
width: 200px;
}
#box{
position: absolute;
top: 10em;
left: 10em;
transition: translate( -50%, -50%);
font-family: "Eusthalia";
text-align: right;
background: red;
min-width: 60%;
padding-right: 2em;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
https://jsfiddle.net/5k94j73p/
I have a small problem. I am trying to change the width and height of a button but for some reason, it will not let me. The button automatically stays the same width and height as the contained text.
CSS
.flexcontainer {
display: flex;
align-items: center;
overflow: hidden;
}
img[width="500"] {
border: 3px solid #5F5F5F;
border-radius:3px;
float: left;
}
#leftRetail {
display: block;
height:354px;
width: 1308px;
float:right;
text-align: center;
vertical-align: middle;
line-height: 354px;
}
.button {
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
}
HTML
<div class="flexcontainer">
<div>
<img src="anyImage.jpg" width="500" height="350"/>
</div>
<div id="leftRetail">
Retail Menu
</div>
</div>
You need to change your .button to use display: block or inline-block:
.button {
display: block;
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
}
CHANGED ANSWER after copying the original code into a snippet:
I just realized that the whole thing is inside a flex container, which makes all child elements flex items automatically. (BTW: The float parameters have no effect in this case)
So, one method to add width and height to your .button is to give it some padding, as shown below:
.flexcontainer {
display: flex;
align-items: center;
overflow: hidden;
}
img[width="500"] {
border: 3px solid #5F5F5F;
border-radius: 3px;
}
#leftRetail {
height: 354px;
width: 1308px;
text-align: center;
vertical-align: middle;
line-height: 354px;
}
.button {
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration: none;
padding: 8px 12px;
}
<div class="flexcontainer">
<div>
<img src="anyImage.jpg" width="500" height="350" />
</div>
<div id="leftRetail">
Retail Menu
</div>
</div>
You cannot modify the width and height of inline elements, manually.
Add display: block; (or inline-block) to your .button block, and you can observe that the height and width changes are you define it.
Only block elements may have their width and height set specifically.
Your button should now look like:
.button {
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
display: block;
}
Just make it block-level element by adding display:bock to its style. Then you can apply whatever style you want!
I'm trying to center the text horizontally, but it doesn't work. It seems to be because of the display: table-cell
Would you know a work around? (note that I'm using bootstrap)
Thanks! > Codepen: http://codepen.io/goodux/pen/wgBCf
html:
<div class="feature">
<span class="glyphicon glyphicon-star feature-icon"></span>
<p class="feature-text text-center">
Gather user's feedback and engineer's requirements.
</p>
</div>
css:
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
}
span.feature-icon {
background-color: #FA6900;
border-radius: 3px;
color: #FFF;
font-size: 3em;
padding: .5em;
position: absolute;
top: 0;
}
p.feature-text {
overflow: hidden;
padding: 0 .5em 0 6.5em;
vertical-align: middle;
height: 6em;
display: table-cell;
}
.text-center {
text-align: center;
}
For display:table-cell to work correctly it needs to be inside a display:table element.
So, if you change the .feature rule to
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
display:table;
width:100%;
}
it will work as expected: http://codepen.io/gpetrioli/pen/EDtCq
of course you could avoid using display:table-cell if it is not really needed. (and in your example it looks like it is not..)
Try p {text-align: center;margin: auto }and why are you using display:table-cell ?
How do I make two (or more) floating divs appear like "big buttons" and let them float and be leveled? My problem is that the boxes are "partially leveled"... with one slightly lower than the other. I have tried to use float: left on the adminBox, but then they grow outside the container. Can anyone help me?
I have used this HTML code:
(http://jsfiddle.net/jf936/13/)
<div class="container">
<div class="adminBox">
<h2>Manage users</h2>
<div class="adminBoxLargeContent" data-bind="text: usersCount"></div>
<div class="adminBoxSmallContent">Registered users</div>
</div>
<div class="adminBox">
<h2>Manage templates</h2>
<div class="adminBoxLargeContent" data-bind="text: templateCount"></div>
</div>
and this style:
.container{
background-color: light-blue;
}
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
}
.adminBox h2{
color:white;
font-size:20px;
text-align:center;
}
.adminBoxLargeContent{
font-size: 70px;
text-align:center;
padding: 0;
margin: 0;
line-height: 1;
}
.adminBox .adminBoxSmallContent{
float: none;
text-align:center;
}
This has nothing to do with float, the issue is that you are using display: inline-block; and hence the element are aligned to the baseline, inorder to fix this, you need to use vertical-align: top;
Demo
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
vertical-align: top; /* Add this here */
}
Note: You don't have to use float: none; as nothing is floated here, so you can get rid of those unused properties.
Here you go.
WORKING DEMO
The CSS Code Change:
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
float:left;
}
Hope this helps.
Maybe this code will be helpful for you:
jsfiddle
.container{
background-color: light-blue;
overflow:hidden;
}
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: block;
margin: 5px;
float:left;
}
.adminBox h2{
color:white;
font-size:20px;
text-align:center;
}
.adminBoxLargeContent{
font-size: 70px;
text-align:center;
padding: 0;
margin: 0;
line-height: 1;
}
.adminBox .adminBoxSmallContent{
text-align:center;
}
<div class="container">
<div class="adminBox">
<h2>Manage users</h2>
<div class="adminBoxLargeContent" data-bind="text: usersCount"></div>
<div class="adminBoxSmallContent">Registered users</div>
</div>
<div class="adminBox">
<h2>Manage templates</h2>
<div class="adminBoxLargeContent" data-bind="text: templateCount"></div>
</div>
</div>
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 3 years ago.
I would like to have a divider on my page that looks like this:
What is the best way to do that?
html
<h3><span>My latest work</span></h3>
css
h3 {
position:relative;
text-align:center;}
h3 span {
display:inline-block;
padding:0 10px;
background:#fff;
}
h3:before {
content:"";
display:block;
position:absolute;
z-index:-1;
left:0;
right:0;
top:50%;
height:1px;
background:#ccc;
}
We can do this without images or masking lines like so:
HTML
<div class="rule">
<div class="line"><div></div></div>
<div class="words">words are cool</div>
<div class="line"><div></div></div>
</div>
CSS
.rule {
display: table;
}
.rule>div {
display: table-cell;
white-space:nowrap;
}
.line>div {
border-bottom: 1px solid silver;
height: 1px;
}
.words {
padding: 0 5px;
}
.line {
width: 50%;
vertical-align: middle;
}
Demo: http://jsfiddle.net/5tqE5/1/
This uses attr() which is not supported in older browsers. It could be replaced with an extra element.
<div class="lines" data-text="Some Text Goes Here"></div>
.lines {
position: relative;
font-size: 20px;
font-family: sans-serif;
margin: 0 auto;
border-top: 1px solid silver;
margin-top: 20px;
}
.lines:before{
content: attr(data-text);
background-color: #fff;
position: absolute;
text-align: center;
left: 50%;
width: 220px;
margin-left: -110px;
padding: 10px;
top: -20px;
}
Dunno about the 'best' - you've given no terms by which to assess that. Smallest, fastest, most compatible, etc, etc.
Anyhoo, I just took a 1-pixel wide slice of your image and saved it. I then use it as the background-image of the div.
CSS:
#myDiv
{
background: url(horizline1x41px.png) repeat;
text-align: center;
line-height: 41px;
}
#myDiv span
{
padding-left: 16px;
padding-right: 16px;
background: white;
font-weight: bold;
font-size: 1.5em;
}
HTML:
<div id='myDiv'><span>OUR LATEST WORK</span></div>
Demo: http://jsfiddle.net/8zve4/
I don't like the extra markup, but this should work.
CSS:
.hline {
border: 1px solid #EEE;
color: #666;
font-family: helvetica;
font-weight: bold;
font-variant: small-caps;
letter-spacing: .1em;
line-height: 0px;
text-align: center;
text-transform: uppercase;
}
.hline > span {
background-color: #FFF;
padding: 0px 1em;
}
HTML:
<div class="hline"><span>Our latest work</span></div>