Below I have included some HTML/CSS. The CSS looks fine in FF, but it is wrong in IE8. In IE8, the Home button appears on the line below the Balance and Turn values. It should appear on the same line. For comparison, you can view the page in both browsers (warning; potentially accesses FB profile) (This link leads to a Facebook app which will request your profile. You have to start a new game, choose a difficulty level, and then you will be taken to the game board. The code in question is at the bottom of the page). I hope someone can tell me how to fix the CSS for IE8. Thanks.
HTML CODE:
$html .= '<div id="info-panel">'."\n";
$html .= ' <div id="total-funds">Balance: €<span id="total-amount">'.$gamePlayerData['funds'].'</span>M</div>'."\n";
$html .= ' <div id="turn">Turn: '.$newTurn.'</div>'."\n";
$html .= ' <div id="home"><img src="' . $config->url->absolute->public . '/images/home_24x24.png" id="img-home" alt="Home" /></div>'."\n";
$html .= '</div>'."\n";
CSS CODE:
#info-panel {
width: 742px;
border: 3px solid gray;
background-color: #ddd;
color: red;
padding: 6px;
}
#total-funds {
display: inline;
font-size: 16px;
padding-right: 10px;
}
#turn {
display: inline;
font-size: 16px;
padding-right: 10px;
}
div#home {
display: inline;
float: right;
}
#img-home {
margin-top: -3px;
}
I found a fix. I changed the div#home rule to this:
div#home {
position: absolute;
right: 6px;
bottom: 4px;
}
Related
I am facing an issue where few images are not properly shown on firefox, chrome, edge browser but internet explorer it perfectly fine. Some part of code is as below.
.header_top-left1 {
float: left;
padding-left: 8px;
}
.header_top-left1 a {
float: left;
padding-left: 2px;
color: black;
display: inline-block;
font: bold;
font-size: 18px;
position: relative;
}
.header_top-left1 a img {
width: 20px;
height: 15px;
display: block;
}
<div class="header_top-left1">
<a href="callto:"> <img src="https://via.placeholder.com/350x300" alt="Call" />
Call
</a>
</div>
What i see on the first look is that you missing the units in width property.
Your code:
.header_top-left1 a img {
width: 20; // hast to be 20px for example
height: 15px;
display: block;
}
It looks as though IE is ignoring the Fontawesome classes and just showing the png green backed phone image while the other browsers are attempting at least to use fa.
Your given code doesn’t show any setting up of the font. Is this done somewhere?
I want to make some formatting within html with css to make my data presentable.
My php code is,
echo '<br><div class="items">' . "id" .'</div>';
echo '<div class="colon"> : </div>';
echo '<div class="details">' . "12" . '</div>';
My css is,
.items,.details,.colon {
display: inline-block;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.colon {
position: fixed;
left: 200;
}
.items {
position: relative;
margin-top: 5px;
padding: 3px 2px 0 8px;
width: auto;
display: block;
text-align: right;
margin : 0 auto;
font-size: 12px;
font-weight: bold;
}
.details {
font-size: 12px;
font-weight: normal;
text-align: left;
}
The output i am getting is,
And the output i want is,
Can anybody please suggest ?
Your looking for display:flex; "The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning."
Source # https://www.w3schools.com/css/css3_flexbox.asp
Html
<div class="flex-container">
<div class="item auto">auto</div>
<div class="item initial">initial</div>
<div class="item initial">initial</div>
</div>
Css:
.flex-container{background-color:#f4f7f8;overflow:hidden;display:flex;margin:1em}
.item{margin:1em;padding:.5em;width:110px;min-width:0;background-color:#1b5385;color:#fff;font-family:monospace}
.initial{flex:initial}
.auto{flex:auto}
Working codepen version https://codepen.io/amarinediary/pen/VwaVMza
I'm very new to coding, and I've created an image carousel on the front page of a local wordpress site. It's not displaying my images at all. Here's my PHP code:
///HOMEPAGE IMAGE CAROUSEL///
$sliderholder = '<div class="slider-holder" >';
$sliderholder .= '<span id="slider-image-1" ></span>';
$sliderholder .= '<span id="slider-image-2" ></span>';
$sliderholder .= '<span id="slider-image-3" ></span>';
$sliderholder .= '</div>';
$imageholder = '<div class="image-holder" >';
$imageholder .= '<img src="http://localhost/EllesSite/wp-content/uploads/2018/09/pexels-photo-1002638.jpeg" class="slider-image-1" />';
$imageholder .= '<img src="http://localhost/EllesSite/wp-content/uploads/2018/09/pexels-photo-905877.jpeg" class="slider-image-2" />';
$imageholder .= '<img src="http://localhost/EllesSite/wp-content/uploads/2018/09/pexels-photo-399161.jpeg" class="slider-image-3" />';
$imageholder .= '</div>';
$buttonholder = '<div class="button-holder" >';
$buttonholder .= '<a href="#slider-image-1" class="slider-change" ></a>';
$buttonholder .= '<a href="#slider-image-2" class="slider-change" ></a>';
$buttonholder .= '<a href="#slider-image-3" class="slider-change" ></a>';
$buttonholder .= '</div>';
add_action( 'loop_start', 'using_front_page_conditional_tag' );
function using_front_page_conditional_tag() {
if ( is_front_page() ) {
echo $sliderholder.$imageholder.$buttonholder;
}
}
?>
And my CSS:
/*IMAGE CAROUSEL*/
.slider-holder {
width: 100%;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder {
width: 2400px;
background-color: red;
height: 400px;
position: relative;
clear: both;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
}
.slider-image {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder
{
left: 0px;
}
#slider-image-2:target ~ .image-holder
{
left: -800px;
}
#slider-image-3:target ~ .image-holder
{
left: -1600px;
}
.button-holder
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}
I was able to get the images to appear at one stage on the front page of the site, but they were not styled properly at all, it was really messy and gross on the page. I am now unable to see my images on the site at all. I have no idea where I'm going wrong, I thought it would be as simple as declaring each div as a variable, and then echoing the variables following the 'if' statement regarding the front page. I'm banging my head against the wall. Hoping someone can help. Thanks.
The easiest way to make content show only on the front page is to make a specific template for it.
In your theme (or better still, your CHILD theme - here's a good tutorial on that), copy page.php to a new file and name it front-page.php (if front-page.php already exists, just use that). This template is loaded only on the page that is set as your "homepage" in your Wordpress settings.
In your case here, you can simply add the standard html for your carousel wherever you want it to show in your front-page.php template.
Ok. Here is my problem. Regardless when i do my while loop to get my list elements out to the page, my images wont center. I have tried using divs and classes but nope. I have tried closing the tags and using html and opening the PHP tags but no. Here is the code. Help plz.
<?php
while($row = mysqli_fetch_array($result))
{
$id = $row['id'];
$name = $row['name'];
$desc = $row['longDesc'];
$cost = $row['cost'];
$qty = $row['quantity'];
$img = $row['imageFilename'];
echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
}
?>
Here is the css:
ul#items li{
color: white;
padding: 10px;
display: block;
font-family: 'Alef';
height: 180px;
text-align: center;
width: 150px;
vertical-align: middle;
background:url('../images/nav/navBg.jpg');
border: 1px solid #191919;
display: inline-block;
margin: 10px;
}
ul#items li:hover{
border: 1px solid #8E8E8E;
}
ul#items img{
margin-top: 15px;
display: block;
position: absolute;
border: 1px solid black;
max-width:149px;
height: 118px;
width: fit-content;
}
Help please.
IMAGE OF PROBLEM:
http://i.stack.imgur.com/arzL0.png
echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
You're not center'ing the 'img' tag in your code. Try this instead:
echo "<a href='paintings.php?id=$id'><li><center><img src='../../_/images/paintings/$img'><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
There are many places where your HTML could/should be improved. A lot of it depends on context we don't have, which is understandable, but doesn't make it easy to give you a complete answer.
To make it work and still look like your screenshot, I would first:
Move the anchor tags into the list item
Remove any IDs that are within loops that do not change per loop iteration. An id is a unique identifier. This doesn't have anything to do with your question, but is important.
Then refer to this (INCOMPLETE) fiddle to get started:http://jsfiddle.net/aNgcb/
The css might look something like this:
ul#items {
list-style-type:none;
overflow:hidden;
}
ul#items li {
color: white;
padding: 10px;
font-family:'Alef';
height: 180px;
text-align: center;
width: 150px;
background:url('../images/nav/navBg.jpg');
border: 1px solid #191919;
float: left;
margin: 10px;
}
ul#items li:hover {
border: 1px solid #8E8E8E;
}
ul#items img {
border: 1px solid black;
height: 118px;
max-width: 100%;
}
You can't center a "block" element with text-align: center;
You can try making the img display: inline-block; or just leave them at the default inline.
display: inline-block;
There is no problem in the php, the problem its with css. try putting a div there and make it margin-left: auto and margin-right:auto.
If you want a good answer, try posting a jsfiddle example. www.jsfiddle.com
Hey guys, I have this piece of code:
while($uno=mysql_fetch_assoc($results)) {
echo '<div class="wcapt"><a class="neutral" href="../images.php?id=' . $uno['id'] . '"><img class="pad" src="'. $uno['thumbs'].'" border="0" /></a><br/><center><p>'.$uno['name'].'</p></center></div>';
}
And all the images I link to have exactly the same size. Here's the Mainstyles.css
div.wcapt
{
border: 1px solid green;
float: left;
padding: 0;
margin: 3px;
font: 11px/1.4em Arial, sans-serif;
color: gray;
}
img.pad
{
padding: 5px;
}
a.neutral
{
display: inline;
font-weight: normal;
text-transform: none;
background-color: transparent;
color: white;
text-decoration: none;
}
The problem is that Firefox adds some extra padding to the first image, and only the first image. And this is really annoying. Here's a screenshot of the page:
that's why it's recommended to use a "reset" css... so you wont have this type of inconsistencies between browsers.
Try using a reset css and if the problem remains then it's not the browsers fault =)
Good luck
have you tried targetting the selector more explicitly using..
div.wcapt img {
padding: 5px;
}
You could then remove the .pad class completely
Try adding a pseudo selector more information here
http://www.w3schools.com/CSS/css_pseudo_classes.asp
Note you need to set the doctype to do this
div.wcapt img:first-child {
padding: 2px;
}
I used Firebug and figured out the problem, thanks guys, and I had to answer my question since the answer was in the comments and I can't accept comment answers.