CSS only works fine after php execution and reload - php

<?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

Related

Moodle Login page Change

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

Adding same css to dynamically added elements

Hello I am making a chat application, so whenever i click on a online user a chatbox should open, similarly whenever multiple chatbox should open when i click a different users. I am appending div for a each time a user click on a online user. I am facing some issues with css.
Is this because i am using same css for each new chatbox. Here is my code for adding a chatbox dynamically.
$(".shout_msg").click(function(){
var id = $(this).attr('id');
var name = $(this).text();
alert("name is "+ name + "id is " +id);
$('body').append("<div class = 'shout_box'></div>");
$(".shout_box").append("<div class = 'header'>'"+name+"'</div>");
$(".header").append("<div class='close_btn'> </div>")
$(".shout_box").append("<div class = 'toggle_chat'></div>");
$(".toggle_chat").append("<div class = 'message_box'></div>");
$(".toggle_chat").append("<div class = 'user_info'></div>");
$(".user_info").append('<input name = "shout_message" id = "shout_message" type = "text" placeholder = "Type Message Hit Enter" />');
})
shout_msg is a paragraph which show a single online user.
This is my css
<style type="text/css">
.shout_box {
background:#627BAE; width:260px; overflow:hidden;
position:fixed; bottom:0; right:20%; z-index:9;
}
.shout_box .header .close_btn {
background: url(close_icon.png) no-repeat 0px 0px;
float:right; width:15px;
height: 15px;
}
.shout_box .header .close_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -16px;
}
.shout_box .header .open_btn {
background: url(images/close_btn.png) no-repeat 0px -32px;
float:right; width:15px;
height:15px;
}
.shout_box .header .open_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -48px;
}
.shout_box .header{
padding: 5px 3px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: bold; color:#fff;
border: 1px solid rgba(0, 39, 121, .76);
border-bottom:none; cursor:pointer;
}
.shout_box .header:hover{
background-color: #627BAE;
}
.shout_box .message_box {
background: #FFFFFF; height: 200px;
overflow:auto; border: 1px solid #CCC;
}
.shout_msg{
margin-bottom: 10px; display: block;
border-bottom: 1px solid #F3F3F3; padding: 0px 5px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif; color:#7C7C7C;
}
.message_box:last-child {
border-bottom:none;
}
.time{
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: normal; float:right; color: #D5D5D5;
}
.shout_msg .username{
margin-bottom: 10px;margin-top: 10px;
}
.user_info input {
width: 98%; height: 25px; border: 1px solid #CCC; border-top: none; padding: 3px 0px 0px 3px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
font-weight: bold; display: block;
}
.userdisplay{
width: auto;
height: 30px;
border-radius: 10px;
background-color: #627BAE;
}
.userdisplay p{
width: auto;
//background-color: yellow;
padding : 10px;
}
.userdisplay a{
float : right;
}
</style>

CSS doesn't work

I'm having a problem with my CSS style sheet. I try inputting the values to the DIV CLASSES, but there is no effect. The style sheet worked fine on my other HTML website, but I'm using a common header and footer via PHP on this website and it seems like it's interfering with the CSS for some reason. I don't know if my coding has any fallacies in it, but from what I can see everything looks fine:
CSS STYLE SHEET
body {
background-color: #000;
font-family: Arial, Verdana;
color: #fff;
}
a:link {
color: #ff0;
text-decoration: none;
}
a:visited {
color: #ff0;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
a:active {
color: #000f;
text-decoration: none;
}
p {
text-align: justify;
font-size: 14px;
}
.container {
border: 1px solid #fff;
width: 820px;
height: 1350px;
padding: 10px;
}
.header {
background-image: url("/Images/CSS/logo.jpg");
background-position: center;
background-size: cover;
height: 20%;
width: 100%;
}
.logo {
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: -o-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
border: 0px solid #fff;
height: 90%;
width: 100%;
}
.logo h1 {
margin: 15px;
color: #ffa500;
float: right;
position: relative;
bottom: -160;
}
.logo p {
font-size: 12px;
margin: 15px;
color: #ffa500;
float: left;
position: relative;
bottom: -175;
}
.userbar {
width: 100%;
height: 10%;
background-color: #000;
border: 1px solid #fff;
padding: 5px;
.body {
border: 0px solid #fff;
width: 100%;
height: 70%;
}
.left {
border: 1px solid #fff;
float: left;
width: 250px;
height: 100%;
}
.right {
border: 0px solid #fff;
float: right;
width: 550px;
height: 100%;
}
.nav {
width: 100%;
border: 1px solid #fff;
margin-top: 15px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-position: none;
list-style: none;
}
.nav li {
width: 85%;
margin: 15px;
color: #fff;
border-bottom: 1px dotted #fff;
}
.side {
margin-top: 25px;
color: #fff;
width: 100%;
border: 1px solid #fff;
}
.content {
width: 100%;
}
.content p {
padding: 10px;
color: #fff;
text-align: justify;
border-style: solid;
border-width: 0px;
}
.footer {
height: 10%;
width: 100%;
border: 1px solid #fff;
}
.footer p {
padding: 5px;
color: #fff;
text-align: center;
}
.pic {
padding: 10px;
margin: 10px;
}
.pic p {
width: 430px;
text-align: center;
font-size: 9px;
}
.pic1 {
float: left;
padding: 10px;
margin: 10px;
border: 1px solid #fff;
}
.pic1 p {
width: 170px;
text-align: center;
font-size: 9px;
}
.pic2 {
float: right;
margin: 10px;
padding: 10px;
border: 1px solid #fff;
}
.pic2 p {
width: 170px;
text-align: center;
font-size: 9px;
}
Index Page
Note that the Index page itself is not html. It's a PHP file and I'm using separate PHP files for the header and footer. This is just the page source to let you see the layout of my website.
<html>
<head>
<title></title>
<link rel ="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
</div>
<div class="userbar">
</div>
</div>
<div class="body">
<div class="left">
<div class="nav">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>
</div>
<div class="side">
<h3 align="center">News</h3>
</div>
</div>
<div class="right">
<div class="content"> </div><!----content----!>
</div><!----right----!>
<div class="footer">
</div>
</div><!----container----!>
</body>
</html>

Nested divs getting pushed below container div whiles using PHP dynamic navigation header

I am developing a site using a dynamic PHP header and seem to have gotten that part working. My issues came when trying to put the remaining content in the container div along with the header div. All other content is ignored and gets pushed to the left and down below the container. I want it to be INSIDE the container and center on the page like the header does.
Here is where I am with the site:
http://maniandcompany.com/test/test/Print.php
I have tried several things including overflow:hidden; to no avail.
Here is the HTML Page
<div id="container">
<div id="header">
<?php include 'header.php'; ?>
</div>
<div id="body">
<div class="text">
<h1>Title H1</h1>
<h3>H3 Copy</h3>
<h2>H2 Title</h2>
<p>body copy p</p>
<span class="more_pictures">more images:</span>
</div>
<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
</div>
</div>
<div style="clear: both;"></div>
</div>
Here is the CSS
/*Container*/
#container {
width:790px;
margin:auto;
overflow:hidden;
}
/*Body*/
#body {
width:790px;
margin-top:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #484941;
overflow:hidden;
}
.main_image {
float:right;
width:527px;
height:350px;
margin-left:3px;
}
.text {
float:left;
font-family:Georgia, "Times New Roman", Times, serif;
width: 220px;
min-height: 350px;
margin-left:20px;
margin-right:20px;
}
.text h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color: #666;
text-transform: uppercase;
}
.text h2 {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color: #F60;
}
.text h3 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
font-style:italic;
color: #CCC;
padding-bottom: 20px;
}
.text p {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color: #999;
padding-bottom:10px;
}
.text .more_pictures {
font-size:9px;
font-style:italic;
color: #999;
}
/*header*/
#header {
width:790px;
height:140px;
}
#head {
width:790px;
}
/*logo*/
#logo {
float:left;
width: 260px;
height: 100px;
}
/*main navigation*/
#nav_main {
float:left;
font-size: 12px;
color: #000;
font-family: Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-style: italic;
width:240px;
height:20px;
text-align:center;
margin-left:20px;
margin-top:110px;
position:absolute;
z-index:2;
}
#nav_main .current {
float:left;
padding-right: 10px;
color: #F60;
text-decoration: none;
}
#nav_main .current a:link {
color: #F60;
text-decoration: none;
}
#nav_main .current a:visited, a:hover, a:active {
color: #F60;
text-decoration: none;
}
#nav_main .inactive {
padding-right: 10px;
float:left;
color: #000;
text-decoration: none;
}
#nav_main .inactive a:link{
color: #000;
text-decoration: none;
}
#nav_main .inactive a:visited {
color: #000;
text-decoration: none;
}
#nav_main .inactive a:hover, a:active {
color: #F60;
text-decoration: none;
}
/*NAV STYLES*/
#nav {
float:right;
height: 100px; /*height of our content box*/
width: 527; /*width of our content box*/
margin-left:3px;
}
#nav #greybox {
height: 20px;
width: 527px;
background: #CCC;
background-color: #ccc;
margin-bottom:5px;
}
#nav #greybox2 {
height: 20px;
width: 527px;
background: #CCC;
background-color: #ccc;
margin-top: 60px;
}
/*Thumbstrip*/
#nav #thumbStrip {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color: #F60;
-webkit-backface-visibility: hidden;
float: left;
height: 70px;
width: 527px;
margin-bottom:5px;
}
#nav #thumbStrip .thumb {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
margin-left: 3px;
-moz-box-shadow: 0px 0px 0px #FFF;
-webkit-box-shadow: 0px 0px 0px #FFF;
box-shadow: 0px 0px 0px #FFF;
opacity:0.4;
filter:alpha(opacity=40);
}
#nav #thumbStrip .thumb:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumb .first {
margin-left: 0px;
}
#nav #thumbStrip .thumb p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumb img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
#nav #thumbStrip a:link, .thumbStrip a:visited {
font-size: 0.8em;
color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
border: none;
color: #F60;
}
/*Thumbstrip First*/
#nav #thumbStrip .thumbfirst {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
margin-left: 0px;
-moz-box-shadow: 0px 0px 0px #FFF;
-webkit-box-shadow: 0px 0px 0px #FFF;
box-shadow: 0px 0px 0px #FFF;
opacity:0.4;
filter:alpha(opacity=40);
}
#nav #thumbStrip .thumbfirst:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbfirst p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbfirst img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
/*thumb active first*/
#nav #thumbStrip .thumbActiveFirst {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
color: #F60;
-moz-box-shadow: 0px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 3px #FFF;
box-shadow: 0px 1px 3px #FFF;
opacity:1.0;
filter:alpha(opacity=100);
}
#nav #thumbStrip .thumbActiveFirst:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbActiveFirst p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbActiveFirst img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
/*thumb active*/
#nav #thumbStrip .thumbActive {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
color: #F60;
margin-left: 3px;
-moz-box-shadow: 0px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 3px #FFF;
box-shadow: 0px 1px 3px #FFF;
opacity:1.0;
filter:alpha(opacity=100);
}
#nav #thumbStrip .thumbActive:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbActive p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbActive img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
#nav #thumbStrip a:link, #content .thumbStrip a:visited {
font-size: 0.8em;
color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
border: none;
color: #fff;
}
#nav #thumbStrip .thumb .first {
margin-left: 0px;
}
Thanks in advance for your help.

line 119 on the source page has a div closing tag that is ending you 'body' div before your 'clear' div.
<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
</div>
</div> <-- erase this closing tag.
<div style="clear: both;"></div>
</div>
Not to mention you have 2 sets of opening and closing head and body tags. im not sure if you're including a php file with those and then repeating them in your other pages or what, but there are a lot of stray tags on that page.

Time line trouble

I need to do time-line as time-line on facebook, each div under another div.
For blocks I have : -float: left, display: inline-block; but can't remove free space.
<div class="wrap">
<input type="hidden" id="tp" value="<?php echo $tp; ?>" />
<?php
$i=0;
foreach($memes as $key=>$val){
$i++;
if($i!=1){
echo "<br clear='all' />";
echo "<br clear='all' />";
}else{
echo "<br clear='all' />";
}
echo "<h1 class='fd_date' alt='".$key."'>".(($res = dt_diff($key)) ? $res : (($dt = explode("-", $key)) ? $res : ""))." ".getDay($key)."</h1>";
echo "<br clear='all' />";
echo "<div class='memescont'>";
for($cnt=0;$cnt<count($val);$cnt++){
if($cnt%2==0){
echo"
<div class='fd_meme' rel='".$val[$cnt]['id']."' >
<h1 class='title'>".$val[$cnt]['tit']."</h1>
<img width='465px' alt='".trim("Комиксы, мемы - ").$val[$cnt]['tit']."' src='".base_url()."upload/".$val[$cnt]['src']."' />
<div class='social'>
<div class='likes'>Понравилось:</div>
<div class='shared'>Поделиться:</div>
</div>
</div>
";
}else{
echo"
<div class='fd_meme' rel='".$val[$cnt]['id']."' >
<h1 class='title'>".$val[$cnt]['tit']."</h1>
<img width='465px' alt='".trim("Комиксы, мемы -").$val[$cnt]['tit']."' src='".base_url()."upload/".$val[$cnt]['src']."' />
<div class='social'>
<div class='likes'>Понравилось:</div>
<div class='shared'>Поделиться:</div>
</div>
</div>
";
}
}
echo "</div>";
}
?>
<br clear="all" />
</div>
css :
.content {
height: 100%;
overflow: auto;
position: absolute;
width: 100%;
z-index: 3;
}
.head {
display: inline-block;
width: 100%;
z-index: 2;
}
.wraphead {
margin: 5% auto;
left: 0;
right: 0;
clear: both;
display: block;
margin: 0 auto;
width: 1280px;
height: 64px;
background: url(../i/header.png) 0 0 no-repeat;); position: fixed; top: 0; z-index: 2;
}
#logo { width: 145px; height: 38px; background: url(../i/logo.png) 0 0 no-repeat; float:left; margin: 11px 0;}
.links { height: 60px; float: left; margin-left: 115px;}
.links a { float: left; color: #fff; font-size: 14px; font-family: Verdana, Geneva, sans-serif; margin: 17px 90px 23px 0; }
.links a:hover {cursor: pointer;}
.langs {float: left; width: 62px; height: 20px; border: 1px solid #dedede; border-radius: 1px; margin: 17px 0 23px; }
.langs .lang { margin-left: 8px; width: 10px; height: 8px; margin-top: 6px; margin-bottom: 6px; display: inline-block;}
.lang.ru {background: url(../i/ru.png) 0 0 no-repeat;}
.langs span { font-size: 10px; font-family: Verdana, Geneva, sans-serif; font-style: normal; color: #ffffff; float: right; display: inline-block; margin-top: -18px; margin-right: 22px;}
em.lang_select{ width: 5px; height: 3px; background: url(../i/lang_select.png) 0 0 no-repeat; display: inline-block; float: right; margin-top: -11px; margin-right: 10px}
em.lang_select:hover {cursor: pointer; }
.wrap {width: 980px; display: block; margin: 0 auto;}
.memes {width: 100%; display: inline-block;}
.memes .wrap { background: #fff; z-index: -1; -moz-box-shadow: 0 0 3px rgba(0,0,0,0.5); /* Для Firefox */
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5); /*Для Safari и Chrome */
box-shadow: 0 0 3px rgba(0,0,0,0.5); /* Параметры тени */ }
.lft { width: 465px; display: inline-block; padding: 10px 0; }
h1.title{ font-size: 20px; color: #000; font-family: Arial, Helvetica, sans-serif; max-width: 460px; display: inline-block; float: left; font-weight: lighter; text-align: left; margin: 4px 0;}
.martop40 { margin-top: 30px; }
.rgt { width: 465px; float:left; display: inline-block; margin: 0 11px; padding-right: 13px; border-right: 2px solid #999999; }
h1.fd_date{ color: #626262; font-size: 16px; font-family: Verdana, Geneva, sans-serif; text-align: center; font-weight: lighter; bottom: 0;}
.line {width: 2px; display: inline-block; position: absolute; margin-left: 2px; background: url(../i/line.png) 0 0 repeat-y; z-index: 0; min-height: 100%; height: auto;}
.memescont {margin: -10px 0;}
.social { height: 80px; width: 469px; background: url(../i/social_bg.png) 0 0 no-repeat; }
.rgt img, .lft img {border: 1px solid #999;}
.fd_meme { width: 465px; float: left; margin: 0 12px; display: inline-block;}
.right { width: 490px; float: left; }
.left { width: 490px; float: right; }
.likes, .shared {font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #272727; padding-top: 12px; padding-left: 10px; display: inline-block; width: 202px; height:60px;}
pic: http://picshare.ru/view/97355/rand.png.html
ps. Sorry for my bad english.

It sounds like you are looking for the jQuery masonry plugin. See here
This is what it will look like

Categories