mpoer Posted March 3, 2006 Share Posted March 3, 2006 wife's web site, we went looking through wordpress themes for layout/design ideas. she liked this one:http://managedtasks.com/wpthemes/blog/inde...me=Retrospotiveit's looks good, and the code is something I've never seen before. basically, it moves the image back and forth when you hit the a:hover.here's the code (whole page, w/ in-page CSS) <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta name="author" content="Matthew and Paula Poer"/><title>Paula Poer's Homepage</title><style type="text/css">/* Top Menu *//* we found this on a WordPress theme called Retrospoctive, check it out at [url="http://managedtasks.com/wpthemes/blog/index.php?wptheme=Retrospotive"]http://managedtasks.com/wpthemes/blog/inde...me=Retrospotive[/url] we tweaked it a bit for these colors, but it is some really creative coding. Try it yourself, if you want */#topmenu { background: #28B5C6; left: 0; position: absolute; padding: 20px 0; top: 0; width: 100%;}#botmenu { background: #28B5C6; left: 0; position: absolute; padding: 20px 0; bottom: 0; width: 100%;}#topmenu ul, #botmenu ul { font-size: 1em; line-height:76px; font-family:"Century Gothic", "Trebuchet MS", sans-serif; letter-spacing: 1px; list-style-type: none; width: 100%;}#topmenu ul li, #botmenu ul li { float: left; height: 76px; margin: 0 10px 0 0; overflow: hidden; text-align: center; width: 76px;}#topmenu ul li a, #botmenu ul li a { background: url(menu-circle.gif) 0 0 no-repeat; display: block; color: #000; height: 100%; text-decoration:none;}#topmenu ul li a:hover, #botmenu ul li a:hover { background: url(menu-circle.gif) -78px 0 no-repeat; border: 0; color: #fff;}#mid { margin:auto;}</style></head><body> <div id="topmenu"> <ul> <li><a href="#">Home</a></li> <li><a href="/blog">Blog</a></li> <li><a href="http://www.myspace.com/emokidathearto_0">MySpace</a></li> <li><a href="#">Gallery</a></li> </ul> </div> <div id="mid"> <img src="" alt="" /> </div> <div id="botmenu"> <ul> <li><a href="http://postsecret.blogspot.com">PostSecret</a></li> <li><a href="#">Ran6</a></li> <li><a href="#">Ran7</a></li> <li><a href="#">Ran8</a></li> </ul> </div></body></html> what we want is to have the whole thing centered: the top and bottom circle menus, as well as the random image that will be going into the #mid. this is difficult with absolute positioning, and i'm not good with positioning so I don't know what I might change it to.here's the current version:http://thinktank.ichyware.net:81/~paula/index.html Link to comment Share on other sites More sharing options...
Aphotic Posted March 3, 2006 Share Posted March 3, 2006 I would say use a centering method using containers, one for the top and one for the bottom. Do you want the style to be similar to the current one? Centering the whole page would make it easier, but it's up to you. There are ways of using fixed units, but that has better results with a fixed sized template, usually centered. But before I confuse you (or myself, for that matter) with babbling, I think the best answer is with the two containers. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now