I'm having a problem with the small grey caps lock notifiaction image that comes up when you click in a password field and turn on caps lock. Mines showing outside the box about twenty pixels to the right of it. This is causing an obstruction so the user cant see a div layer thats in that position.
Can someone please tell me why mine isnt showing inside the password field and how i can get it inside?
My HTML form has been edited with css to display an image background over the boxes so i imagine its to do with the css.
But i cant find anything related to it. Thanks.
Code:
<style>
#main{
width:440px;
height:0px;
margin-top:1px;
margin-left:10px;
margin-bottom:0px;
position:relative;
text-align:left;
}
#main form{
width:440px;
height:0px;
padding-bottom:0px;
}
#main form .row{
position:relative;
}
#main form .row.error:after,
#main form .row.success:after{
content:'';
position:absolute;
right: 60px;
top: 8px;
width:32px;
height:32px;
background:url('../img/icons.png') no-repeat;
margin-right:50px;
}
#main form .row.error:after{
background-position: 0 -79px;
}
#main form input[name=email],
#main form input[name=password]{
border:none;
background:url('http://www.playtimeboys.com/img/form/text-boxes.png') no-repeat top left;
font:14px 'Segoe UI','Arial',sans-serif;
color:#888;
outline:none;
height: 48px;
margin-top:22px;
margin-left:-10px;
padding: 0 10px 0 50px;
width: 350px;
}
#main form .email input{
background-position:0 -96px;
}
#main form .email input:focus{
background-position:0 -144px;
}
#main form .password input{
background-position:0 -193px;
}
#main form .password input:focus{
background-position:0 -241px;
}
/*----------------------------
The Submit Button
-----------------------------*/
#main form input[type=submit]{
border: 1px solid #004C9B;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3);
color: #D3EBFF;
cursor: pointer;
display: block;
font: bold 24px Cambria,"Hoefler Text",serif;
margin-top: -46px;
margin-left:360px;
padding-top: 7px;
padding-bottom: 10px;
text-shadow: 0 -1px 0 #444444;
width: 100px;
height:45px;
position:absolute;
z-index:100;
background-color:#0496DA;
background-image: linear-gradient(top, #0496DA 0%, #0067CD 100%);
background-image: -o-linear-gradient(top, #0496DA 0%, #0067CD 100%);
background-image: -moz-linear-gradient(top, #0496DA 0%, #0067CD 100%);
background-image: -webkit-linear-gradient(top, #0496DA 0%, #0067CD 100%);
background-image: -ms-linear-gradient(top, #0496DA 0%, #0067CD 100%);
}
#main form input[type=submit]:hover{
background-color:#0383d3;
background-image: linear-gradient(top, #0383d3 0%, #004c9b 100%);
background-image: -o-linear-gradient(top, #0383d3 0%, #004c9b 100%);
background-image: -moz-linear-gradient(top, #0383d3 0%, #004c9b 100%);
background-image: -webkit-linear-gradient(top, #0383d3 0%, #004c9b 100%);
background-image: -ms-linear-gradient(top, #0383d3 0%, #004c9b 100%);
position:absolute;
z-index:100;
}
#main form input[type=submit]:active{
background-color:#026fcb;
background-image: linear-gradient(top, #026fcb 0%, #004c9b 100%);
background-image: -o-linear-gradient(top, #026fcb 0%, #004c9b 100%);
background-image: -moz-linear-gradient(top, #026fcb 0%, #004c9b 100%);
background-image: -webkit-linear-gradient(top, #026fcb 0%, #004c9b 100%);
background-image: -ms-linear-gradient(top, #026fcb 0%, #004c9b 100%);
position:absolute;
z-index:100;
}
</style>
</head>
/*----------------------------
The HTML
-----------------------------*/
<body>
<div id="main">
<form action="login.php" method="post" >
<div class="row email">
<input type="email" id="email" name="email" placeholder="Email" value="<?php echo htmlentities($email); ?>" />
</div>
<div class="row password">
<input type="password" id="password" name="password" placeholder="Password" value="<?php echo htmlentities($email); ?>" />
</div>
<input type="submit" name="submit" value="Login >" />
</form>
</div>
</body>
</html>
The problem is in this section:
#main form input[name=email],
#main form input[name=password]{
[...snip...]
height: 48px;
margin-top:22px;
margin-left:-10px;
padding: 0 10px 0 50px;
width: 350px;
}
You have the field set too wide; the capslock image normally shows up inside the text field. Also, the height of the content-box is too large, and makes the notifier show up extra large. Try instead:
height: 28px; // height of image - 20px
margin-top:22px;
margin-left:-10px;
padding: 10px 10px 10px 50px; // extra 20px of padding on height
width: 280px; // proper width of image, so contents don't overflow
To understand why this was happening, it helps to remember that even tough you styled over the text filed, it's still in there somewhere; and the actual bounds of the underlying textfield are harder to see once you've applied a style. If you find some formatting of textfields or other form widgets to be acting up, it can help to disable the styles that changed them from the default appearance, such as border:none; and see what the system thinks the widget looks like. From there it can be easier to spot where the error is.
Related
I want to display search button and text box in same line but I have problem that search button is displaying slight below from textbox.I attched my code in snippet please run It in full screen It will help you to understand my problem
.outer {
margin-left: 20%;
margin-top: 1%;
margin-bottom: 3%;
height: 737px;
width: 60%;
box-shadow: 10px 10px 5px #888888;
border: 1px solid #f9f2f2;
border-radius: 10px;
}
button.logout{
display:inline;
float:right;
margin-right:10px;
margin-left: 5px;
}
.lout{
float: right;
display: inline-block;
margin-top:20px;
}
.log {
width:60%;
height: 10%;
position:absolute;
border: 1px solid #f9f2f2;
border-radius: 10px;
background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(top, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 0px solid #f9f2f2;
text-align: center;
line-height:20px;
border-width: 0px 0px 1px 1px;
display:inline-block;
}
.rest {
padding:7%;
height: 580px;
background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(top, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 1px solid #f9f2f2;
border-width: 0px 0px 0px 0px;
border-radius: 0px 0px 10px 10px;
padding: 10% 7px;
}
.sidemenu {
float: left;
margin-top: 140px;
width: 100%;
}
.content {
}
.side{
width: 24%;
float: left;
display: inline-block;
}
form[name=profile] p {
padding-left: 20%;
}
hr {
margin: 0;
width: 1px;
height: 658px;
border: 0;
background: #fff;
float: left;
}
.astext {
background:none;
border:none;
margin:0;
padding:0;
cursor:pointer;
color:#000000;
line-height:35px;
font-family:arial;
font-size:13px;
font-weight:bold;
}
a.astext:link,a.astext:visited {
color:black;
background-color:transparent;
text-decoration:none;
}
a.astext:hover,a.astext:active {
color:black;
background-color:transparent;
text-decoration:none;
}
.menu{
height: 45px;
text-align:left;
margin-left:2px;
background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(top, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 1px solid #f9f2f2;
border-width: 0px 0px 0px 0px;
border-radius: 0px 0px 10px 10px;
text-align: left;
padding: 0px 7px;
}
.menu:hover{
background: -o-linear-gradient(top, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center bottom, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(bottom, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 1px solid #f9f2f2;
border-width: 0px 0px 0px 0px;
border-radius: 0px 0px 10px 10px;
text-align: left;
padding: 0px 7px;
}
input[type=text],textarea{
float:right;
margin-right:20%;
}
.search{
display:inline;
float:right;
margin-right:5px;
margin-bottom:5px;
}
.add{
display:inline;
float:right;
margin-top:5px;
margin-right:4px;
margin-left: 5px;
}
input[type='text'] {
display: inline-block;
float: left;
margin-left:29%;
}
p.s{
margin-left: 350px;
}
.sxt{
float: right;
}
h3{
text-align:center;
}
h1{
float:left;
margin-left: 28%;
}
<div class="outer">
<div class="log">
<!--<h1>Profile</h1> -->
<form method="post" class="lout" ><button class="logout" name="logout" >Logout</button>
</div> <!--End of log div -->
<div class="rest">
<div class="side">
<div class="sidemenu">
<div class="1 menu">
Profile
</div> <!--End of menu1 -->
<div class="2 menu">
Clients
</div> <!--End of menu 2-->
<div class="3 menu">
Employees
</div> <!--End of menu 3-->
<div class="menu 4">
Documents
</div> <!--End of menu 4-->
</div> <!--End of side menu -->
</div> <!--End of side div -->
<hr>
<!-- <div class="heading" >
<h1>Profile</h1>
</div> End of heading div -->
<div class="content">
<form method="post" name="profile" id="profile"> <h1>Clients List</h1><button name="add" style="align:right;" class="add">Add</button>
<br><br><br>
<p style="align:right;" class="s">
<input class="stxt" type="text" size=20 name="searchtxt">
<button name="search" class="search">Search</button></p>
</div> <!--End of content -->
</div> <!--End of rest div -->
</div> <!--End of outer div-->
change these codes in your css:
input[type='text'] {
display: inline-block;
float: left;
margin-right: 0;
/* margin-left: 29%; remove this line*/
}
p.s {
margin-left: 50px;
width: 280px;
}
.search {
display: inline-block;
float: right;
margin-right: 5px;
margin-bottom: 5px;
}
this is the fiddle : http://jsfiddle.net/ub8888sd/1/
or even change <p class="s"></p> to a div:
<div class="s"></div>
and in css:
div.s {
margin:0 auto;
width: 215px;
}
http://jsfiddle.net/ub8888sd/5/
I just want my button to look awesome but I don't know how to apply styles or to put class on a button like this http://i.stack.imgur.com/EFvzg.jpg
<?php echo form_submit('submit', 'Submit');?>
I want to put this css properties to my button to make it look like this http://i.stack.imgur.com/JmFLI.jpg..
.btnBack{
background: #3498db;
border: solid 1px;
border-color: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
color: #ffffff;
font-size: 15px;
padding: 5px;
width: 100px;
text-decoration: none;
vertical-align: middle;
}
please teach me how to do it.. thanks
if this is code igniter:
form_submit('submit', 'Submit',"class='btnBack'");
Try this
echo form_submit('submit', 'Submit',"class='btnBack'");
Create the class in your css file, and call it "buttonSubmit" (or whatever you prefer_ and add it like so -
<?php echo form_submit('submit', 'Submit','class=buttonSubmit'); ?>
I'm assuming this is the CodeIgniter form_submit function - per the docs for the form_submit function, https://ellislab.com/codeigniter/user-guide/helpers/form_helper.html, "the third parameter lets you add extra data to your form, like JavaScript.", so you can pass a string with a class as the third parameter (and any other additional attributes you want to add) like this:
echo form_submit('submit','Submit','class="btnBack"');
You can alternatively pass an array as the first parameter to achieve the same, if you prefer that syntax.
echo form_submit(array('name' => 'submit','value' => 'Submit','class' => 'btnBack'));
Try this code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.btnBack{
background: #3498db;
border: solid 1px;
border-color: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
color: #ffffff;
font-size: 15px;
padding: 5px;
width: 100px;
text-decoration: none;
vertical-align: middle;
}
</style>
</head>
<body>
<?php
function form_submit($type, $value, $style){
echo "<form action='#' method='post'>";
echo "<input type='$type' value='$value' class=$style";
}
form_submit('submit', 'Submit', 'btnBack');
?>
</body>
</html>
I'm developing a page that outputs an image and then in turns allows a user to share/tweet/... their image. All works fine except for one thing, the Sharrre buttons won't centralise in the page.
I've tried all-sorts, from the usual wrapping the divs in a parent div that has style rules of width: 100%; margin: 0 auto; all the way to text-align: center in a last ditched attempt of hope but all to no avail. Seeing as I'm using jQuery Mobile, I've even gone down the route of utilising a grid in an attempt, but still those pesky buttons glue to the left of the page as if a cliff sits in between there and the center. Has anyone any idea!? I've created a JSBin to demonstrate the problem (JSFiddle is down) - http://jsbin.com/qeqowofu/1/edit
Sharrre Github: https://github.com/Julienh/Sharrre/blob/master/jquery.sharrre.js [includes .js files]
Many thanks in advance!
--
HTML:
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Header</h1>
</div>
<div id="output">
<p>Welcome Message</p>
</div>
<div data-role="content" class="ui-content">
<div id="photo">
<?php
if (isset($_GET['key'])) {
try {
$photo = $share->getPhoto((int)$_GET['key']);
echo '
<div class="ui-grid-a my-breakpoint"><div class="ui-block-a"><img src="images/'.$photo.'" style="width: 768px; height: 432px;"/>
<br><br>
<div id="twitter" data-url="http://url.co.uk" data-text="Popup text" data-title="Tweet"></div>
<div id="facebook" data-url="http://url.co.uk" data-text="Popup text" data-title="Share"></div>
<div id="googleplus" data-url="http://url.co.uk" data-text="Popup text" data-title="+1"></div>
</div></div>
';
} catch (Exception $e) {
echo "<div class='ui-grid-a my-breakpoint'><div class='ui-block-a'><p style='color: #c53131'>".$e->getMessage()."</p></div></div>";
}
} else {
echo "<div class='ui-grid-a my-breakpoint'><div class='ui-block-a'><p style='color: #c53131'>The URL you gave us has no key. Please make sure it reads ...photo.php?key=123456 and we'll look again!</p></div></div>";
}
?>
CSS:
#media all and (max-width: 35em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 90%;
float:none;
}
}
#media all and (min-width: 45em) {
.my-breakpoint.ui-grid-b .ui-block-a { width: 90%;}
}
#photo {margin-top: 40px;}
#photo a {text-decoration: none;}
#photo a:hover {color: #fff;}
.ui-block-a {
text-align: center !important;
width: 100% !important;
}
#output {background-color: #f6f6f6; height: 100px; margin-top: -16px; border-bottom: 1px solid #dddddd;}
#output p {text-shadow: none; font-weight: bold; font-size: 16px; text-align: center; padding: 40px;}
.sharrre{
margin:55px 0 0 50px;
float:left;
}
.sharrre .box a:hover{
text-decoration:none;
}
.sharrre .count {
color:#525b67;
display:block;
font-size:18px;
font-weight:bold;
line-height:40px;
height:40px;
position:relative;
text-align:center;
width:70px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
border:1px solid #b2c6cc;
background: #fbfbfb; /* Old browsers */
background: -moz-linear-gradient(top, #fbfbfb 0%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
.sharrre .count:before, .sharrre .count:after {
content:'';
display:block;
position:absolute;
left:49%;
width:0;
height:0;
}
.sharrre .count:before {
border:solid 7px transparent;
border-top-color:#b2c6cc;
margin-left:-7px;
bottom: -14px;
}
.sharrre .count:after {
border:solid 6px transparent;
margin-left:-6px;
bottom:-12px;
border-top-color:#fbfbfb;
}
.sharrre .share {
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:bold;
height:30px;
line-height:30px;
margin-top:8px;
padding:0;
text-align:center;
text-decoration:none;
width:70px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#twitter .share {
text-shadow: 1px 0px 0px #0077be;
filter: dropshadow(color=#0077be, offx=1, offy=0);
border:1px solid #0075c5;
background: #26c3eb;
background: -moz-linear-gradient(top, #26c3eb 0%, #26b3e6 50%, #00a2e1 51%, #0080d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26c3eb), color-stop(50%,#26b3e6), color-stop(51%,#00a2e1), color-stop(100%,#0080d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* IE10+ */
background: linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26c3eb', endColorstr='#0080d6',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #5cd3f1 inset;
}
#facebook .share {
text-shadow: 1px 0px 0px #26427e;
filter: dropshadow(color=#26427e, offx=1, offy=0);
border:1px solid #24417c;
background: #5582c9; /* Old browsers */
background: -moz-linear-gradient(top, #5582c9 0%, #33539a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5582c9), color-stop(100%,#33539a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5582c9 0%,#33539a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5582c9 0%,#33539a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5582c9 0%,#33539a 100%); /* IE10+ */
background: linear-gradient(top, #5582c9 0%,#33539a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5582c9', endColorstr='#33539a',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #80a1d6 inset;
}
#googleplus .share {
text-shadow: 1px 0px 0px #222222;
filter: dropshadow(color=#222222, offx=1, offy=0);
border:1px solid #262626;
background: #6d6d6d; /* Old browsers */
background: -moz-linear-gradient(top, #6d6d6d 0%, #434343 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d6d6d), color-stop(100%,#434343)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* IE10+ */
background: linear-gradient(top, #6d6d6d 0%,#434343 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#434343',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #929292 inset;
}
I think you can use a div to contain both social icons, with this style:
.shareContainer{
width:240px;
margin:0 auto;
text-align:center;
}
And also update your ".sharrre" class like this:
.sharrre{
margin:55px 0 0 50px;
float:left;
text-align:center;
margin-right:auto;
margin-left:auto;
padding:0 20px;
}
Here is updated JS Bin
Hope this helps as a start point.
I've got a div that disappears using jquery+css. It works beautifully, but I am running into a problem. How do I get that div to not reload the next time a user opens a page on same wordpress site. Because the div exists in header.php, everytime a new page is called so is the div, even if the user dismissed it before.
Is there a way to make sure that the banner is only loaded once per visit using the existing infrastructure I've got going? I feel like there must be some way to do this, especially since wordpress is run on php, but I am a bit out of my depth.
This is the website that I'm currently editing, and here is the code related to the banner.
HTML:
<div id="greenbanner">
<img src="<?php bloginfo('template_directory'); ?>/Devices.png" id="devices">
<img src="<?php bloginfo('template_directory'); ?>/bigx.png" id="bigx">
<div id="bannertext">Spundge lets you discover, <br />curate, and create better content. <br /><br />
<div id="jointhedarkside"><a style="color:#ffffff;" href="https://www.spundge.com/account/signup/">Get Started - It's Free</a></div>
</div>
</div>
JQUERY:
$(document).ready(function(){
$("#headershadow").hide();
$("#bigx").click(function(){
$("#greenbanner").hide(1000);
$("#headershadow").show();
});
});
CSS:
#greenbanner {
width: 100%;
height: 200px;
background-color: #ffffff;
background: rgba(248,80,50,1);
background: -moz-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(82,133,48,1) 0%, rgba(241,111,92,1) 0%, rgba(82,133,48,1) 0%, rgba(87,219,0,1) 0%, rgba(76,140,30,1) 83%, rgba(76,140,30,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(248,80,50,1)), color-stop(0%, rgba(82,133,48,1)), color-stop(0%, rgba(241,111,92,1)), color-stop(0%, rgba(82,133,48,1)), color-stop(0%, rgba(87,219,0,1)), color-stop(83%, rgba(76,140,30,1)), color-stop(100%, rgba(76,140,30,1)));
background: -webkit-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(82,133,48,1) 0%, rgba(241,111,92,1) 0%, rgba(82,133,48,1) 0%, rgba(87,219,0,1) 0%, rgba(76,140,30,1) 83%, rgba(76,140,30,1) 100%);
background: -o-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(82,133,48,1) 0%, rgba(241,111,92,1) 0%, rgba(82,133,48,1) 0%, rgba(87,219,0,1) 0%, rgba(76,140,30,1) 83%, rgba(76,140,30,1) 100%);
background: -ms-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(82,133,48,1) 0%, rgba(241,111,92,1) 0%, rgba(82,133,48,1) 0%, rgba(87,219,0,1) 0%, rgba(76,140,30,1) 83%, rgba(76,140,30,1) 100%);
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(82,133,48,1) 0%, rgba(241,111,92,1) 0%, rgba(82,133,48,1) 0%, rgba(87,219,0,1) 0%, rgba(76,140,30,1) 83%, rgba(76,140,30,1) 100%);
margin-top: 5px;
}
#devices {
height: 200px;
margin-left: 5%;
}
#bigx {
float: right;
margin-bottom: 260px;
margin-top: 10px;
margin-right: 20px;
}
#bigx:hover {
opacity: 0.4;
filter:alpha(opacity=40);
cursor: pointer;
}
#jointhedarkside {
font-family: Geogrotesque, Lucida Sans Unicode, sans-serif;
font-weight: 500;
color: #ffffff;
background-color: #57db00;
border-radius: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
font-size: 18px;
letter-spacing: normal;
text-transform: uppercase;
display: block;
float: left;
line-height: 17px;
}
#jointhedarkside:hover {
cursor: pointer;
background-color: #46ab00;
}
#bannertext {
font-family: Geogrotesque, Lucida Sans Unicode, sans-serif;
font-weight: 100;
color: #ffffff;
padding-top: 50px;
margin-left: 80px;
padding-right: 25px;
padding-left: 5px;
font-size: 30px;
letter-spacing: normal;
text-transform: uppercase;
display: block;
float: left;
}
You'd set a cookie, and probably not even render the box in your PHP if it was found.
You can use the cookie feature in a javascript for this purpose . Store a value representing div status . Check every time when the page loads .
I have an array of letters. After I added the styling, the array went from horizontal to vertical.
here is the code:
$alphabetical_array = range('a','z');
function AddLinks($letter)
{
$title = strtoupper($letter);
$a = "<a href='alpha_search.php?letter=".$letter."' class='alphabtn'><font color='#FFFFFF'>".$title."</font></a>";
return($a);
}
$format_array = array_map("AddLinks", $alphabetical_array);
echo implode($format_array);
here is the css:
.alphabtn {
max-width:10px;
text-decoration: none;
position: relative;
padding: 5px ;
text-align:left;
clear: both;
text-indent:0;
display: block;
font: bold 12px/14px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #fff;
border-radius: 4px;
border: 1px solid #391b61;
text-shadow: 1px 1px 1px #ccc;
background: -moz-linear-gradient(top, #864fd3 0%, #553285 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#864fd3), color-stop(100%,#553285));
background: -webkit-linear-gradient(top, #864fd3 0%,#553285 100%);
background: -o-linear-gradient(top, #864fd3 0%,#553285 100%);
background: -ms-linear-gradient(top, #864fd3 0%,#553285 100%);
background: linear-gradient(to bottom, #864fd3 0%,#553285 100%);
-pie-background: linear-gradient(#864fd3, #553285);
-webkit-box-shadow: inset 0px 1px 1px 1px #a55aff;
box-shadow: inset 0px 1px 1px 1px #a55aff;
behavior: url(../login/_ui/js/PIE.htc);
}.alphabtn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #553285), color-stop(1, #864fd3) );
background:-moz-linear-gradient( center top, #553285 5%, #864fd3 100% );
background: -moz-linear-gradient(top, #553285 0%, #864fd3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#553285', endColorstr='#864fd3');
background-color:#553285;
}.alphabtn:active {
position:relative;
top:1px;
}
you have
clear: both;
set on your tag. pretty sure this will cause the
<a>
to be treated as block and break to a new line.
Try removing it.
You have display: block; in the css. That will cause each element to display on its own line. Remove it and everything else should be fine.
Change
.alphabtn {
max-width:10px;
text-decoration: none;
position: relative;
padding: 5px ;
text-align:left;
clear: both;
text-indent:0;
display: block;
to
.alphabtn {
max-width:10px; //Why this line?
text-decoration: none;
position: relative;
padding: 5px ;
text-align:left;
text-indent:0;
display: inline-block; (or delete the row)