I want to extend the left side of a navigation menu within a centered container. I tried position: absolute but the menu overlapped the logo,
is there another solution? If not, how can I stop an absolute element overlapping other elements?
Here is an image of what I'm trying to do
extended div
If you want to keep your menu elements inside the container, you can go with an absolute ::before pseudo-element.
section {
max-width: 300px;
margin: 0 auto;
background-color: #eaeaea
}
header {
display: flex;
line-height: 30px;
}
nav {
background-color: rgba(255,0,0,.2);
position: relative;
}
nav::before{
content:'';
position: absolute;
display: block;
width: 100vw;
height: 100%;
right: 100%;
background-color: rgba(255,0,0,.2);
}
<section>
<header>
<nav>navigation menu</nav>
<span>logo</span>
</header>
container
</section>
Related
Here is what I want to get.
The black part is the container div. width 100%
The blue part is the main header text div,
And the pink one is the button that should be placed at the right of the container div.
Question: How to center header text, so it will be the center of the container div, not the center of the blue part? My problem is when I give the pink button position: absolute; that button keeps floating while scrolling.
Maybe something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid darkgrey;
padding: 1rem;
margin: 1rem;
position: relative;
}
.header__title {
text-align: center;
background-color: lightgreen;
}
.header__button {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<header class="header">
<h3 class="header__title">Header text here</h3>
<button class="header__button">Button</button>
</header>
Of course you can change the background colors, border, padding, margins, ... to fit your design. This is just to illustrate where the elements are.
The key here was to use position: absolute on the button.
position: absolute remove the element (the button) from the document flow, so the other element (the header text) can be centered on 100% width of the page.
Some good information about position absolute here on MDN
Ok so on my webpage, I have a left navigation, the position if fixed and when i want to add my content on the index page, the content appears behind the navigation and does not start after it.
If I remove the fixed position then it just goes underneath.
Navigation CSS
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
position: fixed;
}
I even tried putting all the content inside a div but no luck.
Content DIV
#padding {
height: auto;
position: absolute;
right: 0;
Screenshots
Just put your content inside a div:
<div id="container">
<div id="nav">
<!-- your navbar markup -->
</div>
<div id="content">
<!-- your content -->
</div>
</div>
with css you can style your elements:
#container {
width: 100%;
}
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
float: left;
}
#content {
width: 82%;
float: left;
}
With float: left your two divs appears aside.
NOTE:
If you don't want to put your content inside a div element, so just float your navbar element:
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
float: left;
}
...that's all and all following content appears (if possible) on the right side of your navbar.
I would do margin-left:18%; or slightly higher on a container around your content. Then your content container will always be padded where the nav sits and will appear beside it.
I have a position:fixed div at the top of my page, so that when a user scrolls down the menu always stays at the top.
How do I position another div element underneath the fixed div.
I'm using CSS and HTML.
I'm using a smooth scrolling jQuery and need each section header to appear just under the menu bar.
Something like this — http://codepen.io/sergdenisov/pen/pJyMGb:
HMTL:
<div class="menu">
<div class="menu-item">Home</div>
<div class="menu-item">About</div>
<div class="menu-item">Demo</div>
<div class="menu-item">Contact</div>
</div>
<div class="menu-item menu-item_sub">Contact</div>
CSS:
body {
height: 2000px;
}
.menu {
position: fixed;
background: blue;
width: 100%;
}
.menu-item {
display: inline-block;
padding: 30px;
}
.menu-item_sub {
position: fixed;
left: 0;
top: 60px;
}
Do everything in absolute position domain.
.1(class){
position: absolute;
left: 10px;
top20px;
}
Like above classify each object with a class and set their position.
I want to center a paragraph which is positioned absolute inside another div positioned relative. The problem is since this is absolute I can't use text-align: center! Also I want to center the paragraph both vertically and horizontally.. .
My HTML looks like this
<div class="top">
<p class="same">Django</p>
</div>
CSS
.top
{
width: 100%;
height: 70px;
position: relative;
}
.same
{
position: absolute;
}
I want the paragraph text 'Django' to be in the center both vertically and horizontally
(http://i.imgur.com/MNcaBYs.jpg)
You don't need absolute positioning at all to achieve what you want :
.top { width: 100%; height: 70px; text-align: center; }
.same { display: inline; line-height: 70px; }
You can force paragraphs to have inline layout and then center them horizontally using text-align: center. To center them vertically just add line-height to paragraph equal to container's height (it is not a problem here as you container's height is fixed). If you don't want to set display: inline explicitly, you can just use span instead of p.
JSFiddle
You can achieve that in following way.
.top
{
width: 100%;
height: 70px;
position: relative;
}
.same
{
position: absolute;
height: 50%; /* This is mandatory i.e. this should not be auto */
text-align: center;
width: 70%; /*This is not mandatory*/
/* The code below is required to horizontally and vertically center the <p> element */
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I have this container which can scroll the content. I would like the header in this container to always stay in the top.
http://jsfiddle.net/z9ze5/
Container:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
overflow: scroll;
position: relative;
}
Header:
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: absolute;
margin: 0;
background: #DDD;
z-index: 999;
}
If you are willing to alter your mark-up, here is one way of doing it:
<div class="lists">
<header class="box_header">
<h1>HEADER 2</h1>
<div class="setting" id="btn2"></div>
</header>
<section class="content">
<p>Lorem Ipsum ....</p>
</section>
</div>
Wrap your scroll area in a <section> (or other block level element).
For your CSS:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
position: relative;
}
section.content {
width: 300px;
height: 220px;
margin: 0 auto;
background: #39C;
position: relative;
top: 30px;
overflow: scroll;
}
Please see fiddle: http://jsfiddle.net/audetwebdesign/nGGXx/
More Advanced Example
If you study the following example:
http://jsfiddle.net/audetwebdesign/fBNTP/
uou can see how your scrolling boxes could be applied in a semi-flexible layout.
I lined up two scrolling boxes side by side and made their width proportionate to the width of the page.
The height is trickier to adjust. I fixed the height of the parent container, see the following rule:
.contentWrapper {
border: 1px solid red;
margin-top: 1.00em;
padding: 30px 0;
overflow: auto;
height: 400px;
}
If you change the height from 400px to some other value, the scrolling boxes will adjust themselves.
Hopefully, these examples will give you and others some more insights into how to build these more advanced layout designs.
If you want a non-css fix, add this listener...
$('.lists').scroll(function() {
$('.box_header', this).css('top', $(this).scrollTop()+'px');
});
and then change .lists css to give relative positioning
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: relative;
margin: 0;
background: #DDD;
z-index: 999;
}
Any position absolute within a position relative is absolute to the relative container. In order to have a header that stays in position, you'd need to position it above, not within, the scrolling container.
look at adding position: fixed to your header div .box_header. You may have to add padding of the height of the box header div to section.content but as you have that set to 30px that should be fine. IE6 and lower has issues with fixed positioning but hopefully we can live with that now - less people are using that than are still listening to Moby.