I am trying to position a Bootstrap close button within a dropdown element (also Bootstrap).
<div id="contextmenu" class="dropdown clearfix" style="position: absolute;">
<ul class="dropdown-menu" style="display: block;">
<li>Text <button type="button" class="close">×</button></li>
</ul>
</div>
That thing floats right, but appears mispositioned in Firefox (first screenshot). Chrome renders it as intended (second screenshot).
Is there any way to make Firefox render it correctly (i.e. as Chrome does)?
Hard to know without more context regarding your CSS, but one solution might be to check that the position the of the 'x' is positioned absolutely relative to your containing <li>.
CSS
.dropdown-menu li {
..
position: relative;
}
.dropdown-menu li .close {
position: absolute;
right: 0;
}
Related
I'm trying to implement a slide show like menu with CSS. It's working fine except for transition. If transition is used the elements are not in sync anymore. Whole menu losing width if multiple elements are hovered in short time. Everything works fine if transition is removed.
Is there anything I have to be aware of when using CSS transitions and hover together? I thought a transition-timing-function: linear; would be enough to get width in sync. It seems like the transition is started early on the fading out element than fading in element.
Some technical notes about implementation:
It's a ul list. Menu items are represented as li. Selected menu item has a selected. This one is shown if there isn't any user interaction. The other ones are collapsed. If an element is hovered it's opened and all other ones are collapsed. There should be a transition effect when changing from collapsed to shown.
ul {
list-style: none;
display: inline-block;
padding: 0;
/*
* remove gaps between inline elements
* https://css-tricks.com/fighting-the-space-between-inline-block-elements/
*/
font-size: 0;
}
ul li {
display: inline-block;
overflow: hidden;
/*
* Transition
*/
transition: width 0.5s;
transition-timing-function: linear;
width: 50px;
}
ul li:hover,
ul li.selected,
ul:hover li.selected:hover {
width: 564px;
}
ul:hover li.selected {
width: 50px;
}
<ul>
<li>
<a href="http://www.3ker-ras-group.com/profil.html">
<img src="http://www.3ker-ras-group.com/images/m_profil.jpg" alt="Unser Profil">
</a>
</li>
<li class="selected">
<a href="http://www.3ker-ras-group.com/referenzen.html">
<img src="http://www.3ker-ras-group.com/images/m_referenzen_der_3ker_ras_group.jpg" alt="Referenzen der 3KER RAS GROUP">
</a>
</li>
<li>
<a href="http://www.3ker-ras-group.com/jobs.html">
<img src="http://www.3ker-ras-group.com/images/m_hoehenarbeiter_jobs.jpg" alt="Jobs für Höhenarbeiter">
</a>
</li>
<li>
<a href="http://www.3ker-ras-group.com/shop-kletterbedarf.html">
<img src="http://www.3ker-ras-group.com/images/m_kletterbedarf_shop.jpg" alt="Unser Shop für Kletterbedarf">
</a>
</li>
<li>
<a href="http://www.3ker-ras-group.com/kontakt.html">
<img src="http://www.3ker-ras-group.com/images/m_kontakt_zum_unternehmen.jpg" alt="Kontakt aufnehmen">
</a>
</li>
</ul>
Trigger the issue by moving cursor fast from left to right. It occurs at least in Firefox and Chrome. Didn't tested safari, IE and edge.
Here is a JSFiddle: https://jsfiddle.net/vj12qswz/3/
All elements should fit in one line. Adjust preview window width if necessary.
Works fine if you use javascript to add a specific class on hover.
Probably best to add "onclick" event as well because hover not gonna work on touch devices.
From the examples that I have seen this can be achieved by using
right: 0px;
top: 0px;
Or some variation of this. However when I do this, my div stays tight left of the screen. I need to start going into -1000px area to make it appear at the top right, which doesn't seem right.
Here is my HTML, and it is the div with the class "mysettings-menu" I am trying to place at the top right of the screen.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
</ul>
<div class="mysettings-menu">
<ul>
<li>
Settings
<ul class="sub_menu">
<li>Log In</li>
<li>Add New Application</li>
</ul>
</li>
</ul>
</div>
</div>
As you can see I am using some default bootstrap classes, but even putting my div outside of these divs doesn't make a difference as it remains as close to the left side of the screen as it can get.
.mysettings-menu { position: relative; right: 0}
To put it on the top right,:
.mysettings-menu{
position: absolute;
right: 0px;
top:0px;
}
ie. Change the position to absolute.
First of all,
position: relative
means relative to the current position of the element. Combined with
right: 0
it certainly doesn't affect the positioning of your div.
What you want is
.settings-menu { position: absolute; right: 0; top: 0; } or .settings-menu { float: right; }
though both are different in some ways and similar in some other.
If you are using Bootstrap, then you can add the class pull-left. That basicalley add the propertie float: left !important to your div to make it float left (you can use it to the right too)
The majority of the position property is relative to the parent container.
If you want the div to be position to the top right of the its parent container you need to specify the position as absolute:
.mysettings-menu { position: absolute; top:0; right: 0; }
Alternate values for the position property are:
static (default)
relative
fixed
fixed is the only position property that does not position relative to its parent container, but positions relative to the window.
For example:
.mysettings-menu { position: fixed; top:0; right: 0; }
would set the div to be displayed in the very top right of the window regardless of where you scrolled to - it would always be visible.
jsfiddle demo
html
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="display:inline-block">
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
</ul>
<div class="mysettings-menu">
<ul>
<li>
Settings
<ul class="sub_menu">
<li>Log In</li>
<li>Add New Application</li>
</ul>
</li>
</ul>
</div>
</div>
css
.navbar-collapse{
border:1px solid red
}
.mysettings-menu{
border:1px solid blue;
display:inline-block;
position:absolute;
right: 10px;
What about this:
http://jsfiddle.net/lharby/zs15e48q/
CSS:
.nav {
float:left;
}
.mysettings-menu {
float:right;
}
As others have mentioned you could also use absolute positioning, but it depends if you want to change the flow of the document.
EDIT
As one answer points out (Yerko Palma) if you are using bootstrap you can add pull-left and pull-right classes to your elements, this is actually a better solution than writing new css for the existing elements.
Updated fiddle:
http://jsfiddle.net/lharby/zs15e48q/1/
I am able to get my dropdown navigation to stay at the top using absolute positioning, but it squishes the left side and everything at the top goes behind the navigation.
How can I get my navigation to stop overlapping everything else with the position:absolute property? My nav elements are in my CSS, so an invisible <div> won't work.
The following is the HTML in my header.php document:
<center><nav>
<ul>
<li>Home</li>
<li>Arcade
<ul>
<li>Action</li>
<li>Arcade</li>
<li>Puzzle</li>
<li>Vehicle</li>
<li>Violence</li>
<li>Defense</li>
<li>RPG</li>
</ul>
</li>
<li>Watch
<ul>
<li>TV Shows</li>
<li>Movies</li>
</ul>
</li>
<li>Extras
<ul>
<li>Reviews</li>
<li>Updates</li>
</ul>
</li>
<li>Support</li>
</ul>
</nav></center>
The following is the CSS I am using for the background color and positioning before the position is added:
nav{
background-color:#989898;
margin: 0px -12.5%;
}
Now the CSS after I add positioning:
nav{
background-color:#989898;
margin: 0px -12.5%;
position:absolute;
z-index:1000;
}
My website is www.gameshank.com/!
Any ideas? Thanks!
When using position:absolute it removes the element from the document flow. The best way to prevent position:absolute elements from overlapping other elements is to use the margin properties to your advantage.
Try adding this to your CSS (differences noted with asterisks so don't add that to the code):
nav {
background-color: #989898;
margin-left: -10%; /**** Remove other margin: 0 -12.5%; */
margin-top: -100px; /*****/
width: 100%; /****/
position: absolute;
z-index: 100;
}
#logo { /**** This is all new. You can change to a different name if you need to.*/
margin-top:100px;
}
Add this to your HTML <center> tag which immediately follows the <center> tag holding the <nav>.
<center id="logo"> ... </center>
On a different note, you should consider doing a significant rewrite of all that code. That site is using depreciated tags such as <center> and <font> for styles that CSS can handle better along side HTML5 elements such as <nav>.
I'm bad with CSS, and I'm trying to get the ui-icon on the same line as the text in a LI.
<ul>
<li class="ui-state-default">
<span>Hello</span>
<span class="ui-icon ui-icon-close"></span>
</li>
</ul>
Normally text doesn't do that within a li, so I think it's something with the ui-icon css, but I couldn't find what was causing it.
Further to my question comment above, I've found this in my jQuery-ui CSS, assuming that's what you're using:
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
Changing (or overriding) the display: block using display: inline-block should allow the icon to appear on the same line
Here is my code:
<ul style="list-style: none; position: relative;">
<li style="float: left;"><span style="position: relative; left: 5px; ">one</span></li>
<li style="float: left;"><span>two</span></li>
<li style="float: left;"><span>three</span></li>
</ul>
All li elements contain a span, but the first one is the only different one, which is relatively positioned.
All browsers are fine with this, but only IE6\7 causing the first span to disappear - and this is my problem.
If you must require the position relatives, change float to inline-block. The float is a factor in this as well.
http://jsfiddle.net/zRYqh/5/