I'm coding a site which has a big company logo at the top left.
So I code it with the logo as the background image, the company name in an H1, and hide the H1 using image-replacement techniques.
But there's no "home" link in the rest of the site's navigation. The logo is probably intended to be the "home" link. But because of the semantic/image-replacement technique, there's nothing to click.
What would you do in this situation? Position something transparent over the logo is my first thought, but I'd like to hear other suggestions.
Very simple - put an Company name inside your H1 element, and apply your image replacement styles to h1#logo a (or whatever selector you use). You'll need to add display:block; to the styles, to have the anchor behave correctly.
Let me know if you need more detail than this!
Extra detail:
OK - I usually use the following HTML and CSS for image replacement:
HTML:
<h1 id="logo">
[Company name]
</h1>
CSS
#logo a {
display:block;
width: 200px; /* Or whatever you like */
height: 0;
padding-top: 100px; /* The required height */
text-indent: -999em; /* negative text indent, leaves the box alone, and in ems to scale with text */
overflow: hidden;
background: /*whatever you like */;
}
This is a kind of 'double-strength' - the height:0/padding-top technique creates a box the size you need, but without any room for text to display (the background image will appear in the top padding, but the text won't). The big negative-text-indent is just a safety for browsers that get things wrong occasionally (old webkit used to have problems - not much of an issue nowadays).
Let me know how you go!
Related
i need help. 1) Products images, png, are not transparent on a products page but they are on a single product page. And they are ok on a stacked products layout but not on a grid. And we need grid layout. You can choose grid or stacked layout in the theme settings. (Nova theme)
2) Also on flexslider. This is also important to us because we want to play with various frames and we need that transparency..
I spent days researching this and found no solution, my head is full and confused. Can you help?
The best way to do this with Big Cartel's system is to head to Customize Design > Advanced > CSS, and paste this in at the very bottom:
#products_page .canvas.grid #products .product a .product_images {
background:none;
}
That way you don't need to go digging for the line of code in your editor to modify, and if you change your mind down the road you can just delete these 3 lines quickly and easily.
Here is your HTML:
<section class="product_images">
<img src="http://images.cdn.bigcartel.com/bigcartel/product_images/141424843/max_h-300+max_w-300/traka2.png" class="fade_in" alt="Image of yellow melon. mellow">
</section>
The <section> tag has a background color applied to it via the class product_image. Here is the CSS for that class:
#products_page .canvas.grid #products .product a .product_images {
width: 100%;
min-height: 100%;
margin: 0;
background: transparent;
background: #efefef;
}
This CSS selector appears on line 1471 of theme.css. Remove the second background declaration, background: #efefef; and the color that you see will go away. In CSS if a rule is repeated later with the same specificity it will be overridden. Here is a link to learn more about CSS, the cascade, specificity etc.
Think of your <img> element as sitting on top of your <section> element. Part of your image has transparency, like a window, so anything sitting "below" it will show through. Your <section> element had a light gray background color which was showing through the transparency of your PNG.
I have a page which has some data in form of tables
Currently, for one of the columns(which is a link) I need to display a text on hover and was able to do it successfully by giving the title in the tag. Now , I tried applying css to the text on hover and following is the snippet
CSS
a.changes:hover {text-decoration: none; }
a.changes p {position: absolute; left: -9999px;border-style:solid; border-color:black; border-width:1px;}
a.changes:hover p {left: 5%; background: #ffffff; size:1px;}
and in the html, I removed the title from the a tag and gave it in inside tag
<a href='#' class='changes' onclick='AAA'><font color=blue>XYZ</font><p style='width:100px;'>TextToBeDisplayedOnHover</p></a>";
The above snippet works fine on the current display. But when I scroll down the page and then try to display to text on hover by selecting the last element, then the title is not getting displayed at well. My guess the text on hover has gone beyond the display page vertically.
Someone please help me in this. I need this hover to work for all the rows in the table in the current page as well as the next pages and not just the current display alone as happens in my case
Thanks in advance.
I don't quite understand your problem but you have 100 pixels wide container so the "TextToBeDisplayedOnHover" doesn't fit into the container. You could try this (or widen the container):
a.changes:hover p {left: 5%; background: #ffffff; size:1px;width:100px;overflow:scroll;}
Lose the inline styles in the hovering ´p´. (You're using CSS already.)
<a href='#' class='changes' onclick='AAA'>XYZ<p>TextToBeDisplayedOnHover</p></a>
If you use spaces in the hovering text ("Text To Be Displayed On Hover") you'll be less likely to run out of space.
If blue isn't the the default font color, add this to your styles:
a {color:blue;}
I used to have the following structure to hold a logo with a link inside a div:
<a href="http://mysite.com">
<div class="logo"></div>
</a>
with the following CSS:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
}
Is it wrong or there's any problem with compatibility if I remove the DIV and apply the 'logo' class directly to the A element? Just like this:
No, nothing wrong with it. It's actually better to do it that way, less redundant markup.
Some other things to note:
It's actually not valid for doctype other than HTML5 to put a block element (in this case, the div) inside an <a>
You should put a text inside the <a> for SEO/screen reader purpose and hide the text using text-indent:-999px and overflow:hidden. display:block is unnecessary as float:left implicitly sets it.
There is nothing wrong in doing this. You will need to add display:block for dimensions to apply to a non block level element, but as for how the site is read and crawled, no it will not hurt you.
You can make img a block element using this:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
display:block;
}
And as the others are saying it is safe to use an a-tag with a background but normally i have the logo in a div and an anchor on top. Good luck ; )
It creates a major accessibility problem and is in direct violation of Guideline 1.1 of the modern accessibility guidelines, WCAG 2.0: “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” The content of the a element is empty, and a background image is displayed, when CSS is enabled and image loading is enabled; but there is no text alternative.
And you cannot specify a text alternative for a background image. Use a content image instead:
<img src="logo.png" alt="ACME">
Here “ACME” is to be replaced by a descriptive name or abbreviation for the linked page.
By default, an image that is a link has a colored border, with the same color as link texts. You can remove it by using border="0" in the img tag or a img { border: none } in CSS.
I display a few images of varying width and height, and I'd like to be able to add a class or two, say new or hot that would add small overlay star or something.
Normally this would be solved by making a div with the intended image being the background, but having my images all of unknown size, I'm getting stuck trying to figure out how to achieve this. Current HTML is of structure: <a><img></a>
I'm looking for a CSS feature that doesn't exist:
img.new { foreground:transparent url('/images/new.png') no-repeat bottom right }
I'm really hoping to solve this without databasing my image sizes, and without using javascript. But if you have a JS/jquery approach that's elegant, I'm all ears.
I'm not sure how well this would work for you, but if you can add the class to your <a> element instead of your <img>:
<a class="new" href="..."><img src="..." alt="alt text"></a>
Then you can try adding an a:after pseudo-element positioned absolutely over your <img> and giving it the overlay icon as a background image:
a.new {
display: inline-block;
position: relative;
}
a.new:after {
display: block;
position: absolute;
content: '';
width: /* width of overlay image or anything you choose */;
height: /* height of overlay image or anything you choose */;
right: 0;
bottom: 0;
background: transparent url('/images/new.png') no-repeat;
}
There's a bit of an issue with the positioning of the overlay image as the <a> is made an inline block for positioning to work, but you can always give it a little bottom offset to make up for it. Here's a fiddle to show you what I mean.
Without knowing more details about your setup, there are a few things that come to mind that you can do:
Use img.new:after (Some Quirksmode info on it.). It does have some browser support limitations, though. If you don't mind that some of the older browsers don't support this, then I recommend this one. I've used it before with nice results (and you could also fall back to JavaScript wrapped in IE conditional comments if you really need to, since IE appears to be the only browser out after the feature that doesn't support it).
If you're not using overflow:hidden, you might be able to set it as the background of either your image, its anchor tag, or even the next parent up. This, of course, depends on your exact design.
Use an absolutely positioned div or span within your anchor tag and display only on anchors with the .new class. So, something like this:
<a class="new">
<span class="newBanner">
<img/>
</a>
<style>
.newBanner {
display: none;
position: absolute;
top: 0;
right: 0;
}
.new .newBanner {
display: block;
}
</style>
This last one's kind of rough and will likely need tweaked, but the point is in the styling, specifically the .new .newBanner { display: block; } part. Again, it depends largely on your exact design, so the more information you can give us, the better help we'll be able to give you.
The website I am working on uses an image defined in CSS as the main logo. The html code looks like this:
<h1>Something.com | The best something ever</h1>
I would like to display just the image defined in CSS and pass the information from the h1 tag to the search enginges only.
What's the correct way to do this? Google is very strict about this, I know that display:none is wrong, what about visibility: hidden ?
Thanks in advance!
You should be fine with visibility: hidden.
That said, if your image is part of the content (and I would dare to say that a company logo is content, not presentation), and you care about accessible html, you should consider changing your code to include the image as a img element with title and alternate text, instead of a css background-image.
Additionally, if you hope to attract search engines to the keywords inside the <h1> element, you might want to include those words more than once in the page. The page title is a much more relevant place than the h1 element, for example.
The easiest, foolproof, best for SEO solution would be
<h1><img src=logo.png alt="Something.com | The best something ever"></h1>
set the image as the background of your h1 (set the width/height so it fits) then set your text-indent to something crazy like -9999px. That way when css is disabled (such as being crawled) the bot will see the text in the header instead of the background.
example:
CSS
#myHeader {
width:200px;
height:50px;
background: url('lcoation/of/the/image.jpg') top left no-repeat;
text-indent:-9999px;
}
HTML
<body>
...
<h1 id='myHeader'>HELLO WORLD</h1>
...
</body>
The "correct" way to do this is to have the text in the title bar or in your page's meta text.
<h1 style="font-size: 2px; margin: 0px;">Something goes here</h1>
Works like a charm.... ;-) The screen readers will interpret it and won't affect your SEO.
You're not going to get good SEO results if you, first hide the <h1>, and second use generic phrases inside the <h1>.
Don't just use the <h1> for sizing, you can use classes to style.
<h1> tags should contain keyword rich information such as:
Automotive Repair
Automotive repair being the keyword that relates to the particular page I'm theoretically working on.
Hope that makes sense.
I think that visibility: hidden; would work fine. Have you tried it yet?
Does your web site consist of just one single page?
Otherwise you should put the headline of each page in the h1 tag, not the tagline of the site. Repeating the same headline on every page would make it pretty much useless.
Resizing the block would work:
h1 {
overflow: hidden;
width: 1px;
height: 1px;
}
A full article in this matter is explained here https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
So , when i work i use this code to support screen reader as well as hide some h1's and use pictures instead of it like (logo)
.offscreen{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
to find more follow the link