2 Replies - 5883 Views - Last Post: 16 October 2012 - 02:28 AM

#1 Slice  Icon User is offline

  • sudo pacman -S moneyz


Reputation: 253
  • View blog
  • Posts: 761
  • Joined: 24-November 08

center content inside a fixed element

Posted 15 October 2012 - 11:13 AM

So I'm making some improvements to my website asthetics and thought it would look better if the top navigation bar stuck to the top of the page instead of scrolling.

I made a div(topbar) and set the positions to fixed, left 0px top 0px and 100% width. This worked straight away except everything that was in that div (links and search bar), all aligned to the very left of the page, while the rest of the page is centered.

css:
body
	{
		width: 1000px;
		margin: 0 auto;
		background-color: #fff;
		background-image: url('../image/bg4.png');
		background-repeat: repeat-x;
		background-position: top;
	}

.topbar
	{
		width: 100%;
		height: 31px;
		position: fixed;
		left: 0px;
		top: 0px;
		background-image: url('../image/topbar_bg.png');
		background-repeat: repeat-x;
		z-index: 1000000;
		text-align: center;
	}


.container
	{
		height: 100%;
		position: relative;
		width: 1000px;
		margin-left: auto;
		z-index: 1;
		margin-top: 40px;
	}



html:
	<div class='topbar'>
		
			<div style='float: left; margin-left: 0px; text-align: right; width: auto; padding: 7px;'>
				<a href='#' class='link2'>activity</a>
			</div>
			<div style='float: left; margin-left: 10px; text-align: right; width: auto; padding: 7px; '>
				<a href='#' class='link2'>requests</a>
			</div>
			<div style='float: left; margin-left: 10px; text-align: right; width: auto; padding: 7px;'>
				<a href='#' class='link2'>messages</a>
			</div>
			<!-- EJRNAL LOGO -->
			<div class='ej_title'>
				<a href='index.php'><img src='image/ejrnaltitle4.png' alt="eJrnal | Social Blogging" /></a>
			</div>
			<!-- SEARCH BAR -->
			<div style='float: left; margin-left: 180px; width: auto; padding: 4px;'>
				<form method='POST' action='searchresults.php'>
					<input type='text' class='search_textbox' name='search' placeholder='search..' />
				</form>
			</div>		
			<!-- account / LOGOUT LINK -->
			<div style='float: left; margin-left: 3px; text-align: right; width: auto; padding: 7px;'>
				<a href='account.php' class='link_logout'>account</a>
			</div>
			<div style='float: left; margin-left: 3px; text-align: right; width: auto; padding: 7px;'>
				<a href='logout.php' class='link_logout'>logout</a>
			</div>
	
	</div>
<div class='container'>
<!-- rest of site -->



I tried making a child div setting it to 1000px width and giving it an auto margin which didn't work.

The only option i can think of is to manually margin the links but then it wouldn't look right on all resolutions..

Any ideas?

Thanks :)

Is This A Good Question/Topic? 0
  • +

Replies To: center content inside a fixed element

#2 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: center content inside a fixed element

Posted 15 October 2012 - 07:26 PM

Removing left: 0px brings it back to center.
Was This Post Helpful? 0
  • +
  • -

#3 Slice  Icon User is offline

  • sudo pacman -S moneyz


Reputation: 253
  • View blog
  • Posts: 761
  • Joined: 24-November 08

Re: center content inside a fixed element

Posted 16 October 2012 - 02:28 AM

Removing left 0 would move the "bar" itself over, meaning it would look like it starts at 1/4 page.

I solved the problem with what I'd already tried earlier but I must have done something wrong, because this time it worked.

.topbar
	{
		width: 100%;
		height: 31px;
		position: fixed;
		left: 0px;
		top: 0px;
		background-image: url('../image/topbar_bg.png');
		background-repeat: repeat-x;
		z-index: 1000000;
		text-align: center;
	}

.topbar_contents
	{
		position: relative;
		width: 1000px;
		margin: auto;
	}


Added topbar_contents to css, 1000px and auto margin.

then just made it a child div in the html:
<div class='topbar'>
	<div class='topbar_contents'>

           <!-- links and searchbar -->			

	</div>
</div>



Thanks for the suggestion
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1