This is what I have:
However, I want the shadow below the text to not appear on top of the border. I can get this effect when my 'position' of the heading is set to anything other than "absolute" or "fixed", but I lose flexiblity in animation... which is what I want to do later.
here is my code:
.feature {
height: 300px;
width: 100%;
background-image: url("http://conceptartworld.com/wp-content/uploads/2013/06/The_Last_of_Us_Concept_Art_Crows_JS-01.jpg");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
border-bottom: solid 5px #FFFFFF;
box-shadow: 0 2px 10px #333;
}
.feature h1 {
position: fixed;
font-size: 120px;
vertical-align: text-bottom;
color: #FFFFFF;
margin-left: 50px;
font-family: "oswald", sans-serif;
font-weight: 400;
text-transform: uppercase;
text-shadow: 4px 4px 5px rgba(0,0,0,0.5);
transition: margin 0.5s;
}
#moral {
margin-top: 160px;
}
#studios {
margin-top: 160px;
margin-left: 400px;
}
also... my vertical align text-bottom isn't working...that is why I use the top margin.. can anyone tell me why?
Arman
I think you can't make this effect without making the border line a independent element.
Implement it as an <hr/> and set it z-index greater than the text.
Related
Apparently the text is positioned to the right and I do not know why. Earlier the header was working but now it does not.
.news-box {
background: black;
width: 500px;
height: 450px;
top: 50%;
left: 20%;
transform: translate(20%, 50%);
border-radius: 20px;
box-shadow: 2px 5px 8px 10px rgb(0,0,0,0.5);
}
.news-box > h2 {
color: white;
text-align: center;
padding-top: 10px;
text-transform: uppercase;
-webkit-text-stroke: 0.5px rgb(0,0,0,1);
text-shadow: 2px 2px 4px rgb(0,0,0,0.8);
}
Since i don't have the full code (including html), i can only suggest to put the text inside a <span>text</span> and use styling of float:left (for example).
Another option would be to put it inside a <span> or a <div> and set "text-align:left/right" (whatever works for you)
I have been experiencing trouble centering a number within a circular shaped div. The coding I have used has worked for all other elements but for some reason, one number just won't center like the rest.
I have tried to narrow the problem down and the only thing I have found is that the font size seems to be the problem. In smaller font sizes, the number centers fine, larger sizes, the number sits to the left.
Is this a bug or something someone else has experienced?
HTML:
<div class="circle">
<div>4.</div>
</div>
CSS:
#how-can-we-help-section-two .info-box-four .circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
margin: 0 auto;
margin-bottom:-50px;
position:relative;
border: 7px solid #ebeced;
}
#how-can-we-help-section-two .info-box-four .circle div{
font-size: 35px;
font-weight:bold;
color: #fff;
line-height: 90px;
}
Problem is padding: 80px 40px 40px 40px; of .text-box.
You can solve your problem by position:absolute;.
#how-can-we-help-section-two .info-box-four .circle div {
font-size: 35px;
font-weight: bold;
color: #fff;
line-height: 90px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
Its because of your surrounding wrappers behaviour.
You could use an absolute positioned div or you could replace line-height: 90px with width: 100%; height: 100%; display: inline-block; on your text div inside .circle
I have this CSS class:
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
I want to keep the same border width even when the number changes, from 10 to 9.
Right now, the border expands when the number changes.
Here's a JFiddle of what I mean.
I've already tried changing the padding attribute but I can't make it work.
Try this. Add display:inline-block and then line-height to vertically align the numbers. By setting this the box will expand. adjust the height & width as per your need. If so, do not forget to adjust the line-height relative to height of the box.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
line-height:36px; /*vertcally center the numbers*/
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
display:inline-block; /* Added */
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
You can just explicitly set the width. I suggest a unit of mesure that's relative to the font size (namely ems)
Edit: it seems all you were missing was display:inline-block. You can't set the width of an inline element. Adding it will probably get you most of the way there.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
/*width: 36px;
height: 36px;*/
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
display: inline-block;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
Check out these properties:
line-height:20px; /*this will center your numbers inside the border*/
width: 20px; /*set the same as line-height and height in order to give a square shaped border*/
height: 20px; /*set the same as line-height and width in order to give a square shaped border*/
display: inline-block;
line-height, width and height will shape your box. While the new display property will help to align the elements in a "one after the other" fashion. :)
I have a basic div with an icon and some text. If I don't try and change the size of the icon it lines up perfect.
But I want the icon to be bigger but still sit centred in the text. The problem is the icon doesn't sit centred in the div, it seems to move up so the text ends up lined to the bottom of the icon and the icon sits higher in the div. I expect the text to be centred in the icon as the icon would be centred in the div....
You can see it on this fiddle;
http://jsfiddle.net/8mjN7/1/
Pulling in
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
CSS
div {
border: 1px solid red;
line-height: 40px;
padding: 10px 0px;
font-size: 14px;
}
i {
margin-left: 10px;
font-size: 30px;
}
HTML
<div>
<i class="fa fa-globe"></i>
Foo bar
</div>
The simplest solution is to use the vertical-align property as follows:
i {
margin-left: 10px;
font-size: 30px;
height: 30px;
vertical-align: middle;
}
see demo at: http://jsfiddle.net/audetwebdesign/9ATq8/
Note: It is necessary to specify height: 30px for the i element and line-height: 40px of the parent container, otherwise, any default values may not work as expected.
CSS table-cell also works but the added complexity is not needed in this case.
I use this to make sure the icon is in the middle. The padding & line-height i think are the two most important.
background: rgba(143, 211, 157, 1);
border-radius: 100%;
color: #FFFFFF;
display: inline-block;
font-size: 55px;
height: 45px;
width: 45px;
padding: 40px 45px 40px 35px;
line-height: 45px !important;
transition: .5s;
Did you try to display the div like a table like this?
div {
display:table;
border: 1px solid red;
line-height: 40px;
font-size: 14px;
}
i {
display:table-cell;
text-align:center;
vertical-align:middle;
font-size: 30px;
}
Do you want something like this Link
CSS:
div {
border: 1px solid red;
line-height: 40px;
padding: 10px 0px;
font-size: 14px;
display:table;
vertical-align:middle;
width:100%;
}
i {
margin-left: 10px;
font-size: 30px;
height: 30px;
display:table-cell;
vertical-align:middle;
}
I am trying to create a <kbd> tag for myself. I was trying with this image like below,
CSS:
kbd {
font-family: Courier;
padding-top:8px;
padding-bottom:8px;
padding-right:15px;
padding-left:10px;
background: url('kbd.png');
background-repeat:no-repeat;
}
HTML:
<p>Open Terminal <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>T</kbd> </p>
But images are not showing completely unless the text is large enough to cover the image. see the screen shot below.
Also I could not able to bring the text at center, I tried align but could not succeeded.
Any help including any better way to have <kbd> tag will be appreciated.
It's very worth noting that this could be done pretty much entirely without the need of an image. It would be more flexible without it; a long <kbd> text would break if it were an image, but wouldn't if it was done entirely in CSS.
So I propose:
http://jsfiddle.net/TLV4a/1/
kbd {
display: inline-block;
min-width: 45px;
text-align: center;
font-family: Courier;
margin: 0 5px;
padding: 0 5px;
background-color: #f7f7f7;
border-width: 1px 1px 3px;
border-style: solid;
border-color: #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 4px 1px #fff;
box-shadow: inset 0 0 4px 1px #fff;
line-height: 1.75;
}
If you have even padding, instead of different left vs. right padding, as well as utilise a min-width along with text-align: center;, you can get it to display nicely.
http://jsfiddle.net/TLV4a/
kbd {
display: inline-block;
min-width: 50px;
text-align: center;
font-family: Courier;
padding: 6px 5px 8px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png') no-repeat 50% 0;
}
Have a look at this jsFiddle
kbd {
font-family: Courier;
padding-top:6px;
padding-bottom:6px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png');
display: inline-block;
width: 54px;
text-align: center;
background-repeat:no-repeat;
}
You can use this code to get your desire resutl:
kbd {
background: url("kbd.png") no-repeat;
display: inline-block;
font-family: Courier;
min-height: 31px;
min-width: 54px;
font-size: 0.75em;
padding: 6px 0 0;
text-align: center;
}
/*use font size to adjust with the key image and use padding 0px for the left and right after that use text-align to obtain your best result .I have attached an image look it*/
Adding background-size may be your best solution.
background-size:100% 100%;
You can use text-align:center for align your text and on the background image you can use a z-index Property.
have a look here for z-index examples:
http://www.w3schools.com/cssref/pr_pos_z-index.asp