I'm encountering other form of problem regarding background-image url in css.
The destination of my image is in includes/img/messaging.png. my problem is i put css on echo so here is my code
logs.php
echo '<div style="width: auto; margin-left: 250px;
margin-right: 5px; padding-right:8px; border-bottom: 2px solid;
border-top: 2px solid; border-color: #ebebeb; border-radius: 8px;
padding-bottom: 10px; padding-top: 10px; padding-left: 15px; text-align:left; font-size:0.8em; color:#FFFFFF; background-image: url("../includes/img/messaging.png");">' .
'<div style="font-weight:bold;">' . "You" . "</div>message: " . $messages->msg . "<br>" . '<div style="font-size: 0.6em;">'. "Sent : " . $messages->dt . "</div>" . '</div>';
as you can see the destination of my image was right. But why it doesn't display something. i have 2 folders pages and includes. logs.php is located at pages/logs.php and the images is in includes/img/messaging.php so my echo was in right directory accessing the image
Write your line as below:-
background-image: url(\'../includes/img/messaging.png\');
and if you are a linux user then make sure you have given permission to image.
Hope this will help you :)
Related
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 researching all I can. And I am sure it is a dumb mistake, but...
I cannot for the life of me center the dynamic output displayed in a div.
All traditional methodologies seem to alter the divs themselves, not the content in the middle of the .input_des div.
The Goal: Center the dynamic content in .input_des without affecting anything else.
For background the CSS of the trouble spot looks like this:
.input_left{
position: relative;
left: 11%;
}
.input_img{
float: left;
width: 30%;
height: 100%;
margin-right: 25%;
top: 25%;
}
.input_des{
float: right;
width: 70%;
display: inline-block;
vertical-align: middle;
}
My HTML is:
<div class="input_left">
<div class="input_img">
<a href="product.php?id=' . $id . '">
<img style="border:#666 1px solid;" src="inventory_images/' . $id . '.jpg" alt="' .
$product_name . '" width="95%" height="16%" border="1"/>
</a>
</div>
<div class="input_des">' . $product_name . '<br />
$' . $price . '<br />
View Product Details
</div>
</div>
Any suggestions would be well received and much appreciated.
Gracias...
UPDATE: After taking a trying a few suggestions I finally found something that moved the text. It isn't perfect but at the moment I found adding to .input_des { margin-top: -20%;} that the dynamic content stays in the 'right lane' and adjusts upward. Each set of dynamic outputs (4 in total) aren't exactly aligned to their 'left lane' .input_img counterpart but they have moved upwards and look better than they did.
I will keep checking back for any additional info.
Thanks for taking the time to look at this and comment.
<div class="input_des">
<p>your content goes here</p>
</div>
.input_des p {
margin:5px auto;
}
You just need to add text-align: center; on the part that you want to center in your CSS or HTML code.
Or you may use <center> tag to each header that you want to center.
<script type="text/javascript">
$(document).ready(function()(){
$('.input_des').css('text-align','center');
});
</script>
try to put this line of code to the
I am not sure it works because I cant get the whole scene (I could if you have provided a fiddle), so I try to guess.
CSS
.input_des > * { display: inline-block; }
.input_des { text-align: center; float: right; width: 70%; display: block; vertical-align: middle; box-sizing: border-box; }
.input_img { box-sizing: border-box; float: left; width: 30%; height: 100%; padding-right: 25%; top: 25%; }
.input_left { position: relative; left: 11%; }
HTML
<div class="input_left">
<div class="input_img">
<a href="product.php?id=' . $id . '">
<img style="border:#666 1px solid;" src="inventory_images/' . $id . '.jpg" alt="' .
$product_name . '" width="95%" height="16%" border="1"/>
</a>
</div>
<div class="input_des"><span>' . $product_name . '<br />
$' . $price . '<br /></span>
View Product Details
</div>
</div>
Place an element inside the element with .input_des and assign the second element the css:
margin-left:auto;
margin-right:auto;
Place the dynamic info in the second element.
Edit - the second element inside the .input_des - element might have to have a fixed width also.
Also - did you check this?: How to horizontally center a <div> in another <div>?
Might inspire. Same principle I think, where the first div is your floating div.
Here is an example where the content inside the "centered" div is centered inside the "input_des"-div:
<style type="text/css">
.input_left
{
position: relative;
left: 11%;
}
.input_img
{
float: left;
width: 30%;
height: 100%;
margin-right: 25%;
top: 25%;
}
.input_des
{
float: right;
width: 70%;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
}
.centered
{
width: 75%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: maroon;
}
</style>
<div class="input_left">
<div class="input_img">
I AM CONTENT
</div>
<div class="input_des">
<div class="centered">
I AM CONTENT
</div>
</div>
</div>
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
I am building a comics website, but am having trouble aligning the images the way I want.
I'm going for this:
I'm trying to get the comics in a row like this (blue)
But all the images are coming out on top of each other:
I thought my CSS was correct...
*{
margin: 0;
padding: 0;
}
body {
background: gray;
text-align: center;
}
#wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
background: white;
}
#comics {
/*top, right, bottom, left*/
margin: 50px 100px 50px 100px;
}
.comicBG {
position: absolute;
border: 1px dotted black;
background: #99FF33;
padding: 25px;
}
PHP:
echo '<td>';
echo '<span class="comicBG"><a href="./templates/viewcomic.php?id=' . $row['imgid'] . '">
<img src="' . $thumbpath.$row['imgthumb'] . '"/></a>' .
'<br />' . $row['imgtitle'] . '</span>';
echo '</td>';
Does anyone know the best way to position individual data elements (like the images)?
Should I be using a table, or a list?
Thanks!
I'd use an unordeder list. And you see all the images at the same place because you've set their position to absolute and you haven't set any coordinates.
You can remove position:absolute and the images should be in rows. And if you use an unorderer list, you can float the li's to the left.
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;
}