Google keeps giving me results based on fixing my phone, but the problem is on my website. This is a weird problem, but on a mobile device on my website, I can't click any buttons or links. desktop works fine, but mobile is having issues. I'm making this site directly on cpanel, so I don't know if there is some special code I need to add to detect mobile taps, I usually use wordpress, so I don't know a whole lot about making a website directly on mysqli. The mobile taps will work outside a container, but I need it to work inside my page container. its inside a <div> and a <pre>. I don't really understand the problem, here is what some of my code looks like:
Global Styles:
pre{
border: solid 3px #2b333d;
border-radius: 10px;
font-size: 15px;
color: #3c3d3c;
margin: 1%;
padding: 10px;
background: #eaeaea;
display: block;
font-family: monospace;
white-space: pre-wrap;
}
input{
border: solid 2px #2b333d;
border-radius: 10px;
font-size: 15px;
color: #3c3d3c;
margin: 1%;
padding: 8px;
background: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
white-space: pre-wrap;
outline: none;
display: inline-block;
}
input[type=button], input[type=submit], input[type=reset]{
border: solid 2px #142135;
border-radius: 10px;
font-size: 18px;
color: #f7f7f7;
margin: 1%;
padding: 5px 7px;
background: #5791ed;
font-family: Arial, Helvetica, sans-serif;
white-space: pre-wrap;
outline: none;
letter-spacing: 0;
display: inline-block;
}
form{
line-height: 0.2;
white-space: normal;
}
Page/Header Styles:
.page_m{
background: #fcfcfc;
width: 99.9%;
left: 0.1%;
z-index: -20;
top: 30px;
position: relative;
}
.page_inner_m{
padding: 20px;
z-index: -20;
position: relative;
font-family: Arial, Helvetica, sans-serif;
white-space: pre-wrap;
color: #2d2d2d;
letter-spacing: 0.5;
line-height: 1.55;
border: 0;
border-radius: 0;
font-size: 18px;
margin: 0;
background: none;
display: block;
}
scripts:
<?php
?>
<style>
<?php include 'header.css'; ?>
</style>
<?php
echo '<div class="page_m">';
?>
<style>
<?phpinclude 'style_m.css';?>
</style>
<?php
echo '<pre class="page_inner_m">';
//header start
echo '<div class="menu_m">';
$host = $_SERVER['HTTP_HOST'];
preg_match("/[^\.\/]+\.[^\.\/]+$/", $host, $matches);
$domain = "{$matches[0]}\n";
echo '<center class="title_m">'.$domain.'</center>';
echo '</div>';
//header end
echo '</pre></div>';
echo '</div>';
?>
Fixed it :D just needed to replace echo '<pre class="page_inner_m">'; with echo '<body class="page_inner_m">'; and replace echo '</pre></div>'; with echo '</body></div>';
I'll keep this up incase anyone else finds it helpful. switching the <pre> tag with a <body> tag solved the problem for me.
Related
I'm using php to display an error message to the user. The code is sitting at the top of the page and once the error message displays, it affects the height of my textboxes. I coded the height in a style sheet. Also, my error message is sitting inside of a div. I tried using the span tag but that isn't working either since its still sitting at the top line of the page. This is the error message in php:
if($result != "")
{
echo "<div id='Error'>";
echo "<b>The following errors occured:</b><br>";
echo $result;
echo "</div>";
}
Registration div css:
#RegBody
{
background-color: white;
background-image: url(LilyPads.jpg);
height: 82.7vh;
}
#RegContents
{
position: absolute;
margin: 39px auto 0 402px;
border-radius: 20px;
background-color: white;
width: 500px;
height: 455px;
padding-left: 57px;
}
#RegisterUser
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
margin-top: 14px;
margin-left: 112px;
color: #1A3D5B;
width: 215px;
height: 30px;
color: white;
background-color: #1A3D5B;
border-color: #1A3D5B;
border-style: solid;
border-radius: 20px;
}
Error message css:
#Error
{
position: absolute;
background-color: white;
border: 2px solid red;
border-radius: 20px;
width: 200px;
padding: 15px;
margin: 147px 0 0 70px;
color: red;
}
Here's the css for the textboxes:
input[type='text']
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-indent: 10px;
width: 210px;
height: 25px;
border-color: #1A3D5B;
border-style: solid;
border-radius: 20px;
}
Before the error message:
I was thinking that maybe its the font size that's the issue but regardless...a white line also appears at the bottom of the page:
Please have patience with me. I'm a student and new to php. Thank you
i can tell you how to rectify the error (though i am still looking for the reason because of which it happens).
what i did is that i inserted the php code inside body tag and it work fine no change in Textbox dimensions.Below is the code i wrote to prove the same
<?php
$result=1;
echo "<div id='Error'>";
echo "<b>The following errors occured:</b><span>";
echo $result;
echo "</span></div>";
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input[type='text']
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-indent: 10px;
width: 210px;
height:25px;
border-color: #1A3D5B;
border-style: solid;
border-radius: 20px;
}
</style>
</head>
<body>
<input type='text' name=''>
</body>
</html>
This question already has answers here:
Make a div into a link
(30 answers)
Closed 2 years ago.
I am trying to get my whole div a clickable link but I am not sure the correct way to do it. Would anyone be able to help me with this, it would be greatly appreciated. I am new to coding so I am still learning proper coding. Thanks.
.container {
display: flex;
margin: auto;
width: 1052px;
}
.container>div {
background-color: #ffffff;
border: 1px solid #aaaaaa;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
flex: 1;
/*grow*/
height: 210px;
margin: 45px 10px 0px 10px;
width: 231px;
}
.container img {
height: 140px;
width: 241px;
}
.container>div a {
color: #353748;
display: block;
font-family: Netflix Sans, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 5px 10px 5px 10px;
text-decoration: none;
text-overflow: ellipsis;
text-transform: initial;
}
.container>div a:hover {
color: #353748;
display: block;
font-family: Netflix Sans, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 5px 10px 5px 10px;
text-decoration: underline;
text-overflow: ellipsis;
text-transform: initial;
}
<div class="container">
<div>
<img src="https://capebretonstartpage.com/1/wire-31023566-1595346165-638_636x382.jpg">
About vAdd An Image Add An Image
</div>
<div>
<img src="https://capebretonstartpage.com/1/wire-31023566-1595346165-638_636x382.jpg">
About vAdd An Image Add An Image
</div>
<div>
<img src="https://capebretonstartpage.com/1/wire-31023566-1595346165-638_636x382.jpg">
About vAdd An Image Add An Image
</div>
</div>
You can put the div inside an <a> tag
I am working in wordpress and I have this menu with 4 menu items.
The problem is that they are touching each other and there is 0
space between which makes it ugly in my opinion.
Now this problem only
occurs in wordpress. So I have to find a solution how to put some space between.
Maybe you guys know a solution without having to install something on WP.
(the codes in the body is exactly as in my wordpress to demonstrate how it looks like. You can enter it and that will put some space between, but unfortunately that doesn't work in wordpress.)
<style>
.smallmenu {
margin: 0 auto;
max-width: 436px;
width: 100%;
}
.Capital {
margin: 0px 0 -5px 0;
line-height: 63px;
font-size: 60px;
font-weight: ligter;
}
.smalltext {
text-align: center;
margin-top: 0px !important;
font-weight: 100px;
font-size: 14px;
}
.smalltextpub {
text-align: center;
margin-top: 0px !important;
font-weight: 100px;
font-size: 14px;
margin-left: -5px;
}
.cornermenu {
display: inline-block;
margin: auto;
border-radius: 25px;
background: #769DBD;
padding: 20px;
width: 100px;
height: 100px;
text-align: center;
color: #fff;
font-family: Arial;
padding-top: 10px;
text-decoration: none;
}
#hoverr:hover {
border-radius: 25px;
background: #464646;
padding: 20px;
width: 100px;
height: 100px;
text-align: center;
color: #fff;
font-family: Arial;
padding-top: 10px;
text-decoration: none;
}
* {
box-sizing: border-box;
}
</style>
<div class="smallmenu"><a id="hoverr" class="cornermenu" href="#methods"><span class="Capital">M</span>
<span class="smalltext">Methods</span></a><a id="hoverr" class="cornermenu" href="#background"><span class="Capital">B</span>
<span class="smalltextpub">Background</span></a><a id="hoverr" class="cornermenu" href="#results"><span class="Capital">R</span>
<span class="smalltext">Results</span></a><a id="hoverr" class="cornermenu" href="#publications"><span class="Capital">P</span>
<span class="smalltextpub">Publications</span></a></div>
Just set a fixed margin on .cornermenu.
Something like margin: 2px
JSFiddle link
.cornermenu {
...
margin: 2px;
...
}
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.
I'm using this WP theme and I'm struggeling to adjust the code so that the Title and Description in the content boxes only show on hover (at the moment they're always displayed and hover just makes the image go darker).
Here are the codes in question (as far as I can tell):
.home_featured_post_last { margin-right: 0; }
.home_featured_post_hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-decoration: none; border-radius: 5px; }
.home_featured_post_hover:hover { background: url('images/trans-back.png') repeat; text-decoration: none; border-radius: 5px; }
.home_featured_post_tbl { display: table; width: 100%; height: 100%; }
.home_featured_post_tbl_cell { display: block; text-align: center; vertical-align: middle; color: #fff; text-shadow: 1px 1px #000; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #fff; letter-spacing: 1.5px; font-weight: 400; }
.home_featured_post_tbl_cell h3 { text-shadow: 1px 1px #000; font-size: 19px; font-family: Arial, Helvetica, sans-serif; color: #fff; letter-spacing: 1.5px; font-weight: 700; }
<a class="home_featured_post_hover" href="<?php the_permalink(); ?>">
<div class="home_featured_post_tbl">
<div class="home_featured_post_tbl_cell">
<h3><?php the_title(); ?></h3>
<p><?php echo ds_get_excerpt('40'); ?></p>
</div><!--//home_featured_post_tbl_cell-->
</div><!--//home_featured_post_tbl-->
</a><!--//home_featured_post_hover-->
As suggested in some other posts, I've tried adding visibility: hidden; and visibility: visbile; to the CSS in various different combinations but either it just hides the text completely or it doesn't work at all. Does this have to do with how the PHP code is formated? Any thoughts on how to do this?
Sorry if this is really obvious - I can't work it out.
Try adding these CSS lines... if you want a smoother effect, you can add the css transition property!
a.home_featured_post_hover .home_featured_post_tbl_cell { opacity:0; }
a.home_featured_post_hover:hover .home_featured_post_tbl_cell { opacity:1; }
What this does is basically make the title/desc div transparent, then show it when the mouse is over the link.