html - Why are headers/pictures being placed beneath instead of beside? -
this sure noobish html question, because new @ stuff.
anyways lets it:
1st, check fiddle:
http://jsfiddle.net/d6767uur/ <!doctype html> <html> <head> <link type="text/css" href="frontpage.css" rel="stylesheet"> </head> <body> <div class="navbar"> <div class="greyline"> </div> <a href="smoothies_page.html" style="text-decoration: none"><div class="menu"> smoothies </div> </a> <div class="greyline"> </div> <a href="milkshakes_page.html"style="text-decoration: none"><div class="menu"> milkshakes </div></a> <div class="greyline"> </div> <a href="juicyfacts_page.html"style="text-decoration: none"><div class="menu"> juicy facts </div></a> <div class="greyline"> </div> <a href="aboutus_page.html"style="text-decoration: none"><div class="menu"> </div></a> <div class="greyline"> </div> <div class="stuffwithsmall"> © rights reserved.. </div> </div> <div class="frontwrapper"> <h1> hello </h1> <div style="margin-left: 750px; margin-top: -435px;"> <img src="frontfruit.jpg"> </div> </div> </body> </html> css:
@font-face { font-family: sourcesanspro-regular; src: url('sourcesanspro-regular.otf'); } body { margin: 0px; padding: 0px; } .navbar { width: 205px; height: 667px; background-color: #55ae3a; //hover = 398a20 } .greyline { width: 205px; height: 1px; background-color: darkgrey; } .menu { font-family: 'sourcesanspro-regular'; color: white; font-size: 25px; opacity: 0.64; height: 40px; text-decoration: none; } .menu:hover { background-color: #398a20; } .stuffwithsmall { color: #75715e; font-family: helvetica; margin-top: 320px; } question: why header going down below main menu, , how change it, goes right of menu?
your navbar div goes down far because .stuffwithsmall class inside , has huge margin-top. can fix moving lower, after closing tag of navbar div.
in css, change:
.navbar { height: auto; width: 100%; }
Comments
Post a Comment