I've been using this demo to create a sidebar menu.
I wanted to add a button at the bottom of the sidemenu; but the problem is that as the list is expanded the button does not move with the scrollbar. i.e it overlaps
The html part
<div class="logout">
<li>
<a>
<i class="glyphicon glyphicon-off"></i> LOGOUT
</a>
</li>
</div>
The css part
.nav-side-menu .logout{
position: absolute;
bottom: 0;
width: 300px;
}
On the assumption it is a responsive menu and you don't know the height of the user's screen and want it to fill the height entirely, this is how I would change your snippet:
https://bootsnipp.com/user/snippets/Ez3RD
This worked for me on the link you provided. Just place the div OUTSIDE of the last UL tag.
HTML
<div class="bottom-icon">
<button style="height:30px; width:100px; background-color:#2888ff; color:#fff;">Hello World</button>
</div>
CSS
.bottom-icon {
text-align:center;
padding-top:30px;
}
You just need to add div tag below the last li tag. and It works successfully there no overlap.
Related
I’m having trouble getting one div not to lie on top of another div. I have the following
<div id="navbar">
<div id="leftNavSection"></div>
<div id="rightNavSection">Logged in as Dave <a rel="nofollow" data-method="delete" href="/logout">Log Out</a></div>
</div>
with the accompanying CSS …
#rightNavSection {
float: right;
}
However, when I add this div underneath, it lines up on the same vertical plane as the nav div.
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
</div>
Here is the JSFiddle that illustrates the problem — https://jsfiddle.net/z4rw9qj1/ . If I add a fixed height to the nav div (e.g. “height: 10px;”), then the overlay doesn’t happen, but I don’t want to add a fixed height because if someone adjusts their browser font size, or I add other elements, then the look is broken. Is there a way I can get the lower div not to trample the upper div?
That's because of float: right and you can fix that if you add overflow: hidden on header DEMO
header {
overflow: hidden;
}
Have you tried the z-index property ? It is a property that decides what order are the elements aligned in the "front-back" axis.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I have a page that looks like this:
The Active "SORT BY..." button and the inactive button next to it, I needed to not scroll when I scrolled through the list below it. To accomplish this I have the two side by side button drops down codded like this:
<!-- Start Drop Down Menu -->
<div class="row" style="height: 300px; width: 100%; position: fixed; top: 74px; background: transparent; z-index:2; overflow: hidden;">
<div class="col s6">
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1' style="width: 100%;">Sort By...</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>Brewery</li>
<li>Rating</li>
<li>Style</li>
</ul>
</div>
<div class="col s6">
<!-- Dropdown Trigger -->
<a class='dropdown-button btn disabled' href='#' data-activates='dropdown2' style="width: 100%;"></a>
<!-- Dropdown Structure -->
<ul id='none' class='dropdown-content'>
<li>All</li>
<li>Brewery</li>
<li>Rating</li>
<li>Style</li>
</ul>
</div>
</div>
As you can see in the Style part of the above code:
style="height: 300px; width: 100%; position: fixed; top: 74px; background: transparent; z-index:2; overflow: hidden;"
I position it and place it fixed so it will not move when I scroll the list below. You may be looking at it and wounder why I have the height 300px when the buttons are not that big...Its because when you click the button it opens a drop down. If I have the height the same height as the button then I can see most of the drop down that open....I thought this fixed my issues but this leads to my current issue. Since the button technically drops down 300px it overlaps the first two entries in the list which makes them not clickable.... causeI am clicking on the transparent css that is covering them up.
For the list, I am adding that into this div with this style:
<div style="height: 35px; position: relative; top:60px; z-index:1;">
<div id="replace"> </div>
</div>
In short, how can I have the drop down buttons pin to their location and still be viewable when opened and at the same time still be able to click on all my entries in my list?
You should not need to set the height of your .row div to 300px. Instead, remove the overflow:hidden style, which is causing your dropdowns to get cut off.
Also, you should be breaking your CSS out into a separate file, to separate style from content.
Finally, I would add that the background should not be transparent - try it, you'll see text scrolling behind the buttons.
.row {
background: #fff;
height: 35px;
width: 100%;
position: fixed;
z-index: 10;
}
Hey I have a problem with social buttons. I am trying to move them but only one show up on my page and I can't move that. I have three buttons and them images can someone help I am trying to put them straight line center of header or above my video.And I want to put them links.
HTML
<body>
<div id="header">
<div id="icons>
<img src="facebook-64.png">
<img src="twitter-64.png">
<img src="instagram-64.png">
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
CSS
img {
position: absolute;
right: 640px;
top: -50px;
}
video {
margin-top: 250px;
}
#icons {
top: -220px;
}
If using absolute positioning. Each button needs a different class. It is best practice to use classes for css styling and keep id for targeting elements with JavaScript. The images need to be wrapped in links ( tags) and the # in the href below should be set to the URL of your facebook, twitter and instagram home pages.
Personally I would set out html as:
<body>
<div class="header">
<div class="icons>
<a class="fb-link" href"#">
<img src="facebook-64.png">
</a>
<a class="twr-link" href"#">
<img src="twitter-64.png">
</a>
<a class="inst-link" href"#">
<img src="instagram-64.png">
</a>
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
Rather than use absolute positioning I would simply display the links as blocks and float them left. Use a margin on the containing div to position your icons. See below.
css
.icons{
margin:20px auto; //gives margin of 20px top and bottom and centers buttons horizontally.
width:220px;
}
.fb-link, .twr-link, .inst-link {
display:block;
float:left;
width:60px; //set width to the with of image used eg 64px
margin-left:20px;
}
.fb-link{
margin-left:0; //if margin left was left at 20px the icons would be 20px off center.
}
Using these principles laying out the rest of you pages should be straight forward.
You're giving the same style to all img tags, causing them to overlap! try changing positions for each
I have two divs, the one acts as a panel, the second is a mapview (openlayers)
The panel is hidden at the start, and only shows up on a click. however, when the panel appears, the mapdiv gets pushed to the right and overlaps with another div. how can I prevent that?
What I basically want is that the panel appears on top of the map.
This is my code:
<!-- TOOLBAR/PANEL -->
<div class="waveCreatorPanel" style="visibility:hidden; display:none;">
<ul>
<li><a id="createWave_addStation"data-role="button">Station hinzufügen</a></li>
<li><a id="createWave_addItem" data-role="button" disabled="disabled">Item hinzufügen</a></li>
<li><a id="createWave_saveWave"data-role="button">Wave speichern</a></li>
</ul>
</div><!-- /footer -->
<!-- MAP -->
<div class="geosurfmap" id="map" data-role="content" style="z-index:1"></div>
The CSS:
.waveCreatorPanel {
float:left;
}
.geosurfmap {
padding:25px;
margin:25px;
width:80%;
float:left;
}
absolute positioning for one or both of these will definetly solve this
<div class="panel" style="visibility:hidden; display:none; position:absolute; left:0px; top:0px;">
<ul>
//stuff here
</ul>
</div>
<!-- MAP -->
<div class="map" id="map" data-role="content" style="position:absolute; left:100px; top:100px;"></div>
styling could be applied with css stylesheet attached , or inline - since you already have a style attribute in your div's I just added an example of how to set absolute - adjust left and top to where you actually want them
When you originally had visibility:hidden; display:none; that is leaving the other div to be positioned relative , with nothing around it. It is the same as actually not having it in HTML at all , then when it changes to become visible everything that was positioned relative has to be adjusted , absolute positioning will fix this
Another Thing: you're title says "Parent Div" - this in NOT a parent div of the div that is getting shifted around , it is actually adjacent. You would not be having this problem if it was actually a parent. But then again the parent starts as hidden , so everything in it would be hidden
Some possible solutions depending on the rest of your page:
position:absolute
z-index
You could wrap the map and panel divs in another div and give that the minimum required width (were the panel div to be visible). Secondly you would float the map div right
<div id="wrapper">
<div class="panel"></div>
<div class="map"</div>
</div>
<style>
#wrapper {
min-width: 500px;
}
#wrapper .panel {
position:relative;
float: left
}
#wrapper .map {
position: relative;
float:right;
}
</style>
EDIT
To clarify my point I have made a fiddle for you
You can set the panel class to display:none or block to see that the map div now does not displace anymore as a result
Hai guys,
Error div is placed under menu div when there is no runat="server".... But When i give Runat="server" Error div placed to the right of menu div.. any suggestion for placing error div under menu div
<div id="content">
<div id="menu">
</div>
<div id="ErrorDiv" runat="server">
</div>
</div>
css:
#content
{
clear:both;width:100%;float:left;
}
#menu
{
clear:both;float:left;padding-left:15px;width:70%; height:37px;
}
#ErrorDiv
{
clear:both; width:75%;float:left;
}
When runat="server", the ID of the div changes, so the CSS rule isn't applied (you can see it if you view the source of your page).
A simple solution is to use a css class, or a combination of two elements - one that runs at the server, and one that doesn't.