I am using a jQuery fade in/fade out effect with divs, you can see the example here:
http://jsfiddle.net/EgDqy/13/
My problem is, when I bring them into my main page, whenever the browser is re-sized or made smaller they start to float away from the area where I need them to be and it messes up my layout and design. Should I wrap them in another div somehow or is there another method to keep them from shifting when the browser is re-sized? As always, thanks to anyone who can supply assistance on this. Greatly appreciated.
Don't use align="center" in html. Use css propery margin like this:
margin: 0px auto;
Then the block which has such property will be in center of outer block.
Related
Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?
Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?
You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window
The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.
body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)
I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.
I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}
I have a div inside of Fancybox that I want to overflow over the edge of the fancybox window.
The structure of the page looks like this:
<div class="fanybox">
<div class="overflow">
Test
</div>
</div>
I want .overflow to flow over the edge of the window. Trying to change the z-index of .overflow to something higher than 8030 (the default Fancybox value) does not work, and yes, the div is positioned absolutely.
Is there anyway to fix this? I can provide an image of what I'm trying to accomplish.
I haven't used fancybox, myself, but playing around with the chrome console on their demo page I think I got the effect you are looking for.
-Drop out the overflow:hidden; on #fancybox-content.
#fancybox-image (or whatever your container is){
.
.
.
position:relative;
right:50px;
z-index:9000;
}
That's all it took for what's on their demo page. Should absolutely be doable as long as your content's parent isn't positioned statically, and the overflow isn't hidden. I'd probably position it relatively (not absolutely) if I understand what you are trying for. Hope that helps.
EDIT
Alright, I downloaded and got a bare bones page up using fancybox2 from the link provided (because apparently I have too much time on my hands :-). Using all their default values, all I had to change was the jquery.fancybox.css
.fancybox-inner {
position:relative;
right:50px;
}
and the image floated outside the container div. If you are trying to move a separate div or something you added, principles are the same. But it DOES work... Goodluck.
If the overflow element is inside the fancybox, you won't need any z-index at all. Every non-static-positioned element generates its own stack, and relative-positioned content inside a fancybox will easily overflow its outer elements [Demo].
I'm using jQuery to expand a div while hovering it so it covers the entire width of the page. It contains a large table and I'm required to build for a low resolution but in reality everyone has a higher so this is an accepted workaround. My problem is that the div "jumps" down below the other divs instead of covering them as I would like it to. Anyone know how this can be achieved?
I've created a jsfiddle of it so you get the main idea: http://jsfiddle.net/MRNxt/1/
Hover the grey box and make it expand to the right covering the #asd2 in the sidebar instead of below it.
Check this fiddle: http://jsfiddle.net/MRNxt/4/
The solution involves adding absolute positioning to the log div when expanding and taking it out when collapsing. Also included is a small fix to avoid flickering while animating.
Add this css:
#asd2{
position:absolute;
z-index:-1;
}
#log{
background:white;
}
Example: http://jsfiddle.net/MRNxt/2/
Is there a reason that using something like lightbox/thickbox isn't suitable?
Alternatively, you will need to play around with absolute positioning and z-index. I'd advise figuring out your ideal layout before working on the animation. Put it together in CSSEdit/Firebug/whatever so that your boxes are exactly where you want them to be and then it will be simple to add to the animation script.
Or just use an off-the-shelf lightbox.
This won't be the perfect answer:
http://jsfiddle.net/MRNxt/7/
but here I used a subContainer to allow you to have a 100% width and some border.
I've got a design idea that I'm not exactly sure the best way to go about pulling it off in html and css. Basically I want to do what I've (crudely) drawn in this image:
My basically I want a div to appear some distance down from the top of the page that stretches from infinity, to within the bounds of the container to display some content. My code looks something like this
# html
<html>
<body>
<div id="container">
<div id="content">
Some text content
</div>
</div>
</body>
</html>
# css
div#container {
width: 1140px;
margin: 0 auto;
}
div#content {
width: 300px;
background: #000;
color: #fff;
float: left;
}
Where the div#content would be the one that has the background that stretches to infinity. Is this possible to pull off without resorting to altering the background of the tag? I want to use this on multiple pages within my site, all of which have different heights and distances down from the top, so I'd like to be able to do it without having to switch out the background images for the tags for these different pages. And the div#content will have variable content length, so using body background images isn't a very elegant solution. It would be nice to do it without resorting to some kind of absolute positioning as well.
Sorry for rambling, I hope what I am trying to do is clear. Any suggestions?
I whipped this up.
Just adds a div beneath the content area that matches up with the element you have in the header. It goes on infinitely in both directions. I hope this is what you were trying to achieve.
EDIT: As per your request in the comments, I threw this together. It uses jQuery to set the width of the underlying div and its top margin, which is found by getting the top offset of the fg div.
By "infinity," you mean that div#content appears to go forever to the left of the page and beyond? It can't really go for infinity, but you can certainly give the illusion of that.
Sigh.... I am a bit baffled. Maybe because it's midnight and I can't think straight, but I whipped this up:
Live preview (Feel free to fork this fiddle and play around with it to get it just right.)
Is this close to what you're looking for? I wonder if the most robust way to do this right might involve Javascript (jQuery, specifically). It would really help to know the height of that "content" div, and jQuery might help us with the sizing/positioning of it if the window changes its dimensions.