I am building my own website using Wordpress. When I was using a PNG picture(140*82 px) instead of the default "site-title" as my site logo, I got a really strange result. The picture is presented nicely, but there is a black line just under the picture. I have checked my "header.php" and "style.css" file, nothing wrong there. I also used Chrome "Inspector" to check the logo, it said: img 140*83( natural 140*82 ).
So, where does this line come from? Thanks, guys!
Here is my logo section in "header.php":
<<?php echo $heading_tag; ?> id="site-title">
<span>
<img src="http://118.228.173.234/wp-content/uploads/logo.png" width = "140" height = "82">
</span>
</<?php echo $heading_tag; ?>>
It's gotta be CSS related then. Check if you have reference to span in your CSS and locate the black #000 or #000000. Hard to tell without seeing more code at this point. Check for #site-title in CSS also.
Related
I'm using Firefox Browser, tried all PNG's, JPG's and all were working, except GIF.
Here's the thing, if I test http://localhost/pepsi.gif, the GIF is actually working and displaying. But when I tried it inside HTML img tag it does not displaying.
Here's the simple code below:
<img src="http://localhost/pepsi.gif" alt="No GIF">
Somebody could help me how to do it? I'm really stucked with this one.
pepsi.gif
This is most likely to be caused by an ad-blocker or extension.
Try disabling them 1 by 1 and see if the image loads.
Or try an incognito browser.
Your gif should work in an img-tag. If you upload your code to a server you have to change the path from localhost to anything other, maybe this causes the problem.
img {
height: 200px;
width:auto;
}
<img src="https://im3.ezgif.com/tmp/ezgif-3-0a7fd40adb02.gif" alt="test">
I am trying to pull images from a database into an html table as a php variable:
<img src=img/$image&w=100&h=150>
the image does not show, but everything else in the table pertaining to the product shows
If I change the code adding a space after the variable:
<img src=img/$image &w=100&h=150>
The images show but they are very large.
How do I get $image to show at w=100 and h=150 within the table?
Thanks!!
OK I figured it out:
CODE:
<img src='img/$image' class='scale-down' style='width:100px;height:150px'>
CSS:
.scale-down {
object-fit: scale-down;
}
If the code below doesn't work for some reason, be sure you linked your CSS file.
CODE:
<img src='img/$image' class='scale-down'> <!-- Removed style attribute --!>
CSS:
.scale-down {
width:100px;
height:150px;
}
Another interesting point is if you want to you the object-fit then you can. Meaning you would have the images contained by the size of the elements you are putting them in. Therefore, you should be defining the width & height of the element that contains the images and then you can do as you did:
In this example I wrote td but I don't know what element contains your images so be sure to change it, if it is different.
td {
width:100px;
height:150px;
}
.scale-down {
object-fit: scale-down;
}
If your aim is to learn web-development then you should also be thinking about the client as kerbholz rightly points out:
Probably. Scaling down an image via CSS/style isn't a performant solution though, clients would still need to transfer for example a 1920x1080 image only to scale it down to 100x150. Anyway. – kerbholz
Please be aware that many questions about web development have already been answered here and on the web. Good luck!
The following are links to CSS, these websites have a lot more than just CSS.
MDN is really useful if you want to know more:
https://developer.mozilla.org/en-US/docs/Glossary/CSS
W3 is also useful but they don't always do as good of a job:
https://www.w3schools.com/w3css/
I don't even know whether this is possible, however, I am hoping that JavaScript could provide a solution to this problem. I have a DIV, that shows the title for each page within a WordPress template that I am working on.
<div class="grid-block" id="page">
<div id="page-info">
<h3>#<?php is_home() ? bloginfo('description') : wp_title("",true); ?></h3>
</div><!-- #page-info -->
</div><!-- .grid-block #page -->
The text that is called into the DIV comes in at various lengths, and sometimes over-exceeds the DIV. When the text exceeds the DIV, it wraps, just as it should, however, I am attempting to adjust the 'height' of this DIV, after a word is wrapped. I do not know if I could add some type of eventListener or something, however, pure HTML and/or CSS does not seem to have the components I need to solve this problem.
In addition, I understand that I 'could' use #media (media queries) to sort of emulate this effect, however, as far as I know, this can only be done in relation to the width of the Window, and I want the DIV to re-size 'only' when a string exceeds the width of this DIV. A demo of what I am attempting to do can be found at http://jsfiddle.net/justinbyrne001/SP3Q2/4/. I appreciate any comments, recommendations, and advice that anyone has regarding this matter. Thanks in advance.
Do you need the fix height on #page-info? If you just use padding:10, the div#page-info would automatically wrap around the text.
I have a problem with my website. Have defined image on index. Image shows only in firefox. In chrome it doesn't show and I don't know why.. Can anybody help me? Thank you
index.php
<div id="advert">
<img src="img/advertisement/topbanner.jpg" alt="MyWebsite" title="MyWebsite" />
</div> <!-- advert -->
CSS
#advert {
height:200px;
width:460px;
}
Sounds like an adblocker-problem. Try to rename the folder "advertisement" and/or the id "advert" into something like foo check if it works then.
Since the code is fine, my guess would be that the image has been saved in CMYK format, instead of RGB.
Or an ad blocker. Since you have an id of advert, this will of course be blocked by an adblocker.
place (../image folder/ image name)[ ../ infront of folder name]
This is probably some thing very simple and I tried a couple of things and various posts but none seem to get it working.
I would like to have a shopping basket image instead of 'My Cart' text in top links. How do I get this image to appear as the link instead of the text?
This image is in mytheme/images. I have tried editing Checkout/Block/Links.php, edited styles.css by putting
.top-link-cart { background url(HD/Applications/MAMP/htdocs/devsite/skin/frontend/default/mytheme/images/cart.png)left center no-repeat; }
But can't seem to get the image instead of the text. Any help is appreciated. Thanks.
You had the following errors in your CSS:
Missing colon (:) after background
Missing space between URL and keyword left
Your image link was absolute and not relative (not an error but will make putting the site live easier)
Here is what your code should be:
.top-link-cart { background url('../images/cart.png') left center no-repeat; }
use background:url('image link') no-repeat and define then define your width and height also make sure you define text-indent: -9999px or a higher number this way you will be left with image and your text would be out of the screen.
Here are tons of other ways which you can use for Css Image Replacement :
http://css-tricks.com/css-image-replacement/
I would suggest that the URL for the image is not correct, it looks to me as though you are trying to display it using the location on disk. It actually needs to be the location, relevant to the root of your website.
For instance, if the website root is HD/Applications/MAMP/htdocs/ then you need to make the URL /devsite/skin/frontend/default/ats_theme/images/cart.png.
Alternatively, you can make it relative to your css file. So if your css file is in HD/Applications/MAMP/htdocs/devsite/skin/frontend/default/ats_theme/css/ you can change the url to ../images/cart.png
Add a colon after background:?