So, i have some <p> tag and a text in it, and it's positioned to the left of the button. If the text keeps getting bigger, the button keeps being pushed to the right. I want to position all the buttons in the bottom-right corner of every div. Here's my HTML:
#dugme {
font-weight: bold;
left: 15vw;
line-height: 2vw;
color: white;
background-color: rgb(17, 142, 146);
text-align: center;
border: white 2px solid;
}
#dugme:hover{
background-color: aliceblue;
color: rgb(17, 142, 146);
}
#stripovi {
padding-top: 2em;
margin-bottom: 1em;
margin-left: 10px;
}
#comic {
display: inline-block;
background-color: rgb(230, 200, 119);
border-radius: 3px;
margin-right: 15px;
margin-top: 5px;
margin-bottom: 5px;
}
.naziv {
font-family: 'Fredoka One', cursive;
float: right;
margin-top: 100px;
word-wrap: break-word;
margin-top: auto;
margin-left: auto;
}
.container-fluid{
background-color: rgb(74, 198, 202);
}
<div class="row" id="stripovi">
<div class="comic w-50">
<div class="comic-img-top d-flex align-items-center form-group" id="comic">
<div class="thumbnail">
<img class="img-responsive" src="slike/c1.jpg" alt="comicbook">
<div class="naziv">
<p class="col p-2 m-0">Heavy Metal Comic</p>
<p class="col p-2 m-0" style="color: rgb(155, 151, 151); text-align: left;">ID:0101</p>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-info" id="dugme">Dodaj</button>
</div>
</div>
</div>
<div class="comic w-50">
<div class="comic-img-top d-flex align-items-center form-group" id="comic">
<div class="thumbnail">
<img class="img-responsive" src="slike/c2.jpg" alt="comicbook">
<div class="naziv">
<p class="col p-2 m-0">Deadly Class</p>
<p class="col p-2 m-0" style="color: rgb(155, 151, 151); text-align: left;">ID:0101</p>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-info" id="dugme">Dodaj</button>
</div>
</div>
</div>
</div>
This is what the buttons look like.As you can see in the second comic, the text moved the button to the right. I want to make the button remain in the same position for every product, and that position would be the bottom right corner of this rectangle.
Thank you in advance!
You can add
position: relative to comic-img-top
remove the id="comic" and instead use classes. ID should be unique, so you shouldn't repeat it.
Add another custom class to form-group, the container which holds the button.
CSS
position: absolute;
bottom: 0;
right: 0;
This will give you the desired result
#comic { // Make this a class and not an ID if it is going to be repeated
position: relative;
}
.form-group.new-button-container-class{
position: absolute;
bottom: 0;
right: 0;
}
<HTML>
<div class="form-group new-button-container-class">
<button type="button" class="btn btn-info" id="dugme">Dodaj</button>
</div>
Add a
position: absolute;
This makes your element stay on a position. Therefore this function is called absolute. The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). It's syntax is to be used as position: static|absolute|fixed|relative|sticky|initial|inherit;. Or if you like to use the javascript approach:
object.style.position="absolute"
For total use change:
#dugme {
font-weight: bold;
left: 15vw;
line-height: 2vw;
color: white;
background-color: rgb(17, 142, 146);
text-align: center;
border: white 2px solid;
}
to:
#dugme {
font-weight: bold;
left: 15vw;
line-height: 2vw;
color: white;
background-color: rgb(17, 142, 146);
text-align: center;
border: white 2px solid;
position: absolute;
}
Now everything you need to do is just align everything right.
Related
I have placed a button on my page and whenever I hover over that button, my text and slightly shifts upwards. Please help (I am a beginner/novice/green) - the code will be shown below
.btn {
font-weight: 700px;
border-radius: 500px;
text-transform: uppercase;
border-color: none;
padding: 10px;
}
.btn-xl {
padding: 1rem 2rem;
background-color: #4B307B;
border-color: white;
}
.btn-xl:hover {
background-color: gold;
border-width: 3px;
border-color: #4B307B;
}
hr {
border-color: gold;
width: 150px;
max-width: 65px;
}
<div class="container d-flex align-items-center h-100">
<div class="row">
<header class="text-center col-12">
<h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
</header>
<div class="buffer col-12"></div>
**
<section class="text-center col-12">
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</section>**
</div>
</div>
You need to add the border-width: 3px; to the .btn-xl class as well, not just the hover class. I believe its the border appearing on the hover that is causing the issue. See here:
.btn{
font-weight: 700px;
border-radius: 500px;
text-transform: uppercase;
border-color: none;
padding: 10px;
}
.btn-xl{
padding: 1rem 2rem;
background-color: #4B307B;
border-color: white;
border-width: 3px;
}
.btn-xl:hover{
background-color: gold;
border-width: 3px;
border-color: #4B307B;
}
hr{
border-color: gold;
width: 150px;
max-width: 65px;
}
<div class="container d-flex align-items-center h-100">
<div class="row">
<header class="text-center col-12">
<h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
</header>
<div class="buffer col-12"></div>
**<section class="text-center col-12">
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</section>**
</div>
</div>
I have a group of three columns. Inside each column is the following:
A small circular div, which contains a font-awesome icon.
A small heading tag
Another div, which contains some text and a button.
I have been having issues with getting the third item to be an equal height with each other. I also need the buttons to be on the same height as well. I understand how to make divs the same height (shown here!)
However, I cannot get these divs to be of an equal height, and with the button to be in the same position. Here is the HTML code:
<div class="container-fluid">
<div class="row justify-content-center h-100">
<div class="col-3">
<div class="circleAboutUs">
<i class="fas fa-user-astronaut fa-5x" style="color: white; padding-top: 25px; padding-left: 34px;"></i>
</div>
<h1 class="about-us-text">Hackers</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
The early registration deadline is October 15th and regular registration closes November 3rd.
For more information check out the FAQ!
</div>
<button class="about-us-button" type="button"><h2>Register</h2></button>
</div>
</div>
<div class="col-3">
<div class="circleAboutUs">
<i class="fab fa-reddit-alien fa-5x" style="color: white; padding-top: 30px; padding-left: 28px"></i>
</div>
<h1 class="about-us-text">Mentors</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
Interested in volunteering to help our hackers the day of the event?
Sign up here to be a mentor for Codestellation.
</div>
<button class="about-us-button" type="button"><h2>Sign Up</h2></button>
</div>
</div>
<div class="col-3">
<div class="circleAboutUs">
<i class="fas fa-space-shuttle fa-rotate-270 fa-5x" style="color: white; padding-right: 27px; padding-top: 14px; padding-bottom: 5px"></i>
</div>
<h1 class="about-us-text">Sponsors</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
Codestellation can’t take off without our sponsors!
Learn more about what perks you’ll recieve and how your partnership will contribute to the event.
</div>
<button class="about-us-button" type="button"><h2>Sponsor</h2></button>
</div>
</div>
</div>
Here is the CSS:
.circleAboutUs {
border: 3px solid #FAA880;
margin: 0 auto;
border-radius: 100%;
height: 140px;
width: 140px;
background-color: #FAA880;
}
.about-us-content-container {
margin: auto;
border-radius: 10%;
background-color: #FAA880;
text-align: center;
margin-bottom: 60px;
}
.about-us-content-text {
font-family: 'Mina', 'Montserrat', monospace;
padding: 25px 25px;
font-size: 2em;
}
.about-us-text {
text-align: center;
color: #3A318C;
font-family: 'Mina', 'Montserrat', monospace;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
}
.about-us-button {
border-radius: 20%/50%;
border: 1px solid black;
text-align: center;
font-family: 'Mina', 'Montserrat', monospace;
font-weight: bold;
color: #3A318C;
margin-bottom: 10px;
padding-top:10px;
}
.about-us-button:hover {
cursor: pointer;
background-color: white;
}
.col-sm > .about-us-content-container {
height: 55px;
}
It currently looks this: Example
I want it to maintain its responsiveness, so the header and the div still stack nicely on mobile.
This behavior can be easily achieved by using flex box.
First, we create div wrapper for every child of all the columns in bootstrap.
We set the height of those children to 100% in order to make them fill the whole containers.
Then, we set flex-grow: 1 so the about-us-content-container will fill the whole container including spare spaces.
But now about-us-content-container will have an auto margin, which prevents it from filling the whole container. So, we have to set the margin to 0.
The about-us-content-container now fills all the spaces. But the button is still not at the bottom. We can get this by doing the same thing
Setting display to flex.
Setting flex-grow of the about-us-content-text to 1.
The buttons are now filling the whole width of about-us-content-container now. To avoid this, wrap a div around the buttons.
Here is the solution in Codepen: https://codepen.io/anhanhvina/pen/WKmoWQ
Below is the code that works. You can now add more classes to make it responsive.
.col-3 > div {
display: flex;
flex-direction: column;
height: 100%;
}
.about-us-content-container {
flex-grow: 1;
display: flex;
flex-direction: column;
margin: 0 !important;
}
.about-us-content-text {
flex-grow: 1;
}
.circleAboutUs {
border: 3px solid #FAA880;
margin: 0 auto;
border-radius: 100%;
height: 140px;
width: 140px;
background-color: #FAA880;
}
.about-us-content-container {
margin: auto;
border-radius: 10%;
background-color: #FAA880;
text-align: center;
margin-bottom: 60px;
}
.about-us-content-text {
font-family: 'Mina', 'Montserrat', monospace;
padding: 25px 25px;
font-size: 2em;
}
.about-us-text {
text-align: center;
color: #3A318C;
font-family: 'Mina', 'Montserrat', monospace;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
}
.about-us-button {
border-radius: 20%/50%;
border: 1px solid black;
text-align: center;
font-family: 'Mina', 'Montserrat', monospace;
font-weight: bold;
color: #3A318C;
margin-bottom: 10px;
padding-top:10px;
}
.about-us-button:hover {
cursor: pointer;
background-color: white;
}
.col-sm > .about-us-content-container {
height: 55px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row justify-content-center h-100">
<div class="col-3">
<div>
<div class="circleAboutUs">
<i class="fas fa-user-astronaut fa-5x" style="color: white; padding-top: 25px; padding-left: 34px;"></i>
</div>
<h1 class="about-us-text">Hackers</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
The early registration deadline is October 15th and regular registration closes November 3rd. For more information check
out the FAQ!
</div>
<div>
<button class="about-us-button" type="button">
<h2>Register</h2>
</button>
</div>
</div>
</div>
</div>
<div class="col-3">
<div>
<div class="circleAboutUs">
<i class="fab fa-reddit-alien fa-5x" style="color: white; padding-top: 30px; padding-left: 28px"></i>
</div>
<h1 class="about-us-text">Mentors</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
Interested in volunteering to help our hackers the day of the event? Sign up here to be a mentor for Codestellation.
</div>
<div>
<button class="about-us-button" type="button">
<h2>Sign Up</h2>
</button>
</div>
</div>
</div>
</div>
<div class="col-3">
<div>
<div class="circleAboutUs">
<i class="fas fa-space-shuttle fa-rotate-270 fa-5x" style="color: white; padding-right: 27px; padding-top: 14px; padding-bottom: 5px"></i>
</div>
<h1 class="about-us-text">Sponsors</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
Codestellation can’t take off without our sponsors! Learn more about what perks you’ll recieve and how your partnership
will contribute to the event.
</div>
<div>
<button class="about-us-button" type="button">
<h2>Sponsor</h2>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
I've made 2 boxes that are blue and have a white text color, and when you hover over them, the text color changes from white to blue and the box color changes from blue to white. That part works. But when I hover below the text from the box, the text color changes back to blue even though I'm still with my mouse on the box 'href'.
Have a look at my code:
body {
background: #DCDCDC
}
a {
text-decoration: none;
}
#galaxy {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
#galaxy:hover {
background-repeat: no-repeat;
background-color: #FFF;
}
#test {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
#test:hover {
background-repeat: no-repeat;
background-color: #F00;
}
.button-title-text {
text-align: center;
color: #FFF;
font-size: 16px;
padding-top: 100px;
}
.button-title-text:hover {
text-align: center;
color: rgb(37, 100, 165);
font-size: 16px;
padding-top: 100px;
}
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="galaxy">
<div class="button-title-text">
<h1>Galaxy</h1>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="test">
<div class="button-title-text">
<h1>test</h1>
</div>
</div>
</a>
</div>
Any help would be appreciated. Thanks in advance.
Consolidated your code and fixed the issue.
You had identical styles for your #galaxy and #test boxes (until they're hovered). I added a class called .box to both of them and moved the styles to that selector.
The issue in your post was occurring because you had a :hover rule on the box itself and the text inside. The hover on the text was behaving as written - it was only activating when you hovered directly over the text.
To fix this, I removed the color: attribute from your .button-title-text element, allowing it to inherit the color from the .box.
Then I added a .box:hover rule that changes the text color, which takes effect when either box is hovered.
Hope this helps!
body {
background: #DCDCDC
}
a {
text-decoration: none;
}
.box {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
.button-title-text {
text-align: center;
font-size: 16px;
padding-top: 100px;
}
.box:hover {
background-color: #FFF;
color: rgb(37, 100, 165);
}
#test:hover {
background-color: #F00;
}
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="galaxy" class="box">
<div class="button-title-text">
<h1>Galaxy</h1>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="test" class="box">
<div class="button-title-text">
<h1>test</h1>
</div>
</div>
</a>
</div>
I have an overview page with tiles and I use the matchheight library to dynamically determine the height of a row. Now I would like to align the 'more' buttons at the bottom of the div so that it doesn't look as messy as in the screenshot on smaller screens.
I tried making the button "position: absolute" with "bottom: 20px" and "left: 40%" but that causes problems with responsiveness. On some resolutions that's okay, but on other's the button is too far to the right.
Can I solve this in a nice way without having to use the media attribute for each resolution?
/* Block: Overview */
#overview {
padding-top: 50px;
width: 100%;
}
.overview {
text-align: center;
padding-bottom: 50px;
}
.overview img {
width: 100%;
vertical-align: middle;
padding-bottom: 30px;
}
.card-title {
text-align: center;
letter-spacing: -1px;
font-weight: 600;
font-size: 20px;
}
.card-subtitle {
margin-bottom: 0;
font-style: italic;
font-weight: 400;
font-size: 15px;
font-family: "Lora", serif;
color: #cccccc;
margin-top: -1rem;
line-height: 1.7857;
padding-bottom: 1rem;
text-align: center;
}
.btn-card {
background-color: #cccccc;
border-color: #404040;
color: #404040;
letter-spacing: 2px;
padding: 10px 20px;
horiz-align: center;
position: relative;
margin-bottom: 0;
}
.btn-card:hover {
background-color: #ffffff;
color: #404040;
border-color: #404040;
letter-spacing: 2px;
padding: 10px 20px;
}
<div class="col-sm-3 overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Heavy Entertainment Show" src="/images/discography/the-heavy-entertainment-show-1.jpg">
</div>
<h3 class="card-title">Heavy Entertainment Show</h3>
<h4 class="card-subtitle">November 4<sup>th</sup>, 2016</h4>
<a href="/album/the-heavy-entertainment-show/" title="Show details of Heavy Entertainment Show">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Under the Radar Vol 1" src="/images/discography/under-the-radar-vol-1-1.jpg">
</div>
<h3 class="card-title">Under the Radar Vol 1</h3>
<h4 class="card-subtitle">December 1<sup>st</sup>, 2014</h4>
<a href="/album/under-the-radar-vol-1/" title="Show details of Under the Radar Vol 1">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Swings Both Ways" src="/images/discography/swings-both-ways-1.jpg">
</div>
<h3 class="card-title">Swings Both Ways</h3>
<h4 class="card-subtitle">November 18<sup>th</sup>, 2013</h4>
<a href="/album/swings-both-ways/" title="Show details of Swings Both Ways">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Take the Crown" src="/images/discography/take-the-crown-1.jpg">
</div>
<h3 class="card-title">Take the Crown</h3>
<h4 class="card-subtitle">November 2<sup>nd</sup>, 2012</h4>
<a href="/album/take-the-crown/" title="Show details of Take the Crown">
<button class="btn btn-card">MORE</button>
</a>
</div>
This is the correct solution, adding a "transform:translateX(-50%);" for alignment. Thanks for the help!
.btn-card {
background-color: #cccccc;
border-color: #404040;
color: #404040;
letter-spacing: 2px;
padding: 10px 20px;
position: absolute;
bottom: 0;
left: 50%;
transform:translateX(-50%);
margin-bottom: 20px;
I have a button near the bottom of the page that is centered. Additionally, I have three images that I centered by making each image a col-lg-2 with 3 empty columns in between each one. I cannot figure out why these two items don't line up nicely, and which one is the one that is off center.
https://codepen.io/colesam/full/OgamyB/
SCSS:
a {
color: $blue;
font-size: 1.4vw;
font-weight: 500;
line-height: 1.7vw;
transition: all 0.2s;
&:hover {
color: $orange;
font-size: 1.7vw;
cursor: pointer;
text-decoration: none;
}
&:focus {
color: $blue;
text-decoration: none;
&:hover {
color: $orange;
cursor: pointer;
}
}
}
body {
background: white;
color: $black;
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-shadow: $text-shadow-light;
}
h2 {
font-size: 5vh;
margin-top: 5vh;
}
p {
font-size: 3vh;
letter-spacing: 2px;
margin-top: 3vh;
text-shadow: none;
}
.btn-next {
bottom: 0;
padding-bottom: 5vh;
position: absolute;
text-align: center;
transition: all 0.3s;
a {
font-size: 5vw;
&:hover {
font-size: 5.5vw;
}
}
}
.center-text {
text-align: center;
}
.left-text {
text-align: left;
}
.no-margin {
margin: 0;
}
.right-text {
text-align: right;
}
.title {
padding-left: 4vw;
h3 {
font-size: 3vw;
text-shadow: $text-shadow;
}
}
#portfolio-page {
min-height: 100vh;
position: relative;
}
h4 {
font-size: 2vw;
}
.active-item {
box-shadow: $box-shadow-o;
-moz-box-shadow: $box-shadow-o;
-webkit-box-shadow: $box-shadow-o;
}
.btn-portfolio {
padding-top: 20vh;
text-align: center;
transition: all 0.3s;
a {
font-size: 5vw;
&:hover {
font-size: 5.5vw;
}
}
}
#featured-content {
background: rgba(0, 0, 0, 0.1);
height: 65vh;
margin-top: 2vh;
padding: 3vh 0;
}
#featured-img img {
box-shadow: $box-shadow-light;
-moz-box-shadow: $box-shadow-light;
-webkit-box-shadow: $box-shadow-light;
}
#primary-featured {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
height: 45.5vh;
top: 10%;
}
#secondary-featured {
margin-top: 3vh;
}
HTML(inside a div.container):
<div id="portfolio-page">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<h2 class="center-text">My Portfolio</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12" id="featured-content">
<div class="row no-margin">
<div class="col-lg-1 btn-portfolio" id="left-button">
<a><i class="glyphicon glyphicon-chevron-left"></i></a>
</div>
<div class="col-lg-8 col-lg-offset-1" id="primary-featured">
<div class="row">
<div class="col-lg-5" id="featured-img">
<img src="includes/img/headers.jpg" alt="A cluster of header images." class="img-responsive">
</div>
<div class="col-lg-6 col-lg-offset-1" class="center-text">
<h4 id="featured-title">Placeholder</h4>
<hr>
<p id="featured-description">Placeholder text.</p>
</div>
</div>
</div>
<div class="col-lg-1 col-lg-offset-1 btn-portfolio" id="right-button">
<a><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="col-lg-6 col-lg-offset-3" id="secondary-featured">
<div class="row">
<div class="col-lg-2" id="secondary-feature1">
<img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive">
</div>
<div class="col-lg-2 col-lg-offset-3" id="secondary-feature2">
<img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive">
</div>
<div class="col-lg-2 col-lg-offset-3" id="secondary-feature3">
<img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 btn-next">
<a>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
</div>
Edit: Your problem is with position: absolute on .btn-next.
For absolutely positioned elements
This property specifies the distance between the left margin edge of
the element and the left edge of its containing block.
You have margin-left: -15px, so it aligns to center with the margin-left: -15px.
How to fix:
Add this to .btn-next:
right: 0;
left: 0;
...or you can remove position: absolute from .btn-next.
Alternative option:
The "down arrow" at the bottom isn't centered, because it's in the row class and that class has margin-left: 15px and margin-right: 15px.
If you give it margin: 0px, it'll be fine.
Rename div class="row" to something else or give it another class like div class="row down".
Examples:
<div class="down">
<div class="col-lg-12 btn-next">
<a>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
or
<div class="row down">
<div class="col-lg-12 btn-next">
<a>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
CSS (only if using second option):
.row.down {
margin: 0px;
}