The text hangs outside of the DIV container. Perhaps I have the wrong elements in my CSS. On my actual website it hangs below but when I check snippet here it doesn't hang. Here is the code.
screenshot of problem
.bodybox {
height:65px;
width:250px;
background-color:#000000;
margin: auto;
-webkit-box-shadow: 0px 8px 15px 0 #000000;
-moz-box-shadow: 0px 8px 15px 0 #000000;
box-shadow: 0px 8px 15px 0 #000000;
border: solid 2px #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
left: -350px;
top: 27px;
font-family: 'Jura', serif;
font-size: 45px;
color:#ffffff;
}
<div class="bodybox">
Print
</div>
.bodybox {
height:65px;
width:250px;
background-color:#000000;
margin: auto;
-webkit-box-shadow: 0px 8px 15px 0 #000000;
-moz-box-shadow: 0px 8px 15px 0 #000000;
box-shadow: 0px 8px 15px 0 #000000;
border: solid 2px #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
//left: -350px;
font-family: 'Jura', serif;
font-size: 45px;
color:#ffffff;
text-align:center;
cursor:pointer;
display:flex;
}
.bodybox span{
margin : auto;
}
<div class="bodybox">
<span>Print</span>
</div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
Related
I would like to get the same time (0.4s) after hover off from button (now is 0s).
If I hover off from button there is no transition.
After hover it took 0s. I would like to have 0.4 like it is in hover state.
.btn_akoo {
text-transform: uppercase;
background-color:#e92741;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
border:3px solid #f5f487;
display:inline-block;
cursor:pointer;
color:#2d2f3c;
font-family:Verdana;
font-size:17px;
font-weight:bold;
padding:30px 18px;
text-decoration:none;
position: relative;
margin-left: 38%;
margin-top: 18%;
}
.btn_akoo:hover {
background: #2d2f3c;
color: #e92741;
padding-left: 30px;
padding-right: 30px;
-webkit-box-shadow:0px 0px 40px 1px #f5f487 ;
-moz-box-shadow:0px 0px 40px 1px #f5f487 ;
box-shadow:0px 0px 40px 1px #f5f487 ;
transition: 0.4s ;
}
<div class="wrapper_akoo">
<a class="btn_akoo" href="#" >Ako sa zaregistrovať?</a>
</div>
Set the transition in the base class instead of the :hover state:
.btn_akoo {
text-transform: uppercase;
background-color: #e92741;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #f5f487;
display: inline-block;
cursor: pointer;
color: #2d2f3c;
font-family: Verdana;
font-size: 17px;
font-weight: bold;
padding: 30px 18px;
text-decoration: none;
position: relative;
margin-left: 38%;
margin-top: 18%;
transition: 0.4s;
}
.btn_akoo:hover {
background: #2d2f3c;
color: #e92741;
padding-left: 30px;
padding-right: 30px;
-webkit-box-shadow: 0px 0px 40px 1px #f5f487;
-moz-box-shadow: 0px 0px 40px 1px #f5f487;
box-shadow: 0px 0px 40px 1px #f5f487;
}
<div class="wrapper_akoo">
<a class="btn_akoo" href="#">Ako sa zaregistrovať?</a>
</div>
I have call to action bar, inside it there is a h1 tag for slogan and a p tag with a link for actual call to action. I can not marging them properly h1 tag ride on p tag.
SCREENSHOT
HTML
<div id="call-to-act">
<h1>We are Andia, a super cool design agency.We design beautiful websites, logos and prints. Your project is safe with us.</h1>
<p>Contact Us</p>
</div> <!-- end of call-to-action -->
CSS:
div#call-to-act {
background: #fff;
width: 100%;
height: 100px;
position: relative;
margin: 50px auto;
-webkit-box-shadow: inset 10px 10px 72px -28px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 10px 72px -28px rgba(0,0,0,0.75);
box-shadow: inset 10px 10px 72px -28px rgba(0,0,0,0.75);
width: 80%;
}
div#call-to-act p {
height: 100%;
}
div#call-to-act a.call2act {
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:44px;
line-height:44px;
width:120px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
position: absolute;
right: 20px;
top: 20px;
}
You can use position: absolute; right: 0; top: 50%; to put the button on the right side 50% from the top, then transform: translateY(-50%) to move the button up half of it's own width to center it vertically. Then apply padding-right: 130px to the parent to make room for the 120px wide button.
* {
margin: 0;
padding: 0;
}
div#call-to-act {
background: #fff;
width: 100%;
min-height: 46px;
position: relative;
margin: 50px auto;
-webkit-box-shadow: inset 10px 10px 72px -28px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 10px 10px 72px -28px rgba(0, 0, 0, 0.75);
box-shadow: inset 10px 10px 72px -28px rgba(0, 0, 0, 0.75);
width: 80%;
box-sizing: border-box;
padding-right: 130px;
}
div#call-to-act p {}
div#call-to-act a.call2act {
text-indent: 0;
border: 1px solid #dcdcdc;
display: inline-block;
color: #777777;
font-family: arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 44px;
line-height: 44px;
width: 120px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ffffff;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<div id="call-to-act">
<h1>We are Andia, a super cool design agency.We design beautiful websites, logos and prints. Your project is safe with us.</h1>
<p>Contact Us</p>
</div>
<!-- end of call-to-action -->
Have a look at this fiddle
http://jsfiddle.net/ArvindSadasivam/v8dtj2ke/1/
divs:
<button class="typeBtn" id="">
<img class="iconTick" src="images/buttons/iconTick.png" alt="tickIcon" />Flatfront</button>
<button class="typeBtn" id="">Flatfront TWICE
<img class="iconTick" src="images/buttons/iconTick.png" alt="tickIcon" />
</button>
CSS:
.typeDiv {
position : relative;
margin : 20px 0 0 20px;
font-family : OpenSans-Regular;
}
.typeBtn {
position: relative;
width: 110px;
height: 40px;
box-shadow: 0 1px 3px #424242;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #D7D7D7;
color: #000000;
text-align: right;
font-family: OpenSans-Regular;
font-size: 0.7em;
padding: 0px 40px;
margin: 15px 10px 0px 0px;
}
.iconTick {
position : absolute;
width : 25px;
left : 5%;
top : 20%;
}
I want the Flatfront twice to be on the same position vertically.
Basically align them properly.
How do I do it?
Add
vertical-align: top;
Into your .typeBtn Class
Your Class should looks like this
.typeBtn {
position: relative;
width: 110px;
height: 40px;
box-shadow: 0 1px 3px #424242;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #D7D7D7;
color: #000000;
text-align: right;
font-family: OpenSans-Regular;
font-size: 0.7em;
padding: 0px 40px;
margin: 15px 10px 0px 0px;
vertical-align: top; /*Changed this */
}
Change the following styles in .typeBtn like
padding:0px;
text-align:center;
I’m trying to fit a button with a textfield so I’ve been trying different dimensions (height’s button) until they conceded. The problem is: on Chrome looks great but in Firefox they don’t fit as I expected. How can I fix it?
Thank you for your help!
Chrome:
http://imageshack.us/a/img401/5964/mlvq.png
Firefox:
http://imageshack.us/a/img707/2672/u1c.png
Code:
#textfield
width: 120px;
border: 1px solid #aaa;
border-radius: 8px 0 0 8px;
padding-top: 5px;
font: 22px Arial, Helvetica;
padding-bottom: 5px;
padding-left: 5px;
box-shadow: 0px 0px 3px #E7E7E7, 0 10px 15px #E7E7E7 inset;
outline: none;
}
#button {
border-radius: 0 8px 8px 0;
border: 1px solid #aaa;
padding-top: 5px;
margin-left: -5px;
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
box-shadow:inset 0px 1px 0px 0px #caefab;
background-color:#77d42a;
display:inline-block;
color:#306108;
font-family:arial;
font-size: 20px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
padding-top: 7px;
text-shadow:0px 1px 0px #aade7c;
}
Shouldn't you specify the height for both of them ?
height: XXpx;
I would like my ".tag" div to only be as wide as the text inside it. But, for some reason the paragraph element spans the whole width of the parent element. How can I stop this from happening? So that the ".tag" divs are only as wide as the text inside them?
JSFIDDLE: http://jsfiddle.net/X77e7/
My HTML:
<div class="tag">
<p> Hiking </p>
</div>
My CSS:
.tag {
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
.tag p {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #444;
}
Add display:inline-block
It is stretching now because div is by default block element which occupies the whole space.
.tag {
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4; display:inline-block
}
DEMO
Both div and p are block elements.
So you should consider setting the display at inline.
.tag {
display: inline;
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
.tag p {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #444;
}
http://jsfiddle.net/X77e7/2/
just float your .tag and your problem is solved
.tag {
float:left;
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
demo