I'm having an issue with the header.main-header element. Header is not visible in viewport. I inserted a height value to make it visible. Can someone help me and explain the reason why it's not visible when there is no height inserted.
.main-header {
background: yellow;
padding: 0 3em;
position: absolute;
width: 100%;
top: 0;
height: 85px;
}
ul {
padding: 0;
list-style: none;
}
.main-nav {
position: relative;
}
.nav-left {
float: left;
}
.nav-right {
float: right;
}
.middle {
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
.nav-right li {
display: inline-block;
}
<header class="main-header">
<nav class="main-nav">
<ul class="nav-left">
<li>Try Dropbox Business</li>
</ul>
<div class="middle">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Dropbox_logo_%28September_2013%29.svg/200px-Dropbox_logo_%28September_2013%29.svg.png" alt="Dropbox Logo" />
</div>
<ul class="nav-right">
Download the app
<li>Sign in</li>
</ul>
</nav>
</header>
Here's my work in Codepen:
http://codepen.io/marcvs/pen/Gjwdov?editors=1100
Also, regarding the positioning of the elements inside the nav, I tried my best to position the elements from left/center/middle. But the right side of the navbar is extending to the right and it gives a bottom scroll bar. What is the best technique to postion the elements?
Kindly give me tips to improve my work. Thank you.
You don't need to add so much style to accomplish that header:
Start by looking at your main-header tag. If the main header's width is 100% of the page, the child block nav will also be 100%.
Now, using percentages, make your menu fit the header. there are 3 children within the nav so you could set each width to 1/3 of the width and that should make them fit. Just keep in mind that borders and padding count (Try 30% width for each, having them with float:left on all 3 of the children).
You need to put clear after last ul where is float:right;
Because you have float, and parent element doesn't have height when float is there.
So after last ul put div class="clear" with css .clear {clear:both;}
Or if you are using bootstrap you have class clearfix. pun in nav class="main-nav clearfix"
Related
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.
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 trying to set the "Nelson Mazda" png to fit within the limits of the navbar, but it's showing larger than the navbar as you can see in the screenshot. I tried setting the max-height and max-width of .brand-logo to 100%, but this doesn't seem to be fixing it. What am I missing?
Note: nav-wrapper is set to the same height as the navbar, so setting .brand-logo's height to 100% of it should theoretically work, right?
HTML:
<!-- Navigation bar -->
<div class="navbar-fixed" id="nav">
<nav>
<div class="nav-wrapper">
<!-- Site name -->
<span class="tighter"><img src="images/NelsonMazdaLogo.png">
</div>
</nav>
</div>
CSS:
nav {
background-color: rgba(255, 255, 255, .95);
.brand-logo,
ul a {
color: $black;
padding: 0 15px;
}
.brand-logo {
font-weight: 400;
letter-spacing: -2px;
height: 100%;
max-width: 100%;
.tighter {
letter-spacing: -3px;
}
}
}
set max-height and max-width on the img itself
.brand-logo img {
max-height:100%;
max-width:100%;
}
Your outer nav has to have a height or width.
See these examples:
http://codepen.io/bootstrapped/details/KwYGwq/
.brand-logo {
height: 50px; /* set to height you want image to be constrained to */
}
.brand-logo img {
height:100%;
width:auto;
}
Plus you have a random span tag that isn't closed.
<div class="navbar-fixed" id="nav">
<nav>
<div class="nav-wrapper">
<!-- Site name -->
<a href="/" class="brand-logo">
<span class="tighter"><img src="images/NelsonMazdaLogo.png"></span><!-- missing closing span tag -->
</a>
</div>
</nav>
</div>
The key thing to think about is when you say 100% you have to think, 100% of what exactly? It needs to be inside a parent or grandparent element that has an actual height.
Also if your image itself wasn't cropped properly it could be adding transparent space around the logo. If the above solution doesn't work, try downloading your image and cropping it to make sure it's actually cropped to the logo edges.
You can also try object-fit:
object-fit: contain;
width: 100%;
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
I'm new at this and so this might be really embarrassing...bang head on table embarrassing... but here goes....
I have a nav bar and then under (not behind) I have an image. The nav works fine. img fine. Until, I add absolutely positioned text on top of the relatively positioned image and then the links on my nav no longer work except in IE ha ha.... when I remove the line position: relative in the box div my nav links work.... I think its some clash between a float and relative...seems really basic....
helllllpppp.... Is there a way to do this? :( here is some code.
<ul id="nav">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
<div id="box">
<img src="images/image.jpg" alt="image">
<p id="box2">
text text text text text
</p>
</div>
css:
#allcontent {
width: 910px;
margin-left: auto;
margin-right: auto;}
#nav {
float: left;
margin: 0;
padding: 0; }
#nav li {
float: left; }
#nav li a {
display:block;
width:130px;
background-color: black;}
#nav li a:hover{
background-color: red;}
#box {
position: relative;}
#box2 {
position: absolute;
top: 300px;
left: 0;
color: blue;
background: black;
width: 250px;}
Even though the box is after the nav in the mark-up using floats will take that element of the the natural flow of the document and elements can become stacked on top of one another. The problem here is that the box element is actually on top of the nav so it cannot be clicked as your actually clicking on the box div not the nav.
Changing your class to the following will solve your issue.
#box {
position: relative;
z-index: -1;
}
More information about z-index can be found here: http://www.w3schools.com/cssref/pr_pos_z-index.asp