html - Links inheriting div size -
i'm coding basic site skeleton (in case needs know, i'm decently skilled in html, have trouble divs , i'm learning css), , issue occurred links google on site logo , links "contact" , "news" inheriting size of whole fixed banner, named thing. (the banner looks bit odd in snippet, because it's fixed , meant desktop.)
my code:
::-moz-selection { color: #ffffff; background: #00ffaa; } ::selection { color: #ffffff; background: #00ffaa; } a:link { text-decoration: none; color: #00ffaa; } a:visited { text-decoration: none; color: #00d486; } a:hover { text-decoration: none; color: #adffe2; } a:active { text-decoration: none; color: #00ffaa } .thing { background: #141414; position: fixed; left: -2%; top: -10px; z-index: 100; width: 200%; height: 10%; } .header { color: #aaaaaa; position: relative; left: 200px; top: -15px; font-size: 300%; } .header:hover { transition: .2s; color: #dbdbdb; position: relative; left: 200px; top: -15px; font-size: 300% } #link1 { position: relative; left: 600px; top: -85px; } #link2 { position: relative; top: -37px; left: 150px; } #link3 { position: relative; top: -37px; left: 150px; } #link4 { position: relative; top: -37px; left: 150px; } #link5 { position: relative; top: -37px; left: 150px; } #bodycontainer { position: relative; background-color: #191919; height: 200%; width: 65%; }<html> <head> <link rel="shortcut icon" type="image x-icon" href="http://i.imgur.com/umsivuq.png?1" /> <title>title</title> </head> <body background="http://i.imgur.com/6pq1mtl.png"> <center> <div id="bodycontainer"> </div> </center> <div class="thing"> <font face="franklin gothic demi"><a href="https://google.com"><h1 class="header">site logo</h1></a> <div id="link1"><a href="https://google.com"><p>news</p> <div id="link2"><a href="https://google.com"><p>art</p> <div id="link3"><a href="https://google.com"><p>comics</p> <div id="link4"><a href="https://google.com"><p>about</p> <div id="link5"><a href="https://google.com"><p>contact</p> </a></a></a></a></a></div></div></div></div></div></div> </body> </html>(p.s, if give me top banner, too, that'd awesome :3 )
try https://jsfiddle.net/2lzo9vfc/1/
html
<body background="http://i.imgur.com/6pq1mtl.png"> <center> <div id="bodycontainer"> </div> </center> <div class="thing"> <font face="franklin gothic demi"> <a class="header" href="">header</a> <ul class="navigation"> <li><a href="https://google.com">news</a></li> <li><a href="https://google.com">art</a></li> <li><a href="https://google.com">comics</a></li> <li><a href="https://google.com">about</a></li> <li><a href="https://google.com">contact</a></li> </ul> </div> </body> css
:-moz-selection { color: #ffffff; background: #00ffaa; } ::selection { color: #ffffff; background: #00ffaa; } a:link { text-decoration: none; color: #00ffaa; } a:visited { text-decoration: none; color: #00d486; } a:hover { text-decoration: none; color: #adffe2; } a:active { text-decoration: none; color: #00ffaa } .thing { background: #141414; position: fixed; z-index: 100; width: 100%; } a.header { color: #aaaaaa; float:left; display: inline-block; vertical-align: middle; font-size: 30px; margin-right: 15px; } .header:hover { color: #dbdbdb; transition: 0.3s ease-in; } #bodycontainer { position: relative; background-color: #191919; height: 200%; width: 65%; } .navigation { float: right; display: inline-block; vertical-align: middle; } .navigation li { display: inline-block; padding: 15px; } ul { margin-bottom: 0; } .navigation li { color: #00ffaa; } .navigation li a:hover { color: #adffe2; transition: 0.3s ease-in; } 
Comments
Post a Comment