Ive been searching for a method to replace the text-indent: -9999px css-trick used to hide link text and display images as links for say a home Logo button. Ive found a simple solution that seems to work, but doesnt seem to get any hype so Im wondering if there are holes that I dont see.
Below is the solution, with the class="homeButton" applying a css rollover image and the class="hide" obviously hiding the link text. Please let me know if this has any downsides Im not seeing as a way to still have a text based link with the text not showing up on screen normally, but still showing up in screen readers and search engines.
Thanx as always...
<a class="homeButton" href="index.html"><span class="hide">Home Button</span></a>
You don't say exactly how you his the content of .hide, but if the idea is to use display:none, forget it. Elements with display-none are ignored by both screen readers and search spiders, as content hidden is assumed to be irrelevant (not least as black hat SEO-ers could easily stuff hidden text with keywords).
I don't really see what's wrong with the text-indent solution. Granted, I'd reduce the indent value to stop IE6 reserving memory for a huge unused canvas, but it's still the recommended technique for these efforts.
HTML CODE
<h1><a class="homeButton" href="index.html">Home Button</a></h1>
CSS CODE
h1 {
display: block;
width: 386px;
height: 83px;
margin: 11px 0 0 10px;
text-align: left;
overflow-x: hidden;
}
h1 a.homeButton {
display: block;
width: 386px;
height: 83px;
text-indent: -19999px;
background-repeat: no-repeat;
background-image: url("http://existstudio.pl/images//template/ex-ist/ex-ist-logotype.png");
}
DEMO
http://jsfiddle.net/bartekbielawa/rmWhF/
EXPLANATION
the <h1> you can change something you like. I prefere <h1> because is good for SEO
use font-size = 0
.hide {
font-size: 0;
}
Related
I'm trying to position elements in a way so that when the browser width is changed, the webpage will scale everything in proportion, but what happens is that they shift a little. I don't understand why. I can adjust this okay using media queries, but they change drastically in mobile browsers. To illustrate what I'm talking about, I created an example in which I'm trying to keep this black text centered inside this green box. From my example, you'll see that scaling the browser on a desktop will keep the text in the box centered pretty well, but when switching to a mobile browser, the text will go out of the box. What can I do to keep it scaling correctly?
I realize that I can just fill the text div with a green background, but you have to understand that this is just an example of what I'm trying to do. The real webpage is much more sophisticated, so that will not be an option. I need to make sure that these divs scale appropriately. Thank you.
I provided an image to show the problem that I'm getting in my phone browser. It's a bit small, but you can see how the black text dips below the green box.
The example website: http://www.marifysworld.com
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff}
img {
display: block;
margin: 0px;
padding: 0px}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
text-size-adjust: 90%}
.box {
width: 23.75%;
height: auto;
position: absolute;
left: 25%;
top: 40vw}
.divtext {
width: 20%;
height: auto;
position: absolute;
left: 26.75%;
top: 42.5vw}
HTML:
<img class="box" src="http://www.marifysworld.com/images/platform/box.jpg" />
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
Well, you are using positions for your design but it is confusing and not possible.
Here is an idea to make this design work.
Just try it...
HTML:
<div class="box">
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
</div>
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff;
}
.box{
background: url('http://www.marifysworld.com/images/platform/box.jpg');
width: 23.75%;
margin: auto;
margin-top: 20%;
}
.divtext {
width: 90%;
padding: 5% 0;
margin: auto;
}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
}
Update: initially I thought the problem might be the (not universally supported) text-size-adjust property, but it seems this is unlikely. I leave those thoughts below just in case they are useful to someone else using that property.
Having been unable to reproduce the problem myself but seeing the useful image now put into the question I think we have to look at the actual font and how it is sized and using space. There are quite a few factors which maybe the browsers are setting different defaults for. Here's a few, there may well be more:
font-family - most obvious but is whichever browser is causing the problem using the same default font as browsers not causing the problem? Try setting a specific font and see what happens
Different fonts will take different widths for different characters. Try a monospace font - that will probably overflow - just to demonstrate the issue
kerning - no I don't fully understand how different fonts use it and what they mean by 'normal' (which is probably the browser's default) but that will also alter the space used as will...
..line height - perhaps that needs to be specifically set
font-weight will alter the space used - do all browsers/systems interpret say 400 exactly the same way
I guess there's loads more that may differ between browsers - for example how exactly do they calculate the spacing needed to center text, will they always break a line at the same place etc.
Sorry this is a waffle, but there are so many factors that could make the text overflow and I don't understand them all in enough depth.
Basically what you need is to be able to scale the text div to force it to fit - for that you would need a bit of JS I think (?or is there an equivalent of contain for divs?)
ORIGINAL STUFF:
I am seeing text stay within the green box on a mobile device (IOS Safari) so I imagine the problem you are having is with another mobile device/browser such as Android.
If this is case the area to look at is the use of the CSS property
text-size-adjust: 90%
There are a couple of things to note here:
According to MDN
This is an experimental technology. Check ... carefully before using in production.
This property is intended to be used in the case where a website has not been designed with smaller devices/viewports in mind.
According to MDN, while Chrome on Android implements text-size-adjust fully, Firefox on Android and Safari on IOS do not support the percentage version.
I may be missing something but the question explicitly states that 'the webpage will scale everything in proportion'. Apart from possible inbuilt browser margin and padding on the div, everything is expressed as vw or % so I cannot see anything else that would have an adverse affect on the text positioning.
I also cannot see why this property is being used. It may or may not be causing the problem, but it certainly may affect how text is displayed on some browsers and it seems to be, at best, redundant for a site that is designed with proportionality in mind from the start.
On my website, when I show adverts on mobile, I get an odd yellow rectangle obscuring the right-hand side of my Google AdSense:
That's my own wobbly question mark in the the yellow space, and I've fill-flooded the background to make it stand out more.
I've examined the styles through the Chrome Developer Tools window, but I cannot find anything set to yellow in the style hierarchy, and I'm using mostly the bog-standard minileven WordPress-supplied theme. What could be causing this? How can I correct the CSS to get rid of this? Ads look fine on the desktop version, only mobile.
A typical page is this one.
Looking at your site and viewing an Ad I do see some extra spacing (the one I viewed is different than the one in your screenshot)
When I view the DOM this is the code that is causing the extra spacing:
<td class="rh000c">
<div class="rh-box-empty rh000"></div>
</td>
Here is the related CSS:
.rh000c {
height: 102px;
padding: 0;
width: 2px;
}
.rh000 {
background-color: #ffffff;
display: inline-block;
height: 102px;
overflow: hidden;
padding: 0;
width: 2px;
}
For some reason the Ad is passing this code into its iframe so I don't think there is much you can do to remove it. (Well, there might be ways to remove this code but you might violate your service agreement with the Ad agency if you do)
If I were you I would contact the Ads company you are using (it seems that you are using Google Ads) and ask them about this issue directly. Hope that helps.
I had another closer look at the problem, and for some reason or other there is a rule like this:
embed, iframe, object {
width: auto;
}
For some reason that I can't work out, this overrode the explicit <iframe width="320", so by trial and error I found that adding this to my custom CSS:
.mobile-theme .adsbygoogle iframe {
width: inherit;
}
Overrode the width: auto; and I now no longer get my yellow border. There's still a bit of an ugly yellow border at the link widget at the bottom, but at least that's not obscuring anything, so I'll ignore it for now...
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
Image Rollover, no JavaScript, no Link, pure CSS, code validate and Browser compatible.
Hello all, I have been working 24hours strait to come up with this fairly easy solution. I want to know if everything is all right and if there are ways to improve. It's quite elegant, here we go:
I have only one image "Logo" but it will show as 2 different logo each with a rollover effect.
I use a sprite (only 1 image containing my 4 logos) and I just change it's position.
Here I insert my image in a div with
<div id="logo-rollover-1" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Then I insert in another div the same image but with a different id
<div id="logo-rollover-2" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Now my CSS:
.logo-rollover {
background: #ffd42a url('path-to-your-image');
width: 230px;
float: left;
height: 130px;
overflow: hidden;
position: relative;
}
.logo-rollover img { width: 460px; height: 260px; }
.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }
#logo-rollover-1 { background-position: 0px -130px; }
#logo-rollover-2 { background-position: -230px -130px; }
#logo-rollover-2 img { right: 230px; position: relative; display: block; }
Explanations: when someone hover an image it becomes transparent and show the background witch is the same image but with a different position. opacity: 0 for Firefox, Google and filter:alpha(opacity=0) for Explorer. position: relative on the .logo-rollover class is for compatibility of hidden overflow with IE6 & IE7. display:block; is added to the id img for the Opera browser.
No Hack: When there is no link, there is no need for href="#" or "javascript:void(0)"
Advantages: instead of requesting 4 (or more) images, there is only 1 image (the total size of 1 image sprite is smaller then the total size of 4). the rollover is instant as the image is already downloaded. No hack, no false link, code validate. Add a title to the image. The only browser not rolling over is IE6 but the site is not broken, the logo show correctly. There is a hack for activating hover for IE6 but I didn't bother as IE6 is dead.
Tip: use the same path for your image everywhere.
I mean the "path-to-your-image" needs to be the same for all call. Because of browser caching.
Is this the best elegant way? Can this code be improve? I hope it will help someone because it was a real pain to develop thank to others user here I found some tricks here and there and came up with this.
Comment appreciated.
Why not completely removing inner <img> and create logo using CSS background?
<a id="logo">Logo</a>
#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0;
overflow:hidden; text-indent:-1000px; display:block; }
#logo:hover { background-position:0 -60px; }
Explanation:
<a> is the only element that supports :hover pseudo selector on IE6. If you want native solution for hover logo you must use this tag. Some people sometimes wrap other elements ex: <a><div></div></a> to give div hover property by accessing it from CSS using a:hover div { }
overflow:hidden; and text-indent:-1000px; hide text from inside the div. It is a good practise to leave text inside for accessibility reasons.
background sets the background color of your div, initialy alligned to 0, 0
background-position does the actual trick and shifts the image - it is moving it within the 'viewport' div making different part of the image visible.
nice description! I see one small improvement: put the background und no-repeat definition in your .logo-rollover class to have less css code (you have to write it only once instead of twice)
So I'm trying to code out my design for my new portfolio website, but I'm having a few issues there that research and hours of smashing my face against the computer screen have not yet solved. There are two big issues right now that I'm stuck on, though there is yet another that I'm currently considering if I even want to deal with at all.
The first issue is the menu. I want the typeface to go from regular to bold when you hover over it, or when you're on that page. Which works. Problem is when you hover over it, the other two items in the menu adjust slightly because the change in type weight pushes them out. My attempts thus far have all ended with failure.
The second issue is the footer. I want it to stay on the bottom of the page. My research has gotten me this far, but instead of what I wanted, now it actually stays at the bottom of the browser, not at the bottom of the content. Thank you for any help you can give!
The page in question can be found at: http://personal.justgooddesign.net/draft/
Your footer is getting jumbled up because you float left and clear right. My personal preference for footers always starts with this very clean method and builds from there. If you're getting confused, separate your inner content from the rest of the page and test away.
With fonts, you have to think more like a UI developer than a graphic designer. Unlike Indesign, Illustrator, etc, fonts and spacing aren't 100% pixel perfect. What will render one way in one browser will render a very different way in another. Bolding a font on the web will make it larger, and it will push spacing. To compensate for that, setup your menu elements to be a bit wider to compensate, then test like crazy. If you solely rely on margins and padding, then a bolded hover element is going to push the menu around every time.
Just a suggestion, setup your css in a separate file and load it in. The code will be cached, which will result in a performance improvement on subsequent loads. Further, you could save yourself a lot of code by doing one class to attach styling to your elements and being mindful positioning relative to other elements. There's no need to individually style every element in your portfolio for positioning.
You can fix the jump in the menu by setting a fixed width on the #menu li, so
#menu li {
display: block;
float: right;
width: 40px; //something like this.
padding: 0px;
list-style-type: none;
position: relative;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}
EDIT:
To fix the footer issue
remove height: 600px; from the #right rule
add a clearing br in between the #container div and the #footer div
</div>
<br style="clear:both;">
<div id="footer">
You have floating problems as you are not clearing your floats.
Your div#wrapper is always going to be equal to the height of the viewport.
Your div#container is collapsed beacuse you have floated div#left to "left", div#right to "right" and also have absolutely positioned div#footer. What this does is that, it takes these divs from the normal flow of the document and subsequently the div#contaiver is not "wrapped" around these three divs (div#left, div#right and div#fotter")
The same is the case with div#right. The div#intro and div#portfolio have been floated inside the div#right and it is not wrapping it's child divs.
Ther are many ways around these problems. I suggest this.
Include the following code after the last floated element.
<div class="float_clear"></div>
div.float_clear
{
clear: both;
}
For the menu, there is not enough space, Just add.
div#menu>ul>li
{
width: 50px;
}
Try this to fix your footer issue?
<p style = "clear:both">
<div id="footer">
Also
#right {
clear: right;
float: right;
height: 600px; //Remove this line
width: 490px;
padding: 0px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 0px;
}
add overflow:hidden to the container...
Whenever you have stuff that is floating, put a div around the floating content and give it
overflow:hidden;
display:block;
width: (some width);
That will fix most floating issues