I have a section of code for the header portion of my website:
.nav {
position:relative;
display:inline-block;
}
#header-image {
display:inline-block;
position:relative;
height:50%;
}
.header-container {
height:6vw;
position:relative;
vertical-align: bottom;
}
<div class="header-container">
<a href='index.html'>
<img src='img/logo.png' alt="Logo" id='header-image'/>
</a>
<nav class="nav">
<ul>
<li><a href='aboutus.html'>About Us</a></li>
<li><a href='activities.html'>Activities</a></li>
<li><a href='google.ca'>Media</a></li>
<li><a href='google.ca'>Contact Us</a></li>
</ul>
</nav>
</div>
I wanted the bottom of the image to line up with the bottom of the navbar. But what's happening is that the image is lower than the navbar. Any ideas why?
Set your list items to display: inline-block;
.nav {
position: relative;
display: inline-block;
}
#header-image {
position: relative;
}
.header-container {
position: relative;
vertical-align: bottom;
}
li {
display: inline-block;
}
<div class="header-container">
<a href="index.html">
<img src='http://placehold.it/50x50' id='header-image' />
</a>
<nav class="nav">
<ul>
<li><a href='aboutus.html'>About Us</a>
</li>
<li><a href='activities.html'>Activities</a>
</li>
<li><a href='google.ca'>Media</a>
</li>
<li><a href='google.ca'>Contact Us</a>
</li>
</ul>
</nav>
</div>
.nav {
position:relative;
display:inline-block;
}
#header-image {
display: inline-block;
position: absolute;
bottom: 15px;
}
.header-container {
position:relative;
}
Use this styling settings may fill your requirements
Related
Above are the desired results - but with nav bar moved to right of page.
Here is the existing css and html.
Again the goal is
To get the logo image vertically centered and horizontally to the left of the page
Get the nav bar to the far right of the page and vertically centered
have the HR just below the image and the nav bar
Thank you in advance!
<div class="nav">
<ul>
<li><img src="Images/logo.jpg"></li>
<li><a class="link" href="#">Contact</a></li>
<li><a class="link" href="#">Qual...</a></li>
<li><a class="link" href="#">Home</a></li>
</ul>
<hr class="hr">
</div>
.nav {
list-style: none;
}
.nav li {
display: inline-block;
vertical-align: middle;
}
you want to align vertical li child so use display flex and give first element li flex-grow to take white space in midle
you can use grid, for more info about grid here
.nav li {
margin:0 10px;
}
.nav>ul{
list-style: none;
display:flex;
align-items:center;
padding:0;
}
.nav li:first-child{
flex-grow:1;
}
<div class="nav">
<ul>
<li><img src="https://picsum.photos/200"></li>
<li><a class="link" href="#">Contact </a></li>
<li><a class="link" href="#">Qual... </a></li>
<li><a class="link" href="#">Home</a></li>
</ul>
<hr class="hr">
</div>
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav ul li {
float: right;
line-height: 100px;
padding: 0 20px;
}
.nav ul li:first-child {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.nav ul:after {
content:"";
display: block;
clear: both
}
<div class="nav">
<ul>
<li>LOGO</li>
<li><a class="link" href="#">Contact</a></li>
<li><a class="link" href="#">Qual...</a></li>
<li><a class="link" href="#">Home</a></li>
</ul>
<hr class="hr">
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I'm a beginner. I tried to build a navbar with flex but failed to get the desired result.
what I want is
Logo Home About Services Contact
* {
margin: 0;
padding: 0;
font-family: monospace;
}
.nav {
display: flex;
background-color: gray;
}
.menu {
list-style: none;
display: inline-block;
padding: 20px
}
a {
text-decoration: none;
}
.con {
float: right;
}
<header class="nav">
<img src="./Logo.png" width="80px" class="logo" alt="">
<nav>
<ul>
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
<li id="contact" class="menu con">Contact </li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
font-family: monospace;
}
.header {
display: flex;
background-color: gray;
width: 100%;
}
nav {
width: 100%;
}
ul {
display: flex;
justify-content: space-between;
}
.menu {
list-style: none;
display: inline-block;
padding: 20px
}
a {
text-decoration: none;
}
.con {
float: right;
}
<header class="header">
<nav>
<ul>
<img src="./Logo.png" width="80px" class="logo" alt="">
<div>
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
</div>
<li id="contact" class="menu con">Contact </li>
</ul>
</nav>
</header>
I believe this is what you are looking for
You can use display flex and justify-content property to move items.
.nav
{
width:100%;
display:flex;
justify-content:space-evenly;
align-items:center
}
.img-wrapper
{
width:33.33%;
}
.nav-items-center
{
width:33.33%;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.nav-item-right
{
width:33.33%;
display:flex;
justify-content:space-evenly;
align-items:center;
}
<header class="nav">
<div class="img-wrapper">
<img src="./Logo.png" width="80px" class="logo" alt="Logo">
</div>
<ul class="nav-items-center">
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
</ul>
<ul class="nav-item-right">
<li id="contact" class="menu con">Contact </li>
</ul>
</header>
does anyone know how to achieve this in bootstrap for the nav? Logo on the left and nav on right.
My guess is you use col's with some css?
I managed to create the section i wanted the code i am using is:
CSS:
.menu {
background-color: lightblue;
overflow: hidden;
background-color:white;
}
.menu:after {
content: "";
border-bottom: 850px solid transparent;
border-right: 400px solid #0055b7;
position: absolute;
left: 80%;
top: 0;
}
.nav-menu ul {
list-style: none;
display: inline-flex;
}
.nav-menu ul li {
padding: 40px;
}
.blue-bg {
background-color: #0055b7;
}
HTML:
<div class="container-fluid">
<div class="row">
<div class="menu col-md-5">
<img class="paddingHeader" src="assets/images/headerlogo.png" />
</div>
<div class="content col-md-7 blue-bg">
<div class="nav-menu">
<ul>
<li><a class="text-white" href="">Home</a></li>
<li><a class="text-white" href="">About Us</a></li>
<li><a class="text-white" href="">Properties To Let</a></li>
<li><a class="text-white" href="">We Buy Houses</a></li>
<li><a class="text-white" href="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
Im trying to have a menu where I have some links floated at left and then I have a div with some links that I want floated at right.
I'm trying to do this with the code below and it is working, but the left links and right links are no aligned at the center of the menu in terms of height, do you know why?
And also the :hover effect is not occupying the entire height of the menu.
CODE:
.container {
width: 100%;
background: yellow;
float: left;
}
.content {
height: 50px;
}
.menu-list {
list-style: none;
}
.menu-list li {
float: left;
}
.menu-links {
float: right;
}
.menu-list li a {
color: #aaa;
text-decoration: none;
line-height: 50px;
font-weight: bold;
}
.menu-list li a:hover {
background: red;
}
<div class="container">
<div class="content">
<ul class="menu-list">
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
</ul>
<div class="menu-links">
Link 1
Link 2
</div>
</div>
</div>
JsFiddle
Check this fiddle here
It happens because, you have used menu-list with ul and menu-links with div.
In basic HTML, ul has predefined padding and margin. So, first of all clear out that padding and margin then style menu-list and menu-links accordingly.
Instead of adding extra space or element use following html,
<div class="container">
<div class="content">
<ul class="menu-list">
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
</ul>
<ul class="menu-links">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
And your respective CSS will be,
body {
padding: 0;
margin: 0
}
.container {
display: block;
width: 100%;
background: yellow;
clear: both;
padding: 10px;
}
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
a {
text-decoration: none
}
.menu-list,
.menu-links {
list-style: none;
margin: 0;
padding: 0
}
.menu-list {
float: left
}
.menu-links {
float: right
}
.menu-list li,
.menu-links li {
display: inline-block
}
Try this one
.container{
width:100%;
background:yellow;
float:left;
}
.content{
height: 50px;
}
.menu-list{
list-style:none;
margin: 0;
float: left;
}
.menu-list li{
display: inline-block;
}
.menu-links{
float: right;
}
.menu-links a{
line-height: 50px;
}
.menu-list li a{
color:#aaa;
text-decoration: none;
line-height: 50px;
font-weight: bold;
}
.menu-list li a:hover{
background:red;
padding: 16px 0px;
}
<div class="container">
<div class="content">
<ul class="menu-list">
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
</ul>
<div class="menu-links">
Link 1
<a href="" >Link 2</a>
</div>
</div>
</div>
How about this fiddle?
It is generally better to float the ul and give the li display: inline;
ul also has a default margin and padding on it so you need to use a reset of some sort
ul.menu-list{
margin: 0 0 0 15px;
padding: 0;
}
*Revised to make CSS only
Would something like this work? You just need to know the height of your nav bar, and add a pseudo-element of that height to each of the separate nav sections. https://jsfiddle.net/will0220/wg7hwc7s/
Just set them to display: inline-block and vertical-align: middle to keep them centered in the height of your nav bar by comparing it to the pseudo element. This should work with any number of lines of text in each button.
.container{
width:100%;
background:yellow;
float:left;
}
.menu-list{
list-style:none;
}
.menu-list{
float: left;
padding: 0;
margin: 0;
}
.menu-links{
float: right;
}
.menu-list li a{
color:#aaa;
text-decoration: none;
line-height: 50px;
font-weight: bold;
}
.menu-list:before, .menu-links:before{
content: '';
display: inline-block;
vertical-align: middle;
height: 50px;
width: 0;
}
.menu-list li, .menu-links a{
display: inline-block;
vertical-align: middle;
}
.menu-list li a:hover{
background:red;
}
You can use display:table-cell property to easily do that and also you don't have to use float for li to display as horizontal menu instead use display:inline
updated fiddle here
^^ The above images show =900px, >900px, <900px...I just want to center and shorten padding as window shrinks.(at 15px)
^^Using 1.666666666666666%
Right now im trying to make my webpage navbar work with changes in widths. When the window is exactly 900px The navbar fits perfectly. I have 30px spacing around each block (15px left and right; 15px start and end of list). I took 900 and divided by 60 to get 15px and that is my percentage (%/60). When i use the formula calc(1/60*100%) the navbar has the wrong spacing. Am i misunderstanding something.
I dont think this is google chrome issue assuming something is wrong with the above logic. I can post the html file if anyone needs it. Don't know if its neccessary.
body {
margin:0px;
font-family:avenir, sans-serif;
}
.nav {
margin: 0px 0px 0px 0px;
overflow:hidden;
width:100%;
<!--box-shadow: 0px 0px 10px 0px #000000;-->
}
.link-header {
background-color:rgb(242,242,235);
}
.school-header {
background-color:rgb(40,110,123);
}
.nav-left {
display: inline-block;
float:left;
}
.nav-right {
display: inline-block;
float:right;
}<!--
.nav-center {
text-align: center;
}-->
a {
text-decoration: none;
}
.school-header a {
color:white;
}
.link-header a {
color:rgb(40,40,40);
}
.nav-li-outer {
padding-left:calc(1/60*100%);
padding-right:calc(1/60*100%);
display: inline-block;
margin-top: 0px;
vertical-align: top;
}
.school-header li {
line-height:80px;
}
.link-header li {
line-height:30px;
}
.link-header li:hover {
box-shadow:inset 0 -3px 0 rgb(40, 40, 40);
}
ul {
margin: 0;
list-style-type: none;
padding-left: calc(1/60*100%);
padding-right:calc(1/60*100%);
}
html:
<html>
<head>
<link rel="stylesheet" href="kamsc.css">
</head>
<body>
<div class="school-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
<img src="Logo-Test.png" width=600px style="vertical-align:middle">
</li>
</div>
</a>
</ul>
</div>
<div class="nav-right">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Login
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
<div class="link-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Home
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Staff
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Admissions
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Curriculum
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Sizzling Summer
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC Connection
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Alumni
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
</body>
</html>
You can significantly simply your HTML, particularly for the nav section. Here's a JSFiddle: http://jsfiddle.net/vanu2ynx/
I didn't completely recreate what you're trying to do, but you can probably fill in the details.
Here's the HTML I used:
<header>
<h1>Title</h1>
<div class="login">Login</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>KAMSC</li>
<li>Staff</li>
<li>Adminssions</li>
<li>Curriculum</li>
<li>Sizzling Summer</li>
<li>KAMSC Connection</li>
<li>Alumni</li>
</ul>
</nav>
And the CSS:
header {
background: teal;
overflow: hidden;
padding: 2% 2%;
}
header h1 {
float: left;
margin: 0;
padding: 0;
}
header .login {
float: right;
}
nav {
background: lightgray;
padding: 2% 2%;
}
nav ul {
font-size: 0;
margin: 0;
padding: 0;
text-align: justify;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
font-size: 16px;
}
The trick here is the text-align: justify; on nav ul and then the :after creates a full width child element for the justify to work.
You'll need to add media queries to have this break properly, but that should be pretty straight-forward.
Read more here: How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container