HTML:
<div class="div1">
<h2>Set RSVP & Check in</h2>
<p>
Set RSVP to remind all events you plan to go.
</p>
</div>
CSS:
.div1 {
float: left;
margin: 0 20px 0 0;
padding: 0;
width: 300px;
height: 156px;
}
.div1 h2 {
color: #fff;
font-size: 24px;
font-weight:bold;
box-shadow: 1px 1px 0 black;
}
And border appears like "table border" not the border on text:
http://screencast.com/t/OrFfBL9MK
I think you are confusing box-shadow with text-shadow.
Try this:
.div1 h2 {
color: #fff;
font-size: 24px;
font-weight:bold;
text-shadow: #000000 1px 1px 0px;
}
Related
I have my timer that has date/hour/minute/seconds and the only one that doesn't align is the seconds. I tried many things such as different ways to align. So how can I align all the timer's items.
Can someone help me?
HTML
<div class="jumbotron timer">
<h2>Time until the tracker is activated</h2>
<div class="timertxtc">
<div class="timertxt" id="daysBox"></div>
<h4>Days</h4>
</div>
<h3 class="space">1</h3>
<div class="timertxtc">
<div class="timertxt" id="hoursBox"></div>
<h4>Hours</h4>
</div>
<h3 class="space">1</h3>
<div class="timertxtc">
<div class="timertxt" id="minsBox"></div>
<h4>Minutes</h4>
</div>
<h3 class="space">1</h3>
<div class="timertxtc">
<div class="timertxt" id="secsBox"></div>
<h4>Seconds</h4>
</div>
<script>cdtd();</script>
</div>
CSS
body {
margin: 0;
padding: 0;
background-image: repeating-linear-gradient(
90deg,
#FFFFFF,
#FFFFFF 18px,
#CA1D20 0px,
#CA1D20 28px
);
}
h1{
font-size: 64px;
text-align: center;
color: #3498db;
text-shadow: 3px 3px 0px #000;
}
h2{
font-size: 32px;
text-align: center;
color: #3498db;
text-shadow: 3px 3px 0px #000;
margin: auto;
}
.jumbotron.timer{
width: 48%;
height: 360px;
margin: auto;
background-color: #669900;
}
.timertxt{
color: #3498db;
text-shadow: 3px 3px 0px #000;
font-size: 64px;
padding-left: 12px;
padding-right: 12px;
border: 2px solid #2980b9 ;
border-radius: 5px;
background-color: #2980b9;
text-align: center;
}
.space{
font-size: 12px;
display: inline-block;
float: left;
visibility: hidden;
}
.timertxtc{
width: 25%;
height: 120px;
float: left;
display: inline-block;
margin: auto;
}
h4{
font-size: 32px;
color: #3498db;
text-shadow: 3px 3px 0px #000;
display: inline-block;
text-align: center;
}
The character in your <h3 class="space">1</h3> elements was causing the content of the container div to exceed 100% pushing 'seconds' on to the next line.
See fixes in the following fiddle:
https://jsfiddle.net/oLncm9d2/4/
Instead of using an element for 'spacing' padding-right / padding-left in combination with box-sizing: border-box; can achieve the spacing you want, without disrupting width calculations. (The solution demonstrates this and has removed the <h3 class="space">1</h3> elements.)
Note: I increased the container width to prevent excessive overlap for demonstration.
I want to align the button and the text in the same line.
<div class="oferts">
<div class="container" style="line-height: 300px; text-align: center;">
<h1>Bucura-te de ofertele noastre alaturi de familia ta <button class="oferts-button">Vezi toate beneficiile terapiilor</button>
</div>
</div>
button {
background: transparent;
color: #666;
border: 1px solid #d4d4d4;
padding: 10px 20px;
margin: 0 10px 0 10px;
transition: border .3s ease-in;
}
button:hover {
border: 1px solid #909090;
padding: 10px 20px 10px 20px;
}
button a {
font-family: 'Raleway', sans-serif;
color: #666;
font-size: 14px;
}
.oferts-button a {
font-family: 'Raleway', sans-serif;
color: #fff;
}
.oferts-button:hover {
border: 1px solid #fff;
}
.oferts {
width: 100%;
display: table;
height: 300px;
background:url(../img/back.jpg) center no-repeat;
}
You can use the vertical-align css property on both elements:
container {
line-height: 300px;
text-align: center;
}
container > h1,
container > h1 a {
vertical-align: middle;
}
DEMO
HTML Removed h1 tags, as was not ending and didn't even found in css
NOTE: Used font-size - 32px because h1 tag = 32px
<div class="oferts">
<div class="container">
Bucura-te de ofertele noastre alaturi de familia ta
<button class="oferts-button">
Vezi toate beneficiile terapiilor
</button>
</div>
</div>
CSS Add this class to your CSS
.container
{
line-height: 300px;
text-align: center;
font-weight:bold;
font-size:32px;
}
I´m trying to do some buttons with image and text, and I already did this work.
But now I´m studying a diferente hypothesis, If I have a text bigger I´m trying to center the text in the button but I´m not having sucess put this right. I´m not having succeess putting my very big is not good align-center just below the 1st text.
Have you ever had a case like this? How we can solve this?
I have this Html for two buttons:
<button class='btn'>
<img class="big_btn" src="icon1.png" width="40" height="40"/>
Big button so big <span> very big is not good</span>
</button>
<button class='btn'>
<img src="icon1.png" width="40" height="40">
2button big
</button>
And I have this css file:
.btn {
position: relative;
width: 180px;
height: 60px;
margin-top:7%;
padding: 0 10px 0 10px;
line-height: 37px;
text-align: left;
text-indent: 10px;
font-family: 'bariol_regularregular';
font-size: 15px;
color: #333;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #f1f1f1; /* button background */
border: 0;
border-bottom: 2px solid #999; /* newsletter button shadow */
border-radius: 14px;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #999;
box-shadow: inset 0 -2px #999;
}
.btn:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn img { float: left;}
.btn .big { margin-top:10px;}
.btn:hover { background-color: #f7f7f7;}
Here's the Fiddle: http://jsfiddle.net/3F9pu/
My image updated:
Your problem is your line-height attribute. If you set that to be 37px, each new line of text will be separated by 37px. Remove `line-height:37px and the text will wrap around the image.
line-height: 37px
I also removed your text-indent and replaced it with a margin on your floated image to make the text all align properly.
.btn img{
float:left;
margin-right: 10px;
}
text-indent: 10px
JSFiddle
Use a CSS background image.
Have a fiddle - Fiddle Link!
HTML
<button class='btn'>Big button so big very big is not good</button>
<button class='btn'>2button big</button>
CSS
.btn {
background: url("http://lorempixel.com/output/cats-q-c-40-40-3.jpg") #CCC 10px no-repeat;
border: none;
padding: 10px 10px 10px 60px;
width: 200px;
text-align: left;
vertical-align: top;
min-height: 60px;
cursor: pointer;
}
.btn:hover {
background-color: #F00;
}
I'd like to initially hide text in my body, but show it once an element in a child div is hovered over. So In this case, I want them both to initially start out as display: none but then when I hover over the letter "H" I want "Text A" to show. When I hover over letter "E" I want "Text B" to show. I don't want to put my #content elements inside of my #word elements. I want to keep them as separate divs.
Any Ideas?
(See Fiddle below)
HTML:
<div id="word">
<h1><a id="h" class= "letter" href=#>H</a></h1>
<h1><a id="e" class= "letter" href=#>E</a></h1>
<h1><a id="l" class= "letter" href=#>L</a></h1>
<h1><a id="l2"class= "letter" href=#>L</a></h1>
<h1><a id="o" class= "letter" href=#>O</a></h1>
</div>
<div id="content">
<div id="textA">Text A</div>
<div id="textB">Text B</div>
</div>
CSS:
body {
font-family: 'Chango', cursive;
font-size: 115px;
color: white;
text-shadow: 5px 5px 5px #000;
width: 100%;
height: 100%;
margin: 0px;
background: black;
}
#name {
position:absolute;
height:100%;
width: 70%;
display: table;
padding: 0 15% 0 15%;
background: black;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
height: 1em;
}
a {
/*border: 1px solid black;*/
display: inline-block;
line-height: 89%;
overflow: hidden;
}
a:visited, a:active {
text-decoration: none;
color: white;
/*color: #E8E8E8;*/
}
a:link {
text-decoration: none;
color: white;
text-shadow: 3px -3px 0px black, -2px 2px 5px #0056b2;
}
a:hover {
text-shadow: 5px 5px 5px #000;
color: white;
}
Fiddle: http://jsfiddle.net/ADfhj/1/
PS- I've tried the following CSS to no avail:
#textA {
display: none;
}
#word:hover #textA {
display: block;
}
There is no way achieving it using css only. However you can try simple javascript/jquery.
$('.letter').mouseover(function(){
var cont = $(this).attr('id');
$('#content>div').hide();
$('#text_'+cont).fadeIn();
});
Check the Fiddle
Currently I'm trying to make a flowchart, this is the code I've got so far:
#flowchart {
width: 580px;
text-align: center;
font-family: sans-serif;
font-size: .8em;
margin: auto;
}
#flowchart a {
display: block;
color: white;
text-decoration: none;
background-color: #2F41B1;
padding: 2em 1em;
}
#flowchart a:hover {
color: #111;
background-color: #EFA707;
}
.no1 {
width: 390px;
border: 1px solid #444;
margin: 0 auto;
}
.line1 {
width: 1px;
height: 20px;
background-color: #000;
margin: 0 auto;
}
.clear {
clear:both;
}
<div id="flowchart">
<div class="no1"><a href="http://example.com/page1">Step 1:
Blah blah blah, do this.</a></div>
<div class="line1"></div>
<div class="no1"><a href="http://example.com/page2">Step 2:
Then this and that.</a></div>
<div class="line1"></div>
<div class="no1"><a href="example.com/page3">Step 3:
Now finally go here and there.</a></div>
</div>
How can I make only the headings ("step x") for each section be bold and larger? (and not the content after, "blah blah then this etc")
Also, how can I make rounded corners instead of sharp edges?
i made a quick fiddle of what you wand dude. http://jsfiddle.net/jalbertbowdenii/NY973/1/
To make the Step x styled differently, you need to wrap it in a <span class="flowchartHeader">...</span> tag, then add this to your CSS:
.flowchartHeader {
font-size: 1.2em;
font-weight: bold;
}
As for rounding, add border-radius: 6px to .no1.
Use this to generate the round corners css for you border-radius.com
.myClass{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.no1
{
width: 390px;
border: 1px solid #444;
margin: 0 auto;
border-radius:5px; //add this
}