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.
Related
I've been struggling with this post grid which I really like and want to use. But I dislike the gray part that appears besides te picture. Even the play button on a video post gets moved to the gray part instead of staying on the picture.
I am working with the newspaper theme using big grid 7, I have been trying to change the way the box works withing chrome's inspect but I can't figure it out.
Here is the website www.breakline.nl; the post grid is just above the footer (for now). You can clearly see what I mean when you zoom in or out while looking at the grid.
The above is right, but also you may add the below to complete remove the grey color from behind.
.td-big-grid-post .td-module-thumb{background:none!important;}
Generally go to the Appearance > Editor find the style.css file and at the bottom line around 33036 make a markup something like /*my own CSS*/ and add the below lines.
img.entry-thumb.td-animation-stack-type0-2 {
width:100%;}
.td-big-grid-post .td-module-thumb{background:none!important;}
Press Update file, and you are ready.
Credits go to #Relisora
add to your css file
img.entry-thumb.td-animation-stack-type0-2 {
width: 100%;
}
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; }
I don't have much experience in css. But I want to design a diagram in html. I need to design slimmer arrow (link) using css.
I thought of using image but I need arrows in different colors. Is there any possibilities by adding transparent arrow image and adding colour dynamically if yes provide sample code or any other suggestions also welcome. Kindly suggest me.
Try to use Font awsome LINK
HTML:
<i class="fa fa-arrow-right"></i> fa-arrow-right
Yes, there are several ways of doing this.
1. With an image
First of all, in order to do what you've suggested, you can indeed use an image - but instead of coloring the arrow, you would be coloring behind a cut-out of an arrow.
To do this, create the image of your arrow in a file format that supports transparency (PNG would be my recommendation). For example, a white square with the shape of an arrow 'cut out' of it, so that the arrow is entirely transparent (surrounded by white). It could look something like this in Photoshop;
Now, with your transparent PNG, insert the image into your code and surround it with a container - such as a DIV. You can then style the DIV (not the arrow), but the arrow will appear to change color.
Your HTML and CSS might look something like this;
<div style="background-color: red; display: inline-block; font-size: 0;">
<img src="arrow.png";>
</div>
background-color: ---; will determine the color of your arrow (you can also use hex values for better specificity - for example background-color: #CB0022;).
display: inline-block; is one possible way to keep your wrapping DIV under control. Without it, your background color will stretch to the full width of its parent container (possibly the entire page) - breaking the effect you're trying to create. Alternatively, you could also float the DIV, but this will complicate matters if you want the arrow to appear in the middle of text.
font-size: 0; is one possible solution to the common issue of extra space appearing around the image (and again, revealing unwanted background color where it shouldn't be).
The main downsides of using this technique are that manipulating images may be complicated depending on your precise layout/implementation. Also, the above example is suitable only for a page that has a white background. If you have a variety of background colors (or a more detailed/complex background, such as a photograph or pattern), this may be a very difficult solution to work with, because your arrow's 'box' is unlikely to match what's behind it.
2. With Unicode / HTML characters
Rather than using an image, you can use unicode characters to write out arrows as actual text. There are lots of these codes - and an example of them can be found here: HTML Arrow Codes
For example, your code might look like this;
<p style="font-size: 2em;">Why don't you look over there? → →
... or down there? ↙</p>
This would look something like this in a browser;
And then you could further style the arrows with <span> tags in order to change their size or color independently, like this;
<p style="font-size: 1.5em;">Why don't you look over there?
<span style="font-size: 4em; color: blue;">→</span>
<span style="font-size: 2.5em; color: darkgreen;">→</span>
... or down there? <span style="font-weight: bold; color: #CC0000;">↙</span></p>
Which would look something like this;
The main advantages here are that you will have no issues with matching against background color, you can more easily change the appearance of the arrow with code (CSS).
The downside is that using obscure characters and fonts can, in some cases, display inconsistently from device to device for a multitude of reasons I shan't burden you with right now. Suffice it to say, if you prefer this solution, be sure to test your results on as many different machines as you feel is appropriate.
Hope that's of use.
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" />
I want my html link to look like a real submit button. Any good codes with css? I have found some examples, but I want it to be more real than just a grey box.
Make a button image in your favourite image precessing tool and use these codes:
HTML
CSS:
.link_button
{
background-image: url(path/to/button_image.png);
background-position: 0 0;
background-repeat: no-repeat;
display: block;
width: 79px; /*your image width*/
height: 35px: /*your image height*/
}
That should set up your link to look like a nicely styled button, that you created.
If you don't want to use an image, you can use normal CSS borders and baackground colors/gradients as well.
Regarding the this is so no text is shown on the image itself, another way to do this is with css: text-indet: -9999px; or you can use the text as part of the element like normal and just style the background :)
Do you mean you'd like to create links that look like buttons, but a bit nicer than the standard old grey box?
There are tons of tutorials out there for this: just search "css buttons". A good one is this: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
If your widget toolkit's theme does some snazzy theming (most do), you most likely won't be able to reproduce the button's look. Even if you could, it would only emulate your computer's theme.
Of course, if you don't mind your button not being consistent with normal buttons, there are many tutorials that allow you to create nice CSS buttons.
If you could consider actually using a button rather than a link, that'd probably be even better.