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/
Related
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 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;
}
I'm trying to have the three <div class="forward-link"> align to be all along the same baseline. I've tried float:left and display:inline-block, but nothing seems to work. Any ideas?
The site is made using php/Wordpress, but below is the rendered HTML and CSS.
Also, http://jsfiddle.net/mugUG/
Rendered HTML:
<div id="landing-content">
<div id="landing-brief">
<ul>
<li>
<h2>Growing Edge Blog</h2>
<p>“Embrace the messy imperfect genius. Seek to be misunderstood by creative minds.” ~Ross Martin One thing I have learned over the years as an entrepreneur is that when I am in my most creative space, I have to release being a perfectionist and jump into my creative messiness. I need to create space that allows [...]</p>
<div class="forward-link">
<p><span style="color:#b8bf33">Continue Reading</span></p>
</div><!-- end forward-link -->
</li>
<li>
<h2>Meet Mary Anne</h2>
<p>Mary Anne is the founder of Growing Edge Coaching™, a coaching and consulting company, where she helps individuals and companies develop powerful strategies to move forward in their life, their work, or their business. Her coaching is founded on her 20 years of experience as a manager and senior leader in non-profits.</p>
<div class="forward-link">
<p><span style="color:#b8bf33">More About Mary Anne</span></p>
</div><!-- end forward-link -->
</li>
<li>
<h2>Recent Tweets</h2>
<div id="twitter-feed">
<ul>
<li>
RT #LollyDaskal: regret is often the result of too many excuses. #leadfromwithin #leadership </li>
<li>
What you do in small doses becomes big doses in your life. </li>
<li>
RT #ThisIsSethsBlog: Seth's Blog: Two kinds of unique http://t.co/1TJ1Vuf9 </li>
</ul>
</div><!-- end twitter-feed -->
<div class="forward-link">
<p><span style="color:#b8bf33">Follow #Growing_Edge</span></p>
</div><!-- end forward-link -->
</li>
</ul>
</div><!-- end brief -->
<div id="landing-social">
<h1>Growing Edge Coaching™ works with individuals and companies to attain positive actions and powerful results in their work and life.</h1>
<div id="icons">
<ul>
<li><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/facebook.png" alt="Growing Edge Coaching Facebook" id="fb" /></li>
<li><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/twitter.png" alt="Growing Edge Coaching Twitter" id="tw" /></li>
<li><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/linkedin.png" alt="Growing Edge Coaching Linked In" id="li" /></li>
</ul>
</div><!-- end icons -->
</div><!-- end social -->
<div id="landing-contact-info">
<p><span>PHONE</span> 917.238-9726 | <span>E-MAIL</span> <span style="color:#333333">maflanagan#growingedgecoaching.com</span></p>
</div><!-- end contact-info -->
</div><!-- end landing-content -->
CSS
/* Landing Content */
#landing-content {
background: #f7f7f7;
clear: both;
margin-top: 40px;
}
#landing-brief {
width: 860px;
margin: 0 auto;
padding-top: 40px;
}
#landing-brief ul li {
display: inline-block;
height: 200px;
width: 250px;
position: relative;
vertical-align: top;
}
#landing-brief ul li:last-child {
padding-right: none;
}
#landing-brief #twitter-feed {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 75%;
line-height: 1.5;
color: #333333;
margin-left: -28px;
}
#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
}
#landing-brief .forward-link {
position: absolute;
padding-left: 0;
padding-bottom: 0;
padding-top: 10px;
}
So your LI elements are aligned horizontally yeah?
What you want to do is give all of your LI elements an equal height tall enough enough to accommodate the content in each LI.
Then make the LI elements position:relative
Then make the forward-link elements position:absolute, left:0, bottom:0
That should do the trick.
Give your all 3 div different id. 1st 2 div give float as left and third div float as right.
All 3 div put in main div with overflow hidden.
Fiddle
ul {
position: relative;
}
li {
position: static; /* The default if no position property is applied */
padding-bottom: 1.6em;
}
a {
position: absolute;
bottom: 0; /* Or, in the linked Fiddle, 1em to accommodate the padding
on the bottom of the UL tag. */
}
This only works in IE7+ (IE6 doesn't support absolutely positioned elements with only one edge (left, right, top, or bottom) property), and only when the elements are guaranteed to be side-by-side. When an element is absolutely positioned but no edge properties are specified, the browser attempts to put the element where it would be if it didn't have position: absolute;. Giving the element only one edge property (such as bottom: 1em; as in the example) causes the browser to move it from the "default" location to match that single edge property. So left and right can be left as automatically calculated if only top or bottom is specified. See also W3C Wiki: CSS absolute and fixed positioning.
Make the UL tag position: relative;, but the LI tags position: static; (the default value for position, not absolute… absolute elements have no layout, and will require a fixed height on the parent element). Give the LI tags enough padding on the bottom to make space for the content you want at the bottom. In the example above, the content is one line of text, which is about 1.2em for most fonts. I added a bit more padding for spacing in the example, and made it about 1.6em. Then make the A tags position: absolute; bottom: 0; and they will move to the bottom of the nearest positioned ancestor, or in this case the UL tag.
In CSS the overflow:hidden is set on parent containers in order to allow it to expand with the height of their floating children.
But it also has another interesting feature when combined with margin: auto...
If PREVIOUS sibling is a floating element, it will actually appear juxtapose to it. That is if the sibling is float:left then the container with float:none overflow:hidden will appear to the right of the sibling, no newline - just as if it was floating in the normal flow. If the previous sibling is float:right then the container will appear to the left of the sibling. Resizing this container will accurately show it centered inbetween the floating elements. Say if you have two previous siblings, one float:left the other float:right, the container will appear centered inbetween the two.
So here's the problem...
How do I maintain that type of layout WITHOUT masking children?
Googling all over the web gives me ways on how to clear:both and expand a container... but I can't find any alternative solution to maintaining the left/right previous-child centering. If you make the container overflow:visible then the container suddenly ignores the layout flow of the floating elements and appears layered ontop of the floating element.
So question:
I have to have the container overflow:hidden to preserve layout...
how can I make it so the children aren't masked? I need to have the child absolutely positioned relative to the parent outside the container.
OR
How do I overflow:visible so I can absolutely position a child relative to the parent outside the container... YET preserve the sibling float-like-layout-flow?
You can use the clearfix to do "layout preserving" the same way overflow: hidden does.
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */
add class="clearfix" class to the parent, and remove overflow: hidden;
This is an old question but encountered it myself.
I have semi-solutions that work situational for the former question("Children visible in overflow:hidden parent")
If the parent div does not need to be position:relative, simply set the children styles to visibility:visible.
If the parent div does need to be position:relative, the only way possible I found to show the children was position:fixed. This worked for me in my situation luckily enough but I would imagine it wouldn't work in others.
Here is a crappy example just post into a html file to view.
<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
<div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
<div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
</div>
</div>
Neither of the posted answers worked for me. Setting position: absolute for the child element did work however.
For others, if clearfix does not solve this for you, add margins to the non-floated sibling that is/are the same as the width(s) of the floated sibling(s).
just add a position: static to parent. (bootstrap dropdown example)
HTML
<div class="menu px-3">
<li class="dropdown tab"> <!-- this is one you should add position: static to -->
<a role="button" data-bs-toggle="dropdown" class="nav-link dropdown-toggle">
Click to show dropdown<span class="caret"></span>
</a>
<ul class="dropdown-menu show" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(122px, 130px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="#" class="dropdown-item text-16 gray-1 tab">
Link one
</a>
</li>
<li>
<a href="#" class="dropdown-item text-16 gray-1 tab ">
Link two
</a>
</li>
</ul>
</li>
</div>
CSS
div.menu {
overflow-y: hidden;
overflow-x: auto;
}
li.dropdown {
position: static;
}
Please return to this link for more info
For others if this does not work try giving height in vh in the component where you need the scrollbar.
.parent {
overflow: hidden;
}
.child {
overflow: overlay;
height: 100vh;
}