html - Make the logo and links on the same line in header -
i'm making website , in header need logo , horizontal set of links. logo must on left , links must on right. problem i'm running if add many links list, wrap next line, need closely attached right side of page. both banner , list of links in header. css follows.
header{ width:100%; height:10%; background-color:#ac222a; color:white; } links{ position: relative; height: 10; width: 10%; float: right; top: 35%; display: inline; } banner{ position: absolute; padding: 1% left: 1%; height; 10; width: 15% float: left; }
and html follows:
<html> <head> <link rel="stylesheet" href="index.css"> </head> <div id="header"> <div id = "banner"> <img src="pictures/logo_logo.png"> </div> <div id = "links"> <a href="">home</a> | <a href="about.html">about</a> | <a href="contact.html">contact us</a> </div> </div> <body> </body> </html>
it's missing #
on id names in css. in fact whole layout can done simple float
, move links before banner in html.
#header { background-color:#ac222a; color:white; } #links { float:right; }
<div id="header"> <div id="links"> <a href="">home</a> | <a href="about.html">about</a> | <a href="contact.html">contact us</a> </div> <div id="banner"> <img src="pictures/logo_logo.png"/> </div> </div>
edit: (transferring comments this) - fix problem based on existing code, have #links{width:10%;}
set there, remove that.
Comments
Post a Comment