I have 2 elements sharing the same class .cta. The CTA inside of .casino-box looks great, however the one inside of .header-box is accounting for the 165px of space taken up by .top-nav-bar and .nav-bar.
How can I get the top CTA to ignore the added spacing of those two nav bars, without having to split the css code for the CTAs?
Link to CodePen
.cta {
max-width: 600px;
margin: 0 auto;
text-align: center;
position: relative;
top: 50%;
margin-top: -80px;
}
.cta h1 {
color: #fff;
weight: 500;
text-shadow: 0px 0px 4px black;
}
.cta .button {
color: #fff;
border-color: #fff;
font-weight: bold;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
text-shadow: 0px 0px 4px black;
}
.cta .button:hover {
color: #90281F;
background: #fff;
text-shadow: none;
}
.cta hr {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
}
You have to set negative margin-top with the height of .top-nav-bar and .nav-bar plus your normal margin so the two div could be aligned in center. In this case it would probably be as following:
.header-box .cta {
margin-top: -205px;
}
Related
i want to add box-shadow only to the bottom of the div element using css.
below is the picture of what i am trying to do?
i want to get the line marked in red.
below is my code,
<div class="wrapper">
<div class="container"> //this needs box-shadow bottom
<span class="text">sometext</span>
<div class="description">some big description</div>
</div>
</div>
.wrapper {
position: absolute;
bottom: 32px;
width: 316px;
height: 225px;
background: white;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.29);
border-radius: 16px;
display: flex;
flex-direction: column;
opacity: 1;
}
.container {
height: 101px;
width: 316px;
padding-top: 16px;
padding-left: 16px;
border-radius: 16px 16px 0 0;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.29); //this adds boxshadow to all sides
}
.description {
height: 42px;
width: 289px;
margin-top: 8px;
color: black;
display: flex;
font-size: 12px;
font-weight: 400;
margin-bottom: 16px;
`;
As you see the container class adds boxshadow to all sides. i want to add only for the bottom how can i do it? could someone help me with this. thanks.
Try making your .container CSS like this:
.container {
height: 101px;
width: 316px;
padding-top: 16px;
padding-left: 16px;
border-radius: 16px 16px 0 0;
-webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
}
Let me know how it goes.
I've this code :
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
}
<span>
<p>25</p>
<p>08</p>
</span>
I want to make a perfect circle on my span. I try a border-radius: 50%; but it does not work.
Thanks for the help !
You can do this by giving the span a fixed width and height:
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
<span>
<p>25</p>
<p>08</p>
</span>
You need a predefined width and height on the span to be able to make it round.
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width:40px;
height:40px;
padding-left:10px;
box-sizing: border-box;
}
<span>
<p>25</p>
<p>08</p>
</span>
add line-height and width:
span {
background-color: #F00;
display: inline-block;
border-radius: 50%;
width: 50px;
line-height: 25px;
text-align: center;
}
Use this code.
HTML:
<span>
<p>25</p>
</span>
<span>
<p>08</p>
</span>
CSS:
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
border-radius: 50% and padding
document.addEventListener('DOMContentLoaded', () => {
let el = document.querySelector('#wrapper .container');
setTimeout(() => (el.style.marginTop = '20px'), 500);
}, false);
#wrapper {
display: flex;
justify-content: center;
}
#wrapper .container {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 16px;
font-family: sans-serif;
font-size: 15px;
font-weight: 500;
border-radius: 50%;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
transition: margin-top 650ms ease-out, box-shadow 120ms, transform 120ms;
will-change: margin-top, box-shadow, transform;
user-select: none;
cursor: pointer;
}
#wrapper .container:hover:not(:active) {
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.1),
0 2px 10px 0px rgba(0, 0, 0, 0.08),
0 0px 10px 0px rgba(0, 0, 0, 0.08);
}
#wrapper .container:active {
transform: scale(1.4) translateY(5px);
box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2),
0 18px 28px 2px rgba(0, 0,0 , 0.14),
0 7px 34px 6px rgba(0, 0, 0, 0.12);
}
<div id="wrapper">
<div class="container">
<span>10</span>
<span>3</span>
</div>
</div>
It looks like you incorrectly nested paragraph elements inside of span, which is against HTML5 spec, as span is being defined there as an element, which Content Model is described as Phrasing Content, and that:
Most elements that are categorized as Phrasing Content can only contain elements that are themselves categorized as phrasing content, not any flow content.
And because paragraph element doesn't belong to Phrasing Content list, you can use div instead of span for this purpose, only if you care to be semantically correct.
So coming back to your problem, it can be rewritten as so:
HTML:
<div>
<p>25</p>
<p>08</p>
</div>
CSS:
p {
margin: 0;
text-align:center;
}
div {
background-color: red;
display: inline-block;
border-radius: 50%;
width:50px;
height:50px;
line-height:25px;
}
Where general rule for achieving the circle by using border radius set to 50%, is that you need to make sure that content of such element has the same width and height. You can get that by fixing these values in your css.
Here is JsFiddle presenting that.
If I remove the float:left attribute from .action-button the transform animation doesn't work. Can you explain what is happening here?
Markup:
Are
Styles:
.action-button
{
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
.green
{
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.action-button:active
{
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
Codepen line 17: http://codepen.io/koriolis/pen/euAEg
This is because a elements are inline elements, in that they align the the parent element and do not clear either side.
When you add float: left, It changes the elements from being inline to block but also removes the clear: both and allows for elements to be aligned next to each other.
You can achieve the same effect as a float by using inline-block if you don't want the tags to float on the page.
.action-button {
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
display: inline-block;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
CodePen Example
tag a - default display: inline
float: left - display property is set to block
when you remove float: left - a again display: inline
use display: inline-block instead float: left
body {
padding: 50px;
}
.animate {
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.action-button {
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
display: inline-block;
border-radius: 8px;
font-family:'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
.blue {
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}
.red {
background-color: #E74C3C;
border-bottom: 5px solid #BD3E31;
text-shadow: 0px -2px #BD3E31;
}
.green {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.yellow {
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
}
.action-button:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
border-bottom: 1px solid;
}
Hello
How
Are
You?
fiddle
I'm wanting to align the text in my blog posts with the edges of my images. Right now the body of text is slightly skewed to the left. And also, what code do I need to enter so that the text is justified and where exactly do I enter it?
The site is: http://www.studywithstyleblog.com
And below is some of the code:
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: 0em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
width: 700px;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: 3px;
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
float: none;
width: 700px;
color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
}
Thanks for your help!
The problem is in your code on your page.
You have <div> tags around your paragraphs instead of <p> tags.
The beginning of your faux-paragraphs are:
<div class="separator" style="clear: both; text-align: left;">
If you can change that "text-align" to justify instead of left, you'll be golden.
If you can get away from the inline CSS, you'll be better for it in the long run too.
The following line will justify your text:
text-align: justify;
I was trying to move the text slightly to the right. But it is impossible to implement in your code. You must have to change your code.There is 1 way to do it
1) Change the class of your paragraphs/text divs to "separator2" instead of "separator" and modify your CSS file like below:
.separator2
{
margin-left:20px
}
Adjust the margin-left accordingly. I have just added dummy value.
So, I have this made.
HTML
<div id="navholder" class="bgd">
<nav id="nav">
<ul>
<li>Почетна</li>
<li>Делатност</li>
<li>Историјат</li>
<li>Службе</li>
<li>Колектив</li>
<li>Контакт</li>
</ul>
</nav>
</div>
#navholder {
height: 60px;
text-align: center;
margin: 0 auto;
}
#nav {
height: 30px;
margin-top: 10px;
background: #B8860B;
}
#nav ul li{
margin-top: 3px;
display: inline;
font-size: 120%;
opacity: 1.0;
}
#nav ul li a {
display: inline-block;
height: 120%;
padding: 5px;
-webkit-box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
-moz-box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
border: 1px solid white;
opacity: 1.0;
background: #DAA520;
}
#nav a:hover {
color: white;
background: black;
width: ?
}
I want the buttons once hovered over with a mouse to increase about 20%. The problem that I found is if I use the exact width like "width: 60px not every button is of the same size.
On the other hand if I use width: 120% I believe the page takes the width of the whole #navholder element which is defined by the class .bgd.
Any ideas on how can I make this happen?
Thanks.
You could use transform: scale()
jsFiddle example
#nav a:hover {
transform:scale(1.3,1.3);
-webkit-transform:scale(1.3,1.3);
-moz-transform:scale(1.3,1.3);
}
Just increase the padding on hover:
#nav a:hover {
color: white;
background: black;
padding: 5px 10px; /* 5px top/bottom, 10px left/right */
}
You may set width with em's and increase font-size.
Also, you may add border/padding on hover:
#nav a:hover {
border-right: solid 20px black;
/* or padding-right */
}