I've been trying to compose this facebook-like top bar (or header, I don't know) with some CSS. I think it is pretty easy, and well, the first results indeed were.
I've set the bar with a fixed position, with its top and left properties set to 0. Its padding is set to 4px and it works great; Just as I wanted it.
But the question now is... what about the content? I could simply wrap it inside a <div> and relatively position it a few ems to its bottom. But then, wouldn't it hide the content's bottom in case of it surpassing the browser's max height? And also, that could cause some size incompatibilities with certain browsers (I hate IE).
I'm sorry if this has already been asked here, I could not find such question. And to be more clear, I do not want any kinda "dinamically-updating" headers -- at least not yet. And I think I can do that with some HTML5.
The main question here is: what is the best way of doing such header? Is the position: fixed the real way to go? And, if so, how is the best way of displaying the content?
TIA, André
position:fixed will do.
Simple add margin to the top of your content. (same as the height of your header.)
So, when you're at the top of the page, your header will cover the margin. When you scroll down, it will behave as expected. And the browser will not hide the bottom part.
Related
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
I have designed a simple website. The only thing left is to make a small box on the left. But I want to be always visible even when I scroll down. It's use will be something like a small ad. ![floating box][1]
Can you post an example or two? what css is needed for this? (if it's needed)
unfortunately I can't post any images because of I am a new user (I am not allowed to.. and this kinda frustrating)
But I will post an image as soon as possible.
You should apply position: fixed to this box.
Fixed Positioning
An element with fixed position is positioned relative to the browser
window.
It will not move even if the window is scrolled.
Here's a sample: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp
Here's a jsFiddle that I baked for your that shows how you can get this working: http://jsfiddle.net/leniel/8ub7s/2/
You can see that even when you scroll, the title is still visible and if you hover it, the ad box will show. Just adapt the CSS to your needs as you want it floated to the left. :)
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
Is there a way to have a div extend to the bottom of the page no matter what the zoom is? I have tried to use fixed positioning and absolute positioning and I can't get the sidebar to extend just to the end of the viewable area?
Here is a screenshot of what I have so far. The scroll bar on the side only applies to the column on the right. I want that to extend to the bottom of the viewable area along with the map. This is on minimum zoom.
http://flic.kr/p/a5mEU7
I have made a jsfiddle version of your page at here.
I believe this is the solution you were after, be warned it may not work 100% in all browsers but it gives you a starting point.
-UPDATE-
The previous jsfiddle URL I gave was incorrect, just changed it to the correct one (got the original one wrong, sorry)
I have a layout of fixed-pixel width (960px) with a navigation bar that has five items in it. The width of the nav div is set to 100%, but its content ends up taking exactly 960px. The navigation is a bit complicated with a set of drop-downs and links. The problem is that zooming the page out at all causes the navigation bar to get clipped and move on to the next line.
Anyone have tips for how to avoid this?
Thanks a lot.
The only sure way I've found to do it is by defining all padding and widths using 'em'. This means everything will be relative to the font size and expand/contract smoothly as you change font sizes in the browser.
Here's a simple template I put together years ago that does the trick.
Since most browsers now zoom instead of only change font size, it's not as much of a concern, but older ones like IE6 still need a little help.