html - How to fix the alignment of my portfolio website? -
i'm new html , css , trying build first portfolio website.
i'm having few difficulties , wondering if lead me in right direction. want navigation bar stay fixed scroll down page, doesn't move. body items aren't aligning properly. can't seem image, table, , objective align properly.
what happen:
- the image far left of page, centered, , below navigation bar
- the table aligns right below image (wherever image is, table) p.s. table links social media accounts
- the objective right of page, next image lots of space between them
- the title above objective (wherever objective is, title)
- in conclusion: right of page should objective , title, , left of page should image , table
problems i'm having:
- title hidden behind navigation bar
- table, image, , objective won't align properly
any appreciated, thank you!
html
<!doctype html> <html> <head> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <title>full name</title> </head> <body> <div id="center"> <h1>name</h1> <img src="#"/a> <table> <tr> <td><a href="#"><img src="#"/></a></td> <td><a href="#"><img src="#"/></a></td> <td><a href="#"><img src="#"/></a></td> <td><a href="#"><img src="#"/></a></td> <td><a href="#"><img src="#"/></a></td> </tr> </table> <h4>objective<h4> </div> <div id="navigation"> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </div> <div id="footer"> <div id="bottom"> <p> © rights reserved full name<span class="em"></span></p></div> </div> </body> </html> css
body { padding: 0; margin: 0; max-width: 960px; font-family: verdana, geneva, sans-serif; } #navigation { position: fixed; top: 0; color: #ffffff; height: 50px; text-align: center; width: 100%; margin: 0; } #navigation li { font-size: 30px; padding-left: -20px; padding-right: -20px; color: white; text-decoration: none; font-family: georgia, serif, times; display: inline; float: left; } #navigation ul { width: 100%; list-style-type: none; margin: 0; padding: 0; } #navigation ul li { width: 20%; float: left; color: #00131c; } #navigation a:link, a:visited { color:#ffffff; background-color:#000000; text-align:center; padding:6px; text-decoration:none; display: block; } #navigation a:hover, a:active { background-color:#ffffff; color: #000000; } #circle{ border-radius: 100% 100% 100% 100%; width: 300px; height: 300px; position: center; } .center { font-family: verdana, geneva, sans-serif; text-align: center; top: 100px; float: center; margin-left: auto; margin-right: auto; } .center img { float: center; margin-right: auto; margin-left: auto; } .center p { text-align: left; position: relative; float: right; font-family: verdana, geneva, sans-serif; font-size: 30px; top: -100px; } .center p{ width: 50%; background: #ffffff; border: 5px solid #ffffff; border-radius: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px; margin: 0 auto; padding: 15px 10px 15px 10px; background: #ffffff; position: top; } .center table { background-color: #ffffff; margin-left: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; position: center; } table img { height: 40px; width: 40px; float: center; position: center: } #footer{ clear: both; position: relative; bottom: 0; height: 3 px; background-color: #ffffff; padding: 0; } #bottom p { color: black; font-size: 15px; padding-left: -20px; padding-right: -20px; padding-top: 17px; padding-bottom: 17px; text-decoration: none; font-family: georgia, serif, times; float: center; position: center; }
the following are somethings wrong code:
- your using
<div id="center">in html, css referencing classcenter float: center;,position: center;invalid css center objects. more info on how center objects see http://www.w3.org/style/examples/007/center.en.html
i think want http://jsfiddle.net/vaufa/
Comments
Post a Comment