Currently the button is always below the last element that exists in the view.
Then I add bottom: 2px and position: absolute to the button and it goes to the bottom, but when I open the drop-down the screen is enlarged and the button is not at the bottom.
It currently works like this. I want it to continue working like this, but with the button at the bottom
Placing bottom: 2px and position: absolute the button goes to the bottom but when the drop-down is opened it overlaps.
<style>
.card-one{display:flex;}
.card-section{display:flex;margin:5px;text-align:center; min-height:300px;background:#000; flex-direction: column; width:33%;color:#fff;}
.card-section h2{color:#fff;}
.card-section .book-btn{margin-top:auto;}
</style>
<div class="card-one">
<div class="card-section">
<h2>Hello One</h2>
<button class="btn book-btn">Book Now</button>
</div>
<div class="card-section">
<h2>Hello One</h2>
<button class="btn book-btn">Book Now</button>
</div>
</div>
Related
Here is my HTML code. I am trying to add a vertical line that seperates the login and sign up buttons, anybody have an idea how to do this?
<header class="header">
<h1>The Textbook Marketplace</h1>
<div class="header-buttons">
<button class="btn login-btn">Log In</button>
<button class="btn signup-btn">Sign Up</button>
</div>
</header>
add a div between them and give it proper height width and color
.line{
background-color:black;
height:20px;
width:3px;
}
.header-buttons{
display:flex;
justify-content:center;
align-items:center;
}
.btn{
margin: 10px
}
<header class="header">
<h1>The Textbook Marketplace</h1>
<div class="header-buttons">
<button class="btn login-btn">Log In</button>
<div class="line"></div>
<button class="btn signup-btn">Sign Up</button>
</div>
</header>
Depends of the height you want for the line. But I think the solution would be to put a border (for ex: solid 2px black) on the right border of the left button or vice versa if you put a border for the right button. Or, create a <div> between the two buttons and play with background color or the borders.
I'm looking to add a gradient to the top of some independently scrolling tab content so the content isn't sliced off at the bottom of the tabs when you scroll up. The goal is to have the content fade to white behind the tabs above. How would I go about adding this gradient so that it lays above the tab content and achieves this effect in the best way? The images below better explain the effect I am going for:
Obviously I wouldn't want it covering up the first card but I figured I could resize it between the tabs and the card so no content is covered unless you scroll.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="row r-tabs">
<div class="tab-bar">
<button class="bar-item tab-active" onclick="openTab(event, 'section1')">Summary</button>
<button class="bar-item" onclick="openTab(event, 'section2')">Images</button>
<button class="bar-item" onclick="openTab(event, 'section3')">Contact</button>
<button class="bar-item" onclick="openTab(event, 'section4')">Help</button>
</div>
</div>
<div id="section1" class="tab-content">
<div class="card">
<div class="card-body model-btn-card">
<div class="viewing text-black">
</div>
</div>
</div>
You can style the :before element for the div, something like:
div {
position: relative;
}
div: before {
content: '';
top: -2px;
left: 0;
width: 100%;
height: 15px;
background: linear-gradient(to top, transparent, #fff);
}
Didn't test it, but something like this should work.
Here is my code.I have minimized it as short as I can. In that text-align:right; is not working
.forgot {
color: red;
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
As #TreyBake pointed out, center and u are not supposed to be used instead, you should use the text-align and em.
Also, here's the solution with setting right align to parent.
.forgot {
color: red;
}
.center-aligned{
text-align: center;
}
.right-aligned{
text-align: right;
}
<div class="content">
<div class="center-aligned">
<h3><em>LOREM IPSUM</em></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</div>
<br>
<div class="right-aligned">
Forgot details?
</div>
</div>
The align is set on the parent element. Not on the element itself.
.forgot {
color: red;
}
.content {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
You can use text-align: right on a parent element. Create a div wrapping your link and give him the class. See example below:
html:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
css:
.forgot {
color: red;
}
.text-right {
text-align: right;
}
If you have Bootstrap installed, you can do all of this without css. Your html would look like this:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
Please note at time of writing, this is Bootstrap v4.2.1
Here's Why It's Not Aligning
You have your <a class="forgot"> element with the "Forgot Details" text inside of it. Since it's an <a> element, by default it will only stretch to be as wide as the text you place inside it. So as you can see in the screenshot below, your <a class="forgot"> element (highlit) is only as wide as the "Forgot Details" text. So your "text-align: right;" technically is aligning the text to the right, but since the parent container (the <a class="forgot"> element) is only as wide as the text, horizontally aligning it doesn't make a difference.
How To Fix It
Where an <a> element stretches only to fit its contents, a <div> element by default stretches horizontally to fill its parent container. So what you can do is enclose your <a class="forgot"> in a <div class="forgot-parent">, and then apply the "text-align: right" to the <div class="forgot-parent"> so that the <a class="forgot"> gets aligned to the right.
So the code will look like this:
.forgot {
color: red;
}
.forgot-parent {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="forgot-parent">
Forgot details?
</div>
</div>
Note how I removed "text-align: right;" from '.forgot' and added it to '.forgot-parent'. The result is shown below. First, here is the parent <a class="forgot-parent"> div highlit.
Note how the <div class="forgot-parent"> has stretched to the full screen width. Next the <a class="forgot"> is highlit:
Note that the <a class="forgot"> is still only the width of its contents (the "Forgot Details" text), but it's now aligned to the right within its parent div.
I have a row with header text and a button on the right.
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>
The code above is what I have currently but I have tried many variations. In all of them, the button is not vertically aligned with the text. (The image below includes the overlay when I hover over the element in the Elements pane of Chrome, in order to show vertical alignment.)
Searching existing questions on stackoverflow, I've found this question posted a number of times; however, I found no knowledgeable answers.
Has anyone figured this out?
This happens because the line-height of the heading and the height of the button differ.
With a line-height: 1.9; for the heading it should work:
.page-header h4 {
line-height: 1.9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>
You can try using the grid to be mobile friendly and make everything inside vertically aligned.
<div class="page-header vertical-center">
<div class="row">
<div class="col-md-8">
<h1>Text on the left</h1>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
</div>
</div>
Add this CSS
.row > div {
border: 1px solid black;
}
.vertical-center .row {
display: flex;
align-items: center;
}
/*maybe create an id instead of h1*/
h1 {
margin: 0;
}
Hiii Everyone,
I have multiple divs.Inside each div there will be panel body and its footer.What happening is based on panel body content its not adjusting instead its overlapped panel footer above panel body.Below is my screenshot
In the above image u can understand what is happening.And my example code is
<main class="page-content content-wrap" style="background-color:#E9EDF2;height:auto">
<div id="main-wrapper">
<div id="five_radio_question">
<div class="panel-body">
<br/><br/>
<h2 style="color:#C32F10"><b>Reorder Paragraphs</b></h2><br/>
<div class="panel-body" style="background-color:#EFAD4D;color:#fff;border-radius:4px;padding:1px">
<h4>The text bubbles in the left panel have been placed in a random order. Restore the original order by dragging the text bubbles from the left panel to the right panel.</h4>
</div>
<br/>
<p style="font-size:14px">
Write 1-5 next to each paragraph to indicate the order you think is correct.
</p>
Contentss
</div>
</div>
<div class="panel-footer">
<h3 style="float:left"> Question 5 of 14</h3>
<div style="float:right">
<button class="btn btn-danger btn-lg first_ques_button4">
Previous Question
</button>
<button class="btn btn-danger btn-lg second_ques_button4">
Next Question
</button>
</div>
</div>
</main>
And also I tried with css in somany ways with the help of google.And My issue is not resolved.
#main-wrapper:after {
clear: both;
content: "";
display: table;
}
body {
display: block;
position: relative;
height: auto;
min-height: 100% !important;
}
Please anyone help me to get out of this issue.Thanks in advance..