I've seen this page here and I really like the breadcrumbs at the bottom.
How do I achieve this behavior ? The breadcrumbs at the bottom stays at the bottom and nomatter if you're scrolling down, it is still there.
http://developer.apple.com/iphone/library/navigation/index.html?section=Resource+Types&topic=Getting+Started
Please someone help me with some good code. Because I have no clue.
#breadcrumbs {
position: fixed;
bottom: 0px;
width: 100%;
/* Set your desired height
* and other factors like you would
* any other div.
*/
}
position: fixed fixes your element to an edge of the viewer, in this case, to the bottom. If you want to fix the element to the top, you would go top:0px, or left side 30px from the bottom, you'd go left:0px;bottom:30px. I use this a lot for my CMS admin pages (I put nav bars and logout at the top). It's a great tool, but bear in mind that the iPhone does not support native CSS :fixed, nor does older IE.
Did you look into using javascript or a jQuery plugin to make the breadcrumb for you? Then you can use dclowd9901's answer to position it
Related
I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
I have a blog that I'm having a slight styling (CSS) issue in Chrome only. For reference the blog is located here.
The issue is that (in Chrome only) when I scroll the content should go under the nav bar (but over the top of the big image), but it goes over. Again, this issue only exists in Chrome.
I'm not sure where to even start, but I'm hoping y'all will have a few tips for me. Thanks!
The issue was actually fairly simple and had to do with the positioning of the header elements.
I changed #header_area .page to position: absolute, and #header_area .Nav to position: fixed. I also gave #header_area .header a top margin of 70px and made that position: fixed as well.
For a school assignment I was required to redesign a website for a buisness.
I had only ever mucked around with css/html before and this is the first time I had written it for a full website.
The issue I am facing is the positioning of 3 divs is correct in google chrome, but in IE and firefox the divs are incorrectly positioned.
http://letsmine.info/mnpctech/index.html they are the twitter, facebook and checkout symbols on the right of the menu bar.
As this is the first time I have written CSS and HTML I presume this is a silly mistake and I am hoping that you can guide me into the right direction.
Also on the store page I need to layout the products with a picture and name like they are here http://www.mnpctech.com/MnpctechBilletFanGrill.html . Should I create a table and just put the images and title in there? just looking for some advice.
You need to add the following properties to #checkout, #facebook and #twitter:
display: inline-block;
float: right;
and remove the following properties from each one:
position: relative;
left: 980px;
top: -49px;
The page should then display properly in all browsers.
Make sure that you use floats and know your way around the "display" property well for positioning, I always try to stay away from relative positioning as it's a bit unreliable.
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.
I saw similar posts in this forum but there were no replies.
I have a grey colored band (a DIV) on which I have links for site navigation. At present, it is displayed at the end of the page, when you just scroll down to the end. I want it to remain visible like the Windows status bar and at the same position like the status bar.
Even if the user scrolls the site, this band must remain at that position.
The CSS style position: fixed; is what you're looking for. Additionally set bottom: 0px; and width, height and left to whatever values you want.
position: fixed in the CSS will do it, although this isn't supported in IE 6 if that's important to you. If it is, have a look at http://ryanfait.com/sticky-footer/ for something similar cross-browser or use a script like IE7.js to add fixed positioning to IE 6.