I have a profile page and under my photo i have a like button with a counter and i want when i hit like, the text for like button to be setted with "unlike" but the counter to stay there with all like's that profile page have from all the users & when i hit unlike to take my like back.
I'm begginer and i messed-up with the code, so please help, i will apreciate,thanks!
This is what i have so far: likes.js
$(document).ready(function(){
$(document).on('click', '.like', function(){
if($(this).attr('title') == 'Like'){
$that = $(this);
$.post('action.php', {id:$(this).attr('id'), action:'like'},function(){
$that.text('Unlike');
$that.attr('title','Unlike');
});
}else{
if($(this).attr('title') == 'Unlike'){
$that = $(this);
$.post('action.php', {id:$(this).attr('id'), action:'unlike'},function(){
$that.text('Like');
$that.attr('title','Like');
});
}
}
});
});
Php count process file:
<?php
require_once "config.php";
$id=$user->filter->id; //User id
$sql=$dbh->prepare("SELECT * FROM likes WHERE id=?");
$sql->execute(array($id));
if($sql->rowCount()==1){
echo '<div class='btn btn-warning like' id="'.$id.'" title="Unlike" style='margin-top: -6px; title="Like"'> Like <span class='like-count'>0</span></div>';
}else{
echo '<div class='btn btn-warning like' title="Like" style='margin-top: -6px;'> Like <span class='like-count'>0</span></div>';
}
?>
action.php file:
<?php
require_once "config.php";
$id=$user->filter->id;
$action=$_POST['action'];
if ($action=='like'){
$sql=$dbh->prepare("SELECT * FROM likes WHERE id=?");
$sql->execute(array($id));
$matches=$sql->rowCount();
if($matches==0){
$sql=$dbh->prepare("INSERT INTO likes (id) VALUES(?)");
$sql->execute(array($id));
$sql=$dbh->prepare("UPDATE likes SET likes=likes+1 WHERE id=?");
$sql->execute(array($id));
}else{
die("There is No profile With That ID");
}
}
if ($action=='unlike'){
$sql = $dbh->prepare("SELECT 1 FROM `likes` WHERE id=?");
$sql->execute(array($id));
$matches = $sql->rowCount();
if ($matches != 0){
$sql=$dbh->prepare("UPDATE likes SET likes=likes-1 WHERE id=?");
$sql->execute(array($id));
}
}
?>
.like-count {
background-color: black;
padding: 2px 12px 2px;
margin-left: 2px;
border-bottom: 1px solid;
color:white;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0px;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
margin-bottom: 10px;
}
.btn-warning {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #faa732;
background-image: -moz-linear-gradient(top,#fbb450,#f89406);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));
background-image: -webkit-linear-gradient(top,#fbb450,#f89406);
background-image: -o-linear-gradient(top,#fbb450,#f89406);
background-image: linear-gradient(to bottom,#fbb450,#f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450',endColorstr='#fff89406',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
<div class='btn btn-warning like' style='margin-top: -6px;'> Like <span class='like-count'>0</span></div>
Related
I am trying to create a multi level submenu.
I can display just one sub level menu with this code.
How to increase the code to insert a system with parent id ?
There my code than I am trying to develop.
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: "Comic Sans MS", cursive;
font-size: 15px;
color: #232323;
}
#head {
background: #f9f9f9;
height: 100px;
padding-top: 15px;
border-bottom: 1px solid #d5dce8;
}
.wrap {
width: 1000px;
margin: 0 auto;
}
#head h1
{
float:left;
}
#head a
{
float:right;
}
input,select
{
width:300px;
height:35px;
}
/* nav menu */
#nav {
margin: 0;
padding: 0;
list-style: none;
border-left: 1px solid #d5dce8;
border-right: 1px solid #d5dce8;
border-bottom: 1px solid #d5dce8;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
height: 50px;
padding-left: 15px;
padding-right: 15px;
background: #f9f9f9;
}
#nav li {
float: left;
display: block;
background: none;
position: relative;
z-index: 999;
margin: 0 1px;
}
#nav li a {
display: block;
padding: 0;
font-weight: 700;
line-height: 50px;
text-decoration: none;
color: #818ba3;
zoom: 1;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
padding: 0px 12px;
}
#nav li a:hover, #nav li a.hov {
background-color: #fff;
border-left: 1px solid #d5dce8;
border-right: 1px solid #d5dce8;
color: #576482;
}
/* subnav */
#nav ul {
position: absolute;
left: 1px;
display: none;
margin: 0;
padding: 0;
list-style: none;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
padding-bottom: 3px;
}
#nav ul li {
width: 180px;
float: left;
border-top: 1px solid #fff;
text-align: left;
}
#nav ul li:hover {
border-left: 0px solid transparent;
border-right: 0px solid transparent;
}
#nav ul a {
display: block;
height: 20px;
line-height: 20px;
padding: 8px 5px;
color: #666;
border-bottom: 1px solid transparent;
text-transform: uppercase;
color: #797979;
font-weight: normal;
}
#nav ul a:hover {
text-decoration: none;
border-right-color: transparent;
border-left-color: transparent;
background: transparent;
color: #4e4e4e;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('#nav li').hover(function()
{
$('ul', this).slideDown('fast');
}, function()
{
$('ul', this).slideUp('fast');
});
});
</script>
<div class="wrap">
<ul id="nav">
<?php
// Select all entries from the menu table
$Qmenus = $Db->prepare('SELECT a.id,
a.link,
a.parent,
a.class,
a.sort_order,
amd.label
FROM :table_administrator_menu a,
:table_administrator_menu_description amd
where a.id = amd.id
and amd.language_id = :language_id
ORDER BY a.parent,
a.sort_order
');
$Qmenus->bindInt(':language_id', $OSCOM_Language->getId());
$Qmenus->execute();
while($Qmenus->fetch()){
?>
<li class="<?php $Qmenus->value('class'); ?>"><?php echo $Qmenus->value('label'); ?>
<?php
// Select all entries from the menu table
$QsubMenus = $Db->prepare('SELECT sm.id,
sm.link,
sm.parent,
sm.class,
smd.label,
sm.sort_order
FROM :table_administrator_sub_menu sm,
:table_administrator_sub_menu_description smd
where sm.sub_menu_id = smd.sub_menu_id
and smd.language_id = :language_id
order by sm.parent,
sm.sort_order
');
$QsubMenus->bindInt(':language_id', $OSCOM_Language->getId());
$QsubMenus->execute()
?>
<ul>
<?php
while($QsubMenus->fetch()) {
?>
<li class="<?php $QsubMenus->value('class'); ?>"><?php echo $QsubMenus->value('label'); ?></li><?php
}
?>
</ul>
</li>
<?php
}
?>
</ul>
</div>
<?php
session_start();
include_once 'villagedb.php';
if(isset($_SESSION['user'])!="")
{
header("Location: home.html");
}
if(isset($_POST['btn-login']))
{
$email = mysql_real_escape_string($_POST['email']);
$upass = mysql_real_escape_string($_POST['pass']);
$res=mysql_query("SELECT * FROM users WHERE email='$email'");
$row=mysql_fetch_array($res);
if($row['password']==md5($upass))
{
$_SESSION['user'] = $row['user_id'];
header("Location: home.html");
}
else
{
?>
<script>alert('wrong details');</script>
<?php
}
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("c413.jpg");
background-size:100% 100%;
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
background-repeat:no-repeat;
cursor:pointer;
}
.three{
margin: -5px;
width:100%;
text-align:center;
top:18.25%;
position:absolute;
color:#555;
font: 50px "Lucida Grande", Tahoma, Verdana, sans-serif;
text-shadow: 0 -2px black;
text-align: center;
}
.four{
margin: 50px auto;
width: 550px;
bottom:0;
position:absolute;
right: 70%;
display; none;
}
.one{
overflow: hidden;
position: fixed;
left:80%;
right:0;
height:75px;
bottom:0;
max-width: 400000px;
margin: 0 auto;
padding:0;
color: #555;
font: 13px "Lucida Grande", Tahoma, Verdana, sans-serif;
}
.one a{
text-decoration:none;
color: #555;
font: 13px "Lucida Grande", Tahoma, Verdana, sans-serif;
}
.container {
width: 100%;
top:28%;
position:relative;
text-align: center;
}
.login {
position: relative;
margin: 0 auto;
padding: 20px 20px 20px;
width: 310px;
}
.login p.submit {
text-align: right;
}
.login-help {
margin: 20px 0;
font-size: 11px;
color: white;
text-align: center;
}
.login-help a {
text-decoration: none;
color: #555;
}
.login-help a:hover {
text-decoration: underline;
}
:-moz-placeholder {
color: #c9c9c9 !important;
font-size: 13px;
}
::-webkit-input-placeholder {
color: #ccc;
font-size: 13px;
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
z-index: -1;
background: rgba(0, 0, 0, 0.08);
border-radius: 4px;
}
.login h1 {
margin: -20px -20px 21px;
line-height: 40px;
font-size: 15px;
font-weight: bold;
color: #555;
text-align: center;
text-shadow: 0 1px white;
background: #f3f3f3;
border-bottom: 1px solid #cfcfcf;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
-webkit-box-shadow: 0 1px whitesmoke;
box-shadow: 0 1px whitesmoke;
}
.login p {
margin: 20px 0 0;
}
.login p:first-child {
margin-top: 0;
}
.login input[type=text], .login input[type=password] {
width: 278px;
}
.login p.remember_me {
float: left;
line-height: 31px;
}
.login p.remember_me label {
font-size: 12px;
color: #777;
cursor: pointer;
}
.login p.remember_me input {
position: relative;
bottom: 1px;
margin-right: 4px;
vertical-align: middle;
}
input {
font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
font-size: 14px;
}
input[type=text], input[type=password] {
margin: 5px;
padding: 0 10px;
width: 200px;
height: 34px;
color: #404040;
border-radius: 2px;
-moz-outline-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
input[type=text]:focus, input[type=password]:focus {
border-color: #7dc9e2;
outline-color: #dceefc;
outline-offset: 0;
}
input[type=submit] {
padding: 0 18px;
height: 29px;
font-size: 12px;
font-weight: bold;
color: #527881;
text-shadow: 0 1px #e3f1f1;
background: #cde5ef;
border: 1px solid;
border-color: #b4ccce #b3c0c8 #9eb9c2;
border-radius: 16px;
outline: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
-webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
}
input[type=submit]:active {
background: #cde5ef;
border-color: #9eb9c2 #b3c0c8 #b4ccce;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
input[type=checkbox],
input[type=radio] {
border: 1px solid #c0c0c0;
margin: 0 0.1em 0 0;
padding: 0;
font-size: 16px;
line-height: 1em;
width: 1.25em;
height: 1.25em;
background: #fff;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#fbfbfb));
-webkit-appearance: none;
-webkit-border-radius: 0.25em;
vertical-align: text-top;
display: inline-block;
}
input[type=radio] {
-webkit-border-radius: 2em; /* Make radios round */
}
</style>
</head>
<body>
<div class="four"> <img src="untitled.png" width="100px" height="85px"></div>
<div class="three">
Village
</div>
<div class="container">
<div class="login">
<form method = "post" action="">
<input type="text" name ="email" placeholder="Username or Email"></input><br>
<input type="password" name ="pass" placeholder="Password"></input><br>
<p class="remember_me">
<label>
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Keep me logged in
</label>
</label>
</p>
<p class="submit"><input type="submit" name="submit" value=" Login" name="btn-login"></p>
</form>
</div>
<div class="login-help">
<p> Forgot your password?</p>
</div>
</div>
<div class="one">
Sign Up<font size="1"> | </font>Terms & Conditions <font size="1"> | </font> More info
</div>
</body>
</html>
The background image in the css is stretch and cover a 25% of the page on load then after php run and reload it works fine.
What could be the problem?
change the css as follows
body
{
background-image: url("c413.jpg");
background-size: cover;
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
background-repeat:no-repeat;
cursor:pointer;
}
there is no issue related to php. you can remove the php tag
I'm trying to add new fields in moodle login page. I'm simply editing the index_form.html in login folder.
I'm using evolve theme and using moodle version 2.8
I want a dropdown field for administrator, teacher and student. If user selects administrator or teacher they have the fields of username and password, but if student is been selected one extra field of Adhar number is added for validation dynamically.
I have created the fields just need to add it to database and conditional logic. In the backend of user profile fields I've added a custom user fields under the name of Adhar Number whose short name I've kept as Adharno, lot of things more is to be done and I'm unable to find path, following is the link below with html code and css
www.sanskritiskills.com/assessment/login/index.php
Code block:
<?php
if ($show_instructions) {
$columns = 'twocolumns';
} else {
$columns = 'onecolumn';
}
if (!empty($CFG->loginpasswordautocomplete)) {
$autocomplete = 'autocomplete="off"';
} else {
$autocomplete = '';
}
if (empty($CFG->authloginviaemail)) {
$strusername = get_string('username');
} else {
$strusername = get_string('usernameemail');
}
?>
<div class="loginbox clearfix <?php echo $columns ?>">
<div class="loginpanel">
<?php
if (($CFG->registerauth == 'email') || !empty($CFG->registerauth)) { ?>
<div class="skiplinks"><a class="skip" href="signup.php"><?php print_string("tocreatenewaccount"); ?></a></div>
<?php
} ?>
<h2><?php print_string("login") ?></h2>
<div class="subcontent loginsub">
<?php
if (!empty($errormsg)) {
echo html_writer::start_tag('div', array('class' => 'loginerrors'));
echo html_writer::link('#', $errormsg, array('id' => 'loginerrormessage', 'class' => 'accesshide'));
echo $OUTPUT->error_text($errormsg);
echo html_writer::end_tag('div');
}
?>
<form action="<?php echo $CFG->httpswwwroot; ?>/login/index.php" method="post" id="login" <?php echo $autocomplete; ?> >
<div class="loginform">
<div class="form-input">
Select Role :
<select required>
<option value="Admin">Admin</option>
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
</select>
</div>
</div>
<div class="clearer"><!-- --></div>
<div class="form-label"><label for="username"><?php echo($strusername) ?></label></div>
<div class="form-input">
<input type="text" name="username" id="username" size="15" value="<?php p($frm->username) ?>" />
</div>
<div class="clearer"><!-- --></div>
<div class="form-label"><label for="password"><?php print_string("password") ?></label></div>
<div class="form-input">
<input type="password" name="password" id="password" size="15" value="" <?php echo $autocomplete; ?> />
</div>
<div class="clearer"><!-- --></div>
<div class="form-label"><label for="password">Adhar No.</label></div>
<div class="form-input">
<input type="password" name="Adhar Number" id="password" size="15" value="" <?php echo $autocomplete; ?> />
</div>
</div>
<div class="clearer"><!-- --></div>
<?php if (isset($CFG->rememberusername) and $CFG->rememberusername == 2) { ?>
<div class="rememberpass">
<input type="checkbox" name="rememberusername" id="rememberusername" value="1" <?php if ($frm->username) {echo 'checked="checked"';} ?> />
<label for="rememberusername"><?php print_string('rememberusername', 'admin') ?></label>
</div>
<?php } ?>
<div class="clearer"><!-- --></div>
<input type="submit" id="loginbtn" value="<?php print_string("login") ?>" />
<div class="forgetpass"><?php print_string("forgotten") ?></div>
</form>
<div class="desc">
<?php
echo get_string("cookiesenabled");
echo $OUTPUT->help_icon('cookiesenabled');
?>
</div>
</div>
<?php if ($CFG->guestloginbutton and !isguestuser()) { ?>
<div class="subcontent guestsub">
<div class="desc">
<?php print_string("someallowguest") ?>
</div>
<form action="index.php" method="post" id="guestlogin">
<div class="guestform">
<input type="hidden" name="username" value="guest" />
<input type="hidden" name="password" value="guest" />
<input type="submit" value="<?php print_string("loginguest") ?>" />
</div>
</form>
</div>
<?php } ?>
</div>
<?php if ($show_instructions) { ?>
<div class="signuppanel">
<h2><?php print_string("firsttime") ?></h2>
<div class="subcontent">
<?php if (is_enabled_auth('none')) { // instructions override the rest for security reasons
print_string("loginstepsnone");
} else if ($CFG->registerauth == 'email') {
if (!empty($CFG->auth_instructions)) {
echo format_text($CFG->auth_instructions);
} else {
print_string("loginsteps", "", "signup.php");
} ?>
<div class="signupform">
<form action="signup.php" method="get" id="signup">
<div><input type="submit" value="<?php print_string("startsignup") ?>" /></div>
</form>
</div>
<?php } else if (!empty($CFG->registerauth)) {
echo format_text($CFG->auth_instructions); ?>
<div class="signupform">
<form action="signup.php" method="get" id="signup">
<div><input type="submit" value="<?php print_string("startsignup") ?>" /></div>
</form>
</div>
<?php } else {
echo format_text($CFG->auth_instructions);
} ?>
</div>
</div>
<?php } ?>
<?php if (!empty($potentialidps)) { ?>
<div class="subcontent potentialidps">
<h6><?php print_string('potentialidps', 'auth'); ?></h6>
<div class="potentialidplist">
<?php foreach ($potentialidps as $idp) {
echo '<div class="potentialidp">' . $OUTPUT->render($idp['icon'], $idp['name']) . $idp['name'] . '</div>';
} ?>
</div>
</div>
<?php } ?>
</div>
CSS File which is available:
/* evolved CSS
-------------------------*/
#dock {background: #32352c; }
.arrow {color: #3d3d3d; }
.block .header h2 {color: #3d3d3d;}
.dir-rtl a.logo {
background: url([[setting:logo]]) no-repeat 100% 0;
display: block;
float: right;
}
.pagelayout-report .no-overflow {
overflow: auto;
}
.service {
display:block;
padding:10px;
margin: 10px;
text-align:left;
background-color: [[setting:marketboxcolor]];
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#fullbkg {
background: url([[setting:fpbkg]]) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Frontpage Login*/
.wrap {
width:250px;
height: auto;
margin: auto;
margin-top: 10%;
margin-bottom: 3%;
}
.avatarlogin {
width: 100%;
margin: auto;
width: 65px;
border-radius: 100px;
height: 65px;
background: #000 ;
position: relative;
bottom: -15px;
}
.avatarlogin img {
width: 55px;
height: 55px;
border-radius: 100px;
margin: auto;
border:3px solid #fff;
display: block;
}
.wrap input {
border: none;
background: #fff;
font-family:Lato ;
font-weight:700 ;
display: block;
height: 40px;
outline: none;
width: calc(100% - 24px) ;
margin: auto;
padding: 6px 12px 6px 12px;
}
.bar {
width: 100%;
height: 1px;
background: #fff ;
}
.bar i {
width: 95%;
margin: auto;
height: 1px ;
display: block;
background: #d1d1d1;
}
.wrap input[type="text"] {
border-radius: 7px 7px 0px 0px ;
}
.wrap input[type="password"] {
border-radius: 0px 0px 7px 7px ;
}
.forgot_link {
color: #83afdf ;
color: #83afdf;
text-decoration: none;
font-size: 11px;
position: relative;
left: 193px;
top: -36px;
}
.wrap button {
width: 100%;
border-radius: 7px;
background: #b6ee65;
text-decoration: center;
border: none;
color: #51771a;
margin-top:-5px;
padding-top: 14px;
padding-bottom: 14px;
outline: none;
font-size: 20px;
border-bottom: 3px solid #307d63;
cursor: pointer;
}
/*.loginbox {
background: rgba(100,100,100,.1);
padding:50px;
-webkit-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-moz-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}*/
.loginbox h2{
color: #DBDBDB;
text-align:center;
}
.loginbox form a{
color: #fff;
}
.loginbox form{
color: #fff;
}
.loginbox p{
color: #fff;
}
/*.loginpanel .loginsub {
background: rgba(0,0,0,.6);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
margin: 10px;
}*/
.loginpanel .loginsub {
background: rgba(0,0,0,.8);
max-width:400px;
-webkit-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-moz-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:5px solid #fff;
margin: auto;
padding:20px;
}
.signuppanel .subcontent{
background: rgba(0,0,0,.6);
max-width:400px;
-webkit-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-moz-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
margin: auto;
}
/* Alerts (aardvark) */
#page-header-generalalert {
clear:both;
display: block;
color:#ff9f00;
background-color:#fef8d2;
padding:8px 35px 8px 14px;
margin-bottom:20px;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
border:1px solid #fde6af;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#page-header-generalalert:before {
background-color: #ff9f00;
color: #FFFFFF;
display: block;
float: left;
font-family: FontAwesome;
font-size: 1.2em;
height: 1.4em;
margin-right: 0.5em;
margin-top: -0.15em;
margin-left: -0.5em;
padding-top: 0.2em;
text-align: center;
width: 1.7em;
content:"\f06a";
border-radius: 3px 3px 3px 3px;
text-shadow:none;
}
#page-header-snowalert {
clear:both;
display: block;
color:#3a87ad;
background-color:#d9edf7;
padding:8px 35px 8px 14px;
margin-bottom:20px;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
border:1px solid #bce8f1;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#page-header-snowalert:before {
background-color: #3a87ad;
color: #FFFFFF;
display: block;
float: left;
font-family: FontAwesome;
font-size: 1.2em;
height: 1.4em;
margin-right: 0.5em;
margin-top: -0.15em;
margin-left: -0.5em;
padding-top: 0.2em;
text-align: center;
width: 1.7em;
content:"\f069";
border-radius: 3px 3px 3px 3px;
text-shadow:none;
}
/*Google Fonts (Theme Essential)*/
/* #group Headings */
h1, h2, h3, h4, h5, h6,
.back-to-top,
.socials p,
#socialheading,
.forumpost .subject,
.block_login label {
font-family: "[[setting:headingfont]]", sans-serif;
}
/* #group Main Text */
body,
.block_login input[type="submit"] {
font-family: "[[setting:bodyfont]]", Arial, Helvetica, sans-serif;
font-size: [[setting:bodysize]];
font-weight: [[setting:bodyweight]];
}
/* #end */
/*Special thanks to Shaun Daubney (Theme Aardvark)
for the colored icons in the blocks.
*/
.block .header .title h2:before {
color: #FFFFFF;
display: block;
float: left;
font-family: FontAwesome;
font-size: 1.2em;
height: 1.3em;
margin-left: -0.5em;
margin-right: 0.5em;
margin-top: -0.2em;
padding-top: 0.2em;
text-align: center;
width: 1.5em;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.block_news_items .header .title h2:before {
background-color: #29A294;
content:"\f0a1";
}
.block_navigation .header .title h2:before {
background-color: #f42941;
content:"\f0e8";
}
.block_calendar_upcoming .header .title h2:before,
.block_calendar_month .header .title h2:before {
background-color: #008ecd;
content:"\f073";
}
.block_course_list .header .title h2:before {
background-color: #ffce00;
content:"\f108";
}
.block_completionstatus .header .title h2:before,
.block_selfcompletion .header .title h2:before {
background-color: #76b900;
content:"\f0e4";
}
.block_rss_client .header .title h2:before {
background-color: #ff9500;
content:"\f09e";
}
.block_rss_plus .header .title h2:before {
background-color: #ff9500;
content:"\f09e";
}
.block_blog_menu .header .title h2:before {
background-color: #ff9500;
content:"\f02d";
}
.block_quiz_results .header .title h2:before {
background-color: #76b900;
content:"\f080";
}
.block_quiz_navblock .header .title h2:before {
background-color: #76b900;
content:"\f126";
}
.block_glossary_random .header .title h2:before {
background-color: #3d3d3d;
content:"\f0eb";
}
.block_book_toc .header .title h2:before {
background-color: #3d3d3d;
content:"\f02d";
}
.block_participants .header .title h2:before,
.block_online_users .header .title h2:before {
background-color: #92499e;
content:"\f0c0";
}
.block_html .header .title h2:before {
background-color: #eeeeee;
}
.block_section_links .header .title h2:before {
background-color: #f42941;
content:"\f02e";
}
.block_activity_modules .header .title h2:before {
background-color: #f42941;
content:"\f12e";
}
.block_comments .header .title h2:before {
background-color: #ffce00;
content:"\f075";
}
.block_settings .header .title h2:before,
.block_admin_bookmarks .header .title h2:before{
background-color: #004675;
content:"\f085";
}
.block_blog_tags .header .title h2:before,
.block_tags .header .title h2:before {
background-color: #ff9f00;
content:"\f02c";
}
.block_private_files .header .title h2:before {
background-color: #82cadd;
content:"\f114";
}
.block_block_mentees .header .title h2:before {
background-color: #3d3d3d;
content:"\f0c0";
}
.block_messages .header .title h2:before {
background-color: #ffce00;
content:"\f0e0";
}
.block_community .header .title h2:before {
background-color: #ffce00;
content:"\f0ac";
}
.block_login .header .title h2:before {
background-color: #3d3d3d;
content:"\f007";
}
.block_recent_activity .header .title h2:before {
background-color: #cee3ed;
content:"\f017";
}
.block_search_forums .header .title h2:before {
background-color: #ffce00;
content:"\f0e6";
}
.block_myprofile .header .title h2:before {
background-color: #f42941;
content:"\f007";
}
.block_adminblock .header .title h2:before {
background-color: #E0F52A;
content:"\f055";
}
.block_feedback .header .title h2:before {
background-color: #ffce00;
content:"\f087";
}
.block_flickr .header .title h2:before {
background-color: #ff3096;
content:"\f03e";
}
.block_youtube .header .title h2:before {
background-color: #f42941;
content:"\f145";
}
.block_course_badges .header .title h2:before {
background-color: #29a294;
content:"\f091";
}
.block_twitter_search .header .title h2:before {
background-color: #008ecd;
content:"\f099";
}
.block_heritage .header .title h2:before {
background-color: #3e647e;
content:"\f02d";
}
.block_lrc .header .title h2:before {
background-color: #3e647e;
content:"\f02d";
}
/*Social Wall*/
.format-socialwall .course-content ul.topics li.section {
border-bottom: 0px solid #ccc;
margin-top: 0;
}
/*.mform {
background-color: #f2f2f2;
padding: 10px;
border-radius: 10px;
}*/
.format-socialwall #section-2 .content {
background-color: #f7f7f7;
padding: 10px;
margin: 0px;
border: 3px solid #d4d4d4;
border-radius: 4px;
margin-top:15px;
margin-bottom: 15px;
-moz-box-shadow: 0px 0px 25px #ccc;
-webkit-box-shadow: 0 0 25px #ccc;
box-shadow: 0px 0px 25px #ccc;
}
.tl-post {
margin: 30px 0px 50px 0px;
padding:15px;
}
.tl-posttext {
background-color: #fff;
padding: 10px 10px 20px 10px;
border-radius: 10px 10px 0px 0px;
//border: 1px solid #ccc;
margin-top: 10px;
}
ul.section.tl-postattachment {
background-color: #fff;
padding: 5px 5px 5px 50px;
//border-left: 1px solid #ccc;
//border-right: 1px solid #ccc;
margin:0px;
}
.tl-text {
margin-left: 40px;
padding: 0 5px;
border: 2px solid #efefef;
padding: 10px;
-moz-box-shadow: 0px 0px 25px #e7e7e7;
-webkit-box-shadow: 0 0 25px #e7e7e7;
box-shadow: 0px 0px 25px #e7e7e7;
border-radius: 4px 4px 4px 4px;
}
/*.tl-text {
margin-left: 40px;
//border: none;
border: 1px solid #efefef;
background-color: #f7f7f7;
padding:7px;
border-radius: 10px 10px 10px 10px;
}*/
.tl-comments {
background-color: #f7f7f7;
padding:15px;
margin:0px;
}
.tl-comment {
padding-left:25px;
padding-top: 0px;
padding-bottom: 0px;
}
.tl-post-actionarea {
//border: 1px solid #ccc;
padding: 4px 4px 10px 4px;
//background: #F0F3F7;
//border-radius: 0px 0px 5px 5px;
}
.tl-timeago, .tl-counts {
font-size: 12px;
color: #666;
line-height: 15px;
padding-bottom: 5px;
}
.like {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.like:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.like:active {
border-top-color: #1b435e;
background: #1b435e;
}
.likenomore {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.likenomore:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.likenomore:active {
border-top-color: #1b435e;
background: #1b435e;
}
form.tl-commentform {
padding-top: 10px;
}
#postform .fitem .felement #id_submitbutton {
margin:0px;
}
Please help me out in this
I'm not 100% sure what you're asking here - Is it the backend element or is it the frontend element that you're struggling with?
The easiest way (not the best way) to achieve what you're doing here is to hide the extra field if the user selects a non-student role. This is just basic JavaScript.
The script you're looking for looks something like this:
$(document).ready(function () {
$("select").change(function () {
$("select option:selected").each(function () {
if ($(this).attr("value") == "Student") {
$(".test").show();
}
if ($(this).attr("value") != "Student") {
$(".test").hide();
}
});
}).change();
});
And here's the Fiddle to see it in action.
HTH
I have created a signup page using Codeigniter and I want to center all of the elements in a fieldset.
Here is my PHP code:
<fieldset style="text-align:center">
<legend>Data</legend>
<?php
$this->load->helper('form');
echo form_open('login/create_user');
echo form_input('username', '', 'placeholder="Username"');
echo form_input('email', '', 'placeholder="Email"');
echo form_password('password', '', 'placeholder="Password"');
echo form_password('password1', '', 'placeholder="Confirm"');
echo form_submit('submit', 'Submit');
echo validation_errors();
?>
</fieldset>
CSS code:
input[name=username], input[name=email], input[type=password]
{
display: block;
margin: 0 0 1em 0;
width: 200px;
border: 5px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
padding: 1em;
}
input[name=submit]
{
border: none;
margin-right: 1em;
padding: 6px;
font-size: 12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #088A08;
color: white;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
Here is how this look like: Page, and as you can see, only Submit button is centered, why is it so?
input[name=username], input[name=email], input[type=password]
{
display: block;
margin: 0 auto 1em; /* change here */
width: 200px;
border: 5px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
padding: 1em;
}
You can always center a display:block using a width and margin-right: auto, margin-left: auto;
My divs keep shifting when I resize the page can someone help me with this?
html/php (php for login and page getter)
my html body part with some php for login in and something with the page
<div class="menu">
<img src="logo.png" style=" position: relative; margin-right: 38%">
<ul class="dropdown">
<li><a href="?page=Home" <?php if ($page == 'Home') { ?> id="a-active" <?php } ?> >Home</a>
<ul class="sub_menu">
<li>News</li>
<li>Servers</li>
</ul>
</li>
<li><a href="?page=Forum" <?php if ($page == 'Forum') { ?> id="a-active" <?php } ?> >Forum</a>
<ul class="sub_menu">
<li>Common</li>
<li>Information</li>
<li>Griefs & Player reports</li>
<li>
Unbans
</li>
</ul>
</li>
<li><a href="?page=Information" <?php if ($page == 'Information') { ?> id="a-active" <?php } ?> >Information</a>
<ul class="sub_menu">
<li>
Rules
</li>
<li>
Staff
</li>
<li>
Servers
<ul>
<li>Survival</li>
<li>Games</li>
</ul>
</li>
</ul>
</li>
<li><a href="?page=Topscores" <?php if ($page == 'Topscores') { ?> id="a-active" <?php } ?> > Topscores</a>
<ul class="sub_menu">
<li>Playtime</li>
<li>Kills</li>
<li>Game wins</li>
</ul>
</li>
<li><a href="?page=Donations" <?php if ($page == 'Donations') { ?> id="a-active" <?php } ?> >Donation</a>
</li>
</ul>
<div class="content">
<?php
if ($page == 'Forum') {
include 'forum/index.html';
} elseif ($page == 'Information') {
include 'information/index.html';
} elseif ($page == 'Topscores') {
include 'topscores/index.html';
} elseif ($page == 'Donations') {
include 'donations/index.html';
} elseif ($page == 'Home') {
include 'home/index.html';
} else {
include '404/index.html';
}
?>
</div>
<div class="contentmirror1">
<?php
if (isset($_SESSION['username'])) {
?>
<form width="110px" id="form1" name="form1" method="post" action="logout.php">
<table width="100px" border="0" align="center">
<tr>
<td colspan="2">Welcome</td>
</tr>
<tr>
<td><input readonly type="text" name="name" style="border:none; background-color: transparent;" value="<?php echo htmlspecialchars($_SESSION['username']); ?>"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Logout" /></td>
</tr>
</table>
</form>
<?php
} else {
?>
<form width="110px" id="form1" name="form1" method="post" action="login.php">
<table width="100px" border="0" align="center">
<tr>
<td colspan="2">Login</td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Login" /></td>
</tr>
</table>
</form>
<?php
}
?>
</div>
<div class="contentmirror" style="Clear: Both;">
spambox/online shizzle
</div>
</div>
my css
.head{
height: 115px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background: rgb(200,200,200);
z-index: -999;
}
html {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu{
display: inline-block;
position: absolute;
padding: 2%;
text-align: center;
width: 86%;
left: 0px;
top: 0px;
font-family: arial;
z-index: 0;
}
.menu::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
.content{
float: left;
margin-top: 5%;
width: 60%;
max-width: 60%;
padding: 1%;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.contentmirror{
float: right;
margin-top: -3%;
margin-right: 5%;
max-width: 26%;
width: 26%;
padding: 1%;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.contentmirror1{
float: right;
margin-top: -25%;
margin-right: 8%;
max-width: 26%;
width: 26%;
padding: 1%;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.sidepanelright{
float: right;
}
.main{
text-align: center;
font-family: arial;
font-size: 24px;
}
.pics {
width: 70%;
max-height: 100%;
margin: 0px auto;
}
.pic {
display: none;
background-color: transparent;
border: none;
width: 100%;
max-height: 100%;
}
.menu a{
color: black;
background-color: white;
padding: 5px 10px;
margin: 0px 5px;
border-radius: 10px;
text-decoration: none;
-moz-box-shadow: 0px 0px 20px 0px #4E4E4E;
-webkit-box-shadow: 0px 0px 20px 0px #4E4E4E;
box-shadow: 0px 0px 20px 0px #4E4E4E;
z-index: 0;
}
.menu a:hover{
padding: 7px 12px;
-moz-box-shadow: 0px 0px 30px 0px white;
-webkit-box-shadow: 0px 0px 30px 0px white;
box-shadow: 0px 0px 30px 0px white;
}
#logo{
float: left;
top: -90px;
position: relative;
margin: 5px 0px 0px 5px;
width: 15%;
max-height: 100%;
z-index: 1;
}
.btn:hover, .btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
color: #333333;
background-color: #e6e6e6;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
#btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
#btn:hover, #btn:focus, #btn:active, #btn.active, #btn.disabled, #btn[disabled] {
color: #333333;
background-color: #e6e6e6;
}
#btn:hover, #btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
#a-active{
color: black;
background-color: #DDDDDD;
padding: 5px 10px;
margin: 0px 5px;
border-radius: 10px;
text-decoration: none;
-moz-box-shadow: 0px 0px 20px 0px #4E4E4E;
-webkit-box-shadow: 0px 0px 20px 0px #4E4E4E;
box-shadow: 0px 0px 20px 0px #4E4E4E;
z-index: 0;
}
#a-active:hover{
background-color: white;
padding: 7px 12px;
-moz-box-shadow: 0px 0px 30px 0px white;
-webkit-box-shadow: 0px 0px 30px 0px white;
box-shadow: 0px 0px 30px 0px white;
}
* { margin: 0; padding: 0; }
body { font: 14px Helvetica, Sans-Serif; }
#page-wrap { width: 800px; margin: 25px auto; }
a { text-decoration: none; }
ul { list-style: none;}
p { margin: 15px 0; }
/*
LEVEL ONE
*/
.drops{
margin-left: 30%;
}
ul.dropdown { position: relative; margin-left: 37%; margin-top: 2%;}
ul.dropdown li { font-weight: bold; float: left; zoom: 1; }
ul.dropdown a:hover { }
ul.dropdown a:active { }
ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #333;
}
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { color: black; position: relative; }
ul.dropdown li.hover a { color: black; }
/*
LEVEL TWO
*/
ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li { font-weight: normal; float: none; }
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
/*
LEVEL THREE
*/
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }
when I resize the window the divs shifts to the left or down. is there a way to set those divs on one position where they do not shift positions just stay there?
I pretty much didn't understand your code, but made this fiddle to make you understand how to fix the divs.
I would suggest you to avoid float for divs and do something like:
.fix{
/* this is parent div */
display:inline-block ;
white-space:nowrap;
}
.fxchld{
/* these are child divs */
width:50px;
display:inline-block ;
height:50px;
border:1px solid #000;
}
idea is to use display:inline-block ; instead of floats so that they remain fixed to their position
else
you'll have to give large parent div width so that child divs won't wrap
Fiddle will help you understand my point!!