i made two buttons, with border: 2px solid #color, after I hover on them, the border vanishes and the button goes 2px down. I just made :hover margin2 px more than the normal one. Everything is okay, but the only problem is that when I hover one of my buttons, both goes these 2px down. What's wrong?
Cheers.
This is my html code:
<div class="slide-wrapper">
<h2>We are <span>cool</span> kids</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, nulla sit amet rutrum finibus, ligula orci.</p>
Videos
Sign for a newsletter
</div>
And this is my css:
.btn {
padding: 16px 38px;
margin-right: 30px;
border-radius: 5px;
display: inline-block;*/
}
.btn:last-child {
margin-right: 0;
}
.btn-show {
background: #4183d7;
box-shadow: 0 2px #446cb3;
}
.btn-sign {
background-color: #87d37c;
box-shadow: 0 2px #7ebc74;
}
.btn-show:hover,
.btn-sign:hover,
.btn-newsletter:hover {
margin-top: 2px;
box-shadow: none;
}
The issue is display: inline-block defaults to the baseline. So when you push one button down 2px's the other one is going by default (since there is 2 more pixels of space). Set the vertical alignment to default to top:
.btn {
padding: 16px 38px;
margin-right: 30px;
border-radius: 5px;
display: inline-block;
vertical-align: top; //add
}
FIDDLE
Related
I am working on web application using Rect JS and I only have beginners knowledge in HTML and CSS.So can you please suggest me to achieve something like the following with a responsive UI that containing button,text and image.How can I write css styles to curve a div and place another one below it without any blank space.
Can someone please suggest any solution? Any help would be really appreciated.I have tried radial-gradient method like following.
<div className="background1">
....
</div>
<div className="background2">
.....
</div>
.background1 {
width: 100%;
background: radial-gradient(120% 800px at 50% -30px, red 75%,
transparent 75%) no-repeat;
z-index: 2;
position:relative;
margin-bottom: 0px;
}
.background2 {
background-color: #202492;
width: 100%;
background: radial-gradient(120% 800px at 50% -30px,blue 75%,
transparent 75%) no-repeat;
position: relative;
z-index: 1;
margin-top: -50px;
}
But I am getting this
Blockquote
I think you need something like this:
.btn1 {
background: #190b0b;
color: #fff;
padding: 1em 2.5em;
box-shadow: 1px 2px 7px -1px #190b0b;
}
.background1 {
width: 100%;
background: red;
z-index: 2;
position: relative;
margin-bottom: 0px;
padding: 6em 0;
border-radius: 0 0 10em 10em;
text-align: center;
}
.background2 {
background-color: #202492;
z-index: 1;
position: relative;
margin-bottom: 0px;
padding: 6em 0;
border-radius: 0 0 10em 10em;
text-align: left;
width: 100%;
top: -10em;
color: #fff;
}
.background3 {
background-color: blue;
z-index: 0;
position: relative;
margin-bottom: 0px;
padding: 6em 0;
border-radius: 0 0 10em 10em;
text-align: left;
width: 100%;
top: -20em;
color: #fff;
}
.text {
margin-top: 6em;
max-width: 50%;
padding: 0 6em;
}
<div class="background1">
<button class="btn1">Button</button>
</div>
<div class="background2">
<div class="text">
<h2> Text1 </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, nibh sed tempus bibendum, lacus turpis dictum ipsum, nec consectetur diam nisi eget mauris. </p>
</div>
</div>
<div class="background3">
<div class="text">
<h2> Text2 </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, nibh sed tempus bibendum, lacus turpis dictum ipsum, nec consectetur diam nisi eget mauris. </p>
</div>
</div>
Just change in border-radius and padding values to have the perfect curve that you want.
You can use border-bottom-left-radius and border-bottom-lright-radius or border-radius: 0px 0px xxxpx xxpx;
div {
height: 300px;
width: 300px;
border-bottom-right-radius: 200px;
border-bottom-left-radius: 200px;
background: black;
}
<div></div>
Trying to make it so chips can line up next to each other. Once all the chips' width becomes too large, then goes to next line.
Tried using display:flex but then div contents mysteriously overflow like this:
.container {
width: 900px;
margin: auto;
}
.contentcard {
width: 300px;
height: 200px;
padding: 10px;
float: left;
padding: 10px 0;
margin-top: -4px;
margin-right: 200px;
}
h1 {
fontsize: 30px;
font-weight: bold;
}
p.descriptionText {
fontsize: 20px;
font-weight: light;
}
.chipcontainer {
width: 200px;
display: flex;
}
.typechip {
display: inline-block;
padding: 0 25px;
height: 30px;
font-size: 14px;
line-height: 30px;
border-radius: 25px;
background-color: white;
/*#f1f1f1;*/
border-style: solid;
border-width: 1px;
margin: 5px;
}
.projectcard {
width: 400px;
height: 300px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
text-align: center;
float: left;
}
.projectcard:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div class="container">
<div class="contentcard">
<h1>Project 1: ADFASASDF </h1>
<p class="descriptionText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui ut ornare lectus sit amet est placerat. Sed turpis tincidunt id aliquet risus feugiat.</p>
<div class="chipcontainer">
<div class="typechip">UX design</div>
<div class="typechip">AI Platform</div>
<div class="typechip">HTML / CSS</div>
</div>
</div>
<div class="projectcard"></div>
</div>
I will show you 5 solution, choose what solves the problem (also added the output of every solution)
the bug is happening because of line-height in .typechip,
because technically without that property, the text inside the chip is correctly within the container.
You also have an explicit height: 30px (this means that the text will overflow if is a lot bigger.
if you delete the height property then it will automatically work,
but it will have a big gap between wrapped text.
if you don't want a big gap,
then maybe change the line-height to a lower number (in my case 1 so it will be equal to font-size),
then try to add also more padding on the top/bottom of the chip
❌padding: 0 25px -> ✅padding: 10px 25px;
if you want that chip to not wrap at all,
use flex-wrap: wrap inside parent container .chipcontainer
200px
the problem is that 200px isn't enough, so they will wrap everytime,
but the text is displayed correctly without deleting any property
250px+
✅ preferred one is 4th solution for me, because is easy and doesn't have side effects (and is more flexible because don't waste space)
like you saw, if the space of container is bigger, then automatically wrap correctly!
if you don't want they will be wrapped,
but still be readable
one line text
then use grid with column direction.
the solution: (see code snippet below)
.chipcontainer now isn't flex anymore, but grid with grid-auto-flow: column;
.typechip now have a width of max-content so it will be always in the same line (and get the less space he can without wrapping the content text)
.container {
width: 900px;
margin: auto;
}
.contentcard {
width: 300px;
height: 200px;
padding: 10px;
float: left;
padding: 10px 0;
margin-top: -4px;
margin-right: 200px;
}
h1 {
font-size: 30px;
font-weight: bold;
}
p.descriptionText {
font-size: 20px;
font-weight: light;
}
.chipcontainer {
width: 200px;
display: grid;
grid-auto-flow: column;
}
.typechip {
display: inline-block;
padding: 0 25px;
height: 30px;
font-size: 14px;
line-height: 30px;
border-radius: 25px;
background-color: white;
/*#f1f1f1;*/
border-style: solid;
border-width: 1px;
margin: 5px;
width: max-content;
}
.projectcard {
width: 400px;
height: 300px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
text-align: center;
float: left;
}
.projectcard:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div class="container">
<div class="contentcard">
<h1>Project 1: ADFASASDF </h1>
<p class="descriptionText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui ut ornare lectus sit amet est placerat. Sed turpis tincidunt id aliquet risus feugiat.</p>
<div class="chipcontainer">
<div class="typechip">UX design</div>
<div class="typechip">AI Platform</div>
<div class="typechip">HTML / CSS</div>
</div>
</div>
<div class="projectcard"></div>
</div>
Can anyone solve this issue?
I've created some bevelled edge corners to a box using a before and after tag. This works great if I style the colour of the box and the before and after with the specified colour.
However I need to be able to swap colours easily using colour classes in the html. But I can't get the colour classes to change the before and after state.
Its tricky to explain but please see the codepen mock up and you will easily see the problem.
I basically want to change the whole thing to either red,green,blue etc using one class and not have to change the before and after colours as well.
https://codepen.io/Hornet_ant/pen/zZZWMp
HTML:
<div class="bc-box bc-red">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium
</p>
</div>
CSS
.bc-box {
position: relative;
margin: 40px 0 40px 0;
padding: 0 20px;
}
.bc-box:before, .bc-box:after {
box-sizing: border-box;
border-style: solid;
border-color: transparent;
border-width: 20px;
content: "";
display: block;
left: 0;
position: absolute;
width: 100%;
}
.bc-box:before {
border-top-width: 0;
top: -20px;
border-bottom-color: #f5862d;
}
.bc-box:after {
border-bottom-width: 0;
bottom: -20px;
border-top-color: #f5862d;
}
/* <---COLOURS----> */
.bc-green{
background-color: #30a79c;
}
.bc-red {
background-color: #dd004c;
}
.bc-blue{
background-color:#5276b6;
}
I'd be grateful if anyone can take a look at this and see if there is a solution.
Thanks
Anthony
Consider this option, using three elements (top, middle,bottom) and playing with borders you can have a quite good result avoiding pseudo-elements. Then you just set a border-color in each color-class. One caveat is that you'll have to absolute position the content inside the middle element. DEMO
.text {
position: absolute;
top: -65px;
}
.trapezoid {
height: 0;
width: 500px;
border-style: solid;
}
.trapezoid:nth-child(1) {
border-bottom-width: 50px;
border-top-width: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.middle {
height: 0;
width: 500px;
border-style: solid;
border-width: 50px;
position: relative;
}
.trapezoid:nth-child(3) {
border-top-width: 50px;
border-bottom-width: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.bc-red div {
border-color: red;
}
.bc-green div {
border-color: green;
}
<div class="bc-green"><!--Just change this class and all colors change-->
<div class="trapezoid"></div>
<div class="middle">
<div class="text">
<h3>Heading three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium nisi vitae mauris egestas aliquam. Sed sed nulla ipsum. Donec id eleifend mauris. Morbi ultricies, est sit amet porttitor condimentum, sem ligula</p>
</div>
</div>
<div class="trapezoid"></div>
</div>
Please see the CSS solution below. I added before and after selectors to the bc-green colour class;
.bc-green::after {
border-top-color: green; !important
}
.bc-green::before {
border-bottom-color: green; !important
}
.bc-green{
background: green;
}
See the working solution over at Codepen > http://codepen.io/jabuttercup123/pen/Pppdab
I have 2 floating divs, inner-left and inner-right inside parent container inner-container.
inner-container is set to display: inline-block; to have it's width to be equal of width of it's children.
The problem is, when I resize the window, inner-right div goes down and only then starts to resize itself.
How do I inner-right make it stay on the same line with inner-left, and, in the event of window resize, to resize instead of going down?
HTML:
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="inner-container">
<div class="inner-left"><img src="http://placehold.it/100x100" alt=""></div>
<div class="inner-right"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In justo orci, rutrum nec feugiat sed, ultrices non dolor. Aliquam laoreet.</strong><br>
Vivamus purus metus.
</div>
</div>
</div>
CSS:
.container {
background-color: #f0fff0;
padding: 10px;
border: 1px solid #bce2c1;
border-radius: 5px;
}
.inner-container {
padding: 10px;
background-color: #ffffff;
border: 1px solid #bce2c1;
border-radius: 5px;
margin-top: 10px;
display: inline-block;
}
.inner-left {
float:left;
width: 60px;
}
.inner-left img {
height: 60px;
width: 60px;
}
.inner-right {
float:right;
text-align: left;
padding-left: 10px;
}
JSFIDDLE:
https://jsfiddle.net/acidonyx/naw6ojwe/4/
well just remove float: right from .inner-right and your problem will be solved.
.inner-right {
text-align: left;
padding-left: 10px;
}
to solve your other problem you can do
.inner-right {
overflow: hidden;
text-align: left;
padding-left: 10px;
}
For this you should use flexbox, here with inline-flex to fit your requirement
.container {
display: inline-block;
background-color: #f0fff0;
padding: 10px;
border: 1px solid #bce2c1;
border-radius: 5px;
}
.inner-container {
display: inline-flex;
padding: 10px;
background-color: #ffffff;
border: 1px solid #bce2c1;
border-radius: 5px;
margin-top: 10px;
}
.inner-left img {
height: 60px;
width: 60px;
}
.inner-right {
padding-left: 10px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="wrap-container">
<div class="inner-container">
<div class="inner-left">
<img src="http://placehold.it/100x100" alt="">
</div>
<div class="inner-right"><strong>Lorem ipsum dolor sit</strong>
<br>Vivamus purus metus.
</div>
</div>
</div>
</div>
You could try floating .inner-right to the left instead, and giving it a width set in a percentage value, like this:
.inner-right {
float:left;
width: 85%;
}
JSFIDDLE
You can use media queries to update the percentage as you need.
Here is my html
<div id="under_post"> <!--START UNDER POST-->
<div id="post_info"> <!--START POST INFO-->
<p><span style="color: #000000;display: block;float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut lectus sit amet quam gravida fermentum non a nibh. Praesent quam libero, dignissim vel luctus vel, sodales in justo</span></p>
</div> <!--END POST INFO-->
<div id="download_button"><!--START DOWNLOAD BUTTON -->
<a class="download" href="http://dl.dropbox.com/s/0iq6ik93rklbakh/Kirvy.zip">Download</a>
</div> <!--END DOWNLOAD BUTTON-->
</div>
css is as follows
#under_post {
margin: 0;
padding: 0;
width: 600px;
border: 1px solid black;
}
#post_info {
margin: 0;
padding: 0;
width: 400px;
}
div#download_button {
width: 100px;
}
div#download_button a.download {
display: block;
text-decoration: none;
color: white;
padding-top: 10px;
background-color: #e8432d;
width: 100px;
height: 30px;
text-align: center;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-khtml-border-radius: 7px;
}
I want the download button to be aligned to right side under the #under_post div
Here's the link to the page I'm trying to get it to work on.
Link
Thanks in advance
Add float:left; to #under_post and #post_info
#under_post {
margin: 0;
padding: 0;
width: 600px;
border: 1px solid black;
float: left;
}
#post_info {
margin: 0;
padding: 0;
width: 400px;
float: left;
}
and add float:right;margin-top:25px; to div#download_button
div#download_button {
width: 100px;
float: right;
margin-top: 25px;
}
This is how it looks