Can someone please tell me why this header wont go straight across? My goal is to have One call gets it all on the right side and the 800 phone number on the right. I placed them in there own div but the 800# is wrapping.
I've tried float, text-align and even span instead of div.
You can find the site here: http://jsfiddle.net/G78sd/
You have two block-level elements, which is why they're "wrapping". So one way to fix it would be to give each element a width and then float them.
.CompanyName {
color: #330000;
font-family: Tahoma, Geneva, sans-serif;
font-size: 28px;
font-weight: bolder;
/* text-shadow: 3px 3px 4px rgba(0, 0, 0, .9); */
font-variant:small-caps;
margin-top: 22px;
width: 450px;
float: left;
}
.HeaderPhoneNumber {
color: #330000;
font-family: Tahoma, Geneva, sans-serif;
font-size: 28px;
font-weight: bolder;
/* text-shadow: 3px 3px 4px rgba(0, 0, 0, .9); */
font-variant:small-caps;
width: 450px;
float: right;
text-align: right;
}
Related
I am trying to make a button like this:
.
A single button that is "divided" into two parts - a number, and a title.
Both parts have different background colors, font colors, and the text is centered in the corresponding background. When hovered, it increases in size.
That picture is the real result of the code below. However, there are a few problems I cannot seem to solve.
1) I would like to have it work like a single element, but so far, I was only able to achieve this by creating two different divs, for each section of the button. Is there a more elegant way to achieve the same result?
2) When I scale down the browser window, I get something like this:
.
I don't want it to get split like that. Also, I cannot seem to keep it centered in the page. If you notice, it is a bit to the right side...
How can I solve those problems?
Here's the code:
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
float: left;
height: 40px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
}
#btn42 {
width: 50%;
margin: auto;
}
#btn42:hover {
transform: scale(1.05);
}
#btnNumber {
text-align: center;
width: 40px;
background: #e2e1e1;
color: #696969;
}
#btnTitle {
width: 300px;
text-align: center;
background: white;
color: #085388;
}
<div id="btn42">
<div class="btn" id="btnNumber">42</div>
<div class="btn" id="btnTitle">Some Random Title</div>
</div>
Use one element and rely on pseudo element for the number:
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
.btn:hover {
transform: scale(1.05) translateX(20px);
}
.btn {
width: 300px;
margin: auto;
transform:translateX(20px); /*fix centring due to pseudo element*/
text-align: center;
background: white;
color: #085388;
height: 40px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
position:relative;
}
.btn::before {
content: attr(data-nb);
position:absolute;
top:0;
right:100%;
width: 40px;
background: #e2e1e1;
color: #696969;
box-shadow:
3px 0 #fff, /*fix shadow overlap*/
3px 3px rgba(0, 0, 0, 0.3);
}
<div class="btn" data-nb="42">Some Random Title</div>
I think using a <button>-tag with two <span>-tags inside would be more appropriate. To avoid the button wrapping to a new line use white-space: nowrap;. To center it on your page simply use text-align, like in my example, or one of the many other methods. Depends on the context of the parent element. If it is centered horizontally and vertically on the page I would rather use flexbox.
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
main {
text-align: center;
}
.btn {
border: none;
background: #fff;
line-height: 24px;
margin: 0;
padding: 0;
white-space: nowrap;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
transition: transform 200ms ease-in-out;
}
.btn span {
background: #fff;
display: inline-block;
margin: 0;
padding: 0.2em 0.5em 0.2em;
}
.btn span:first-of-type {
background-color: #ccc;
color: #696969;
}
.btn:hover {
transform: scale(1.03);
}
<main>
<button class="btn"><span>42</span> <span>Some Random Title</span></button>
</main>
This question already has an answer here:
target first letter of each word in css
(1 answer)
Closed 4 years ago.
I want first letter of all words to be little bigger than rest
<style>
h1 {
color: #1c1c1d;
font-family: 'Raleway',sans-serif;
font-size: 27px;
font-weight: normal;
margin: -2px 0px 0px;
text-align: center;
display:inline;
text-shadow: 1px 1px 2px #082b34;
}
h1::first-letter {
font-size: 125%;
}
</style>
<h1> WELCOME TO HOMEPAGE </h1>
But this only increasing the 'W' in WELCOME.
If possible with use of <span>
first-letter works only for block elements so remove display:inline; and you are good to go.
h1 {
color: #1c1c1d;
font-family: 'Raleway', sans-serif;
font-size: 27px;
font-weight: normal;
margin: -2px 0px 0px;
text-align: center;
display: inline-block;
text-shadow: 1px 1px 2px #082b34;
}
span {
display: inline-block;
}
span::first-letter {
font-size: 200%;
color: #eb632d;
}
<h1> <span>WELCOME</span> <span>TO</span> <span>HOMEPAGE</span> </h1>
Trying to change h2 color from 3f3e3c to FF1494 in CSS, but the change doesn't seem to be taking effect when I publish it.
h2 {
font-size: 36px ;
padding: .5em 0 .2em 0;
line-height: 1;
font-family: 'Kaushan Script', cursive;
font-weight: normal;
color: #FF1494;
text-shadow: 1px 1px 0px #fff;
}
What am I missing? Thanks
Also tried clearing the cache, no luck. Note - I'm customizing a theme in Weebly. Is there something else I should look for that might be preventing my change?
Maybe you've already changed the color on another h2, use !important after the color, it might help.
h2 {
font-size: 36px ;
padding: .5em 0 .2em 0;
line-height: 1;
font-family: 'Kaushan Script', cursive;
font-weight: normal;
color: #FF1494 !important;
text-shadow: 1px 1px 0px #fff;
}
I think you forgot to add a } at the end of the h2 . (or if it's just a typo on SO, try clearing your browser's cache)
h2 {
font-size: 36px ;
padding: .5em 0 .2em 0;
line-height: 1;
font-family: 'Kaushan Script', cursive;
font-weight: normal;
color: #FF1494;
text-shadow: 1px 1px 0px #fff;
} <- add this
I was toying with some made code on codepen, trying to get used to html/css since I am not really comfortable on the positioning. This must be pretty silly but I can't make it work.
HTML:
<div id="hh">
<h1>Wacom Hover Effect</h1>
</div>
<div id="cl">
Read More
Learn More
Read Article
Download
</div>
CSS:
*, :before, :after{ #include box-sizing('border-box'); }
body{ padding: 1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #eee; }
#hh{
position:absolute;
left:50%
}
h1{
position:relative;
left:-50%;
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
#cl{
clear:both;
}
.button,
[class*="button-"]{
position: relative;
display: inline-block;
overflow: hidden;
float:left;
margin: 0 1em 1em 0;
padding: 0 4em;
height: 3.5em;
font: 300 1em/3.5em 'Open Sans', sans-serif;
text:{
decoration: none;
shadow: 0 1px 3px rgba(black, .35);
}
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border: solid 1px #fff;
border-radius: 2px;
#include transition(.35s ease all);
}
}
There is some irrelevant code after that about hovering etc.
The result is this: http://codepen.io/roygbiv/full/FjLcA
So I wanted h1 at center and I found here the method of putting #hh absolute, left:50% and then h1 relative left:-50%. And it screwed up the positioning.
What I want is h1 on center top, then the 4 "a"s under it (not center, just not overlapping).
Putting position: absolute on an element makes all other elements ignore it. This can be solved by putting display: inline-block on the h1 and text-align: center on #hh:
Check new pen: http://codepen.io/anon/pen/kovaC
#hh {
text-align: center;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
display: inline-block;
}
inline-block makes the element's box adapt to the width of its text. I presume the desired look of the header is for the blue box to not be 100% width, which is otherwise the case with h1 and other block elements.
i have done the following modification in css and it is working as expected:
#hh{
text-align: center;
margin-left:auto;
margin-right:auto;
width:40%;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
I have three span with different font sizes, which are wrapped in a div with different floats.
I tried to align these spans correctly by adjusting the line-height, but it seems a little bit hacky to me, as the last floating span is overflowing the container with this method.
I tried to play with vertical-align without luck.
So what would be the clean way to align these, without hacking (if possible)?
Here is the jsFiddle, and here is the code :
HTML
<div class="comTitle">
<span class="comUserName">admin</span>
<span class="comUserRank"> - Animator</span>
<span class="timeCreated">The 13/03/13 at 16:49</span>
</div>
CSS
.comTitle {
font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
/*line-height:22px;*/
}
.comUserName {
font-weight: bold;
font-size: 16px;
color: #444;
font-variant: small-caps;
clear:left;
}
.comUserRank {
font-size: 12px;
font-style: italic;
color: grey;
clear:left;
}
.timeCreated {
font-style: italic;
font-size: 12px;
color: #444;
float: right;
/*vertical-align:baseline;*/
/*line-height:26px;*/
}
[Edit] I know how to deal with position property, and I can make this aligned right with :
.timeCreated {
...
float:right;
position: relative;
right: 0px;
bottom: -4px;
}
Or absolute positioning, but I'd like to know if there is a possibility to align the last span to the baseline (instead of the top) of the wrapper without changing the flow of the elements?
Add some padding-top space to the .timeCreated span - the difference of the font-size (4px)
.timeCreated {
font-style: italic;
font-size: 12px;
color: #444;
float: right;
padding-top: 4px;
}
And jsFiddle
I don't know how clean this is but it works, I just gave it some positioning. jsFiddle
.comTitle {
font-family:'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
/*line-height:22px;*/
position:relative;
}
.comUserName {
font-weight: bold;
font-size: 16px;
color: #444;
font-variant: small-caps;
clear:left;
}
.comUserRank {
font-size: 12px;
font-style: italic;
color: grey;
clear:left;
}
.timeCreated {
font-style: italic;
font-size: 12px;
color: #444;
position:absolute;
bottom:0px;
right:0px;
}