I'm building a web site and I'm using HTML5. I'd insert into my header an img that is my company's logo. In terms of efficient and correctness it is better set up css propriety as background-image: url("logo.gif") in my css style or including in the html file
<header>
<img src="logo.gif" alt="logo" />
</header>
It is best to include the image as an img tag, not a background-image.
This means that if the client has disabled CSS on their browser, or it doesn't support CSS, they will still be able to see the logo at the top of the page.
This would also mean you could make the logo a link to the home page, which has become a general usability point for websites these days:
<header>
<img src="logo.gif" alt="logo" />
</header>
For more information on this sort of situation, see this popular StackOverflow post:
When to use IMG vs. CSS background-image?
that depends.
If your logo should be clickable then include it in the HMTL. (usebility)
If it is only present for design purposes go with the CSS.
It is generally a better idea to define everything related to the appearance of the Website in the CSS.
html:
<header>
<div id="company_logo"></div>
</header>
css:
#company_logo{
width:50px;
height:50px;
background-image:url();
}
Unless you need to have some contents over your logo, I'd go for the <img> tag (it is also screen reader-friendly provided you have the "alt" text).
Background images can not be printed, if your site has the purpose of being printed, then your logo won't display.
Remember that a logo is a content, and a background is a style. Using a background as a logo is not semantic.
Related
While working on a project, I discovered some of my images on Tumblr are not displaying. The only clue I've found is that within the responsive-level-1 class (see below for html code), the height of the iFrame is set to 0. If I pop open a dev console in Chrome and set that to be, e.g., 1632 (not 0), the image appears. I'm using a theme (Brick theme/theme garden) , but am able to edit the html and css. Can I modify my css and/or HTML to fix this? The issue occurs across device platforms (desktop/phone/tablet).
Example of no image displayed- http://deligrossery.com/post/149661412746/gawad-deli-grocery-207-hart-st-brooklyn-ny
corresponding css files:
responsive.css: http://static.tumblr.com/eftyn9y/kc0og8vio/responsive.css
style.css: static.tumblr.com/3zmswwt/Fmkmwgp8e/style.css
(^ I can't post more than 2 links until my reputation is at least 10/add an https:// to the style.css).
<iframe id="photoset_iframe_149661412746" class="photoset" scrolling="no" frameborder="0" height="0" width="500" style="border:0px; background-color:transparent; overflow:hidden;" src="http://deligrossery.com/post/149661412746/photoset_iframe/deligrossery/tumblr_ocn1e9dTfK1txl3g8/500/false" name="photoset_iframe_149661412746"></iframe>
Try changing your photoset layout block to something like this (you may need to tweak this slightly):
{block:Photoset}
<div class="content photoset">
{block:Photos}
<img src="{PhotoURL-500}"/>
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
<p></p>
</div>
{/block:Photoset}
Keep a backup of your current theme.
This should output the photoset in the normal html template (not iframe). From there it should be much easier to control the height of the content, in fact by default it should just output the content and the height will be fixed automatically. But there might be other issues to investigate after this.
Hopefully this is a simple answer. I have a page that on desktop needs a series of share icons (fb, tw, ig) underneath a paragraph of text. But on mobile, these icons are included in a template already so I don't need them to show. It looks repetitive. I am using a CMS and only have access to the body text of the page, not the headers, so extensive javascript isn't ideal. What inline CSS styling or other such magic will make this div disappear? And can I shrink it only on verified mobile devices or is it better to do it just with the browser window size?
Currently the code is very simple:
<html>
<body>
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
</body>
</html>
All I need to do is make "mydiv" disappear if I'm using an iPhone, iPad, or Android device...
Thank you!
You can use media queries:
A media query consists of a media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, and color.
When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Documentation:
MDN
w3schools
For example:
#media (max-width: 787px) {
#mydiv {
display: none;
}
}
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
I am making a tumblr theme which will have a pretty large image in the background (approx. 2000x1600px). However I need the page's content, the tumblr posts, to load relatively quickly. Which of these options would be faster?
<style>
body {background-image: "background.png"}
</style>
<body>
<div id="content">
/* tumblr posts go here */
</div>
</body>
or
<style>
img {z-index: 0}
</style>
<body>
<div id="content">
/* tumblr posts go here */
</div>
<img src="background.png">
</body>
The two don't really differ from one another.
If you open up Chrome Dev Tools and take a look in the Network Tab, the load times will be the same because the size of the image remains as is.
However, what you can do here, is leverage the power of CSS along with some Javascript. Apply the background image to a class, say .with-background, and then with some jQuery:
$(window).load(function(){
$('body').addClass('with-background');
});
This way, when everything else on the page (including other images, thus the listener on 'window.load') is loaded, apply this class, which will then load up the background image.
As a simple sidenote, if you don't want your body to remain blank while the content loads, what you can do is take that huge image, downscale it, and blur it (in Photoshop or other image editing software). That way "something resembling that image is back there" - all the while being very small in Kb. In turn, when the class is applied, you'll get your full-sized image.
Check out posts with images on medium.com - they do a similar thing. It is a design choice, more than anything else.
Here's a description of the problem: for starters, I have a background logo image displaying on the webpage version (screen media) at the top of the page spanning the entire width of the page (basically a masthead).
Then I added a print stylesheet and have been hiding and showing certain parts to optimize the experience for users and their printers .
However, and here's the problem, I noticed that on IE in every page of the print preview the logo image is being added to the top of every page in the print out when the page content is enough for more than one page in the total number of pages. So if there's enough content for 3 pages then in all those three pages the logo image appears at the top every page in the print out, when it should only appear in the 1st one.
I've checked my CSS and I can't find whats going on. I don't have the section that contains the CSS class that defines the background image repeated more than once. This only happens on IE. Not on Chrome nor Firefox.
Here's an excerpt of the HTML:
....
<body>
<div class="repeating-bg-img">
<div class="container">
...
<!-- /.inner content that is long enough for more than one page -->
...
</div><!-- /.container -->
</div><!-- /.repeating-bg-img -->
</body>
</html>
and here's an excerpt of the CSS in the print.css stylesheet with media = print :
.repeating-bg-img {
background: #ffffff url('../img/background-image.png') scroll repeat-x left top;
}
Has anyone encountered this before on IE? If so, do you have a fix for this?
I ran into the same problem today. One solution is a structure like this:
<body>
<div id="background" style="position: relative;">
<img src="bkgnd.png" style="position: absolute; z-index: -1;">
<div class="container" ...>
...
</div>
</div>
</body>
The basic idea is to take the image out of the flow but position it relative to its containing <div>. The z-index pushes it behind other elements. So this can be used as any kind of column header.
One upside to this is that the background image will print even if the "background images" option isn't set in the print dialog. I'd like to see a proper solution as well though.
Edit 2013/07/23:
It looks like the CSS3 property will be box-decoration-break. This isn't going to help with older versions of IE but the spec is available here: http://www.w3.org/TR/css3-background/#box-decoration-break
If what you really want is a masthead, I also thought this might work:
#media print {
div#background { background: none; }
#page :first { background: url('bkgnd.png') center no-repeat;
margin: ...; }
}
But it looks like that is CSS3 as well. Chrome loads the image from the server but only honors the 'margin' attribute; Firefox and IE9 seem to ignore all of it.
I read about semantic HTML online...
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.
If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.
So, below is semantic,
<h1>My Website Name</h1>
<h2>My Website Tagline </h2>
What about this below?
<div id="header">
<h1><span class="hide">My Website Name</span></h1>
<h2><span class="hide">My Website Tagline</span></h2>
</div>
I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?
The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?
Then, if I don't use div, what can I use to make a box around the h1 and h2?
As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??
Thanks.
I would do something like the following if I was going to use HTML5:
<header>
<hgroup>
<h1>My Website Name</h1>
<h2>My Website Tagline</h2>
</hgroup>
</header>
Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.
If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.
You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.
If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).
<div id="header">
<h1><img src="foo.png" alt="My Website Name"></h1>
<p><img src="foo.png" alt="My Website Tagline"></p>
</div>
Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I've tested it, I was unable to set CSS values for the <header> tag, for example. So for now I would recommend that you continue to use div tags to group your semantic meaning.
As a sidenote, Google does not like hidden text, and if you have a lot of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.
Nobody suggested that you should not use DIVs at all... semantic HTML does not mean there cannot be div or span tags in your code. It just only means that whenever possible (there is a specific tag available for a specific semantic meaning) you should try to give semantic meaning.
h2 is not to be used for taglines, as somebody else already suggested.
Also, in my interpretation (some will argue), h1 is not for the name of your website. It is the title for the content on a specific page.
I agree with #David Dorward, the tag line should be in a p tag.
Your example (wrapping the header elements with a div) is perfectly acceptable, though I would like to raise a small caution: Be careful that you do not get in the habit of wrapping everything in div tags. For example:
<div class="content">
<div class="list">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
Since a ul tag is already a block element, the above markup would be better off like this:
<div class="content">
<ul class="list">
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
And then just style the ul to look like the div.
On the matter of displaying the logo as an image:
If your logo is text-based, or has text in it, you would be better off doing the following:
HTML
<div id="header">
<h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>
CSS
.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
/* Also add height and width based on your logo height and width */