I am trying to get a series of <a> tags appear at the base of their parent <li>.
The problem is two fold. If I use position: relative, bottom: 0; has no effect. If I use position: absolute, the <li>'s have overlapping widths.
I can fix the first problem by using the top style, but this is not ideal as the text size is unknown, and the top element measure from the top of both elements (so the base of the element would not hit the base unless I knew the font size).
I can fix the second with defined widths, but this will add unwanted white space on elements with shorter titles.
Here is a JSFiddle of the issue.
Try this bit of CSS:
#main-menu li a{
display: table-cell;
position: relative;
vertical-align: bottom;
height: 111px;
}
jsFiddle of the working style
Add a line-height value to your "#main-menu li a" style and position accordingly, 200px should work.
Related
I have been trying to edit my dropdown menu so that the sub-items are centered beneath the parent items. I finally achieved the centering only to find that every time I hovered over a parent item to reveal the drop down menu, the rest of the menu fell to the bottom of the dropdown menu.
Here is the link to the sample, it has all the coding on one side. Thank you in advance for your help! I am just starting out with CSS and HTML and no matter how many videos and tutorials I watch and read, I just can't seem to get it right :(
https://www.w3schools.com/code/tryit.asp?filename=FEEMWLIFAMAO
Try to add vertical-align: top; to your .dropdown css like so:
CSS
.dropdown {
vertical-align: top;
}
Also on a separate note I would remove the width on .dropdown-content and instead put the width on .dropdown to make sure they are both the same width and no wacky horizontal position changes on hover. Another solution is to make the dropdowns position: absolute; and position them relative to the links. But off-topic :)
You could set the dropdown-content's position to absolute. To center the dropdowns, you have to position them relative to the parent's width. This would look something like this in your .dropdown:hover .dropdown-content {:
display: block;
position: absolute;
left: calc((100% - 150px)/2);
width: 150px;
text-align: center;
To explain the positioning a little further:
100% refers to your parent's width. Take the difference of this and the 150px you specified as the width of your dropdown-content. Since you want your box centered below the menu button, this difference has to be divided between the left and right side, hence you have a padding of (100% - 150px) / 2 on each side.
Both the parent element and the child element you are trying to position relatively to said parent have the position: relative property applied to their styling, which is inappropriate for the result you seem to be trying to achieve.
Have a read on the css position property and its values.
Explanation: your child element is being displayed as a block, which by definition occupies a horizontal space on its own, while being positioned relative to its parent element, therefore pushing the rest of the latter adjacent navigation elements under said parent element.
Solution: The navigation effect you seem to be trying to achieve is generally done by positioning the subnavigation absolutely, relative to the navigation element that makes it appear on hover: its parent. This way said subnavigation does not affect the positioning of the elements where it is hierarchically placed inside the html code.
CSS:
.dropdown:hover .dropdown-content {
position: absolute;
display: block;
width: 150px;
text-align: center;
//To position the element:
top: 100%;
left: 50%;
transform: translateX(-50%);
}
I have a main wrapper div with a content div and a button. The button is supposed to go underneath the content div but for some reason it's overlapping with it.
The content div has css:
#groupMembers {
position: absolute;
height: 50%;
width: 90%;
left: 5%;
overflow: scroll;
display: inline-block;
}
and the button has:
button {
display: inline-block;
width: 70%;
left: 15%;
}
I thought since they're both inline-block that they wouldn't overlap, but for some reason they are. I made a JsFiddle to show: http://jsfiddle.net/b5hp6boz/
Can anybody help me get the button to display beneath the content div?
Remove the (extensive) use of absolute positioning.... Change it to position: relative; if necessary. But on many elements even that is not necessary.
Move the button div up to under the <h4>add members</h4> in the HTML where you appear to want it.
Then adjust margins for #DIV_05 and the button.
Fiddle Update or Fiddle Update 2
(Note I merely performed a search to change absolute to relative in your CSS, then adjusted from there.)
By using absolute positioning so extensively you were forcing elements into unnatural positions. Then when it wasn't working out.. you are left wondering why. Let things fall where they naturally want to fall. Change the HTML for overall render order, don't force things with absolute positioning.
Use of absolute position is most commonly used to adjust z-index and make elements not alter positioning of other elements. (like a global float of sorts) It should not be the fall back for positioning everything in any layout.
The problem in your code is that you have given the #DIV_5 the following CSS:
position: absolute;
By giving a HTML element an absolute position it is removed from the normal rendering process by not obtaining any space in the document. That means it is not affecting the position of the following BUTTON_105 element. That's why the button is positioned right underneath the H4_4 element (which is the first element not having an absolute position).
To fix that simply remove the position: absolute; declaration for #DIV_5. (Btw: You should try not to make heavy use of absolute positioning as it can cause further issues.)
Try giving your div tag a higher z-index value.
How do I solve this using css.
When I expand the contents in menu menu expand like second picture. This is my css
.contents {
/*margin-left: 165px;*/
/*margin-top: 60px;*/
position: absolute;
top: 120px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: scroll;
}
and this is my html with contents.
<div class="contents" id="subContents">
</div>
I tried with position 'relative' but it doesn't works for me.
By using z-index there's a problem like this.
http://jsfiddle.net/ssaranga/o7sh1j0f/
One way of doing it is to add the z-index property to your toggle menu class and assign the highest value to it, according to how many stacked elements you have.
z-index specifies the stack order of an element. Different browsers have different max-min values.
The advantage of using a number larger than the actual stacked elements is that you don't have to go back and change the z-index value when you want to add more elements.
Note that z-index only works on positioned elements.
For example, you could do something like:
.toggle-menu{
position:relative
z-index: 999;
}
The positioning is not your problem, it's the fact that your menu div is shown in the background.
You have html elements stacked on top of each other, and will have to work with the CSS z-index propert to adjust the element on the z-axis.
I'm new to CSS and I have a question.
First, my HTML and CSS code:
<!-- HTML CODE -->
<body>
<div id="container">Container
</div>
<div id="inner">Inner</div>
</body>
<!-- CSS CODE -->
#container {
background-color:#b6ff00;
width:500px;
height:500px;
position:relative;
}
#inner {
background-color:#ffd800;
}
With current code, the browser shows the following page:
This is expected.
But if I add this css property to #inner element position:absolute; there will be a following output:
As you can see, the #inner div, takes only that much space it needs. Why this changed with only position:absolute; property added to #inner div?
That's because when you use position: absolute; the element will take up width upto the elements defined/content it contains., cuz it just gets out of the document flow so it is block level in nature but won't take up entire horizontal space on the document, as it's just out of the flow of the document..
If you want it to be full width you need to define width: 100%; explicitly so that it will take 100% of the relative parent's width as well as the height if you declare height: 100%;
Also, make sure you always use position: absolute; with a wrapper element set to position: relative; or your element will fly out in the wild which will eventually end up taking the viewport as the last relative wrapper if you set the position of the element using top, right, bottom or left.
I've explained here in detail, that how CSS Positioning Works
Worth to note that, you make any element a position: absolute; element, it will behave as a block level element, but you need to define height and width so for example, if you turn an inline span element a position: absolute; you can define height and width without making it display: block; (Unless and until you are using display: none; initially)
position: absolute; does not behave the same as block elements.
You will need to set a width and a height for a div that is absolutely positioned.
This is fundamentally how position absolute works. Once taken out of the flow of the document it becomes an inline-block element that is absolutely positioned within the nearest element that is positioned relatively (or the top most element)
If you need it to then be a certain dimensions you can try to set widths and heights, or you can do things like
#inner {
position: absolute;
left: 0;
right: 0;
}
...which would ensure it always stuck to the left and right sides of the screen.
It's generally good practice to put things that are positioned absolutely inside of an element with "position:relative" on it, as your code stands it suggests you want your #inner element to be placed anywhere on the page, whereas if you wanted it to be of a size and position relative to #container your code should look like this:
<body>
<div id="container">
Container
<div id="inner">Inner</div>
</div>
</body>
with CSS such as:
#container {
position: relative;
}
#inner {
background-color:#ffd800; width:500px;
height:500px;
position:relative;
}
You can see your output here:-
http://jsfiddle.net/KggJd/
Let me explain a little:
Postition: relative
This will align itself in accordance with the elements found before (i.e) Prior Siblings.
You can change the position by using margin-top, margin-left, ....
Position: absolute
This will always consider from the browser's start point and won't be in accordance with anything.
Drawbacks:
You cannot consider this as the parent or anything when absolutely positioned.
You can change its position by using top, bottom, right, left.
Given a solitary <li /> I need to increase it's size. Font-size works only in firefox, IE just shows it as same size.
Can I change the LI size another way, or set it's image? Please note (and I know this is bad) there is no UL element, it is invalid markup as it is part of an older system which the design means the UL can't be added in easily.
<li> elements are inline elements so they will get the inner elements' width. You can set display property to "inline-block" and set a width. I guess it will solve your problem.
<li> is an inline element, you can use display: inline-block; to have it accept width, height, background, positioning and other rules, while maintaining its inline flow.
Also you could try using <span> with an image of a dot positioned to the left of the text instead of invalid markup.
.liSpan
{
display: inline-block;
background-image: images/dot.png;
background.position: left;
padding-left: 25px;
}
Or something similar :)
Try adjusting the line-height, or it's padding to increase the height.
.liSpan
{
line-height: 2em;
padding: 1em 0;
}