This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 months ago.
I'm trying to make a menu like this picture:
I did it like this:
How can I center the items in the menu with the picture? This is my homework and I couldn't do it even though I tried. Thanks in advance for your help.
body {
font-family: Poppins;
background-color: #F5F6F6;
}
.container {
width: 70%;
margin: 0 auto;
}
.top-space {
height: 25px;
}
.navbar ul li {
display: inline;
}
.navbar ul li a {
text-decoration: none;
line-height: 50px;
}
.navbar ul li img {
height: 50px;
}
<!DOCTYPE html>
<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>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="./style/reset.css">
<link rel="stylesheet" href="./style/style.css">
</head>
<body>
<div class="container">
<div class="top-space"></div>
<div class="navbar">
<ul>
<li>
<img src="./img/logo.png">
</li>
<li>adssdaads</li>
<li>adssdaads</li>
<li>adssdaads</li>
<li>adssdaads</li>
</ul>
</div>
</div>
</body>
</html>
I'd appreciate it if you could tell me what the code you've written works.
You have to add display:flex;, like this:
.navbar ul{display:flex;}
I would do it like this, give display flex to the wrapper of all the nav menu items, in this case ul. Then use align-content: center to center the list items vertically.
body {
font-family: Poppins;
background-color: #F5F6F6;
}
.container {
width: 70%;
margin: 0 auto;
}
.top-space {
height: 25px;
}
.navbar ul {
display: flex;
align-content: center;
}
.navbar ul li {
display: inline;
}
.navbar ul li a {
text-decoration: none;
line-height: 50px;
}
.navbar ul li img {
height: 50px;
width: 50px;
}
<!DOCTYPE html>
<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>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="./style/reset.css">
<link rel="stylesheet" href="./style/style.css">
</head>
<body>
<div class="container">
<div class="top-space"></div>
<div class="navbar">
<ul>
<li>
<img src="http://uploads.refuzion.nl/stock.jpeg">
</li>
<li>adssdaads</li>
<li>adssdaads</li>
<li>adssdaads</li>
<li>adssdaads</li>
</ul>
</div>
</div>
</body>
</html>
I hope this helped you. If not let me know I will look into it further.
Related
i am trying to copy some webpages to learn html and css.when i try to create header like image given below the righ elements which is abastract and helpcenter comes below one another.i want to align those two items horizontally.also i am unable to change font color of the same items
output i want:
output i have right now;
[![
*{
padding: 0px;
margin: 0px;
}
header{
background-color: black;
height: 100px;
}
.menu{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
color: #fff;
}
.menu ul {
list-style: none;
}
<!DOCTYPE html>
<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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="menu">
<ul>
<li>Abstract</li>
<li>Help center</li>
</ul>
<div class="btn">
<button class="submit">Submit</button>
<button class="signin">Signin</button>
</div>
</div>
</header>
</body>
</html>
]3]3
I can't access the images. Is this what you're looking for?
* {
padding: 0px;
margin: 0px;
}
header {
background-color: black;
height: 100px;
}
.menu {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
color: #fff;
}
.menu ul {
list-style: none;
display:flex;
}
.menu ul li a{
color: white;
text-decoration: none;
margin: 10px;
}
<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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="menu">
<ul>
<li>Abstract</li>
<li>Help center</li>
</ul>
<div class="btn">
<button class="submit">Submit</button>
<button class="signin">Signin</button>
</div>
</div>
</header>
</body>
</html>
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 1 year ago.
I am trying to center my unordered list with my h1, I have my unordered list within a flexbox however it just simply doesn't work and is a bit off to the right and I can see the padding is a bit weird.
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
}
header nav {
display: flex;
justify-content: center;
}
header h1 {
margin: 0%;
}
header nav ul {
list-style-type: none;
}
header nav ul li a {
color: black;
text-decoration: none;
}
header nav ul li {
display: inline;
}
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="css/main.css">
<title>Home page</title>
</head>
<body>
<header>
<h1>Kaihans Webbsida</h1>
<nav>
<ul>
<li>Historia</li>
<li>Intressen</li>
<li>Framtiden</li>
</ul>
</nav>
</header>
</body>
</html>
I have tried changing where I have my flexbox, however despite the changes, it just doesn't work.
Unordered list have a default padding adding padding-left: 0 fixed it. read MDN Reference
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
}
header nav {
display: flex;
justify-content: center;
}
header h1 {
margin: 0%;
}
header nav ul {
list-style-type: none;
padding-left: 0
}
header nav ul li a {
color: black;
text-decoration: none;
}
header nav ul li {
display: inline;
}
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="css/main.css">
<title>Home page</title>
</head>
<body>
<header>
<h1>Kaihans Webbsida</h1>
<nav>
<ul>
<li>Historia</li>
<li>Intressen</li>
<li>Framtiden</li>
</ul>
</nav>
</header>
</body>
</html>
Adding padding-inline-start: 0; to header nav ul fixes that.
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
}
header nav {
display: flex;
justify-content: center;
}
header h1 {
margin: 0%;
}
header nav ul {
list-style-type: none;
padding-inline-start: 0;
}
header nav ul li a {
color: black;
text-decoration: none;
}
header nav ul li {
display: inline;
}
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="css/main.css">
<title>Home page</title>
</head>
<body>
<header>
<h1>Kaihans Webbsida</h1>
<nav>
<ul>
<li>Historia</li>
<li>Intressen</li>
<li>Framtiden</li>
</ul>
</nav>
</header>
</body>
</html>
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
so, i've tried using "text-align: center" property but nothing seemed to help, image is slightly off(actually a lot) the center, and its png file so i'm not sure what could be the issue. I've had this problem when I was working on different projects as well and I really couldnt find the solution. I may be making a huge major mistake in my code so if you notice let me know. Make sure to run it in full page so you see the issue!
Heres the HTML and CSS:
body {
background-color: #161616;
}
header {
height: 3.375rem;
}
.ul1 {
list-style: none;
float: right;
}
li {
display:inline;
color: white;
margin: 0.625rem;
position: relative;
right: 0.625rem;
}
a {
text-decoration: none;
color:white;
font-size: 1.063rem;
font-family: 'Prompt', sans-serif;
}
.img-1 {
display: block;
text-align: center;
padding: 0px;
}
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght#200&display=swap" rel="stylesheet">
<title>project1</title>
</head>
<body>
<header>
<nav>
<ul class="ul1">
<li>About</li>
<li>Work</li>
<li>Contact us</li>
</ul>
</nav>
</header>
<section class="pre-midpage">
<div class="img-1"><img src="https://i.imgur.com/7bjqURH.png" alt="img-1"></div>
</section>
</body>
</html>
Your div.img-1 is not taking 100% of possible width. In fact it takes 50%. It's happening because you didn't clear float: left from .ul1, you can add clearfix as it's explained in duplicated post or use display: flex and justify-content: flex-end; instead:
body {
background-color: #161616;
}
header {
height: 3.375rem;
}
.ul1 {
list-style: none;
display: flex;
justify-content: flex-end;
}
li {
display:inline;
color: white;
margin: 0.625rem;
position: relative;
right: 0.625rem;
}
a {
text-decoration: none;
color:white;
font-size: 1.063rem;
font-family: 'Prompt', sans-serif;
}
.img-1 {
text-align: center;
padding: 0px;
}
.img-1 > img {
margin: auto;
}
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght#200&display=swap" rel="stylesheet">
<title>project1</title>
</head>
<body>
<header>
<nav>
<ul class="ul1">
<li>About</li>
<li>Work</li>
<li>Contact us</li>
</ul>
</nav>
</header>
<section class="pre-midpage">
<div class="img-1"><img src="https://i.imgur.com/7bjqURH.png" alt="img-1"></div>
</section>
</body>
</html>
i'm trying to make a transparent header for my website, but for some reason the ul is going below the div. any help?
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aindev's Website</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<h1>aindev</h1>
<ul>
<li>Home</li>
<li>Downloads</li>
</ul>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
font-family: Rubik;
}
.header{
width: 100%;
height: 80px;
}
.header h1{
text-align: center;
}
.header ul li{
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
i tried many stackoverflow questions and other forums for coding, but all don't seem to help. i tried modifying the z-index, doing clear:both; and basically everything i could do.
Is this u want? If u want any other result, please comment as I couldn't get ur problem very well.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: Rubik;
}
.header{
width: 100%;
height: 80px;
}
.header h1{
right: 50%;
position: fixed;
}
.header ul li{
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
.header ul {
z-index: 2;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aindev's Website</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<h1>aindev</h1>
<ul>
<li>Home</li>
<li>Downloads</li>
</ul>
</div>
</body>
</html>
well, You have to use z-index, but before using it you should change the position, so it will be like that:
ul {
position: relative;
z-index: 10
}
You can try following code.
<body>
<div class="header">
<ul>
<li>
Home
</li>
<li>
Downloads
</li>
</ul>
<h1>aindev</h1>
</div>
</body>
add style in css file:
.header ul {
float: right;
}
I have a nav bar which i cannot centre horizontally. I have a nav tag with a ul tag inside and li tags inside that then some of the li tags have ul's and li's to create dropdown lists.
I cannot get the nav to be centered in the page??
/* Main Header Menu */
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
}
.headermenu>ul {
padding-left: 0;
}
.headermenu>ul>li {
float: left;
position: relative;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
</body>
</html>
Please point out anything that might help with my problem, and an explanation would be awesome to as i am trying to learn the reason why as well as just moving/centering the element.
thanks
James
edit:
Changed code to only display the issue i am asking about.
Remove float: left;
.headermenu>ul>li {
position: relative;
display: inline-block;
}
Since you are already using display: inline-block, it is not needed and leads to your problem. For a detailed explantion on both display: inline-block and float and the difference between them, see this answer for reference: Advantages of using display:inline-block vs float:left in CSS
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
}
.headermenu>ul {
padding-left: 0;
}
.headermenu>ul>li {
position: relative;
display: inline-block;
}
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
Try this
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
padding: 0 10px;
}
.headermenu>ul>li {
position: relative;
display: inline-block;
}
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
</body>
Your nav is already centered. But if you want to center your middle ul element you should set every ul's width to 33% and set middle ul text align to center.