Preferred Logo Display Method - html

When displaying a company logo I saw something new today.
They set a height and width and overflow:hidden on the h1 tag and set a negative margin on the a tag inside of the h1 tag to keep the text from showing.
The code looked like this
<h1 class='logo'><a href='/'>Company Name</a></h1>
The css looked like this:
.logo {
text-indent: -9999em;
overflow: hidden;
text-align: left;
background-image: url(/images/logo.png);
background-repeat: no-repeat;
background-position: 0% 0%;
width: 253px;
height: 80px;
float: left;
margin-left: 10px;
}
.logo a {
display: block;
width: 253px;
height: 80px;
}
I always preferred the method where you use a span inside of the a tag and set it to display:none.
My code looks like this:
<h1 class='logo'><a href='/'><span>Company Name</span></a></h1>
My css looks like this:
.logo {
background: url(/images/logo.png) top left no-repeat;
margin-left: 10px;
a {
display: block;
width: 253px;
height: 80px;
span {
display:none;
}
}
}
Ignoring the fact that my nested CSS looks far cleaner, am I doing the right thing with my extra span and display:none or is there a reason for the crazy text-indent and other extra stuff the previous programmer threw into the stylesheet?
Edit for clarity: I am not asking for a different way to display the company logo. Using an h1 with the company name in it is an accepted standard practice for this. I guess I meant to ask what way do you prefer to display a company logo using an h1 and css? why?

Setting display: none will hide the content from screen readers and is thus a very bad approach.
Using the text-indent trick won't, but is still suboptimal.
The image is content and should be an <img> element.

You gave me an idea...
<style type="text/css">
#logo {
margin: 0;
}
#logo,
#logo a,
#logo:before {
display: block;
width: 275px;
height: 95px;
position: relative;
}
#logo a {
position: absolute;
top: 0;
left: 0;
line-height: -1px;
font-size: 0;
text-decoration: none;
overflow: hidden;
}
#logo:before {
content: "\0020";
background-image: url('http://www.google.com/intl/en_ALL/images/srpr/logo1w.png');
position: absolute;
}
</style>
<h3 id="logo">Google</h3>
This probably doesn't work on IE7, and Safari renders the text in the A tag as a little smudge in the top left corner. I bet it could be finessed a little more to eliminate that though. Maybe I'll be able to use this technique in the future.

i have using logo code..
.logo
{
width: 253px;
height: 80px;
float: left;
overflow: hidden;
margin:0px;
padding:0px;
}
.logo a
{
display:block;
cursor:pointer;
border:0px;
font-size:1px;
text-indent:-500px;
text-decoraton:none;
}
<h1 class="logo">company name
THanks
Ptiwari..

Either way you are trying to trick Google and can get penalized.
To answer your question, display:none means the text is not actually looked at on the page. The text indent means it is still there, spiders will still read the text, and therefore it can work.
Again, I consider this cheating the Search Engines and suggest against it. Use an Alt tag or find a place to put the h1 with a background image.

Related

How do I make the div blue box go in front of the h1 text?

I don't know how to make the div display in front of the h1 text, so that the blue box is in front of the text? I have been stuck on this for the past 30 mins and cant resolve it in my head. I am a beginner so please have patience.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper2 {
position: absolute;
z-index: 2;
width: 500px;
height: 250px;
background: blue;
}
h1 {
position: relative;
z-index: 0;
}
<div class="wrapper2">
<h1>Welcome</h1>
</div>
As mentioned above, you can simply put the <h1> element above your wrapper in HTML. If you want your <h1> to stay inside, you could use this:
display: none; or visibility: hidden; opacity: 0;
CSS:
h1 {
position: relative;
/* either of these */
display: none;
visibility: hidden;
opacity: 0;
}
You could try this:
.wrapper2 {
width: 500px;
height: 250px;
background: blue;
}
<div class="wrapper2"></div>
<h1>Welcome</h1>
Although then it's not really a "wrapper" anymore, so maybe you'll need to create an element just for the blue square.
You've placed your h1 inside the wrapper2, so you can try to move it after it if you want to style them separately. I would also suggest to not use absolute position unless you really want this, the consequences of doing this will quickly become apparent as you build out a larger page.
You can make each element "inline" rather than "block", this will make them follow the text flow of the page: display: inline;

HTML: Block Element Stays Behind Other Elements

This is my first time using the service, so I'll try to be specific.
I'm trying to create a land page for my domain, but when I place the logo for the top menu, and add another element, the element does not respect the space of the logo, and it stays in front of the logo.
Here's the CSS I'm using:
#header {
width: 100%;
padding: 5px 0;
background: #b20000;
}
#header .hwrap {
display: block;
width: 980px;
height: 40px;
margin: 0 auto;
}
#header .menuLogo {
display: block;
width: 205px;
height: 70px;
background: url(menu_logo-70px.png);
text-indent: -9999px;
margin-bottom: -30px;
}
And here is an excerpt of the HTML I'm using:
<body>
<div id="header">
<div class="hwrap"><h1 class="menuLogo">fhtgames.com</h1>Random text</div>
</div>
</body>
Fairly simple.
EDIT: What I want is the logo to overflow the menu bar, and add the menu options to the right of the logo, still inside the .hwrap element. I used the logo with an <h1> element and placed the image as a background to avoid the image to be right-clicked and be saved.
But when I try to add the menu and the link to the logo, I notice that Google Chrome renders the page with the logo link for the full width of the .hwrap element, and adding anything else, makes the logo to stay behind the new elements.
Here's a link of the screen: http://img.fhtcentral.com/stack/screen001.png
I am using an HTML5 Reset stylesheet (found here) and I'm pulling the latest jQuery library from Google servers.
I've done this lots of times before, without any problems whatsoever, so I really don't know what am I doing wrong. I am sorry if this looks completely noobie question, but I just can't see the mistake.
Thank you for you time.
EDIT: The problem has been solved. The answer is right below. Thank you all for your elp :D
The text appears above the logo, because you have set the logo image as a background. So html intends that you want, as the word says, the image as background!
To avoid this I guess you have set the display: block to your h1.menuLogo. The right way would be display: inline-block.
#header .menuLogo {
display: inline-block;
width: 205px;
height: 70px;
background: url(menu_logo-70px.png);
text-indent: -9999px;
margin-bottom: -30px;
}
You can find a working fiddle right here.
The rest is about adjusting with margin and padding.
For further information about your problem you can read about the difference of block/inline-block here.
If you need other suggestions please let me know!
Best regards, Marian.
Hope this help you.
#header {
width: 100%;
padding: 5px 0;
background: #b20000;
overflow:hidden;
position:relative;
}
#header .hwrap {
display: block;
width: 980px;
margin: 0 auto;
color:#fff;
}
#header .menuLogo {
display: block;
width: 205px;
height: 70px;
background: url('http://jsfiddle.net/img/logo.png') no-repeat rgb(249, 153, 5);
text-indent: -9999px;
overflow: hidden;
line-height: 1;
margin: 0;
padding: 0;
}
JSFiddle Link.

(HTML + CSS) Knowing exact distances in em

I'm kind of knew (some days) to this so this might be a dumb question.
I'm trying to make a navbar with three links/buttons. Two of them, when hovered, simply change the background to a darker one, the third one, opens a small menu with more links/buttons.
This is what I did (probably not the best method, but the first that came into my mind):
http://jsbin.com/woxodovoxo/1/edit?html,css
My problem is that on the button in the middle, the positions are not right (you can see that the button flickers a little when you hover your mouse over it, although this doesn't happen on the other buttons).
This is happening because I wasn't able to put #text-dropdown and #dropdown-div on the same starting position, since I couldn't find the right value for the "margin-top; padding-top" on #dropdown-div
From what I see on the code, .headertext is 0.5em (+ font-size) underneath the top of the page.
The problem comes with #dropdown-div, since I don't know its original position (without any tweaking) relative to the top of the page. If I were to know that, I could simply make a calculation to know which values to put in "margin-top; padding-top" on #dropdown-div.
Could you help me with that?
Also, percentages and em's don't seem to go well together, specially on the navbar when zooming in/out. What alternative could I use? Everything with em's? Everything with percentages? Or something else?
Thanks
Would this solve your problem? I didn't copy over your exact code because it was exhausting to read, but hopefully it gets you in the write direction. If you set an objects position to be absolute with its parent set to relative you can move it around relative to its parent.
Also, the box-sizing attribute may help you in the future. Makes it so that the padding/borders are included in the size calculations.
div#navbar {
width: 100%;
height: 2em;
}
div#navbar *,
div#navbar {
padding: 0;
margin: 0;
background-color: #3ff;
}
div#navbar div {
display: inline-block;
position: relative;
box-sizing: border-box;
height: 100%;
width: 150px;
}
div#navbar div>div {
display: none;
position: absolute;
top: 100%;
left: 0;
height: auto;
}
div#navbar div:hover>div {
display: block;
}
<div id="navbar">
<div>Something 1</div>
<div>Submenu
<div>
Other text
<br />Yup
</div>
</div>
<div>
hello
</div>
</div>
.headerlink{
height: 3em;
line-height: 3em;
width: 25%;
z-index: 1;
position: fixed;
}
.headertext{
text-align: center;
font-size: 1.3em;
font-family: 'Verdana';
color: #E3E3E3;
font-weight: bold;
}
#dropdown-div{
position: absolute;
top:100%;
width:100%;
background-color: #57a58a;
opacity: 0;
}
Modify the above styles and delete the below one
#hd2:hover #text-dropdown{
opacity: 0;
}
Edit:
Add this too..
#hd2:hover{
background-color: #57a58a;
}
and remove this extra option:
<div class="header-dropdown">Page2</div>

Inline-block conainting image with height 100% collapsing in FireFox

I have a problem with CSS that's only visible in FireFox (cur.ver. 31).
I am trying to make a responsive layout, with a row of images (with links), that are centered, and having the same height and scale with the viewport width. My approach is to create a container with a fixed aspect ratio, and place the images inside (each image inside a separate <a> tag), center them, and scale their heights to the container height. It's working great, except in FireFox.
To achieve this I applied a display: inline-block; height: 100% to <a> tag and height: 100%; width: auto to <img> tags. For some (unknown) reason FF is not calculating the width of the <a> tag correctly (when it contains described above <img> tag) and it collapses horizontally. The result is, that all <a> with 0 width are placed very close to each other (separated only by white spaces), and the images overlap each other. I get the same result with display: block; float: left; on <a> tags.
The CSS
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
display: inline-block;
height: 100%;
background: #f00;
}
.block img {
height: 100%;
width: auto;
display: block;
}
The HTML
<div class="container-ratio">
<div class="container-inner">
<a class="block">
<img src="http://placehold.it/100x80/42bdc2/FFFFFF&text=No1">
</a>
<a class="block">
<img src="http://placehold.it/150x80/242bdc/FFFFFF&text=No2">
</a>
<a class="block">
<img src="http://placehold.it/200x80/c242bd/FFFFFF&text=No3">
</a>
</div>
</div>
I think this is what your trying to do. Demo
You had no width on .block and auto on .block img.
It needs to be percentages.
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
display: inline-block;
width:20%;
height: 100%;
background: #f00;
}
.block img {
height: 100%;
width:100%;
display: block;
}
It's been nearly two years since this question was asked, and Firefox still exhibits this behavior.
So, for anyone in the same situation, here's a solution (only tested on Chrome 49.0 and Firefox 45.0.1).
Edit:
Originally, I used inline wrapper divs and two instances of the images, one of which was not displayed and only served as a dummy. It appears this is not necessary, as can be seen here.
All in all, it seems you can't use inline-block that way in Firefox, but all you need to do to get what you want is leave the anchors and images as inline elements. As long as the anchor's parent is a block-level element other than inline-block, and its height is specified, then you'll get the intended result.
If, for some reason, inline-block is really needed, I don't see how to work around this problem.
Note:
Beware of the "font-size: 0;" on the .block class, used to remove spaces between the images. Without this, images are seperated by whitespaces that behave like links. If the images need some space between them, adding some right or left margin as in the fiddle would be a solution.
Also, though the .block class name is no longer appropriate, I left it to stay consistent with the OP.
The modified CSS
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
font-size: 0;
}
.block img {
height: 100%;
margin-right: 1%;
}

div tag hiding behind image

I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>​