html - Is this method for having both a logo image and text good or is there a better method and/or other options or considerations? -
when try research find hard separate scenario debated image replacement discussions , debates, in case want use both , image , text.
the problem want have both logo , image header wants on it's own line, i've floated image left desired effect. seems fine me don't recall coming across problem before , need 1 right first time, questions: there wrong method, there alternative methods worth considering , there further considerations, instance didn't see need clear float maybe should after h1 tag.
<html> <head> <style> h1 { line-height:100px; font-size:75px; background:#eee; } img#logo { margin-right:20px; float:left; } </style> </head> <body> <img id="logo" src="http://placehold.it/100x100"> <h1>title</h1> <p>page content ...</p> </body> </html> here's jsfiddle http://jsfiddle.net/cac3e/
i don't see wrong approach. search engines should ignore image , happy. place logo inside h1 tag because i'm lazy, haven't tested disadvantages, take grain of salt.
since you're forcing heading same height image, don't foresee problems caused missing clear styles, either. but, of course, test in worst case browser(s) (notably ie7 , ie6 if target audience really bad) before ship stuff this.
Comments
Post a Comment