I am trying to use a single div to make a navbar with image and ul. There is a condition that I can't use flexbox or grid display. I am trying to make it from the basics that I learned till now.
Issues I am getting:
Image is getting aligned to the top. Why it is not coming on the base of its div?
Without making two divs, Can I align ul and image vertically at the center in a single div?
I know there will be much better ways to do this, but I want to get a basic understanding that what is actually happening.
Here is HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="left">
<img
src="https://www.qousqazah.com/blog/wp-content/uploads/2018/01/features-of-a-business-logo.png"
alt=""
id="logo"
/>
<ul>
<li>HOME</li>
<li>BLOG</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="right">This is right</div>
</header>
</body>
</html>
Here is the CSS Code:
* {
font-family: 'Montserrat', sans-serif;
}
.left {
display: inline-block;
border: 2px solid red;
position: absolute;
left: 10px;
}
.left img {
display: inline-block;
vertical-align: baseline;
border:2px solid pink;
width: 200px;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
}
.left ul li {
display: inline;
text-decoration: none;
margin: 2px;
font-weight: bold;
}
.left ul li a{
white-space: nowrap;
text-decoration: none;
color:black;
}
.right {
position: absolute;
display: inline-block;
border: 2px solid green;
top: 8px;
right: 10px;
}
And Here is JSFiddle
Change
.left img {
display: inline-block;
vertical-align: bottom; << instead of baseline
border:2px solid pink;
width: 200px;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
margin: 0; << added
}
and it works: fiddle
Note that with inline-block also spaces will be displayed. SO
<img
src="https://cdn.magenest.com/wp-content/uploads/2018/12/Magento-Logo-768x327.jpg"
alt=""
id="logo"
/>
<<< this will create unwanted whitespace between the elements
<ul>
<li>HOME</li>
The image is aligned to the baseline. But the gap is due to the bottom margin of ul. So, remove the culprit from your code.
ul {
margin-bottom: 0;
}
you can do like this make image block and margin auto
* {
font-family: 'Montserrat', sans-serif;
}
.left {
display: inline-block;
border: 2px solid red;
position: absolute;
left: 10px;
}
.left img {
display: block;
vertical-align: baseline;
border:2px solid pink;
width: 200px;
margin: auto;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
}
.left ul li {
display: inline;
text-decoration: none;
margin: 2px;
font-weight: bold;
}
.left ul li a{
white-space: nowrap;
text-decoration: none;
color:black;
}
.right {
position: absolute;
display: inline-block;
border: 2px solid green;
top: 8px;
right: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="left">
<img
src="https://cdn.magenest.com/wp-content/uploads/2018/12/Magento-Logo-768x327.jpg"
alt=""
id="logo"
/>
<ul>
<li>HOME</li>
<li>BLOG</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="right">This is right</div>
</header>
</body>
</html>
Related
When I hover a menu item it affect other items. All other elements are moving. How to stop other elements to move from its position. Someone please review my code. I want the menu item to be bold when I hover and all the menu item does not move to its position. I tried many different ways to but it always moves and changing other elements positions
Here is the code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul li {
display: inline-block;
color: #fff;
margin-inline: 50px;
font-weight: 400;
font-size: 25px;
transition: all 0.5s;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="">
</div>
<div class="menu">
<ul>
<li class="list active">Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>```
When you increase the font-weight on hover, you are in turn increasing the size of the text in the <li> and if the <li> doesn't already have enough space to contain the text, it needs to adapt its width and this ends up pushing the other elements.
You can simply increase the width of <li> so that the contained text can safely scale within the increased container without altering any of the surrounding elements, like so:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul {
display: flex;
gap: 50px;
}
.menu ul li {
display: inline-block;
color: #fff;
width: 150px;
font-weight: 400;
font-size: 25px;
transition: all 0.3s ease;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="" />
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>
```
I want to make the navbar centered like the 'my content'
please help me to get deal with this. I wanna make the navbar in the center. like the 'my content' used to. But in fact, it literally not center.
Plus correct my design. Like at padding, margin, border, etc
body {
margin: 0;
padding: 0;
}
.logo {
width: auto;
height: 100px;
}
.container {
width: 720px;
height: auto;
margin: auto;
}
.navbar ul {
padding: 0;
text-align: center;
}
.navbar ul li {
padding: 20px;
display: inline-block;
width: auto;
}
.navbar ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
padding: 10px 20px;
width: auto;
border: 1px solid black;
border-radius: 25px;
}
.navbar ul li a:hover {
border: 1px dashed #2a19c0;
border-radius: 25px;
background-color: rgb(68, 99, 236);
color: white;
}
.content {
height: 700px;
background-color: #9360b6;
}
.content h4 {
text-align: center;
width: auto;
padding: 12px;
text-transform: uppercase;
text-decoration: underline;
}
.footer {
background-color: #9360b6;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Latihan Layout intermediate</title>
<link rel="stylesheet" href = "Coffee.css">
</head>
<body>
<div class="container">
<img src="../image/logo.png" class="logo" alt="logo">
<div class="navbar">
<ul>
<li><a>home</a></li>
<li><a>price list</a></li>
<li><a>about us</a></li>
</ul>
</div>
<div class="content">
<h4>My content</h4>
</div>
<div class="footer">
<p>Copyright 2020 Alan's web</p>
</div>
</div>
</body>
You Can wrap your logo with a container then center your logo using the display: flex; & justify-content: center;
HTML:
<div class="logo-container">
<img src="../image/logo.png" class="logo" alt="logo">
</div>
CSS:
.logo-container{
display: flex;
justify-content: center;
}
I am having simple cshtml layout like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - TDMajstor</title>
<link rel="stylesheet" type="text/css" href="~/css/_Layout.css" />
</head>
<body>
<div id="MainWrapper">
<div id="HorizontalMenuWrapper">
<ul>
#{
string currLink = Context.Request.Path;
}
<li>Pocetna</li>
<li>Termodom</li>
</ul>
</div>
</div>
#RenderBody()
<hr />
</body>
</html>
It's CSS is:
body {
}
#HorizontalMenuWrapper {
/*text-align: center; - ako zelim da mi meni bude centriran*/
background-color: #579cff;
width: 100%;
}
#HorizontalMenuWrapper ul {
list-style-type: none;
overflow: hidden;
background-color: #579cff;
font-weight: bolder;
font-size: large;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: top;
height: 49px;
}
#HorizontalMenuWrapper li {
width: 150px;
float: left;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-right: 1px solid;
height: 100%;
}
#HorizontalMenuWrapper li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#HorizontalMenuWrapper li a:hover {
background-color: white;
color: black;
text-decoration: underline;
}
.Active {
background-color: #ff7f00;
}
#media only screen and (max-width: 600px)
{
#HorizontalMenuWrapper li
{
float: none;
}
}
Now razor page which use this layout is:
#page
#model TDMajstor.Pages.IndexModel
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TDMajstor</title>
<link rel="stylesheet" type="text/css" href="~/css/Null_Body.css" />
<link rel="stylesheet" type="text/css" href="~/css/Index.css?id=3" />
</head>
<body>
<div id="MainWrappers">
TDMajstor
ddd
</div>
</body>
</html>
Css for it is:
#MainWrapper
{
width: 100%;
text-align: center;
background-color: red;
}
Problem is making this text-align (since other i cannot see) but for some reason it also center elements inside my layout (ul, li) plus i targeted ID but still it affects it somehow.
I have tried removing text-align line and it moves layouts elements to normal so i know that this css is affecting it but there is no logic for me.
#MainWrapper is the container of all other elements. So whatever styles you set to it, they will be inherited by it's descendants ( ul, li included ).
If you want to keep that style to #MainWrapper , you need to overwrite it on the elements you don't want to have text-align:center.
See example below
#MainWrapper {
text-align:center;
}
ul li {
text-align:left;
}
<div id="MainWrapper">
<h1>I will inherit and be centered</h1>
<ul>
<li>Some list to the left</li>
<li>Some list to the left</li>
<li>Some list to the left</li>
</ul>
<div class="some-child">
I will be centered
</div>
</div>
I want to create a menu bar with a list, but it's all in one place!
If I play with the position of the menu (absolute, fixed, ...), it's good, but I want that the menu will be fixed.
CSS:
img.logo {
max-height: 90px;
width: auto;
position: fixed;
clip: rect(5px, 95px, 90px, 5px);
}
a,
li {
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: fixed;
text-decoration: none;
}
li {
border: 1px solid black;
}
***HTML:***
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li>
<img class="logo" src="img/logo.png" alt="problem">
</li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Run it and you will see what I see...
What is wrong?
PS: Can you say how can I make it all in one line, like a real menu bar
I've made a few changes by simplifying your css content.
You just need to use display: block and float:left to arrange your menu items properly. I've added a few more tweaks to it to suit what you wanted to achieve.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
border: 1px solid #000;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<style>
img.logo {
max-height:90px;
width:auto;
position:fixed;
clip: rect(5px,95px,90px,5px);
}
a, li {
list-style: none;
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: relative;
text-decoration: none;
display: inline;
}
li {
border:1px solid black;
}
***HTML:***
</style>
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Just changing display:inline-block to inline worked for me. Preview this on full page as this is not responsive example.
Hope This could help. :)
You should remove position:fixed from img-logo, a, li and add position:fixed or position:sticky to their parent container
.navbar{
float: right;
position: sticky /* use can use position:fixed */
}
img.logo{
max-height:90px;
width:auto;
clip: rect(5px,95px,90px,5px);
}
a, li{
color:inherit;
list-style:none;
text-align:center;
padding-right:10px;
padding-left:5px;
padding-bottom:10px;
font-size:16px;
font-family:Odin rounded;
vertical-align:text-top;
text-decoration:none;
display: inline-block;
}
li {
border:1px solid black;
}
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</div>
</body>
</html>
I've been trying to create a pretty basic CSS navbar, comprised of a "navbar" container div, and within that a "logo" div and a "menu" div.
However, I seem to have run into some trouble with getting the "menu" div (which contains an unordered list of links) to nest within the "navbar" container div.
Perhaps I'm missing something very simple, but I've tried doing some Googling and can't seem to find a solution to this issue.
I did see a tutorial that showed how to create a similar type of navbar using only an unordered list, but given that I'm also looking to have a logo and potentially other elements in the navbar, I don't think that's what I'm looking for.
Please see below for the HTML and CSS that I've been working with. Any assistance would be greatly appreciated.
Thanks!
body{
padding: 0px;
margin: 0px;
}
.navbar{
height: 50px;
width: 100%;
background: #b4cef7;
}
.logo{
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul{
list-style-type: none;
}
.navbar ul li{
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a{
text-decoration: none;
color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Simple CSS Navbar</title>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
You have a set height on the navbar and a block level element, forcing the navbar to a new line.
There's many ways you could have the elements on the same line, such as floating or displaying inline-block.
Here's a simple demo of using inline-block:
body {
padding: 0px;
margin: 0px;
}
.navbar {
height: 50px;
width: 100%;
background: #b4cef7;
}
.navbar>* {
display: inline-block;
vertical-align: top;
}
.logo {
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.navbar ul li {
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a {
text-decoration: none;
color: black;
}
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
There isn't generally a option you should use, be it inline-block, floating, or flexbox; it really just depends on your preferences and target browsers.