I just started learning html and css and am working on a theme for my blog. Most gifs and photos show up with no problem, but some of my photo posts only display this: torn photo How do I make all photos display properly? Below is the html:
{block:Photo}
<div class="post">
<img src="PhotoURL-500}">
{block:Caption}{Caption}{/block:Caption}
<ul class="like-reblog">
<li>{LikeButton}</li>
<li>{ReblogButton}</li>
<li>{block:NoteCount}{NoteCount}{/block:NoteCount}</li>
<li>{block:Date}{Month}☆{DayofMonth}{DayOfMonthSuffix} {Year}{/block:Date}</li>
</ul>
</div>
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:Photo}
Here is the CSS:
.post {
background: #fff;
margin: 40px auto;
width: 500px;
padding: 20px;
border-radius: 6px;
}
I'm still learning so I may have missed something.
That icon usually appears when the image isn't found (wrong name, file extension, filepath, file not existing at all or similar error). Apart from that, it seems like you are missing a curly bracket here:
<img src="PhotoURL-500}">
That should probably be:
<img src="{PhotoURL-500}">
this usually happens to linking errors.
Try and upload the image to a website or moving the file to another location.
And using that new location for the img
Related
I want to attach some kind of a keyword/tag to a line of code and reference that keyword throughout my HTML file instead of having to re-write the entire line of code each time.
For example, attach the tag TestPic1234 to the code of <img src="img_chania.jpg" alt="Flowers in Chania"> so that throughout my HTML file, TestPic1234 automatically means <img src="img_chania.jpg" alt="Flowers in Chania">.
This is all mostly so I can avoid unnecessary clutter and to reduce total filesize (especially when working with Base64 images).
I've looked online and the only thing that came close to what I'm looking for was the id / class tags but that still wasn't what I'm looking for (or maybe I misused them but I doubt it)
Move your base64 image to CSS:
<style>
.image-a {
width: 130px;
height: 130px;
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-image: url('data:image/gif;base64...[your data-url image here]');
}
</style>
Then your HTML would be:
<div class="image-a" > </div>
<div class="image-a" > </div>
<div class="image-a" > </div>
Codepen to play: https://codepen.io/vovchisko/pen/dyXEZdv
I've searched the existing questions and found some similar issues, but the suggestions there didn't solve my problem.
Here is the issue:
We are using the Visual Editor plugin for Wordpress. My boss wanted this plugin to be used for a special promotion area in the header - he wants to display images that are clickable or have a button. I wrote some custom CSS so this plugin will do that. The issue, as you know, is you can't make a link in CSS. So for the background image, I needed a button. However in this particular case there was so much text on the image, a button would not work.
So, I wrote an ID that I could call in HTML. I made a link, called the ID, and then inside the ID I put a text indent that would push the text off the page and the image would be clickable.
The issue here is that for some reason the image would not fully load. It was cutting off height-wise. I had set width: 100%; and height: auto;, but neither of those things worked.
So, I ended up simply inserting the IMG normally, and linking it normally, but now the problem is I need it to be responsive.
I wrote a class called .responsive-image and made the width: 100%; and height: auto; but this still doesn't work.
Do I need to put the responsive image information elsewhere? Do I need to write some other class? I'm at a loss and have looked at this too long at this point.
You can see this header widget right here - 100daysofrealfood.com/carrot-top-almond-pesto-sustainable-almond-recipes/
And if you inspect you can see what I mean about it not being responsive.
Here's what I've written to insert it into the widget:
<div class="days100-background-header-widget"><div class="responsive-image"><a
href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
I have the class in there two places. Maybe that's the issue?
Here's the CSS for the main header widget class:
.days100-background-header-widget{
display: flex;
align-items: center;
justify-content: center;
}
Any feedback is really appreciated. Thanks for reading this super long question!!
The problem is not on the image itself, but on the parent <div> with the class of .days100-background-header-widget. It is set to display: flex so that div is not 100%.
If you want to center things on the screen you can use margin: 0 auto on a block element.
.days100-background-header-widget{
display: block;
margin: 0 auto;
}
.responsive-image {
width: 100%;
height: auto;
}
<div class="days100-background-header-widget">
<div class="responsive-image">
<a href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
sorry if my title is a bit misleading but didn't know how to word/phrase it.
Currently, I have href'd images that go to various social networks. For example, by clicking on the facebook icon, it goes to my facebook. It is layed out like this:
<div class="row">
<center>
<div class="span2">
<img src="assets/img/icons/fbwhitebig.png" width="64" height="64"></img>
</div>
Is there a way to make this a "class" if that makes sense? So I can get the same effect by doing something like
<div class="span2">
</div>
and then in the CSS have this:
.facebookbutton {
width:64px;
height64px;
background: url(assets/img/snicons/fbwhitebig.png) no-repeat;
}
Sorry if this is a ridiculous post, I'm still learning haha!
Thanks :)
If you fix the typos (the missing opening quote after href= and missing colon after height), and add display: block the code you wrote works fine.
http://jsfiddle.net/oudL3ovz/1/
.facebookbutton {
width:64px;
height:64px;
background: url("http://s10.postimg.org/l40wid7mt/facebook_logo_64px.png") no-repeat;
display:block;
}
HTML
<div class="span2">
</div>
You may want to use display: inline-block;.
I am learning HTML and CSS at the moment but having a bit of trouble with my code.
If anyone is able to help it would be much appreciated.
Here is my website design - http://puu.sh/5D4yG.png
And here is an image of the portion of my website I am having trouble with.
http://puu.sh/5D3Rr.png
If you look between the two images at the top you will see a very tiny blue underline in the gap.
Then if you look under the heading there is another purple underline.
I have not coded for anything to be underlined so am not sure why it has appeared.
The code is as follows:
CSS
#currentprojects
{
padding:5px;
width:75%;
height:auto;
margin:0px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
#projects
{
padding:5px;
width:75%;
height:auto;
margin:10px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
#latestvideos
{
padding:5px;
width:75%;
height:auto;
margin:10px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
HTML
<div id="currentprojects">
<div align="center"><h1>current projects</h1></div>
</div>
<div id="projects">
<a href="https://itunes.apple.com/gb/app/ritgk/id581734892?mt=8"><img class="ritgk" src="images/ritgk.png" onmouseover="this.src='images/ritgkhover.png'" onmouseout="this.src='images/ritgk.png'" alt="RITGK iOS App" width="296" height="168"/>
<a href="http://www.redbubble.com/people/f7james/works/10680438-imagine-dragons-night-visions-poster"><img class="imaginedragons" src="images/imaginedragons.png" onmouseover="this.src='images/ imaginedragonshover.png'" onmouseout="this.src='images/imaginedragons.png'" alt="Imagine Dragons - Night Visions Poster" width="296" height="168"/>
</div>
<div id="latestvideos">
<div align="center"><h1>latest videos</h1></div>
</div>
There is also another problem I am having with the above code where, rather than just the Imagine Dragons button linking to my RedBubble page with the Imagine Dragons poster on, for some reason the whole blue section in the image below links to it.
http://puu.sh/5D4EE.png
If anyone could help me with these problems I would be extremely grateful as I can't seem to get my head round why.
Thanks
The single space character between the images is being given a hyperlink underline.
You can get rid of this either by removing whitespace between the images in the html, closing the link tag or styling the link with
text-decoration: none
I suspect you didn't want one link to continue across anyway which brings us to...
It looks like you're missing the closing anchor tag from your links (</a>)
Links (aka anchors) should be in this format...
<a href="..." ...> {Thing that is clickable} </a>
Try...
<div id="projects">
<a href="https://itunes.apple.com/gb/app/ritgk/id581734892?mt=8">
<img class="ritgk"
src="images/ritgk.png"
onmouseover="this.src='images/ritgkhover.png'"
onmouseout="this.src='images/ritgk.png'"
alt="RITGK iOS App"
width="296"
height="168"/>
</a>
<a href="http://www.redbubble.com/people/f7james/works/10680438-imagine-dragons-night-visions-poster">
<img class="imaginedragons"
src="images/imaginedragons.png"
onmouseover="this.src='images/imaginedragonshover.png'"
onmouseout="this.src='images/imaginedragons.png'"
alt="Imagine Dragons - Night Visions Poster"
width="296"
height="168"/>
</a>
</div>
Although getting fully W3C compliant html can be time consuming with browser incompatibilities, it's always useful to run your page through the W3C validator which will find almost all syntax errors.
I am having a little issue with a few headers being misplaced on the site I am working on and also an image that's supposed to show below each one of them is not showing.
You can see what I am talking about here:
Here's my HTML:
<!-- main-content -->
<div id="main-content">
<h1> Check out all our DEADicated sites: </h1>
<div class="sites">
<a href="http://www.thedeadicated.tumblr.com" target="_blank">
<img src="images/sites/tumblr.jpg" width="215" height="150" alt="Tumblr"/></a>
<p> Tumblr </p>
</div>
<div class="sites">
<a href="http://www.twitter.com/thedeadicated" target="_blank">
<img src="images/sites/twitter.jpg" width="215" height="150" alt="Twitter"/></a>
<p> Twitter </p>
</div>
<div class="sites">
<a href="http://www.youtube.com/user/DeadicatedRepository" target="_blank">
<img src="images/sites/youtube.jpg" width="215" height="150" alt="YouTube"/></a>
<p> YouTube </p>
</div>
<h2> To join TheDEADicated, click HERE! </h2>
<h2> To get your own DEADicated wristband, click HERE! </h2>
<h2> Can't get enough of Dead Sara?! Dead Sara Addiction Treatment Facility </h2>
<h2> Email us at: TheDEADicated#TheDEADicated.org </h2>
</div> <!-- close main-content -->
And this is the CSS code for the main-content & headers:
#main-content{
padding: 50px 50px 30px 50px;
background: #fff url('images/shadow.png') repeat-x;
min-height: 800px;
}
#main-content h2{
margin-top: 30px;
padding-bottom: 8px;
background: url('images/ink-line.png') no-repeat left bottom;
clear: both;
}
Any kind of help would be greatly appreciated. Thanks!
I can't tell exactly what is happening here, but taking a guess at how the elements above the headers look, I'd say you have a float issue. Try removing the "clear: both" from the h2 and add "float: left; width: 100%;" in its place.
The comments are correct that you're not really clear about what you should see but don't, but if I interpret you correctly you mean that "my headings aren't showing the margin and padding or background images that I expect".
I'm going to take another leap of faith to offer up a possible solution. I see
</div> <!-- close main-content -->
at the end of your html but I don't see a <div id="main-content> anywhere. It should either be at the top of the page, or before the block of h2s, depending on what you desire the outcome to be. Try adding <div id="main-content> before the first h2 tag and see if that solves it for you.
Edit: I see your problem more clearly now, but this is tricky to resolve without the live url to inspect. It could be a float issue, but the clear should resolve that, unless it's being overridden, so you could change to:
clear: both !important;
It could be a display problem, so try adding:
h2 { display: block !important; }
If there's a live url that would certainly help. Final thought is to make sure every tag in the entire page html is properly opened and closed. Redundant or unclosed divs can cause issues like this in my experience.