I created a container which is fixed at the bottom of the page. However, the container then overflows off the page and the padding rules are completely ignored. I have searched around the forum but cannot find a solution in my problems context. I have tried using position absolute, and also tried using Javascript to calculate the scrollbar width to no avail.
.restaurant-page {
height: 100%;
}
.restaurant-page .book-table-container {
position: fixed;
width: 100%;
bottom: 0;
background-color: white;
border-top: solid 1px #f2f2f2;
padding-top: 12px;
padding-bottom: 12px;
}
.restaurant-page .book-table-container button {
width: 100%;
border: 0;
border-radius: 4px;
background-color: #00ccbc;
padding-top: 14px;
padding-bottom: 14px;
color: white;
font-size: 16px;
font-weight: 600;
}
<div class="restaurant-page">
<div class="book-table-container">
<button>Book Table</button>
</div>
</div>
I suppose you mean that the button is cutoff to the right. You can prevent that by adding: .restaurant-page .book-table-container { left: 0; right: 0; }.
However the button wil then touch directly the left and right side of the screen. To prevent that I added a padding of 5px to the left and right and shortended the padding code from: padding-top: 12px; padding-bottom: 12px; padding-left: 5px; padding-right: 5px; to: padding: 12px 5px;.
.restaurant-page {
height: 100%;
}
.restaurant-page .book-table-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: white;
border-top: solid 1px #f2f2f2;
padding: 12px 5px;
}
.restaurant-page .book-table-container button {
width: 100%;
border: 0;
border-radius: 4px;
background-color: #00ccbc;
padding-top: 14px;
padding-bottom: 14px;
color: white;
font-size: 16px;
font-weight: 600;
}
/* for demonstration only */
body {
overflow-y: scroll;
}
<div class="restaurant-page">
<div class="book-table-container">
<button>Book Table</button>
</div>
</div>
Related
I've got the button to float down the page as the user scroll's down the page, but is there a way to make it that after scrolling all the way to the bottom that it stays above the footer at all times.
I've tried to z-index, but all the solution I've found use javascript/jquery, I need it to be pure html and css
edited: the footer code is located under the button code in the html, also how do you make sure that regardless of the size of the page, the footer stays stays stuck to the bottom.
.footer {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
background-color: #1B1B1B;
color: #FFFFFF;
text-transform: uppercase;
font-weight: lighter;
letter-spacing: 2px;
border-top-width: 2px;
padding: 2px;
color: #ffffff;
width: 100%;
position: static;
font-weight: 200;
bottom: 10px;
}
/*Floating Back-To-Top Button*/
#myBtn {
position: fixed;
bottom: 10px;
float: right;
right: 18.5%;
left: 77.25%;
max-width: 50px;
width: 100%;
font-size: 12px;
border-color: rgba(85, 85, 85, 0.2);
background-color: rgb(100, 100, 100);
padding: .5px;
border-radius: 4px;
z-index: 1000;
}
/*On Hover Color Change*/
#myBtn:hover {
background-color: #7dbbf1;
}
<button id="myBtn">Top</button>
<div class="footer">
<p><span>Aditya's Website | Websystems Assignment | Copyright © 2019</span></p>
Home | Past | Future | Comments
</div>
button is coming on top of footer. please check the code.. Or add the footer HTML and CSS in the Question
.footer {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
background-color: red;
color: #FFFFFF;
text-transform: uppercase;
font-weight: lighter;
letter-spacing: 2px;
border-top-width: 2px;
padding: 2px;
width: 100%;
font-weight: 200;
bottom: 10px;
height: 30px;
position: absolute;
bottom: 0;
}
/*Floating Back-To-Top Button*/
#myBtn {
position: fixed;
bottom: 10px;
float: right;
right: 18.5%;
left: 77.25%;
max-width: 50px;
width: 100%;
font-size: 12px;
border-color: rgba(85, 85, 85, 0.2);
background-color: rgb(100, 100, 100);
padding: .5px;
border-radius: 4px;
z-index: 1000;
}
/*On Hover Color Change*/
#myBtn:hover {
background-color: #7dbbf1;
}
<button id="myBtn">Top</button>
<footer class="footer">
</footer>
I have a text in the middle of the div block with a font size 80px. When I hover on the div block, it will change the border size from 1px to 5px with a blue color but the text will moves down.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.calendarday-number:hover {
margin: 12px 2px;
}
.calendarday-container:hover {
border: 5px solid #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Jsfiddle: http://jsfiddle.net/f0k6r9nb/
I have tried to change the margin in the calendarday-container:hover .add-day-ico but it didn't help to resolve the issue.
Can you please show me an example how I can stop the text moving down on hover?
Thank you.
Changing the width of the border from 1px to 5px and recalculating the inner parts is not a practical solution. You could use an additional element, which has 5px of transparent border and change it to 5px of colored border on hover.
Another simple solution would be to use outline instead, as it doesn't add to the elements dimensions:
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-container:hover {
outline: 5px solid #2e7ad1;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.add-day-ico {
opacity: 0;
width: 21px;
height: 21px;
position: absolute;
bottom: 0;
right: 0;
}
.calendarday-container:hover img {
opacity: 1;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" class="add-day-ico">
</a>
</div>
A typical approach to showing a border on hover is to have the non-hover state be transparent or a color that matches the background along with the width matching that of the border when hovered.
In this case, there's an existing 1px border. Here, I would change the gray border blue, then use an inset box-shadow to add the additional 4px of the border.
Note: I also removed some margin for .calendarday-number on hover so the number does not shift.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
/*
.calendarday-number:hover {
margin: 12px 2px;
}
*/
.calendarday-container:hover {
border-color: #2e7ad1;
box-shadow: inset 0 0 0 4px #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Add this:
.calendarday-container {
border: 5px solid transparent;
outline: 1px solid #ccc;
outline: none;
}
.calendarday-container:hover {
outline: none;
}
Remove this:
.calendarday-number:hover {
margin: 12px 2px;
}
You can use a pseudo element like this. I also removed lot of unnecessary css that was fighting each other
* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 5%; }
/* Normal */
.calendarday-container {
width: 150px; height: 150px;
position: relative;
display: flex; align-items: center; justify-content: center;
}
.calendarday-container:after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #ccc; z-index: -1;
}
.caldndarday-add { text-decoration: none; }
.calendarday-number { font-size: 80px; color: #ccc; }
.add-day-ico { width: 24px; height: 24px; position: absolute; bottom: -8px; right: -8px; }
/* Hover FX */
.calendarday-container:hover:after { border: 10px solid navy; }
.calendarday-container:hover .calendarday-number { color: navy; }
<div class="calendarday-container" data-day="0" data-dropable="true">
<a class="caldndarday-add" href="/autoresponder/create_day.php?day=0" data-action="click">
<span class="calendarday-number">0</span>
<img class="add-day-ico" src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png">
</a>
</div>
The text was moving down because, There was increase in border-width from 1px to 5px while hover.
You can either maintain a outline around the box using outline property, and keeping the border: 5px solid transparent to border: 5px solid #2e7ad1 while hovering.
I've created a working fiddle for you, for better understanding: Link to Jsfiddle
I've got a few div elements that aren't expanding to match the height of their content. I have read that this can be caused by float-ed content; This content isn't float-ed - although I am beginning to feel like I should throw my computer in a river. Does that count?
code:
#interaction-options-container.display-dialogue {
left: 15%;
width: 70%;
}
#interaction-options-container.full-border, .dialogue-container.full-border {
border: 1px solid #33ffff;
}
#interaction-options-container {
margin: 4px 0px 4px 0px;
z-index: 100;
position: absolute;
left: 35%;
bottom: 4%;
width: 30%;
line-height: 1.4;
opacity: 0.75;
}
#interaction-options-container .heading {
font-size: 16px;
color: black;
padding: 0.1px 12px 0.1px 12px;
background-color: grey;
}
.heading {
font-weight: bold;
font-size: 1.5em;
padding: 8px 12px 0px 12px;
}
#interaction-options-container p {
margin: 8px 0px 8px 0px;
}
#interaction-options-container .dialogue p {
margin: 4px 0px 4px 0px;
}
#interaction-options-container .button, #interaction-options-container .evidence-options-container .button {
cursor: pointer;
color: white;
font-size: 14px;
padding: 0.1px 12px 0.1px 12px;
background-color: #333333;
opacity: 0.85;
border-bottom: 1px solid #8d8d8d;
}
#interaction-options-container .dialogue-container {
padding: 0px;
margin: 0px;
width: 100%;
height: 32px;
background-color: #333333;
float: none;
}
#interaction-options-container .dialogue {
text-align: center;
margin: auto;
font-size: 16px;
font-weight: bold;
padding: 1px 12px 1px 12px;
color: white;
background-color: #333333;
}
.dialogue-container .dialogue.option-divider {
border-bottom: 1px solid #333333;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="hud-element display-dialogue full-border" id="interaction-options-container">
<div class="heading"><p>Choose a reply:</p></div>
<div class="dialogue-container button">
<div class="dialogue option-divider"><p>Option one here</p></div>
</div>
<div class="dialogue-container button">
<div class="dialogue option-divider"><p>Option two here</p></div>
</div>
<div class="dialogue-container button">
<div class="dialogue option-divider"><p>Option three here</p></div>
</div>
<div class="dialogue-container button">
<div class="dialogue"><p>Option four here. As an example this text should be long enough to require wrapping to a new line. I will therefore have to keep typing until I've added enough text to sufficiently fill the horizontal with of the containing div. Also, thanks for potentially answering my question, which I will get to below...</p></div>
</div>
</div>
The problem is, when a piece of dialogue requires wrapping to a new line, the .dialogue-container .button div does not expand in height to match the height of the .dialogue div. The inner divs therefore extend past the border lines, which looks bad.
If anyone has any pointers, my computer will thank you.
Cheers.
#interaction-options-container .dialogue-container {
padding: 0px;
margin: 0px;
width: 100%;
//height: 32px;
background-color: #333333;
float: none;
}
I have a small template that displays a textarea and a close block.
I used Chrome to develop, but it looks different in other browsers.
That close button changes its location in FF and Opera.
<div class="video-box">
<textarea id="id_video" rows="10" cols="40" name="video" placeholder="Embed your video here." class="has- placeholder" style="display: inline-block;"></textarea>
<div class="close" style="display: block;">close</div>
</div>
CSS:
.video-box {
position: absolute;
margin-top: 25px;
}
textarea {
width: 256px;
border: 1px solid #C7C6C6;
height: 100px;
resize: none;
}
.close {
position: absolute;
font-family: Arial, Verdana, sans-serif;
top: 94px;
left: 222px;
z-index: 10;
font-size: 8px;
cursor: pointer;
background: white;
border: 1px solid #808080;
padding-top: 1px;
padding-left: 1px;
text-transform: uppercase;
letter-spacing: 2px;
}
What can cause this problem?
http://jsfiddle.net/3hTH2/
Couple of things to change.
First of all set font-size: 0; on .video-box, because it is inline-block extra whitespace can be added after the element:
.video-box {
position: absolute;
margin-top: 25px;
font-size: 0;
}
Next, set margin: 0; on text-area to reset the default margin added to the element by browsers:
textarea {
width: 256px;
border: 1px solid #C7C6C6;
height: 100px;
resize: none;
margin: 0;
}
Finally, use bottom: 0; and right: 0; instead of top and left on .close as it will ensure the button is positioned at the bottom right of the container no matter what size it is:
.close {
position: absolute;
font-family: Arial, Verdana, sans-serif;
bottom: 0;
right: 0;
z-index: 10;
font-size: 8px;
cursor: pointer;
background: white;
border: 1px solid #808080;
padding-top: 1px;
padding-left: 1px;
text-transform: uppercase;
letter-spacing: 2px;
}
http://jsfiddle.net/FVP6T/
All those browsers have different HTML rendering engines, so some minor changes are inevitable. It's almost impossible to get everything looking exactly the same in every browser; I wouldn't even try.
Try positioning from the right and bottom instead:
.close {
position: absolute;
right: 0;
bottom: 4px;
/* etc. */
}
Hidden Hobbes's solution is/was the closest but it may still be treated incorrectly by Firefox - at least in my case, 'cause I see it is placing the .close button 1px lower.
So check this solution. At least another one :) I changed the font size on .close button to 30px just to see the difference better.
#-moz-document url-prefix() {
.close {
margin-bottom: 1px !important; /* !important may be omitted */
}
}
.video-box {
position: absolute;
margin-top: 25px;
font-size: 0px;
}
textarea {
width: 256px;
border: 1px solid #C7C6C6;
height: 100px;
resize: none;
}
.close {
position: absolute;
font-family: Arial, Verdana, sans-serif;
bottom: 0px;
right: 0px;
z-index: 10;
font-size: 30px;
cursor: pointer;
background: white;
border: 1px solid #808080;
padding-top: 1px;
padding-left: 1px;
text-transform: uppercase;
letter-spacing: 2px;
}
.close:hover {
background: grey;
}
Check the working fiddle
I'm working with an AJAX Wordpress theme but the problem is not within the theme, to my knowledge, but with the codes I've added.
I'm using "Contact-Form-7" for a special drop-down box. I'm using it to create an easy access form for submission.
I've used these lines of code before but the problem that I'm having is the box will not show up when the button is clicked. Below is two links & the source code I used. Link 1 is the Ajax site where I'm adding this form. Link 2 is the same form that we've done but it works just fine. The button is at the top and it read's "request an appointment".
Link 1: http://www.geigerandwood.com
Link2: http://www.tobiasdental.com
Lines of code in the header:
<!-- BEGIN: FREE Estimates Form -->
<div class="center-wrap">
<section id="drop-down-content">
<h1>Request an Appointment</h1>
<?php echo do_shortcode('[contact-form-7 id="173" title="Drop Down"]'); ?>
</section>
<section id="drop-down">
<a id="drop-down-toggle">Request an Appointment</a>
</section>
</div>
<!-- END: FREE Estimates Form -->
Lines of code in the CSS:
/* Free Estimates Drop Down Box */
body #drop-down {
transition: top 0.5s;
-moz-transition: top 0.5s;
-webkit-transition: top 0.5s;
-o-transition: top 0.5s;
width: 700px;
background-color: #333333;
position: absolute;
top: -30px;
left: 0;
z-index: 10000;
padding: 20px 0 10px 0; }
body #drop-down-content:after{
content: "";
position: absolute;
top: -7px;
left: 133px;
width: 15px;
height: 7px;
background: url("images/dark-arrow-up.png") no-repeat 0 0;
}
body #drop-down form {
zoom: 1;
clear: both; }
body #drop-down form:before, body #drop-down form:after {
content: "";
display: block; }
body #drop-down form:after {
clear: both; }
body #drop-down div {
width: 250px;
float: left;
margin-right: 25px; }
body #drop-down div input{
width: 250px;
}
body #drop-down label {
display: block;
color: #eeeeee;
margin-bottom: 10px;
font-style: italic;
text-transform: uppercase;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); }
body #drop-down textarea {
height: 85px;
float: left;
margin-right: 25px; }
body #drop-down button {
float: left;
margin-left: 0;
font-size: 18px;
padding: 8px;
margin-top: 45px; }
body #drop-down.open {
top: 0; }
body #drop-down-toggle {
display: block;
text-indent: -9000px;
overflow: hidden;
background: url("images/topper_btn.png") no-repeat 0 0;
width: 243px;
height: 45px;
cursor: pointer;
position: absolute;
bottom: -44px;
right: 0; }
body #drop-down-content{
position: absolute;
display: none;
left: 440px;
top: 50px;
background-color: #333333;
padding: 18px;
border-radius: 5px;
z-index: 10000;
color: #fff;
font-weight: bold;
font-size: 14px;
}
body #drop-down-content input[type="text"]{
color: #521306;
font-size: 14px;
font-weight: bold;
font-family: "Swiss 721", Helvetica;
border: 3px solid #c5d0d7;
border-radius: 2px;
width: 247px;
}
body #drop-down-content input[type="file"]{
color: #521306;
font-size: 14px;
font-weight: bold;
font-family: "Swiss 721", Helvetica;
border: 3px solid #c5d0d7;
border-radius: 2px;
width: 247px;
}
body #drop-down-content p{
margin-top: 13px;
}
body #drop-down-content .wpcf7-submit{
background-color: #521306;
color: #fff;
float: right;
padding: 7px 12px;
font-size: 14px;
width: auto;
border: 0;
cursor: pointer;
}
/* Free Estimates Drop Down Box END */
In the code above, this is the following that is to be added automatically in the "section id='drop-down-content'" when the button is pressed:
<section id="drop-down-content" style="display: none;"> <!--button is not clicked-->
<section id="drop-down-content" style="display: block;"> <!--button is clicked-->
This only problem I'm having is to get this to perform that very action. I'm lost as to what I am missing. Any help would be appreciated.
In your dentist website there is a script named "application-ck.js" in which script is there to show-hide "drop-down-content" div. But there is no such click event for "geigerandwood.com" top form.