I am looking to create a situation where some nav buttons are sticky to the edge of the browser windows, I am assuming some css and javascript, it has been a long time since I did any coding and I am wondering if someone could point me in the right direction.
http://www.flickr.com/photos/66009984#N00/6824355131/
Make the buttons position absolute or static depending on if you want them to scroll with the page or not.
.buttonLeft {
position: absolute;
left: 0
}
.buttonRight {
position: absolute;
right: 0
}
If you want them inside another div than that parent div needs to have it's position set relative.
.parentContainer { position: relative }
Related
Design question here. How can I make the #main-wrapper slide over the #single-carousel on the following page: http://duijnisveld.wpengine.com/
Right now it moves up when scrolling, I need the carousel to stay put and make the main wrapper slide over it when scrolling down.
giving .header-foto-wrapper position: fixed and #main-wrapper position: relative gives unexpected behaviour for me, I'm clearly missing something important.
*note, in the url, the .header-foto-wrapper does not have the position fixed as it breaks the layout and it's a live site for the client to see.
Thanks!
You'll need to apply width. Things go a little wonky when a container calculates width once you pull it out of the content flow. A width:100% will fill the page width. You'll also want to move the content area down and apply a background color.
.header-foto-wrapper {
position: fixed;
width: 100%;
}
#main-wrapper {
position: relative;
top: 100%;
background: #fff;
}
By setting the position as absolute.
.wrapper {
position: absolute;
left: 100px;
top: 150px;
}
http://www.w3schools.com/cssref/pr_class_position.asp
I have tooltips for certain elements that might get really large - so large that I can't position them on any side of the cursor without going outside of the page. Is there any way to prevent scrollbars from appearing in that case (besides setting body to overflow:hidden)?
I think it should be possible to make a fullscreen div to contain the tooltips, and set it to have overflow hidden, but I'm hoping there is a better solution.
Update: okay this was pretty simple. Just append the following div to body and place all tooltips inside it.
.tooltip-body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
pointer-events: none;
}
a client has asked if he can have the header area of his site static so it is always visible?
I am using the Eris template: http://hogash-demos.com/themeforest/?theme=eris_joomla
My site is: http://www.negotiumrecruitment.co.uk/dev
The top area with the logo, contact info and navigation plus the line below all wants to stay where it is and when scrolled, the whole site moves up and the top area always remains visible.
Thank you in advance.
Paul Walker
You can try:
#rt-header {
position: fixed;
top: 0;
width: 100%;
}
An element with a fixed position is positioned relative to the browser
window, and will not move even if the window is scrolled
Source: http://www.w3schools.com/css/css_positioning.asp
Edit: seeing the website you proveided, you will also need to change your #rt-logo CSS rule. It's currently 'absolute' and should be 'fixed' instead:
#rt-logo {
display: block;
position: fixed; /* Instead of 'absolute' */
left: 50%;
top: 0;
margin-left: -470px;
z-index: 9999;
}
This is because your logo stays outside your header in your template. Normally it would be inside the header and you wouldn't need this.
I am trying to make a simple html site:
http://www.williamcharlesriding.com/test/index3.html
The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:
.but1 {
opacity:0;
filter:alpha(opacity=0);
position:fixed;
top:463px;
left:36px;
}
However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated,
Thanks
Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.
.content {
padding: 10px 0;
background-color: #5a5958;
margin-left: auto;
margin-right: auto;
position: relative;
}
I would probably add another class to each, so you could do something like this:
<div class="but but1">
<div class="but but2">
.but { position: absolute; }
.but1 { top: 463px; left: 36px; }
Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.
I'm working on a concept of using an image that isn't a perfect square and using it at the top left and bottom right of the image, but I want to position it so it's 25px off the image slider.
What is the proper way to position this to look like the mock-up?
Positioning using position:relative; and top/left: -XXpx; I think this is best way but I could be wrong
Positioning using margin-left: -XXpx; etc Don't think this is right at all
Position using vertical-align I was unsuccessful at getting this to work
Here is a fiddle of it - Stripped Down
--
Yes, your first approach is the best: http://jsfiddle.net/zFa99/8/
You want to put position: relative on the container which holds the main image and the two corner images, and then position the corner-images absolutely.
#slider { position: relative; }
.tl-corner, .br-corner { position: absolute; }
.tl-corner { bottom: 0; right: 0; } /* this line is not ncessary as top:0 and left:0 are default */
.br-corner { bottom: 0; right: 0; }
There is no need to float the corner images.