I'm using MaterializeCSS to style a website I am creating.
In order for me to get the navbar items to be towards the bottom of the navbar, I applied a top margin to those items (#normal-nav). As an unintended side effect, the picture below the navbar gets clipped for some reason. If I remove the margin that I applied to the li, then all is well. Not sure what I'm doing wrong.
Here is the issue replicated in JSFiddle. In order for you to see the issue I'm having, you'll need to make the window rather large--I have it setup so those items only appear on desktop-sized displays.
Instead of the top-margin try :
#normal-nav {
top: 64px;
position: relative;
}
It's because you've pushed the #normal-nav down beyond its parent. This is exacerbated by the fact that it's a floated element, thus it doesn't increase the size of its container.
See: An article about clearfix
Solutions:
Decreasing the the margin-top you're giving
Use a clearfix if you're intent on keeping the float.
Use another method other than float to push that nav to the right e.g. flexbox (probably the most scalable option).
Related
EDIT: Whoops I forgot to have the console open to clear the cache when working on my actual project. Previous solutions and the ones you suggested work just fine. Thanks guys
So I'm trying to have something slide out while something else inline stays stationary. However, the sliding pushes other elements below downwards.
Here is the basic HTML:
<div id="title-container">
<h1 class="inline-header">Example.</h1>
<h1 id="sliding-text" class="inline-header">slide</h1>
</div>
<button id="slideButton">SLIDE</button>
I tried other solutions I found through searching, but they don't seem to work. For ex, giving the outside container a fixed height with overflow hidden, will prevent the slide from pushing outside elements down, but pushes the left (static) text upwards as the right side goes down. Here is a JSFiddle showing what happens in my orig code.
https://jsfiddle.net/9hj6y79k/11/
Essentially I just want the right side to slide out without moving anything else.
I would like the position to stay as relative (rather than switching it all to absolute positioning), but if switching to absolute is the best way to do it I would not be opposed. Could anybody help out? Thanks!
You will need to add overflow:hidden; in css
https://jsfiddle.net/9hj6y79k/12/
.inline-header {
display: inline-block;overflow:hidden;
}
#title-container {
position: relative;
left: 40%;
}
Change your css class to this:
.inline-header {
display: inline-block;
vertical-align: top;
}
https://jsfiddle.net/9hj6y79k/13/
I'm using the "Priority Navigation" design pattern. For those who aren't quite sure what this is, basically when the viewport width is reduced and there isn't enough space for all the list-items to fix horizontally, they're moved into another nested list so they can still be accessed. This is within a "more" link at the end of the list.
At a basic level, this works fine in my example (below):
http://codepen.io/moy/pen/RrRJBe
The problems I'm having are:
1) Because I have another item alongside the navigation, which is floated (and of unknown width), I needed to set overflow:hidden; on the nav. This means when the width of the container changes, the nav stays alongside the other content rather than dropping onto the next line. It's fixes that ...the problem is it also means the dropdown on the end isn't visible as it's displayed below the navigation and overflow: hidden; is set.
Any alternative (CSS) fixes for this?
2) Another issue is the nav links need to be positioned to the right. No problem, just float the div right, yeah? Unfortunately it doesn't like this and the page almost crashes - must be something to do with the script trying to calculate the widths? As soon as the nav or it's parent is floated, it breaks!
The list-items are floated left so they display horizontally. Instead I tried using display: inline-block and text-align: right;. This positions the text correctly but when there's not enough horizontal space the items either wrap or all collapse into the "more" link rather than one-by-one.
-
Browser requirements: It's worth noting that my browser support is IE8+, so flexbox is unfortunately out the window. Even if it worked, it would mean that I'd have to find a fix for IE8/9.
Is anyone able to help with this, or maybe there's a plug-in I should take a look at. This script works great when the nav is isolated but as soon as another item is in it's path it becomes a bit tricky. On a previous attempt I got the width of the item which was in the way and subtracted it for the available space. But that isn't that flexible/scalable - but that again, maybe there isn't another way?
Thanks, hope someone can help!
Part 1
You can use clearfix instead of overflow: hidden.
Add the following to the parent element containing nav:
.wrap:before, .wrap:after {
content: '';
display: table;
clear: both;
}
But if you need to support IE8, you can just add element like below to the bottom of the parent element containing nav
html
<div class="clear"></div>
.clear {
clear: both;
}
I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.
How do I make a div top to be the bottom of other div like this:
I selected with firebug the div that I need the top to be always the bottom of
<div class="menu-banner">
What CSS would do the trick, or I need to use jQuery for this?
The target div and teh menu-banner div are both direct child of body. And that target is not child of menu-banner.
position: absolute is breaking it for you. Your requested alignment is default for position: relative.
You certainly don't need jQuery for this, you can solve this purely in CSS. The uppermost banner, the navigation bar and the image should all be relative to a parent container (it can just be the body element or you can have a container div).
I know this is not exactly what you are asking, but you might consider using a framework such as bootstrap or foundation in order to help you with common layouts like the one you seem to be using.
I can't understand you correctly, you may want to put a child box in the bottom of its parent, if so:
You can consider position: relative to the parent box and position: absolute and bottom: 0 to the child.
Check this JSFiddle
I solved this problem by simply adding a padding-top with value 15%
Please correct me if I am wrong, but display: block; turns any element that has that CSS declaration into a block element, correct? That means that the specified element with the display: block; declaration will span it's entire width available, right?
I ask this because I currently have a navigation that houses a drop down menu with nested unordered list items, that are supposed to inherit the width of the width of the parent list item.
link removed
Notice once hovered over Teams, you see the 18U and 17U link list items are not stretching their appropriate width. I can only assume that this same issue is applying to all of the list link items.
BUT: Once you go here: link removed and notice there are more than two links, the issue is no longer a problem. It takes up the full width.
Also, once the page has loaded and you hover over one of the list items for the first time, the navigation menu is kicked to the right a little bit.
The problem is persistent in Google Chrome.
May someone help me out here?
Thank you.
You have your li's width being set with
width: 100%
Which will only work if the elements parent (the ul) has a width set. Set...
width: 100%
... on the ul too, and it works fine.