I have a calendar that I created in PHP
the problem is, it is not displayed well in Internet Explorer
In Chrome all is well
I use DIV instead of Table
The complete code here and you can see a demo here
http://www.guadadvent.org/calendrier_essaie.php
.today{
font-weight:bold;
color:red;
}
.mois {
background:#FFF;
height:30px;
line-height:30px;
width:100%;
text-align:center;
margin-right:-100px;"
}
.jours {
background:#FFF;
border:1px #999933 solid;
padding:5px;
height:30px;
line-height:30px;
width:100px;
float:left;
text-align:center;
margin-right:-3px;
margin-bottom:1px;"
}
.cellule {
background:#FFF;
border:1px #999933 solid;
padding:5px;
height:70px;
width:100px;
float:left;
text-align:right;
margin-right:-3px;
margin-bottom:1px;
}
.cellule_vide {
padding:5px;
height:70px;
width:100px;
float:left;
text-align:right;
margin-right:-1px;
margin-bottom:1px;"
}
.cellule:hover {
background:#CCC;
border:1px solid red;
}
.separateur {
style="clear:both;"
}
.cadre {
display:inline-block;
background:#CCC;
position:relative;
}
.nav_gauche {
position:absolute;
top:0px;
left:0px;
text-decoration:none;
padding-left:50px;
}
.nav_droite {
position:absolute;
top:0px;
right:0px;
text-decoration:none;
padding-right:50px;
}
</style>
<?php
$tabmois = array ("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
$tabjours = array ("","Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");?>
<?php $an=$_REQUEST["a"];
if(empty($an)) $an=date("Y");
$mois=$_REQUEST["m"];
$jour_serveur=date("j");
$mois_serveur=date("m");
if(empty($mois)) $mois=$mois_serveur;
if($mois==12) $mois_suivant=1; else $mois_suivant=$mois+1;
if($mois==1) $mois_precedent=12; else $mois_precedent=$mois-1;?>
<?php
$premJourdumois = date("w" , mktime(0,0,0,$mois,1,$an) )+1;// en chiffre, +1 si calendrier comence par dimanche, soit 1 pour dimanche
$nbJoursdanslemois = date("t" , mktime(0,0,0,$mois,1,$an)); // respecte les années bixectiles
$nbdecellulesvidesavantdebut = $premJourdumois-1; // nom de variable explicite
?>
<div class="cadre">
<div class="mois">
<div class="nav_gauche" > << </div>
<?php echo $tabmois[$mois];?>
<div class="nav_droite"> >> </div>
</div>
<div class="separateur"></div>
<?php // les jours
for ($i=1;$i<=7;$i++) {?>
<div class="jours"><?php echo $tabjours[$i];?> </div>
<?php } ?>
<div class="separateur"></div>
<?php // cellules vide avant le debut de l'affichage
for ($i=1;$i<=$nbdecellulesvidesavantdebut;$i++) {?>
<div class="cellule_vide"></div>
<?php }?>
<?php // affichage du calendrier
for ($i=1;$i<=$nbJoursdanslemois;$i++) {?>
<?php if(($i==$jour_serveur) and ($mois==$mois_serveur)) $auj="today"; else $auj=""; // si c'est le jour d'aujourd'ui on met une classe spéciale?>
<div class="<?php echo $auj;?> cellule"><?php echo $i;?></div>
<?php // saut si on liste une semaine soit 7 jours
if(($i+$nbdecellulesvidesavantdebut)%7 == 0 ) {?>
<div class="separateur"></div>
<?php }?>
<?php }?>
</div>
Related
I want to hide fixed-button id and anilogg_buddypress class from my login page How can I achieve this in WordPress?
function anilogg_footer() {?>
<style>
#media only screen and (min-width:481px){
.fixed-menu{
display:none;
}
#fixed-button{
display:none;
}
}
#media only screen and (max-width: 480px) {
ul.fixed-menu{
position:fixed;
bottom:0;
width:100%;
background:white;
height:50px;
border-top:1px solid #e40000;
}
.fixed-menu li {
display:inline-block;
text-align:center;
color:#e40000;
width:23%;
line-height:50px;
font-size:1.5rem;
}
.fixed-menu li:2n{
border-left:1px solid #fff;
}
#fixed-button a{
display:block;
width:50px;
height:50px;
background:#e40000;
color:white;
position:fixed;
right:15px;
bottom:65px;
border-radius:50%;
text-align:center;
line-height:50px;
font-size:2rem;
}
}
</style>
<div id="fixed-button">
<a href="#" class="fixed-menu">
<span class="icon-videocam"></span>
</a>
</div>
<div class="anilogg_buddypress">
<ul class="fixed-menu">
<li><span class="icon-home"></span></li>
<li><span class="icon-mail"> </span></li>
<li><span class="icon-bell"></span></li>
<li><span class="icon-user"></span></li>
</ul>
</div>
<?php }
add_action( 'wp_footer', 'anilogg_footer' );
if(is_page('login')){
?>
<style>
.fixed-menu{
display:none;
}
#fixed-button{
display:none;
}
</style>
<?php }
else{
}
I expect that the anilogg_buddypress class and fixed-button id div should not be visible on the login page. (There is a page named login Not default login page of WordPress). I have made function anilogg_footer for displaying a bottom menu in the website. For which I have added a action.
I am new to wordpress development . In My custom wordpress theme posts are not rendering perfectly may be there is css issue but i am not able to figure out .
I have added code of my index.php please have a look.
Index.php ->>
<?php get_header(); ?>
<div id="primaryContent" class="content-area">
<main id="main" class="container site-main" role="main">
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post_box">
<div class="post_title"> <h2> <?php the_title(); ?> </h2> </div> <!--end of post title-->
<div class="post_thumb">
<?php
if (has_post_thumbnail() )
{
the_post_thumbnail();
}
?>
</div> <!-- end of post thumb-->
<div class="post_content">
<?php echo substr(get_the_excerpt(), 0 , 200); ?> </br>
Read more
</div> <!-- end of post content-->
<?php endwhile; else: ?>
<p> No Post Found </p>
<?php endif; ?>
</div> <!-- end of post box -->
</main>
</div><!-- .content-area -->
<?php get_footer(); ?>
CSS ->>
#primaryContent
{
Clear:both;
}
.post_box
{
width:700px;
min-height:220px;
border:1px solid;
margin : 5% 0 5% 0;
}
.post_title
{
margin-top:10px;
margin-top:10px;
color:#000000;
}
.post_title h2
{
text-align:center;
text-decoration:none;
color:#000000;
}
.post_title h2 a
{
color:#000000;
}
.post_title h2 a:hover
{
text-decoration:none;
}
.post_thumb
{
float:left;
width:180px;
height:140px;
margin-left:10px;
}
.post_thumb img {
width:100%;
height:100%;
border:1px solid #cccccc;
padding:5px;
}
.post_content
{
float:left;
width:400px;
border :1px solid #000000;
margin-left:25px;
min-height:100px;
margin-top:5%
}
.read_more
{
background:#0E5198;
color:#ffffff;
padding:5px 10px;
text-decoration:none;
margin-top:12%;
float:right;
}
Images when there is only 1 post
Images when there is only 1 post
Image when there are 2 posts
Image when there are 2 posts
Please help me solve this issue. Thanks in advance
Text going out of the div.Nothing I have tried seems to work.Example the word red going out of the div.
I have 2 divs floating next to each other shown with green and red borders.Div 1 has images coming from a databse. Div 2 which I have named #index wraps around div class='board' blue border as shown in the image,which holds the description coming from MYSQL database.
Code on index.php:
<div id="index">
<?php
$select = "SELECT * FROM products LIMIT 0,20";
$query = mysqli_query ($conn,$select);
while ($row = mysqli_fetch_assoc($query)){
$B = $row['Brand']; $P = $row['Product']; $D = $row['Description'];
$M = $row['Model'];$Id = $row['Id'];
echo "<div class='board' style='word-wrap: break-word;'><a href =
'redirect.php?id=$Id'><h2>     
".$B." ".$P." ".wordwrap($D,28,"<br>\n",TRUE)." ".$M."</h2>
</a></div>";
}
?>
</div>
CSS:
#index {
border:solid 1px red;
position:relative;
float:left;
width:59%;
height:100%;
word-wrap:break-word;
}
div.board {
width:480px;
}
.board {
background:white;
position:relative;
border-radius:15px;
border-color:#0033FF;
border-width:2px;
border-style:solid;
margin-top:31px;
width:480px;
height:195px;
padding-left:0px;
margin-left:0px;
word-wrap:break-word;
white-space:normal;
}
<div id="index">
<?php
$select = "SELECT * FROM products LIMIT 0,20";
$query = mysqli_query ($conn,$select);
while ($row = mysqli_fetch_array($query)){
$B = $row['Brand']; $P = $row['Product']; $D = $row['Description'];
$M = $row['Model'];$Id = $row['Id'];
echo "<div class='board' ><a href = 'redirect.php?id=$Id'>
<h2>".$B." ".$P." ".$D." ".$M."</h2></a></div>";
}
?>
</div>
CSS:
#index {
position:relative;
top:15px;
float:left;
width:482px;
height:100%;
}
.board {
background:white;
position:relative;
border-radius:15px;
border-color:#0033FF;
border-width:1px;
border-style:solid;
margin-top:29px;
height:198px;
padding-left:18px;
padding-right:0px;
margin-left:0px;
float:left;
word-wrap: break-word;
}
i'm trying to get images that im echoing to display inline-block/horizontal but instead whatever i do they are just listing down/vertically. how can i fix this?
here's my code:
<div class="profile_photos_area">
<?php
$dirname = "./data/photos/".$profile_id."/";
$images = scandir($dirname);
$ignore = Array("_cover.jpg", "_default.jpg");
foreach($images as $curimg){
if(!in_array($curimg, $ignore) && preg_match("/\.jpg$/i", $curimg)) {
echo "<img src='".$dirname.$curimg."' class=\"profile_photos\"><br>\n";
};
}
?>
</div>
.profile_photos{
margin-top:0px;
border:#ccc 1px solid;
width: 170px;
height: 150px;
display:inline-block;
position:relative;
}
.profile_photos_area{
width:665px;
height:350px;
background:#000;
margin-left:-193px;
display:inline-block;
overflow:hidden;
}
Did you look at the html your code generate? Look at the asterisks :
echo "<img src='".$dirname.$curimg."' class=\"profile_photos\">******<br>******\n";
br. br!
It is html, and it means... break line! Just remove that.
demo
The boxes were on one line now they have been knocked onto three why is this?
CSS:
#case_studies { margin:10px 0 0 5px; }
.case_study { float:left; width:258px; padding-left:19px; }
#case_studies .strip { width:279px; height:30px; margin:15px 0 20px -19px; }
#case_studies h3.tri { background:transparent url("../images/ico_triangle.gif") no-repeat left; font-size:1.3em; padding:10px 0 10px 20px; }
#case_studies .content img { margin-bottom:10px; }
.light_green img { border:1px solid #7ac63c; }
.light_orange img { border:1px solid #fa7605; }
.light_blue img { border:1px solid #4dacd8; }
#case_studies .green { background:#7ac63c url("../images/bg-greenstrip.gif") repeat 0 0; height:40px;}
#case_studies a.green { background:transparent; text-decoration: underline; color:#7ac63c; }
.light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; }
#case_studies .orange { background:#82c1f1 url("../images/bg-orangestrip.gif") repeat 0 0; height:40px; }
#case_studies a.orange { background:transparent; text-decoration: underline; color:#fa7605; }
.light_orange { background:#feddc0; width:260px; margin:0 15px 15px 0; }
#case_studies .blue { background:#82c1f1 url("../images/bg-bluestrip.gif") repeat 0 0; height:40px;}
#case_studies a.blue { background:transparent; text-decoration: underline; color:#4dacd8; }
.light_blue { background:#d2eaf5; width:260px; margin:0 15px 15px 0; }
.case .content { padding:10px; }
HTML:
<div id="case_studies">
<div class="case_study light_green">
<div class="strip green"><h3 class="tri">Industrial</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Industrial&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
<div class="case_study light_orange">
<div class="strip orange"><h3 class="tri">Commercial</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Commercial&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
<div class="case_study light_blue">
<div class="strip blue"><h3 class="tri">Domestic</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Domestic&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
</div>
It's because in http://fluroltd.com/clients/harveys/wp-content/themes/harveys/css/base.css you have:
#page_case_studys { float:left; width:400px; margin-left:10px; }
Which forces the following containers into that box. Since 260*3 = 780, you need at -least- a box of 780 pixels, not including any extra padding or margin.
If you specifically need #page_case_studys to have a width of 400px throughout your website, I would suggest writing a more specific CSS style for the page to target the element and set the width to auto.
Also, the boxes all have a width of 260 because of the following rule in the same stylesheet:
.light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; }
If you're using Firefox, download Firebug and use that to help solve your CSS issues. In Chrome, you can right-click the element and go to "Inspect Element".
Related links:
http://htmldog.com/guides/cssadvanced/specificity/
http://www.w3.org/TR/CSS2/cascade.html
In base.css, line 79 you have:
#page_case_studys {
float:left;
margin-left:10px;
width:400px;
}
You should increase the witdh to make room for all the 3 boxes.