As you can see from the picture above , my button will not line properly if they had content inside them.
Please enlighten me why
[ EDIT ]
CSS
.button {
position: relative;
background-color: #4CAF50;
border: 2px solid black;
color: #FFFFFF;
padding: 0;
width: 250px;
height: 200px;
text-align: center;
font-size: 20px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
margin-bottom: 2px;
}
and here is my button
<button class="button" id="Btn2"><span>(2)<br><?php
$id=$_GET['room'];
$day="02";
$month=date("m");
$year=date("Y");
( SQL retrieve data )
$i=1;
while ($reserve = mysqli_fetch_array($result2)){ echo $i.". ".$reserve['room_name']." ".$reserve['start_time']." - ".$reserve['end_time']."<br>";
$i++;
}
?> </span></button>
the answer would be css styling ,
which is
vertical-align:bottom;
Related
I followed a guide on the internet to implement a search bar on top of my navigation bar and responsive, but i have a problem when viewing with mobile, my search box button is at below of my search box.
something like this.
here is my code in HTML
<div class="search-container">
<form action="/">
<input type="text" placeholder="seach..." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
and my css
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav span, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
How can I make the button in mobile view to be at the same row beside at right of my search box?
display: block; makes both input and button "put newline after", also they both are width: 100%; which is bad for both elements, if you make them inline-block (they already are by default) and set width that both fits, they be next to each other.
For example like this:
body, html { /* just example */
margin: 0;
padding: 0;
background-color: grey;
}
.topnav:after { /* clearfix so the .topnav container keeps its size properly */
content: "";
clear: both;
display: table;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
/* no need for float: right; here, you can comment-out the whitespace in html */
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
text-align: center;
/* non-flex version require harcoded width (unless you correct it with javascript) */
width: 40px;
}
.topnav .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav .search-container input[type=text] {
border: 1px solid #ccc;
padding: 14px;
/* padding (left+right), border (left+right), button width */
width: calc(100% - 28px - 2px - 40px);
/* bit easier like that: */
/*
box-sizing: border-box;
width: calc(100% - 40px);
*/
}
.topnav .search-container button {
margin-right: 0;
/* correcting height difference between input[type=text] with border and button without border */
padding: 15px 14px;
}
}
<div class="topnav">
<div class="search-container">
<form action="/">
<input type="text" placeholder="seach..." name="search"><!--
--><button type="submit"><i class="fa fa-search">...</i></button>
</form>
</div>
</div>
There is major disadvantage with that aproach and that is the need of hardcoded width of button.
Another way is to use position: absolute;, old fashion but simple, for example like this:
// little demonstation of variable width
var times = 4;
setInterval(function(){
document.querySelector('button>i').innerText = '.'.repeat(times++);
if(times>6){ times = 3; }
}, 1000);
body, html { /* just example */
margin: 0;
padding: 0;
background-color: grey;
}
.topnav:after { /* clearfix so the .topnav container keeps its size properly */
content: "";
clear: both;
display: table;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
/* no need for float: right; here, you can comment-out the whitespace in html */
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
text-align: center;
}
.topnav .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav .search-container input[type=text] {
border: 1px solid #ccc;
padding: 14px;
box-sizing: border-box;
width: 100%;
}
.topnav .search-container button {
position: absolute;
top: 0;
right: 0;
margin-right: 0;
/* correcting height difference between input[type=text] with border and button without border */
padding: 15px 14px;
}
}
<div class="topnav">
<div class="search-container">
<form action="/">
<input type="text" placeholder="seach..." name="search"><!--
--><button type="submit"><i class="fa fa-search">...</i></button>
</form>
</div>
</div>
Or you can use flex-box, which is modern and more flexible, for example like this:
// little demonstation of variable width
var times = 4;
setInterval(function(){
document.querySelector('button>i').innerText = '.'.repeat(times++);
if(times>6){ times = 3; }
}, 1000);
body, html { /* just example */
margin: 0; padding: 0;
background-color: grey;
}
.topnav:after { /* clearfix so the .topnav container keeps its size properly */
content: "";
clear: both;
display: table;
}
.topnav .search-container {
float: right;
}
/* following two blocks are most imporant */
.topnav .search-container form {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
.topnav .search-container input[type=text] {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
/* no need for float: right; here, you can comment-out the whitespace in html */
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
text-align: center;
/* no need for hardcoded width */
}
.topnav .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav .search-container input[type=text] {
border: 1px solid #ccc;
padding: 14px;
}
.topnav .search-container button {
margin-right: 0;
padding: 14px; /* height is automatically corrected by flex */
}
}
<div class="topnav">
<div class="search-container">
<form action="/">
<input type="text" placeholder="seach..." name="search"><!--
--><button type="submit"><i class="fa fa-search">...</i></button>
</form>
</div>
</div>
I am setting up an ID card printing software in PHP both for landscape and portrait mode. The problem is with the print() command it always takes the standard page sizes A4, A3... Because of this it prints the id in a specific section of the card.
Can anyone help or recommend something? Perhaps there is another way to print it without print preview in chrome?
<style>
#page {
/*size: A5;
margin: 5px;*/
width: 53.98mm;
height: 85.60mm;
margin: 0px;
}
#media print {
html, body {
/*width: 210mm;
height: 297mm;*/
/*width: 218mm;
height: 340mm;*/
}
}
#printablediv {
width: 53.98mm;
height: 85.60mm;
}
.idcardreport {
font-family: arial;
-webkit-print-color-adjust: exact;
}
/*IDcard Front Part Css Code*/
.idcardreport-frontend{
margin: 2px;
float: left;
border: 1px solid #000;
padding: 10px;
width: 260px;
text-align: center;
height:370px;
background-size: 100% 100% !important;
}
.logo img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.pick img{
width: 60px;
height: 80px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.signe img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
h3 {
font-size: 14px;
color: #1A2229;
text-align: center;
}
h2 {
font-size: 10px;
color: #1A2229;
text-align: center;
}
h1 {
font-size: 18px;
color: #1A2229;
text-align: center;
}
p {
text-align: left;
font-size: 12px;
margin-bottom: 0px;
margin-top: 1px;
color: #1A2229;
}
.vertical{
writing-mode:tb-rl;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform:rotate(180deg);
transform: rotate(180deg);
white-space:nowrap;
display:block;
bottom:0;
}
</style>
<style>
#media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0px;
/*right: -400px;*/
top: 0;
}
}
button.btn.btn-dark {
padding: 10px;
position: relative;
top: -390px;
}
</style>
<button type="button" class="btn btn-dark" onclick="window.print()"><i class="fa fa-print"></i> Print</button>
<div class="wrapper" id="section-to-print"></div> //add ID on the section u want to print
As you can see in the images, the text "English" isn't vertically centered in the WordPress version of the site I'm building but with the same code as I used in the HTML version it works perfectly. Any ideas why?
HTML
<div class="right-bar">
<a class="language">
<img src="img/flags/EN-us.png" alt="English / US">
<span>English</span>
</a>
<a class="search-btn">
<i class="fa fa-search"></i>
</a>
</div>
SASS
.right-bar {
background: #1f1f1f;
float: right;
height: 100%;
padding: 32px 20px 0;
position: relative;
&::after {
position: absolute;
top: 0;
right: 100%;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 98px 83px;
border-color: transparent transparent #1f1f1f;
}
.language {
border: 1px solid #363636;
border-radius: 40px;
color: #898989;
display: block;
float: left;
height: 34px;
font-size: 10px;
font-weight: 700;
line-height: 30px;
padding: 0 20px;
position: relative;
text-transform: uppercase;
z-index: 99;
}
.search-btn {
float: left;
display: block;
margin: 0 0 0 30px;
color: #fff;
font-size: 26px;
font-weight: 400;
transition: color .2s;
&:active {
color:#8eb82f;
}
}
}
SCSS
.language{
img{
vertical-align:middle;
}
}
This may help you.
I badly need help with my css coding. newbie here.
#accountTitle
padding: 0;
display: block;
margin-top: 90px;
margin-bottom: -120px;
margin-left: 50px;
font-size: 36px;
a:active
background-color: #a6d8a8;
table
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 50px;
overflow-x:auto;
td
text-align:left;
th, td
padding: 15px;
th
background-color: #4CAF50;
color: white;
text-align: center;
tr:hover
background-color: #a6d8a8;
cursor: pointer;
#container
margin-top: 135px;
position: relative;
padding: 0;
overflow: hidden;
background-color: #333;
border-radius: 10px;
width: 100%;
.wrap
margin-right: 10px;
text-align: center;
.dropbtn
background-color: #333;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
.dropdown
position: relative;
display: inline-block;
margin-right: 5px;
.dropdown-content
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
.dropdown-content a
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
.dropdown-content a:hover
background-color: #f1f1f1
.dropdown:hover .dropdown-content
display: block;
.dropdown:hover .dropbtn
background-color: #434343;
<label id="accountTitle">Audit Log</label>
<div id="container">
<div class="wrap">
<div class="dropdown">
<button class="dropbtn" id="homebtn">Home</button>
<div class="dropdown-content">
Main Page
Accounts
Audit Log
Logout
</div>
</div>
The problem here is that, whenever I scroll down this happens
please i really need to finish this.
take the overflow out of #container and change the position on .dropdown-content to absolute
#container {
...
padding: 0;
/* overflow: hidden; DELETE THIS */
background-color: #333;
...
}
.dropdown-content {
display: none;
position: absolute;
...
}
Reduce the padding of .dropdown-content a should be like this
.dropdown-content a
{
color: black;
padding: 0px 16px;
text-decoration: none;
display: block;
text-align: left;
}
I do not understand the problem very well but if the problem is that dropdown is not appearing at all then you have to change your .dropdown:hover .dropdown-content like this.
.dropdown:hover .dropdown-content{
display: block;
z-index: 1;
}
z-index change html rendering priority according to the number it has, the bigger number is the bigger the priority is.
I have a problem with mapping together table and form. In my table I have some values that with help of a form I want to redirect to a page.I have read that I cannot put a form into a table so I tried not to. But if I let
<form>
<table>
structure, my display on page isn't very nice and I am not responsabile with frontend part but anyway I want to not be problems with it.If I let the table, without the form the display is ok(like in image). An image in left page and the table with the information in the right part. When using form, the table goes down and it's not good. So how to do? I try to include an image here to see how my page looks like without the form, but I really need to use the form. Any suggestion how to resolve this?I mean it's possible to have the display like in the photo but plus using a form and to not change the display?
EDIT: the css where tables are displayed
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
}
table th {
padding-right: 40px;
}
html {overflow-y: scroll; overflow-x: hidden;}
body {font-family: 'Open Sans', sans-serif; background:#f0eeed; color: #676767;}
.wrapper {width: 980px; margin: 0 auto;}
#content {padding: 20px 0 80px;}
.header:after {content:"";height:0;display:block;visibility:hidden;clear:both;}
.header {background: #ef8887; border-bottom: 3px solid #db7a78;}
.header .branding-title {float: left; margin: 0 0 0 5px; font: 0/0 serif; text-shadow: none; color: transparent; width:225px; height:125px;background:url(../img/branding-title.png) 0 6px no-repeat;padding: 6px 0;}
.header .branding-title a {display: block; height: 125px; width: 225px;}
.header .nav {float: right; top: 10; right: 0; margin: 0; position: relative; left: 15px; z-index: 99999999;}
.header .nav li {display: inline-block; margin: 0; list-style: none;}
.header .nav li a {
color: white;
text-decoration: none;
display: block;
line-height: 95px;
padding: 10px 0 0;
margin: 0 0 0 50px;
width: 100px;
text-align: left;
background: url('../img/nav-sprite.png') no-repeat 0px 105px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1px;
}
.header .nav li.on a {text-decoration:underline;}
.header .nav li a:hover, .header .nav li a:active {opacity: 0.7;}
.header .nav li.books a {background-position: 8px -5px;}
.header .nav li.movies a {background-position: 13px -105px;}
.header .nav li.music a {background-position: 15px -235px;}
.header .nav li.suggest a {background-position: 35px -340px;}
#content {min-height: 400px; background: white;}
.section.page:after {content:"";display:block;visibility:hidden;height:0;clear:both;}
.section.page {padding: 34px 0; background: white;}
.section.page h1 {
font-size: 24px;
text-align: center;
line-height: 1.6;
font-weight: normal;
}
.section.page .media-details h1 {
text-align: left;
}
.section.page p {width: 475px; margin-left: auto; margin-right: auto; }
.section.page .media-details h1 .price {color: #9d9f4e; padding-right: 10px; font-size: 34px;}
.section.catalog {padding-bottom: 42px;}
.section.catalog h2 {
font-size: 24px;
text-align: center;
line-height: 1.6;
font-weight: normal;
padding-top: 20px;
}
.section.catalog ul.items {margin: 0 0 -17px 0; padding: 0; width: 997px;}
.section.catalog ul.items li {
display: inline-block;
list-style: none;
width: 204px;
text-align: center;
padding: 14px;
margin: 0 0 17px 17px;
position: relative;
left: -17px;
}
.section.catalog ul.items li a:hover:after {
content: '+';
font-size: 50px; position: absolute; top:35px; right:30px; color: #3888c2; vertical-align: top;
}
.section.catalog ul.items li a {
background: white;
display: block;
padding: 30px 0 10px;
text-decoration: none;
}
.details-button {
color: #888;
}
.section.catalog ul.items li a:hover {
opacity: 1;
color: #666;
}
.section.catalog ul.items li img {
width: 190px;
border: 6px solid #f0eeed;
}
.section.catalog ul.items li p {
margin-left: 0;
margin-right: 0;
width: auto;
}
.media-picture {
float: left;
width: 400px;
text-align: center;
border: 1px solid #d9d9d9;
padding: 14px;
background: #f0eeed;
}
.media-picture span {
background: white;
display: block;
width: 100%;
padding: 36px 0 61px;
}
.media-picture img {width: 292px;}
.media-details {
width: 460px;
float: right;
}
.media-details form {
margin-left: 0;
}
td, th {
padding: 5px 5px;
}
form {width: 475px; margin: 34px auto;}
form tr, tr {text-align:left;vertical-align: top; padding:2px;}
form table {width: 475px; margin-bottom: 16px;}
form th {
width: 150px;
vertical-align: middle;
padding: 8px;
}
form td {
padding: 15px 15px;
}
form td select,
form td input,
form td textarea {
width: 100%;
border-radius: 4px;
padding: 10px;
border: 1px solid #a5a5a5;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
form input[type="submit"] {
width: 475px;
text-align: center;
border: 0;
background: #3888c2;
color: #FFF;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 16px;
padding: 14px 0 16px;
font-family: 'Open Sans', sans-serif;
}
form input[type="submit"]:hover {
background: #358dce;
cursor: pointer;
}
.search {
background: #f0eeed;
border-bottom: 3px solid #dddddd;
width:100%;
text-align:right;
}
.search form {
margin: 5px 5px 5px auto;
}
.search form input[type="submit"] {
width: auto;
text-align: center;
border: 0;
background: #3888c2;
color: #FFF;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 16px;
padding: 6px;
font-family: 'Open Sans', sans-serif;
}
.page p.message {
background: #ffeca4;
border: 1px solid #f16702;
padding: 1em;
width: 444px;
}
.breadcrumbs {
font-size: 14px;
font-weight: normal;
padding: 14px 0 48px;
}
.breadcrumbs a {
text-decoration: none;
color: #3888c2;
}
.note-designer {
font-size: 14px;
font-style: italic;
font-weight: bold;
}
.footer {
background: #f0eeed;
border-top: 3px solid #dddddd;
padding: 42px 0;
font-size: 12px;
color: #a5a5a5;
}
.footer ul {margin: 0; padding: 0; float: left;}
.footer ul li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.footer ul li:after {content:" | "}
.footer ul li:last-child:after {content:"";}
.footer p {margin: 0; padding-right: 3px;}
.footer a {text-decoration: none; color: #539def; margin: 0 10px;}
.footer li:first-child a {margin-left: 4px;}
.footer a:hover, .footer a:active {text-decoration: underline;}
sorry for the long code but this is what I found in style css
As mentioned previously, avoid using tables for anything but actual tabular data. Using it to position elements on the page is unpredictable at best.
You said that you aren't responsible for the front end, but do you have access to the HTML? I'm sure many of us could give you some helpful suggestions but we need a reference point beyond a screenshot :).
You might want to check out how some CSS frameworks handle this, it might give you some inspiration (http://getbootstrap.com/css/#forms). I'm not a big Bootstrap guy but there are a lot of basic examples here on form / table formatting.
You should be able to put just about anything inside a form tag without affecting the way anything on the page looks. Assuming you can't just stop using tables asap, you may have to play around with the css to clean this up. If the form tag is affecting the way anything embedded inside it looks then you might have something in your CSS styling the form element. If possible I would eliminate this styling if it exists.