jessmess Posted November 9, 2011 Share Posted November 9, 2011 I am trying to create a fixed header bar a la Facebook. http://www.disneymadesimple.com/test-page.html All I want to do is center the text and images (the Facebook icon and such) so that no matter the size of the window, the content is always in the center. I am also trying to make this work for the copyright info at the footer of the page if you happen to be able to tell me how to do that too. Thanks!! ~Jess styles.css Link to comment Share on other sites More sharing options...
Don E Posted November 9, 2011 Share Posted November 9, 2011 Sometime ago for learning/practicing reasons I tried to do the same thing and I came up with the code below. Basically what I did was wrap the header content inside a 'wrapper' and then figure out the total width(can be the hard part) of the content and then assign the width of the wrapper header to whatever the width is and then put margin-left: auto and margin-right: auto; Here's what I mean below, its pretty easy to see what I mean and hopefully you'll get the idea. Perhaps there's other ways in doing this that other forum users can suggest. <!doctype html><html><head><title>header position</title><style type="text/css">#header{background-color: lightblue;overflow: hidden;}#menuwrapper{background-color: pink;width: 257px;margin-left: auto;margin-right: auto;}#menuwrapper ul {margin: 0;padding: 0;}#menuwrapper ul li {float: left;list-style: none;}#menuwrapper ul li a{padding-right: 10px;padding-top: 10px;padding-bottom: 10px;display: inline-block;}#menuwrapper ul li a.noPadRight{padding-right: 0;} </style></head><body><div id="header"><div id="menuwrapper"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">About Us</a></li> <li><a class="noPadRight" href="#">Contact Us</a></li> </ul></div></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted November 9, 2011 Share Posted November 9, 2011 This method will centre whatever width of content, whether float or not html <div id="fixedheadercontainer"> <div id="center_outer"> <div id="center_inner"> <div class="headerfloatleft"> <h4> <a href="#">About</a> <a href="#">Directory</a> <a href="#">News</a> <a href="#">Search</a> </h4> </div> <div class="fixedheader"> <a onclick="window.open('http://www.disneymadesimple.com/cgi-bin/counter.pl?url=http%3A%2F%2Fwww%2Efacebook%2Ecom%2Fdisneymadesimple&referrer=http%3A%2F%2Fwww%2Edisneymadesimple%2Ecom%2Ftest-page%2Ehtml'); return false;" target="_blank" href="http://www.facebook.com/disneymadesimple"><img src="http://www.disneymadesimple.com/image-files/facebookiconh.png"></a> <a onclick="window.open('http://www.disneymadesimple.com/cgi-bin/counter.pl?url=http%3A%2F%2Ftwitter%2Ecom%2Fdisneysimple&referrer=http%3A%2F%2Fwww%2Edisneymadesimple%2Ecom%2Ftest-page%2Ehtml'); return false;" target="_blank" href="http://twitter.com/disneysimple"><img src="http://www.disneymadesimple.com/image-files/twittericonh.png"></a> <a onclick="window.open('http://www.disneymadesimple.com/cgi-bin/counter.pl?url=http%3A%2F%2Fwww%2Eflickr%2Ecom%2Fphotos%2Fdisneymadesimple%2F&referrer=http%3A%2F%2Fwww%2Edisneymadesimple%2Ecom%2Ftest-page%2Ehtml'); return false;" target="_blank" href="http://www.flickr.com/photos/disneymadesimple/"><img src="http://www.disneymadesimple.com/image-files/flickriconh.png"></a> <a onclick="window.open('http://www.disneymadesimple.com/cgi-bin/counter.pl?url=http%3A%2F%2Fblog%2Edisneymadesimple%2Ecom%2Ffeeds%2Fposts%2Fdefault&referrer=http%3A%2F%2Fwww%2Edisneymadesimple%2Ecom%2Ftest-page%2Ehtml'); return false;" target="_blank" href="http://blog.disneymadesimple.com/feeds/posts/default"><img src="http://www.disneymadesimple.com/image-files/rssiconh.png"></a> </div> <div class="headerfloatright"> <h4> <a href="#">Contact Us</a> </h4> </div> </div><!-- END center_inner --> </div><!-- END center_outer --></div> css #center_outer, #center_inner {position:relative;}#center_outer {left:50%; float:left;}#center_inner {right:50%;} Note: it is important for the parent in this case #fixedheadercontainer, to have text-algn: center; for this to work; Link to comment Share on other sites More sharing options...
jessmess Posted November 9, 2011 Author Share Posted November 9, 2011 I tried both of your suggestions…@dsonesuk, I feel like I'm so close to it working, but it's not. I check to make sure #fixedheadercontainer was text-align:center. Maybe I'm missing something. Do I need the "headerfloatleft" and "headerfloatright" Thanks guys, I appreciate it Link to comment Share on other sites More sharing options...
jessmess Posted November 9, 2011 Author Share Posted November 9, 2011 Okay, you're going to laugh at me, but it's okay lol I was looking at the wrong file in Safari when I was checking the code…I was looking at index.html while working on test-page.html. DUH. It worked perfectly, I must thank you once again!! ~Jess Link to comment Share on other sites More sharing options...
dsonesuk Posted November 9, 2011 Share Posted November 9, 2011 IGnore problem solved apparently. Link to comment Share on other sites More sharing options...
Don E Posted November 9, 2011 Share Posted November 9, 2011 dsonesuk, With what you described, is this the correct way of implementing what you suggested in the code I wrote above: <!doctype html><html><head><title>header position</title><style type="text/css">#header{background-color: lightblue;overflow: hidden;position: relative;text-align: center;}#menuwrapper{background-color: pink;width: 257px;margin-left: auto;margin-right: auto;left: 50%;}#menuwrapper ul {margin: 0;padding: 0;}#menuwrapper ul li {float: left;list-style: none;}#menuwrapper ul li a{padding-right: 10px;padding-top: 10px;padding-bottom: 10px;display: inline-block;}#menuwrapper ul li a.noPadRight{padding-right: 0;}</style></head><body><div id="header"><div id="menuwrapper"> <ul> <li><a href="http://www.google.com">Home</a></li> <li><a href="http://www.aol.com">Services</a></li> <li><a href="http://www.facebook.com">About Us</a></li> <li><a class="noPadRight" href="http://www.yahoo.com">Contact Us</a></li> </ul></div></div></body></html> This is something I always tried to finding a more simple solution and from the looks of it, what you suggested makes it all more simple. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 9, 2011 Share Posted November 9, 2011 You still have the width defined, and using margin: 0 auto; you have to adjust this every time you add or remove a menu item, using below you do not need to define a width at all, or use margins. #header{background-color: lightblue;overflow: hidden;position: relative;text-align: center;}#menuwrapper{/*background-color: pink;width: 257px;*//*margin-left: auto;margin-right: auto;*/float:left;position:relative;left: 50%;}#menuwrapper ul {margin: 0;padding: 0;position:relative;right: 50%;}#menuwrapper ul li {float: left;list-style: none;}#menuwrapper ul li a{padding-right: 10px;padding-top: 10px;padding-bottom: 10px;display: inline-block;}#menuwrapper ul li a.noPadRight{padding-right: 0;} Link to comment Share on other sites More sharing options...
Don E Posted November 9, 2011 Share Posted November 9, 2011 Thanks dsonesuk. I have a question though: For the ul, it is right: 50% and has a position of relative; would that mean it's relative to where it's original position is inside #menuwrapper? Because if so, from the looks of it, it's relative to the #header instead, by the way it gets positioned when adding right: 50% and position: relative. When elements that have a position of 'relative', is it suppose to move to where it's original position is relative to that? Thanks again. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 9, 2011 Share Posted November 9, 2011 1) The #menuwrapper position is 50% left, this will cause this containers left edge to start from dead centre of parent container #header, so it will show most of the menu on the right. we need to bring this back 50% of total menu width, to bring it to the centre. 2) To help determine the width we use float on the #menuwrapper which will force its bounday to surround its child elements. 3) Now that the width of #menuwrapper is the width of the total child element within this element, we tell it to move the ul/s 50% of #menuwrapper width from the right to left using right:50%; Bringing the menu now dead centre to parent element. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.