I am new to css and I have a menu bar that I am working on however I am having a problem with one of the menu ("LINKS") items. If you roll over the Links menu item your notice I have three boxes there that I am trying to separate into there own area. Right now they are over lapping each other. Could you please tell me what I am doing wrong?
I have tried margin-left and padding-left and I find that they either move the box further to the right or widen the box more. But they don't space them out.
You can find the menu bar here: http://jsfiddle.net/vtjPR/
The three boxes (div.col_1) have a set width of 125px. However, within the boxes are the link lists (ul.blackbox) with a defined width of 150px. Also, its list items have a defined width of 130px.
Related
I have a mat-dialog which contains a mat-stepper. Inside this stepper, I have a step which contains a form. In this form I have multiple elements (list, mat-card and table) which I want to always fill the height of the dialog. Basically, I want the height of the table and also the height of the list on the left side of the table to adjust to the dialog height. The mat-card, which is shown when selecting an item in the list, should always be at the bottom left of the dialog and the list above it should either show all elements (if possible) or display a scroll bar if there is not enough space left to show all elements. The table should also either show all elements if there is enough space or display a scroll bar if there isn't enough space. I do not want any of the elements in this dialog to cause an overflow which would require me to scroll in the actual dialog.
A colleague attempted to solve this by using max-height: calc(90vh - <x>px) before but this really does not work very well at all. How can I do this properly?
Here is a stackblitz which shows the problem:
Stackblitz
Hopefully, my question is clear. If not, please let me know and I will try my best to explain it in more detail.
Your problem is quite simple, the content of the dialog does not fit the height of your dialog.
Every child of the dialog mat-dialog-content, mat-stepper etc, should be maximizing their height (either with height:100% or flex:1 in a flex container).
Here is a quick example of this.
I'm relatively new to Wordpress/Elementor world so I have to search for help.
I need to align the navigation menu that need to have the first letter of the first menu item sticked to the left border of the container and the last letter of the last menu item sticked to the right border of the container.
I need to do that in order to align the navigation menu to the image that is present below it.
In this moment what I have achive using margin is this, but with larger screen the aligment is not mantained anymore.
I tried with the align the first element to the left and the right elemento to the right using justify-content for these elements but this brings to have too much space between the first item and the second one, and the second-last and the last one, as you can see here:
Due to my low experience with css I'm stucked, and I don't know if I have to use another kind of container layout or something else.
Thank you in avdance for any help and I'll be happy to share some other information if needed.
With flex you can use justify-content: space-between to distribute items as you asked.
here you can find a very good guide to flexbox
I got an issue position a div element within a page. My problem is that I have a navigation bar with a hierarchical 3-level menu. When I open some of the 3rd level menus the element containing the items goes below the page height. I'd like to keep this element in the page area, maybe moving the top position, so the user can keep use it without scrolling (that is also problematic).
You could see an example here: http://www.frankydev.com/mitoweb/
Many thanks.
I see it even happens on large screens.
Limit the height of the 3rd menu div with max-height, say 300px and then add overflow-y:scroll;. This will add an up-down scroll bar to the 3rd menu element and it looks relatively nice.
Or change all your font size and spacing to allow more room.
I am trying to do something that should be simple but is apparently not so. I just want to make a simple single line navigation bar using a list tag. Thats fine, I can do it. The problem is making it wrap gracefully and still keep the same layout when it needs to appear over multiple rows due to not enough horizontal browser space.
As I say, I'm using a list tag and I have the ride side border of each LI item with a visible vertical line to make the divider appear. The final item I am not shwoing that with a last-child pseudo class. Its important that the far left and right buttons DON'T have vertical borders. This is clear in the top image.
The UL tag itself also has a top/bottom border line visible and in the first demo in the image you can see this clearly.
So now what happens when the menu bar wraps... well there there are 2 key problems...
1) The main issue is that when the menu wraps I can't think of a way to make the new MIDDLE horizontal line appear [shown in red in the 2nd image]
2) Multiple list items now don't need a right side border value. In the example 2 list items don't need a right side border. This could grow to 3 though for some screen displays.
Does anyone have any ideas for resolving this?
Note that I am trying to make the menu wrap naturally, not at fixed pixel break points as its so unreliable for something like this with different pixel density screens and font zooms in certain browsers.
Currently I am working on a maintenance of website and I'm stuck with an problem, the problem is like that: I have to redesign the menu bar of the website. Previously in the menu bar there are 6 menus but now there are only 5 menus in it. I have to delete one menu item from the bar. I simply deleted that row from the list items of the menu bars. In the previous designed they used the display property of css to create the blocks but after deleting the one menu the space for one menu item is left, while i like to increse the width of the menu bar.
Without seeing the code, it is hard to say.
However, in your stylesheet you can adjust the width for the list items as such
.menu li{width:35px;}
To figure out how much to adjust, take the width of the last element and divide by 5 (the number of the remaining list elements).
So, if your width was 50px, add 10px to the element style so that each of the remaining elements covers the width of your previous list-item.
Maybe a brute way to this but it actually works great:
Use table instead of list. I use this with some padding offset because spaces between cells are linear based on cell content size and padding gives you constant minimal space between menu elements.
Another way is to use block elements and CSS display:table and table-cell but remember IE7 does not know these ones.
Benefits: no Javascript
If the menu item <li> has a fixed width, then the total width of the menu divided by 5 gives the width of the each menu item. check in the css for the tag "li" or the class specified for li. then change the width of that to the new width