Right, so, I've been informed by a usually high-quality, reliable source that best practice when creating linked images that also include text is as follows:
Create some placeholder text inside the anchor element like this:
<a class="logoWithText" href="logoWithText.raw">Mr Happy Forever Foobar</a>
Change the element CSS to indent this text outside the viewing window:
.logoWithText {
background-image: logoWithText;
width = 200px;
height = 100px;
display: inline-block;
text-indent: -9999px;
}
The idea is that without doing this, if CSS is turned off on a user's machine, or they are trying to look at it with a screen reader, they're going to have problems viewing the image. But this way they will only see the text if CSS is switched off, and it will be positioned correctly.
But what if the image fails to load for some reason but they do have CSS switched on? The user is not going to see the placeholder text at all... and I'm also pretty uneasy about the whole put the text all of the way off the screen, as far as it can go as it seems pretty inelegant and I am worried there are likely to be all sort of unforeseen problems with writing code that's totally against the logic of the language in this way.
Can anyone suggest a solution which would account for both broken image links and a lack of CSS support on a user's device, and which would be more immediately intuitive to people viewing the code? If there's really no other way of doing this or you guys think my approach is totally wrong or whatever that's ok, I just want to know if I'm going about things the right way.
Why not
Html
<a href="http://yoururl.com" class="logo--text">
<img src="zoidberg.jpg" alt="This is the text that shows up when your image is broken">
</a>
CSS
.logo--text{ width:200px; height:100px; }
Related
This is my first time posting here and I'm entirely self-taught, so bear with me please if I misspeak or say some dumb things.
I have a Wordpress blog. For quite some time, I have had my blog post format set up so that a "header image" displays across the width of the content space. Across the bottom of that image, I list the title of the post and the date.
To do this, I created what I believe is called a class -- I named it "container" and the only defining trait of this class is that it has "position: relative;" inside it's brackets. (It also has a "shadow" border. I tried taking this out and it had no effect.) This was done in the "additional CSS" section of the wordpress site.
.container {
position: relative;
box-shadow: 1px -1px 7px rgba(0,0,0,0.8);
}
I also made a class called "text-block" that is defined as follows:
.text-block {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
background-color: rgba(128,128,128,0.6);
color: white;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}
Each post begins with opening a container. Then, immediately inside of the container is the image, with the width set to 100%. Then, still in the container, I put the text-block in, which is oriented across the bottom. The background color is opaque so that you still see the image behind the text, slightly greyed out.
Here is the code that begins the post of which I've attached a screenshot:
<div class="container"><img class="aligncenter wp-image-8056 size-full" style="width: 100%;" src="https://*mysite*/wp-content/uploads/thx-1138-film-confession.png" alt="Robert Duvall as THX 1138" width="831" height="364">
<div class="text-block">
<h2 style="color: white;"><em>THX 1138</em></h2>
<h6 style="color: white;">Review by *me* | November 6, 2020</h6>
</div>
</div>
The crucial part that I need to ask some advice on is the bottom edge of the container. Until recently, the bottom edges of the image, the text-block, and the container all coincided. Now, instead, a small amount of excess "padding" was added to the bottom of the container. So now, the text-block overlaps the image and some un-filled space beneath it, as you can see in the image. I can't seem to attach a second image of what it should look like, but I think it is clear what I'm trying to achieve.
I don't know where this excess "padding" came from. I didn't change anything -- no CSS was changed. I was just writing individual posts, copy-pasting the format from an old post to a new one to get the correct formatting. I was previewing a single new post when I realized the change, and I thought that I had messed something up on that individual post. But then I started clicking through my site and realized every single post now showed the error.
In the past, some other weird formatting things have happened that stemmed from a plug-in. I've deactivated all plug-ins and the issue remained. I've taken the text-block out entirely and the excess "padding" remains.
Like I said, I'm self-taught. I've really only learned things as I needed to know them. So it's possible I'm missing something simple or committing some grave error without knowing it. But it seems to me that my container lacks the definition that would cause it to be larger than an exact fit to what I put inside of it. Further, the fact that I did not change any of the underlying definitions seems to indicate it's some other kind of issue. But I don't know where it could be stemming from.
I would appreciate any help to figure this out!
UPDATE:
First, Akhilesh, thank you for the reply. Your suggestions did not directly lead to a solution but they at least got me into the spirit of trial and error.
I have found two "solutions" to this problem.
The first is to set "line-height: 0px;" inside of the container in "Additional CSS." This isn't ideal because it means that I can't type regular text in this container anymore. Not very elegant.
The second kind of seems like a fluke. As I showed above, my posts begin with:
<div class="container">**here**<img class="aligncenter wp-image-8056 size-full" style="width: 100%;" src="https://*mysite*/wp-content/uploads/thx-1138-film-confession.png" alt="Robert Duvall as THX 1138" width="831" height="364">
That is a single, unbroken line of code. By starting a new line where I indicate above, it solves the issue. As I stated in my initial description, I have not changed anything. All my posts have been like this since I decided on the format. And as Akhilesh stated, it works in the fiddler (which was a new tool for me, so thanks again).
So, problem solved, but what changed to cause the issue? Something in the way that Wordpress interprets HTML code?
Try adding this to the img element : display:block;
Also, try to find whether there's any padding/margin set for the h2 and h6 elements.
Because I don't see any issues when I tried. Here's the fiddle: https://jsfiddle.net/vL80u1a2/
If that didn't helped, try using the Developer Tools in your browser. Just right click on the element and choose Inspect Element. Then when you select an element on the left side, all CSS would appear on the right pane. You can try trouble shooting for the padding using that Developer Tools.
Have a look at this for more details on how to use the Developer Tools: https://developers.google.com/web/tools/chrome-devtools/css
My website doesn't show right with IE whether I use the compatibility view or not. The text area of my site is either placed too much right or waaay too much down (starts right from where the last part of header image ends for some reason, I can't force the text go over the picture?).
I'd copy-paste the code parts I need help with if I actually knew where did I do wrong, but since I don't, I hope it's not too much to ask for to check out the whole site and its code.
http://viuhku.net/shaghas/skpr/skpr/
And CSS:
http://viuhku.net/shaghas/skpr/skpr/style.css
Add float: left; in your CSS file under #txt
In your #txt class, you have a padding-right: 200px attribute; remove it and you should be fine.
When i open my site in firefox it shows img alt attribute in a black box(see attached image).
it only shows just for a second and when image starts loading its gone.
i want to remove this.
this is my html code
<img alt="alt text" width="650" height="241" src="src url" />
it only shows in firefox.
i have tried using this css code
a img {
border: 0;
}
but this did not help.
how i can remove this?
The short answer is that you can't. The longer answer is that you shouldn't.
You are approaching this in an entirely wrong manner. Expectedly, I guess - in this day and age not many care to think why tag attributes like ALT exist at all, and why Firefox bothers with borders before it renders images. But you should know these things if you want to be serious about web design. They are there for a reason. It is because people are different and user agents are different - some people cannot even see images that well, while they either may read or are read to the page contents by a screen reader, which cannot discern pixel content all that well. Also, in some scenarios (academic, scientific), user agents are configured to ignore images, only displaying ALT content, focusing on textual content instead.
If you take the above into consideration, you can make decisions based on these facts - what does your image actually do? Is it important for your users to see it at all? If it is indeed a picture that is at the heart of it, then you shouldn't bother with how it will be shown to your users - rest assured, they will see it and hopefully be happy.
The IMG element is for image-based data that is part of the content of the document you serve, not part of its style. This is an absolutely essential knowledge, that many never think about. Separators, hyperlink icons before A elements, huge banners on top of your pages, buttons for forms - all this is not part of content, it seldom carries meaning to the reader. That alone decides if these should be put in there with say, CSS instead. You use IMG element for photos, drawings, logos, illustrations and such.
In other words, if it is a decorative part of your web page design, you should instead think whether a background image will do - it will also eliminate your border and ALT problem entirely.
This is all you can do - no CSS will and should rob the user of your page(s) of accessibility just because you don't like borders. Remember - your webpages are not your webpages, they are viewed by your users. Same goes for user agents - they use theirs, and they prefer to set it up their way. Whether you yourself like borders is of little value or concern to them. Give them possibility to make the best use of them. Graphic design is indirectly about compromise - we want to better convey a message of our choosing using methods we have available, while respecting their choices and preferences. Web-design is much because of this a walk on the edge of a knife.
<div style="background-image: url(forest.jpg); width: 600px; height: 200px;">
Tree hugging, anyone?
</div>
I know it's an old question but here is 2017 update with CSS only solution using pseudo elements.
img:after {
content: attr(alt);
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
<img src="//placehold.foo/200x200" alt="Remove border from this alt text" />
Two days ago I spontaneously bought myself a domain. The day before that, I hardly even knew what a domain really was. Since then, I've been trying to teach myself HTML for the very first time. Basically what I'm trying to say is, I'm very new - and will probably be poor in my explanations.
I just succeeded in making an 'image-button', sorta. It's where I make a button-like image and then use it as navigation on my website (just like a regular link). My issue is that the link 'border' itself is bigger than the image, so you can press an inch outside the image itself and it will work. How do I make the invisible link 'border' the same size as the button?
This is my site:
http://www.djeveln.com
On the test page (djeveln.com/test) is where I test things. There's the button I'm talking about, in case you can't understand my explanation very well.
Here's my HTML:
<a class="ButtonLink" href="http://www.djeveln.com" title="Home">
<img src="/images/button.png" class="TestButton"></a>
Here is the CSS I use for the image position and size:
img.TestButton { /* Dette linker til selve størrelsen av knappen (bildet)*/
position: absolute;
width: 100px;
height: 75px;
top: 400px;
right: 250px;
}
Hope you can help me! :P
Your button image contains a large transparent area (with the actual button more or less in the center), and that's what is causing the "borders".
Although there are CSS workarounds for that, I'd recommend you just open the image in Photoshop (or any other image editor), and crop the transparent area away. Make your image the exact size of your button.
One more tip, that can make your life way easier as your learn: use a debugging tool like the Chrome Developer Tools, or Firebug (if you're on Firefox). With those, you can inspect any element on your HTML (right click it and choose "inspect"), check the CSS applied for them (and also modify it on-the-fly for testing), and much more. That's how I spotted the transparent border on your image.
At a quick glance, it looks like you've simply made the image too large. There's a lot of transparent image outside the button that is part of the click target. How are you making the button?
If you made it in Photoshop, for instance, you should crop the image to be tight to the border of the button.
You could do that in CSS, but you'd be making work for yourself -- I'd modify the source image.
It often works out great that the CSS backgrounds don't print, however, sometimes I use them to convey contextual information. What is the best way for getting around CSS backgrounds that don't print but you really want to display. The example, I'm currently working on is a table that displays financial information. Different background colors are used to indicate how "good" a number is (e.g. very profitable, profitable, neutral, negative, very negative).
I've used borders to simulate backgrounds when I really need a background color. Something like this will work (but I apologize for not having tested this):
div.must-have-background-for-print {
position: relative;
width: 400px;
}
div.must-have-background-for-print div.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 400px solid #999;
}
In response to #Steve Quezadas' comment, the idea is that rather than using a background, you insert an element into the element that needs the background and apply an extremely wide border to it so that it fills the outer element. This will most likely require that the contents of that element also are inside of another wrapper so that they appear above the new background element...
If you started with this:
<div class="has-background">Some stuff in here</div>
You might use this:
<div class="has-background">
<div class="background" />
<div class="content">Some stuff in here</div>
</div>
This is extremely ugly, but I've used it in the past and it does solve the issue of background colors not printing. And, before you ask, you'll have to adapt the css to your specific case. I'm simply describing the concept of using borders to replace backgrounds. Your implementation will depend on how your page is structured and this is extremely difficult to do if you don't have either fixed widths or heights on your elements.
Two suggestions:
Color-code text in the table rows
Add color-coded icons to the beginning or end of the table rows
You could even incorporate these into the normal view with your background colors.
I ran into the same problem color coding tabular data in html, eventually I just switched to pdf generation for color printouts and only made black and white available in html
It's a browser setting. Turn on background printing in IE. So, you can either change the browser settings (possible if on an intranet) OR just export your report to Excel or some other format for printing.
You could make the font bigger and/or bold and/or italic and/or colorful.