• Locked
1 reply [Last post]
Tue, 2011-12-13 16:38
chris_s
chris_s's picture
Offline
Last seen: 1 year 26 weeks ago
newbie
USA
Timezone: GMT-5
Joined: 2011-12-13
Posts: 1
Points: 2

Hi everyone, first post here. I am still trying to get my skills together with CSS. I currently have a background image that spans across the top of the page. As you can see, there is an extended box that will contain 2 links with background button images. I have create a couple DIVs to hold the links, and I am trying to position them over that extended box. But as you can guess, with the relative positioning, when I reduce the size of the browser, the links don't stay within the extended box on the background image spanning the top of the page. I believe my approach is wrong, and I am hoping someone can give me the correct workaround. Here is the HTML and CSS I have so far, along with images of my current positioning problems. 

// Add top apply and client login
function add_top_nav() {
	echo '<div id="top-nav-container">';
	echo '<div id="apply-top"><a href="#">Apply Now</a></div>';
	echo '<span id="dot"></span>';
	echo '<div id="client-login"><a href="#">Client Login</a></div>';
	echo '</div>';
}
add_action('thematic_aboveheader', 'add_top_nav');

#top-bg {
	background: url(images/top-bg.png) no-repeat center top;
	bottom: 2px;
	float: left;
	height: 58px;
	position: relative;
	width: 100%;
}
 
#top-nav-container {
	bottom: 50px;
	position: relative;
	left: 950px;
	width: 200px;
}
 
#apply-top {
	float: left;
}

screen1.jpg
screen2.jpg
result.jpg

Top
Tags:
Wed, 2011-12-14 03:43
#1
NCreature
NCreature's picture
Offline
Last seen: 1 year 14 weeks ago
Regular
Timezone: GMT-5
Joined: 2011-12-13
Posts: 15
Points: 21

Creating a two button top navigation

Slice that background behind the buttons and place it inside a container and then place your buttons in there like so...

place this on a text file and save it as test.html and view it in your browser...I hope this helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>CSSCreator</title>
		<style type="text/css">
		.bg {
		position:absolute;
		top:0;
		left:0;
		height:20px;
		width:100%;
		background-color:#555;
		}
		.yourcontainer{
		background-color:#555;
		position:absolute;
		right:100px;
		display:table;
		height:55px;
		text-align:center;
		white-space:nowrap;
		}
		.yourbuttons{
		display:inline-block;
		background-color:#0000FF;
		vertical-align:center;
		height:25px;
		margin:0 8px;
		}
		.yourbuttons a{
		text-decoration:none;
		display:block;
		height:25px;
		padding-left:8px;
		padding-right:8px;
		color:#FFF;
		}
		.separatordot{
		display:inline-block;
		vertical-align:center;
		}
		.separatordot p{
		color:#FFF;
		font-weight:bold;
		}
		</style>
	</head>
	<body>
		<div class="bg"></div>
			<div class="yourcontainer">
			<div class="yourbuttons"><a href="#">Apply Now</a></div>
			<div class="separatordot"><p>.</p></div>
			<div class="yourbuttons"><a href="#">Client Login</a></div>
		</div>
	</body>
</html>

That pixel looks weird.

Top
  • Locked