Jump to content

Center This


mpoer
 Share

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...