I have a header element, containing a logo (floated left) and another div (floated right) and a hidden nav element. On the open_menu div on older PCs I am getting vertical scroll bars. As if one or two pixels are not fitting. It is as if the child div open_menu has a height greater than its parent the header and this is why the scroll bars appear. But this isn't the case, so why is this happening?
HTML and CSS:
header {
line-height: 71px;
border-bottom: 1px solid;
overflow: auto;
}
.logo {
float: left;
width: 137px;
height: 71px;
}
.open_menu {
float: right;
font-size: 22px;
cursor: pointer;
}
nav {
display: none;
position: absolute;
top: 72px;
bottom: 0;
left: 0;
right: 0;
z-index: 102;
}
<header>
<div class="logo">
<img src="resources/logo.svg" alt="xyz">
</div>
<div class="open_menu" onclick="myFunction()">Menu</div>
<nav>
<ul>
<li>Work</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
As explained in https://www.w3schools.com/howto/howto_css_clearfix.asp don't use overflow: auto for clearfix. Try the other way.
The solution is to move the line-height from the header to the child div (open_menu). Hence the height of the header is determined by the child div.
Related
I have a layout like this:
<container div>
<header></header>
<footer>
<div>
<nav>
<ul>
<li></li>
</ul>
</nav>
<div>
</footer>
</container div>
The footer is a centered sticky footer. I want to add social media icons, but I don't want to specify a specific width.
How do I shrinkwrap the footer div without losing it's centered position?
If I add inline:block to the div css, the centering gets lost and it is aligned to the left side of the browser window.
If you add an inline-block to the inner div you will lose the centering, but you can solve this if you add a text-align: center to the footer.
Another solution is to use a CSS3 transform. (You have used one in the header).
When you use percents in a CSS transform the percent is related to the element itself instead to the element's container. Look at the next snippet:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
position: relative;
}
ul {
height: 30px;
line-height: 30px;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
list-style: none;
}
footer#social {
background: #F00;
bottom: 0;
left: 50%;
padding: 0 10px;
position: absolute;
transform: translateX(-50%);
width: auto;
}
<footer id="social">
<div id="socmed">
<nav id="social" class="socialIndex">
<ul>
<li>mail </li>
<li>linkedin</li>
<li>telephone</li>
</ul>
</nav>
</div>
</footer>
Simply use 'inline-block', like this:
footer > div {display: inline-block;}
I'm being unable to align the navigation to the right side while it's positioned fixed.
I read previous threads and I implemented what was suggested but despite of that I'm not able to make it stay within the main container and to be aligned to the right.
It either doesn't move at all (with float: right) or goes out of the container.
<div class="container">
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="nav-positioning">
<div class="menu-primary-navigation-container">
<ul id="primary-menu" class="menu nav-menu">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</nav><!-- #site-navigation -->
</div>
.container {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 30px;
box-sizing: border-box;
}
header .main-navigation {
position: fixed;
padding: 20px 0;
z-index: 3;
width: auto;
}
.main-navigation {
clear: both;
display: block;
}
The problem occurs within this site: www.oktawiakata.com
login: login
password: superstrongpassword
Thanks a lot in advance for your hints!
I'm not able to make it stay within the main container and to be aligned to the right.
With position:fixed the position of your element will be relative to the browser window, so it's not exactly correct to say that it will stay within the main container in CSS terms.
If you want it to stay within the main container, you should use position: absolute
#main-container{
position: relative;
}
#navigation{
position: absolute;
right: 0;
}
UPDATE:
Use this code for a navigation bar like the example provided on your comment:
HTML
<div id="navigation-bar">
<div class="navigation-content">
<ul class="navigation-menu">
<!-- Your <li> elements here -->
</ul>
</div>
</div>
CSS
#navigation-bar{
position: fixed;
top: 0;
right: 0;
left: 0;
height: auto;
padding: 15px 0px;
}
#navigation-bar .navigation-content{
width: 1280px;
margin: auto;
text-align: right
}
#navigation-bar .navigation-content ul{
// Your list styles ...
}
When your element is positioned as a fixed element, then you need to change right value to 0px;
#someContainerCSS{
position: fixed;
right : 0px;
}
That should do the work.
I have a fixed nav bar with transparency on top of my page
header {
position: fixed;
width: 100%;
height: 50px;
background-color: rgba(0,0,0,0.5);
text-align: center; }
which I'd like to go in front of* my header image spanning across the entire width of the page.
#bgimg {
background-image: url(bannerimg.jpg);
width: 100%;
max-width: 1900px;
height: 800px;
background-position: center;
margin: 0 auto; }
Here's my html
<section>
<header>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>Blogs</li>
<li>Partners</li>
<li>Contact Us</li>
<li>Career</li>
</ul>
</nav>
</section>
<div id="bgimg">
<h1>Sample Text<br/>Sample Text</h1>
<p>A paragraph</p>
</div>
</header>
The problem is, other answers I've found suggest setting the image-containing div's positioning to relative and the text to absolute, but when I try that, the image overlaps the navigation bar. How do I keep it below it and still center the text both horizontally and vertically? I'm fairly new to html and css so any help would be appreciated.
I'm not quite sure if this was exactly what you were looking for, but here is a solution that uses z-order and display: table.
https://jsfiddle.net/2xcunsdz/3/
So, the CSS comes out like this:
* {margin: 0; padding: 0;}
header {
position: fixed;
width: 100%;
height: 50px;
background-color: rgba(0,0,0,0.5);
text-align: center;
top: 0px;
z-index: 2;
}
nav li{
display: inline-block;
padding: 15px 30px 0px 0;
font-weight: bold;
font-size: 1.1em;}
#bgimg {
display: table;
position: relative;
background-image: url(https://unsplash.imgix.net/photo-1424746219973-8fe3bd07d8e3?fit=crop&fm=jpg&h=725&q=75&w=1050);
width: 100%;
max-width: 1900px;
height: 800px;
background-position: center;
margin: 0 auto;
margin-top: 50px;
}
#textDiv {
display: table-cell;
height: 100%;
text-align: center;
vertical-align: middle;
}
Also note that your HTML was a little out of order. The and tags need to be swapped around. I also wrapped the text that displays on top of the image in a div, to make things easier.
The Bootstrap method is to use a top padding to move the contents of the the same height as the fixed navigation bar.
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
http://getbootstrap.com/components/#navbar-fixed-top
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've tried many technics and I can't seem to fix this issue.
I would like my menu to always stay at the top of it's parent div. I've made a Codepen of my layout.
Here's the html of my menu and it's parents:
<div id="main-wrapper" class="background-yellow">
<!-- center column -->
<div id="center-wrapper">
<nav id="navbar">
<div id="navbar-wrapper">
<ul id="main-nav">
<li>Édito</li>
<li>Programme</li>
<li>Participants</li>
<li>Situation</li>
<li>À propos</li>
<li>Infos</li>
<li>Newsletter</li>
</ul>
</div>
</nav>
</div>
</div>
And here's their css:
#main-wrapper {
width: 100%;
height: 100%;
}
#center-wrapper {
position: absolute;
left: 30%;
width: 40%;
height: 100%;
}
#navbar {
position: absolute;
width: 100%;
height: 100px;
}
#navbar-container {
position: fixed;
z-index: 666;
}
#main-nav {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
#main-nav li {
display: inline-block;
margin: 10px;
}
--EDIT--
Managed to fix the problem, thanks to Zac.Ledyard, now I need #navbar to be 100% of it's parent div, that is #center-wrapper.
Thanks in advance guys.
One of your CSS id selectors is named wrong. Change #navbar-container to #navbar-wrapper
#navbar-wrapper {
position: fixed;
z-index: 666;
}
The method is simple.
Position:relative for a parent element
Position:absolute for a child element
That way the child element always binds to the top of it's parent element.
Any absolute positioned element has a position in the coordinates of the nearest relative positioned parent ( if none are present - the document itself )
It's really unclear from your page code what's going on there , and what you're trying to achieve.
To bind an element to the top of the -page- ( not to scroll with it ) you need to use position:fixed