html - Why is the svg in my logo div pushing my navigation out of my header -
title says all, svg logo div iframe in pushing downwards navigation on right side of webpage. don't understand why doing that, here see if can find guidance. help appreciated.
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/normalize.css"/> <title></title> </head> <body> <header> <div id="logo"><iframe src="img/logo/caseywoelfle.com.svg" width="150" height="76" frameborder="none"></iframe></div> <nav> <ul> <li><a href="index.html">home</a></li> <li><a href="about.html">about me</a></li> <li><a href="portfolio.html">portfolio</a></li> <li><a href="blog.html">blog</a></li> <li><a href="contact.html">contact</a></li> </ul> </nav> </header> <div id="homepage"> <div id="banner-h"> <p id="bht"> </p> </div> </div> <footer> <span id="fom"> <h1>find out more me</h1> </span> </footer> </body> </html> body { width: 100%; background: #444444; } /*header styles*/ header { width: 100%; height: 77px; background: #ffffff; } header nav { height: 100%; vertical-align: middle; float: right; margin-right: 60px; } header nav #logo { width: 150px; margin-left: 60px; float: left; } header nav ul { list-style-type: none; margin: 0; padding: 0; } header nav li { height: 100%; line-height: 77px; display: inline-block; margin-left: 55px; } header nav { color: #000000; text-decoration: none; text-transform: uppercase; } /*homepage styles*/ #homepage { width: 100%; background: #444444; } #homepage #banner-h { margin-top: 56px; height: 751px; background: #ffffff; } #homepage #banner-h #bht { height: 88px; margin: auto; color: #000000; } footer { margin-top: 56px; background: #ffffff; width: 100%; height: 166px; } footer #fom { height: 90%; text-align: center; display: table; width: 100%; } footer h1 { display: table-cell; vertical-align: middle; } /*# sourcemappingurl=style.css.map */
the problem have because iframe taking whole row, menu pushed down.
you can add together bit of css #logo {display:inline-block;} create iframe deed inline element (so can co-exists on same line, much these words reading). have ensure nav element narrow plenty fit onto page (or else pushed downwards because there isn't plenty space). demo should explain better.
also of note, can have svg without iframe. take @ website developing (http://yamichi.me/tour.php), logo in page svg tag , not in iframe. page has more info on using svg.
for little images, i'd suggest using png instead, not impact loading time much, , has much improve back upwards in browsers.
html css svg
No comments:
Post a Comment