Having trouble getting the black bar at the bottom of the slider to stretch full-width on the screen. It works on the left, but the right side is cut off at the container edge. Using Master Slider if that's relative info. Any tips on how I can get that black bar to stretch all the way across?
http://designatwork.net/51fifteen/
To fix the issue
Remove tranform property from the div having class ms-slide ms-sl-selected
Remove width property from the div having class ms-layer. As div is absolutely positioned, set left and right values to 0 to make it full width
Remove max-width and left from div with class ms-slide-layers also
Although I feel, structure is not proper, having relative positions within absolute creates problems. Still above fix can save you from re-write.
A few classes like ms-slide-layers, ms-inner-controls-cont and ms-layer have hardcoded values for left, width and, most limiting in this case, max-width.
I think this case would benefit from using the viewport width unit, vw by setting width: 100vw; you're telling it to be the width of the entire viewport.
Also, you don't need the padding and margin in 9999px. You can position: absolute the layer, have bottom: 0 and then use reasonable padding and align the text according to your needs to get a better, cleaner result.
First set a position (anything other than static) to its parent element. Then set the black bar's position to absolute. This way, it will be relative to its nearest parent element that contains a position. Next, stretch it out by either using height and width properties, or use directional positions (top, bottom, left, right). If youll use directional positions then use both left and right simultaneously and the black bar will expand across the screen.
Related
I want a div to be position: fixed; with a top: 125px; bottom: 125px;
The content of this div is dynamic, so the sum height of the children of this popup is not always taking up the entire div's height, meaning the parent is showing at the bottom of the children. What would be the way around this? Would I have to use margin instead of top and bottom?
You don't need bottom here, just set the top and let the height expand naturally to fit the children. If you don't want the parent to ever be less than a specific height then use min-height to set that.
Hard to say without seeing your complete layout, but maybe probably just omitting the bottom css would be enough.
If you don't specify a size restriction a div should, by default, dynamically grow and shrink to fit the contents of it's children. In this case you are forcing it to a certain size by setting an absolute position for both top and bottom, thereby creating a fixed height.
I have a div, .instagram_grid which has margin-left and margin-right set to auto, is relatively positioned, and has a width which for browse sizes 900px >makes the div be centered nicely in the page.
when I have the simple structure in the context of the rest of the CSS for a single page, the no longer becomes centered at browser width >1684px. In the Fiddle that follows I only have two lines that modify the div as a whole (and one just sets the background to pink). There are no media queries present, which suggests that it is the effect of some unseen preceding div/element causing the behavior.
https://jsfiddle.net/ebbnormal/m561tpnL/6/
The behaviour is what is expected with that markup.
The element is centered, but then you use relative positioning to show it 500px to the right of where it actually would be.
The .calc-text div above the .instagram_grid div causes its parent to overflow by setting margin-left:auto while simultaneously setting left: to a negative value, which isn't valid CSS.
I built a slider with 8 different pictures.
On each picture, I wrote a caption.
I'm trying to set this caption with the css code :
.tp-caption{right:5%}
My ".tp-caption" div is out of my screen.
I read that the 5% are relative to the parent element properties.
And in my case the parent element is my picture wich is larger than my window's width (picure is centered)
Do you know if I can specify 5% of my window screen ?
I tried with margin-right, float:right too ... but it's always the same problem
thank you for your help
The right property is applied to positioned elements only, as stated on the MDN docs
So, for right to be effective, your caption element would have to contain one of the position's values, like relative, absolute or fixed.
It's true, the right offset will be relative to the element's parent. if you want it to be relative to the window's viewport, you should use then the position: fixed on the element, that removes the element from the natural flow of the document, and makes it subject only to the viewport.
My html page has some text, a search bar, a results pane, a navigation bar, and several other elements which i want to stay in the same position relative to each other.
My thoughts were to make absolutely positioned divs inside a relatively positioned container div, and then give them all min/max pixel values.
If i gave them min/max pixel values they wouldnt change size/positioning when the window was resized, correct?
But if i did this then wouldnt they not fit on monitors with smaller screens?
Forgive any inaccuracies in my statements, im still in the learning process.
If you set the height and width to a percent, then set a min-height and min-width, the divs will flex to the size of the parent div (which is dependent on the size of the parent window). The problem with that solution is that with smaller screen size windows, the absolute positioning for the elements won't allow you them to nudge down if the content of an individual div needs to wrap. You might be able to position your internal divs using the default browser settings and adjusting the margin values, and use float: left or float: right to position elements that need to be adjacent.
I'm working on a new portfolio site which has a menu that looks like this: http://cl.ly/9rJ7
The Logo and three buttons are positioned absolute and have a fixed width (which will be changed by animation with javascript later).
The div to the right should therefore fit exactly into the gap between the third button and the browsers's right edge (as seen the screenshot).
I've already tried to give it a width of 100%, a position of left:700px and the parent div an overflow: hidden, but this doesn't seem like correct css to me, since the overflow doesn't work in some browser.
Any suggestions?
The Logo and three buttons are positioned absolute and have a fixed width .. The div to the right should therefore fit exactly into the gap between
the third button and the browsers's right edge .. I've already tried to give it a width of 100%, a position of left:700px
Try position:absolute; left:700px; right:0.
It's fine to set both the left and right properties.
If you float your left elements left, then add a div with margin-left: 700, it should fill the remaining space to the right.