In this page http://qelma.mediadrive.fr/jedonnemonavis.php I am trying to position the div written "pourquoi" above the div with blue border. For some reason the blue div seems to be always on top. Any idea ?
Thanks guys.
Adding position: relative and background: #fff to #page2 .textbox > div.label seems to be what you are looking for.
Related
I am using flexSlider in a full width mode
for a site that I'm building.see here:
http://clients.tipoos.com/glam/
notice that the site hasthis full width section for the slider but all other content
is centered using a consistent class called: .main
What I'm trying to accomplish seems pretty easy but I can't make it work:
I would like to keep the slider full width but center the arrows like so:
I tried writing small Jquery to wrap the arrows with div but it didn't work.
neither wrap nor wrapAll was working..
will appreciate any help
Thanks
Found a solution. hope it will help anyone here.
in order to center the arrows but still having a full width slider
I used the follwing CSS:
.flexslider .flex-direction-nav {
margin: 0 auto !important;
max-width: 980px;
position: relative;
}
Explanation:
margin: 0 auto !important;
this centers the arrows container
max-width: 980px;
giving a fixed width to depending on your website width
position: relative;
this makes the magic. it allows the arrows to be positioned inside the main div
I also added negative top position to my arrows but that's only in my case
hope that helps anyone.
I am currently creating a responsive website. I noticed there is an issue with empty space on the right as you scrolling horizontally. I can remove the horizontal scroll by adding overflow-x: hidden. But it will not work on mobile devices such as iPhone and iPad.
So, I tried to add min-width because it will help to get rid of empty space. But I can't put min-width on full.css (e.g. min-width:1000px;) because it will set to full-width - see example below:
full.css
#wrapper {
width: 1000px;
margin: 0 auto;
}
responsive.css (less than 1000px)
#wrapper {
width: 100%;
margin: 0;
}
I was wondering if you know how to fix this issue? Let me know if you have a better option for it. Or should I create a new wrapper id?
Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
You Can hide the horizontal overflow using css code (and then the horizontal scroll bar will never show up again):
body{
overflow-x:hidden;
}
Link to the page? Chances are there is some kind of element inside the wrapper that is breaking past the browser window.
Often times it is with padding and widths. Keep in mind if you have an element inside the wrapper that is set to say 100% width and you add padding on the left and right of 20px. It will create a horizontal scrollbar because the element is 100% + 40 px.
So if you are building liquid elements inside a div you would do it like this:
#liquidelement {
width:96%;
padding:0 2%;
}
You need to subtract the padding from the widths, also always use percentages for the padding when doing layouts because it's fluid, not fixed.
Often times it's a matter of a single element which can cause the page to get the horizontal scrollbar. That can be a pain, but you can easily find out the offending element by this simple css trick
* {border:1px solid red}
You can also add the following properties if the element is hidden.
opacity: 1 ; visibility: visible;
Demo :https://codepen.io/i_abhi/pen/eYzpBjr
2020
If any of you using Boostrap and came across this question then here's the answer.
for Bootstrap Users
Wrap your .row with .container or .container-fluid and it will solve the issue.
Referring to your issue, the code appears to be correct. However, some elements inside might also affect the exact width and overflow your boundary. Might check all inside elements as well. You can use Firebug or Chrome Inspect Element.
No more than three steps are required here:
Scroll the horizontal bar to the right where you can see the extra empty padding.
Open an Inspect Element
This is done by holding ctrl + shift then pressing i
Scroll over all your elements, the element with the extra padding should protrude your pages content into that empty space created.
You can Use
#wrapper {
max-width:100%
width:100vw;
}
it work fine with me.
this is an old question and I know you found your answer
but I say this because I didn't see this anywhere else. maybe this help someone else.
if you use min-height in your CSS code, this causes a horizontal or maybe vertical useless scroll bar.
just delete it if it isn't important
I am applying a border radius on a select element that has a background color.
Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box.
I can't figure out what css property I must use to solve this issue.
background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;
Here is the jsfiddle: http://jsfiddle.net/JsgnR/
thanks for your help
My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.
you see that on the options , try to style them via css, you are not able and they look ugly
You can wrap <select> element in <span></span> and add the required properties to css for
This solution: http://jsfiddle.net/JsgnR/5/
I'm trying to position a div inside a div.
the outer div has a fixed width and heigt, the inner div contains some text, has a fixed height and automatically fits to the width of the outer div (default behavior, without "width: 100%").
When I now add position:relative to the outer div and position:absolute + bottom: 0 to the inner div, I just want the inner div to move to the bottom of the outer div, but keep the same width it had before. This works fine in most browsers (Internet Explorer 8+, Firefox, Opera), but in IE7 it reduces the width to fit the text inside the inner div.
Is there a clean and valid way to prevent this different behaviour in IE7?
You can see an example here: http://www.loud.fm/tmp (I'm talking about the black box at the inner bottom of the featured-slider-box.) Thank you in advance! :)
Since your already using absolute positioning to lock it to the bottom why not add
left: 0;
right: 0;
to your CSS as well.
When you perform position: absolute, you are breaking some of the relationship. In the example you mention, you'll notice that div of the black box belongs to an li element in which the li element has a static width set (of 590px). You could dynamically set the width of the inner div to that of the outer by using javascript on load to handle all situations. Otherwise, set a static width size that matches that of the parent.
I had a pretty similar issue with Div's being changed in width by IE7. A simple style tag solved it for me:
min-width: 100%;
After hours of trial and error, this was all it took. Hope it helps!
I have a box-shadow on my #primaryNav div. Unfortunately, the shadow is being covered/hidden by the background of the following #page element.
I tried to set a z-index of 100 to #primaryNav and a z-index of -100 to #page, but that does not fix my problem.
Any ideas what I'm doing wrong?
You need to define positioning for #primaryNav. Z-index only affects positioned elements.
I just added this in firebug and it fixed:
#primaryNav {
position: relative;
}
I would avoid using a negative z-index. Simply change z-index of #page to 0.
As jlego already said a relative position should fix it.
By the way I would suggest ensuring that there is no shadow left or right of the #primaryNav. Since #primaryNav has a width of 100% a shadow on the side makes a horizontal scrollbar appear.
For fixing this you could set a overflow:hidden to #iframe
I took a look at your site and I think the border-bottom property of #primaryNav is covering up your shadow.