Positioning issues with CSS when pages have elements missing - php

There is a specific section of my website which had broken look due to bad CSS & PHP code, which I decided to fix today. With good luck fixed a lot of it(and learned CSS along the way).
The pages I fixed have dynamic content on them - Badges like we have here on stackoverflow. Depending on user level, some people may not have any badges.
The problem is, while pages that have badges look alright, the ones which don't look entirely broken, and the rest of the content on pages shifts when there are no badges.
Any thoughts on how should I go about fixing it?
CSS:
.ms-sellerprofile {
width: 100%;
align:center;
}
.ms-sellerprofile .seller-data {
width: 100%;
display: inline-block;
align:center;
}
.ms-sellerprofile .seller-data > div {
display: inline;
float: left;
}
.ms-sellerprofile .seller-data .avatar-box-img {
float:left;
width:250px;
display: inline-block;
margin-top:10px;
margin-bottom:10px;
}
.ms-sellerprofile .seller-data div.avatar-box {
margin-left: 10px;
width:250px;
text-align: left;
font-family: Helvetica, Arial, sans-serif;
font-size: 22px;
display: inline-block;
margin-top:10px;
margin-bottom:10px;
}
.ms-sellerprofile .seller-data .info-box {
margin-top: 10px;
margin-left: 290px;
text-align: right;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
}
.ms-sellerprofile .seller-data div.ms-badges {
border: 0;
margin-left: -240px;
margin-top: 40px;
}
.ms-sellerprofile .seller-data div.info-box p {
margin: 5px 0;
}
.ms-sellerprofile .seller-data div.info-box a {
color: #38B0E3;
text-decoration: underline;
}
.ms-sellerprofile .seller-description {
clear: both;
margin: 40px 0;
}
PHP:
<div class="ms-sellerprofile">
<div class="seller-data">
<div class="avatar-box-img"><img src="<?php echo $seller['thumb']; ?>" />
</div>
<div class="avatar-box"><?php echo $ms_catalog_seller_products; ?>
</div>
<div class="ms-badges"><?php foreach($seller['badges'] as $badge) { ?>
<img src="<?php echo $badge['image']; ?>" title="<?php echo $badge['description']; ?>" /></div>
<?php } ?>
<div class="info-box">
<?php if ($seller['country']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_country; ?></b> <?php echo $seller['country']; ?></p>
<?php } ?>
<?php if ($seller['company']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_company; ?></b> <?php echo $seller['company']; ?></p>
<?php } ?>
<?php if ($seller['website']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_website; ?></b> <?php echo $seller['website']; ?></p>
<?php } ?>
<!-- <p><b><?php echo $ms_catalog_seller_profile_totalsales; ?></b> <?php echo $seller['total_sales']; ?></p> -->
<p><b><?php echo $ms_catalog_seller_profile_totalproducts; ?></b> <?php echo $seller['total_products']; ?></p>
</div>
</div>
</div>

You should handle the exception cases explicitly.
if($var==NULL){
//html without using $var
}
else{
//html with use of $var
}

Related

Rounded corner using border radius for dynamically generated li

I'm having trouble rounding just one corner of my ul list. The last one specifically. Right now, all the corners on the bottom are rounded. Here is my code php code:
<div class="container">
<?php
$pagination = $products->pagination();?>
<?php foreach($pagination->range(10)as $r): ?>
<div class="paginator">
<ul>
<li><a<?php if($pagination->page() == $r) echo ' ' ?> href="<?php echo $pagination->pageURL($r) ?>"><?php echo $r ?></a></li>
</ul>
</div>
<?php endforeach ?>
and my css:
.paginator a:active {
background-color: #2A4143;
color: #fff;
}
.paginator {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
display: inline-block;
}
.paginator ul {
margin-right: -4px;
}
/*.paginator ul{*/
/* width: 100%;*/
/* margin-left: auto;*/
/* margin-right: auto;*/
/* !*position: absolute;*!*/
/* !*bottom: 0;*!*/
/* !*left:0;*!*/
/* !*right:0;*!*/
/*}*/
.paginator ul li a {
/*float: left;*/
padding: 10px;
font-size: 13px;
font-weight: 600;
height: 28px;
width: 28px;
background-color: #F5F5F5;
border: 1px solid #2A4143;
/*border-right-width: 0;*/
margin-right:-1px;
margin-bottom:-1px;
display: inline;
/*display: inline;*/
/*display: block;*/
/*max-height: 100px;*/
/*position: absolute;*/
}
.paginator li:last-child a {
border-bottom-right-radius: 10px;
}
I saw a few solutions on Stack Overflow and elsewhere, but it doesn't really handle a dynamically generated list.
figured it out.
I moved the class on top of the php.
<div class="container">
<?php
$pagination = $products->pagination(); ?>
<div class="paginator">
<ul>
<?php foreach ($pagination->range(10) as $r): ?>
<li><a<?php if ($pagination->page() == $r) echo ' ' ?>
href="<?php echo $pagination->pageURL($r) ?>"><?php echo $r ?></a></li>
<?php endforeach ?>
</ul>
</div>
</div>
and changed the CSS like so:
.paginator ul {
margin-right: -4px;
display: flex;
}

html and body's height is not 100%

I've tried everything I know to make the height of the black part change according to the "samples" in the picture above. Whenever I add new "sample" that will go down the black part does not follow. Is there something wrong in my code, if there is please let understand how to fix it cause Im new at this.
Here is my code:
body,
html,
.yourteachers,
.fullpage
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.fullpage
{
background-color: black;
}
.leftForm
{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers
{
text-align: center;
}
.announcementSlider
{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/teachers.css">
</head>
<body>
<header>
<nav>
<div class="nav-wrapper blue">
<div class="container">
Teachers
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li><a id="dashb">Home</a></li>
<li><a id="logout">Log Out</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="fullpage">
<div class="leftForm hide-on-med-and-down">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="leftForm sidenav blue center" id="slide_out">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="yourteachers">
<?php
while ($row = mysqli_fetch_array($query)) {
echo '<a class="announcementSlider" href="teacherinfo.php?id=' . $row['IDNum'] . '">
<img src="pictures/blank photo.png" class="teacherpic"><br>
<span>'.$row['LastName'].'</span><br>
<span>'.$row['Grade'].' - </span>
<span>'.$row['Section'].'</span>
</a>';
}
?>
</div>
</div>
<script type="text/javascript">
var a = document.getElementsByClassName("announcementSlider");
for (i = 0; i < a.length; i++) {
a[i].onclick = function() {
location.href = "teacherinfo.php";
};
}
</script>
<script src="js/teachers.js"></script>
<script src="sameFunctions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
<footer>
<div class="foot">
<div class="socialMed">
</div>
</div>
</footer>
</body>
</html>
It's because your .fullpage needs to follow .yourteachers 's height. And your .leftForm has float: left but it's parent (.fullpage) still doesn't know the exact height of it's children. To fix it, you need to add clear: both by using div with additional .clearboth class or css :before or :after pseudo-selector.
see my fiddle here
In my approach above, I'm using fixed sidebar and add margin-left on .yourteachers to fix sidebar height issue. For better implementation, I recommend you to use flex box so you keep your sidebar not using fixed position.
<!-- language-all: lang-css -->
body, html, .yourteachers, .fullpage {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
background: black;
}
.fullpage {
overflow: hidden
}
.leftForm{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers{
text-align: center;
}
.announcementSlider{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}
Have u tried height: 100vh? Height is automatically adjusting, so just height: 100% means 100% height of parent.

Append file instead of recreating it - PHP/HTML

I've tried a couple things and I can't seem to get this to update instead of recreating the file.
With A LOT of help from users here I created a menu template for our chef here at my facility. He enters his information and it creates a menu automatically with an image all kinds of fancy things.
What I'm hoping now is if he needs to change a menu item he doesn't have to retype every days information back in. I've read up on FILE_APPEND as well as fopen but don't seem to be doing what I need.
Here's the script I'm utilizing.
<?php
$MessageMondayMain = $_POST['MessageMondayMain'];
$MessageTuesdayMain = $_POST['MessageTuesdayMain'];
$MessageWednesdayMain = $_POST['MessageWednesdayMain'];
$MessageThursdayMain = $_POST['MessageThursdayMain'];
$MessageFridayMain = $_POST['MessageFridayMain'];
$MessageMonday = $_POST['MessageMonday'];
$MessageTuesday = $_POST['MessageTuesday'];
$MessageWednesday= $_POST['MessageWednesday'];
$MessageThursday = $_POST['MessageThursday'];
$MessageFriday = $_POST['MessageFriday'];
$MessageDate = $_POST['MessageDate'];
ob_start();
?>
<META http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<html>
<head>
<title>GCH Cafe Menu</title>
<style>
.menu {
padding-top: 22px;
padding-right: 350px;
box-sizing: border-box;
margin: 0 auto;
line-height: 100%;
color: black;
overflow-y: scroll;
}
.menu h1 {
padding-top: 1px;
font-size: 40px;
font-family: candara;
position: relative;
}
.menu h2 {
z-index:3
font-size: 30px;
font-family: Time New Roman;
text-decoration: Underline;
color: black;
text-transform: uppercase;
color: rgb(54,113,91);
}
.menu h3 {
z-index:3
font-size:25px;
font-family: candara;
text-transform: uppercase;
text-weight: bold;
color: rgb(152,180,155);
}
.menu h4 {
z-index:3
font-family: candara;
font-size: 18px;
line-height:100%;
width: 650px;
color: gray;
}
.container {
position:absolute;
}
.outline {
position: absolute;
left: -570px;
z-index:1
}
.chef {
position: absolute;
top: 90px;
left: 150px;
z-index:2
}
.date {
position: absolute;
top: 810px;
right: 210px;
z-index:2
}
</style>
</head>
<body bgcolor="#f2f2f2">
<center>
<div class="container">
<img class="outline" src="plain.png" height="825" width="750">
<img class="chef" src="chef.png" height="690" width="450">
</div>
<div class="menu">
<h1><img src="cafe2.png" height="100" width="225"></h1>
<br>
<h2>Monday</h2>
<h3>-<?php echo nl2br ($MessageMondayMain);?>-</h3>
<h4><?php echo nl2br($MessageMonday); ?></h4>
<h2>Tuesday</h2>
<h3>-<?php echo nl2br ($MessageTuesdayMain);?>-</h3>
<h4><?php echo nl2br($MessageTuesday); ?></h4>
<h2>Wednesday</h2>
<h3>-<?php echo nl2br ($MessageWednesdayMain);?>-</h3>
<h4><?php echo nl2br($MessageWednesday); ?></h4>
<h2>Thursday</h2>
<h3>-<?php echo nl2br ($MessageThursdayMain);?>-</h3>
<h4><?php echo nl2br($MessageThursday); ?></h4>
<h2>Friday</h2>
<h3>-<?php echo nl2br ($MessageFridayMain);?>-</h3>
<h4><?php echo nl2br($MessageFriday); ?></h4>
<div class="date">
<h2>Menu Date:<br><br><?php echo ($MessageDate);?></h2>
</div>
</div>
</div>
</center>
</body>
</html>
<?php
$html = ob_get_contents();
ob_end_clean();
$filename = "menu.html";
file_put_contents($filename, $html);
echo file_get_contents("menu.html");
?>

Menu doesn't make a block

This menu is made in html and php. I have a menu in css. Whenever I mouse over on menu item it doesn't make a link on mouseover, and whenever I click on text it make a link.
<div class="panel panel-default">
<div class="panel-heading">
<?php if($menurow['hassubmenu'] != NULL)
{?>
<a data-toggle="collapse" data-parent="#accordian" href="#<?php echo $menurow['mainmenuid']; ?>" title="<?php echo $menurow['title']; ?>"><span class="badge pull-right"><i class="fa fa-plus"></i></span><?php echo $menurow['title']; ?></a>
<?php }else{?>
<h4 class="panel-title"><?php echo $menurow['title']; ?></h4>
<?php } ?>
</div>
<?php if($menurow['hassubmenu'] != NULL){?>
<div id="<?php echo $menurow['mainmenuid']; ?>" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<?php
$menuquery2 = mysql_query("select title,itemid,catid from submenu where mainmenuid=".$menurow['mainmenuid']." order by sort asc");
while($menurow2 = mysql_fetch_assoc($menuquery2))
{
if($menurow2['itemid'] != NULL)
$menulink2 = "showitem.php?id=".$menurow2['itemid'];
elseif($menurow2['catid'] != NULL)
$menulink2 = "category.php?id=".$menurow2['catid'];
else
$menulink2 = "#";
?>
<li><?php echo $menurow2['title']; ?></li>
<?php }?>
</ul>
</div>
</div>
<?php }?>
</div>
CSS Code
/* New menu */
.category-products .panel {
background-color: #FFFFFF;
border: 0px;
border-radius: 0px;
box-shadow:none;
margin-bottom: 0px;
}
.category-products .panel-default .panel-heading {
background-color: #CCCCCC;
border: 1px solid;
color: #FFFFFF;
padding: 5px 20px;
cursor:pointer;
height:40px;
}
.category-products .panel-default .panel-heading a { color: #D00233;
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
}
.category-products .panel-default .panel-heading a:hover {background:#D00233; color:#fff;}
.category-products .panel-default .panel-heading:hover {background:#D00233; color:#fff !important;}
.category-products .panel-default .panel-heading .panel-title {
color: #D00233;
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
}
.category-products .panel-default .panel-heading .panel-title:hover {color:#fff;background:#D00233;}
Please help me.
add this to the links and to the panel-title:
display: block;
width: 100%;
height: 100%;
in your case that would be:
.panel-title{
display: block;
width: 100%;
height: 100%;
}
.panel-title>a{
display: block;
width: 100%;
height: 100%;
}

Proplem in div right align?

i have php program that contain div main_wrapper that div have two sub div resultwrapper and adv_right. I want adv_right div exactly right side of the resultwrapper div.When i'm use float mean that div present outside of the main_wrapper div.
<style>
.resultwrapper{width:990px; margin: 10px auto 10px auto; clear:both; }
.resultitem{ float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;}
.resultleftitem{padding-left:0;margin-left:0px;}
.resultitem img{border:dotted 1px #666; padding:6px;}
.resultitem img:hover{border:solid 1px #F60;}
.resultitem h4{font-size:12px; font-weight:bold; color:#249ce9; margin-top:5px; }
.resultitem a{color:#249ce9;}
.resultitem .caption{color:#9c9c9c; font-size:12px; display:block; margin-top:6px; text-align:justify;}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank">
<img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" /></a>
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span>
</div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style=" clear:both; width:15%; float:right;height:300px; background-color:#999999;">
</div>
</div>
Please try it,
Remove clear:both; from both div and set width what u want ,,
Please try this code you want like this ??
<style>
.resultwrapper {
margin: 10px auto 10px auto;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" />
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span> </div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style="width:15%; float:right;height:300px; background-color:#999999;">23123 </div>
</div>
add float:left here
<div class="resultwrapper" style="float:left;">
and rempove clear:both and add float:left
<div class="adv_right" style=" clear:both; width:15%; float:left;height:300px;
background-color:#999999;">
see demo here ....http://jsfiddle.net/6e4xN/1/
when you going to use this code it will not work with more than 7-8 elements, to work when you have more elements then use below stylesheet.
<style>
.resultwrapper {
margin: 10px auto 10px auto;
width:80%;
float:left;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:150px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
Let me know if it works for you or not.
I guess there is some problem in the code. You CANNOT use the same ID for multiple elements in a page. Secondly when you are using percent width for the adv_right div, why don't you use the same for resultwrapper div with both the resultwrapper & adv_right divs floated left and no clear:both in the css. I feel this should solve your problem.

Categories