div keeps overflowing no matter what (details inside) - html

Take a look at this page and click on the arrows to activate the carousel: http://bethhaim.spin-demo.com/browse/divisions/i
As you can see, the ul overflows over the div with the black background, I need to fix this.
I've created a class called .stop_overflowing_plz and inside of that I've put a ul which is part of the carousel you see. The purpose of that new class is to stop the ul from overflowing all the way over the black div, but isn't working as intended.
Anyone know what I could do in order to keep the ul inside of .stop_overflowing_plz and stop it from overflowing like it currently is doing?

You appear to have the following CSS applied to the ul:
.le_carousel .overview {
list-style: none;
position: absolute;
padding: 0;
margin: 0;
left: 0 top: 0;
}
You need to change position to relative otherwise it will always position itself relative to the page and not the surrounding div.

You need to add position: relative to your stop_overflowing_plz div.
As you're setting position: absolute on your ul, you need to make your div the containing block.

Related

Dropdown menu either moves content or does not let me centre it

I guess it's kinda easy, but I've been stuck here for 3 hours already.
My dropdown menu moves whole content when used. I searched for similar questions on StackOverflow, for questions related to dropdown menus and got the following answer that partly helped:
.menu > ol {
position:absolute;
z-index:100;
}
I've added the snippet above to the original code. It worked out somehow - it doesn't move other content but now I can't centre it horizontally.
Using margin:0 auto; also did not help.
Could you please help me out? I've either placed position + zindex in wrong place, or I'm missing something.
Codepen:
https://codepen.io/graphconcept/pen/MdwQBM
Remove the position: absolute from .menu > ol and add it to .menu. Also add width: 100% to .menu. If you want your menu to be visible regardless of scrolling make the position fixed instead and add top: 0.
.menu {
margin: 15px;
position: fixed;
width: 100%;
top: 0;
}
.menu > ol {
list-style: none;
margin: 0;
padding: 0;
z-index:100;
}
Explanation:
Block elements with position: static (the default value for position) have a default width of 100%; Setting the position to absolute or fixed changes their width to auto; i.e. they shrink to fit their content's width. Your menu list is being horizontally centred within the menu element. This meant that when the menu element was 100% the width of the page, horizontally centring the menu list would also centre it with respect to the page. However when the menu element shrank to fit its width, the menu list couldn't be centred any more than it already was. The width of the menu element needed to be explicitly set to 100% to allow the centring to have a visible effect.

Fix <ul><li> menu from pushing <div> below

Another developer has made a menu in a nav tag that is like this:
_layout page
<div>#Html.Partial("_menu")</div>
then in the _menu.cshtl page:
<div>#Html.RenderMenu("mainMenu")</div>
In the C# code a bunch of ul and li nested elements are generated, which looks fine at first on the page.
But when you hover over one of the elements the nested elements drop down and the div right below that gets pushed down the page. It's ugly. How do I fix this? Is there some CSS magic I can do to make it overwrite the div below rather than pushing it down?
Just add position with a property value of absolute and a higher z-index to the element that shows on hover. You can control the position with Top, Bottom, Left and Right properties values.
Example:
ul {
position: absolute;
left: 0; /* Adjust as needed */
right: 0; /* Adjust as needed */
}
Note: Make sure that the element that contains the element that shows on hover has a position property value of relative to help contain the Ul(in this case). Otherwise, it will overlap.
Hard to see without the code, but you can apply absolute positioning to overlapping element.( I have no clue which one is that as you didn't provide any code). So:
position: absolute
You have to make the position of the ul element relative.
ul{
position: relative;
}

Placing image above div pushes content in other places

I'm trying to place an image above the top bar of a div on my website on the left side of where the navigation bar is. My Attempt
It should look Like this
And I would like it to look Like this
I've tried multiple things such as placing the div for the image in different spots in the code, and changing css elements for the div, but everything seems to push the other content images out of place on the website
add this ...
.photo {
position: relative;
top: 4px;
}
and change the margin on #container to...
#container {
margin-top: -1px;
}
Your css isn't in very good shape, but, using your methods here's how to do it:
remove the margin-top from #container
add vertical-align: top to the img inside #photo
change the top in #extraDiv1 to 246px
change the top in .horizontal to 218px
I guess that should do it.

using css -top value to move a div position

Hi I am not sure if this is the right way to do it but I am trying to position a div tag back
over the previous div element
This is what I have working
my css that I have used to get this to work looks like
.page-frame {
background-color: #fff;
padding-top: 40px;
position: relative;
top: -35px;
}
so for the top part the div element looks the way I want it to however the bottom on the element hasn't adjusted for the -35px;
I have tried adding a clear div after the element however that doesnt help. What do I need to change to remove the space between my .page-frame div and the next div?
The use of position: relative only shifts the appearance of the element in the page, but not the actual "space" it takes up on the page. So what you have done made your visual change to show the element 35px higher, but it does not cause other elements to reflow around it. Probably, what you need to add is a margin-bottom: -35px to get the final effect you want.
EDIT: Added better fiddle example to show reflow with margin.
Use position: absolute; instead of relative

Dropdown menu on a multiline list

I have an example of my problem set up here.
I have had to set some li's to display: inline, so that they can occur on the same line, but now I need to add drop-down lists to them, and the drop down lists are happening on the other side of the page from where I would like them to. Do I have to position my original li's in a different manner?
Keep in mind that if you want to use the :hover class in anything other than an anchor tag, forget getting it to work in IE6 and make sure you have the correct DOCTYPE for the other browsers.
Try replacing the relevant parts of your CSS with this:
li
{
display: inline;
}
ul.level_1 li
{
position: relative;
}
ul.level_1 ul
{
position: absolute;
visibility: hidden;
}
li:hover ul
{
position: absolute;
right: 0;
visibility: visible;
width: 300px;
}
Basically hides the sub-level list until you hover over the parent list item node.
Setting the parent list item nodes as position:relative means that if you set any child nodes within as position:absolute it will be set relative not to the browser window but to the parent list item. This will have them show up directly underneath the list item you're hovering over and not on the other side of the window.
The width was added to have the sub-level list display as a line instead of a column.
I'm not sure if you're trying to move the top menu to the left, or the submenus to the right, so I'll propose a solution either way.
If you want the main menu items to appear on the left, then you need to remove or change the text-align: right in your body css.
If you want the submenus to appear on the right side, then because your <ul>s are absolutely positioned, you should change this rule:
li:hover ul
{
left: auto;
}
to this:
li:hover ul
{
right: 0;
}