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>
Related
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.
i am trying to center the list i made under the tag navlist in the navbar which is a div with class bar . Can u tell how do i do it , below are the html and css code . The navbar is the one on top with green color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="bar">
<nav>
<ul class="navlist">
<li>Search</li>
<li>Browse</li>
<li>Tags</li>
<li>Filter</li>
<li>Dev</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
*{
margin: 0px;
}
.navlist{
list-style: none ;
display: flex ;
background: red ;
padding: 0px ;
margin: 0px ;
width: 300px
}
.bar{
height:100px ;
background: green ;
justify-content: center
}
.link1{
padding-left: 10px;
text-decoration: none ;
color: black ;
font-size: 20px
}
Please add 'margin: 0 auto;' to .navlist
when you use justify-content and/or align-items, you need to add
display: flex; to that
* {
margin: 0;
}
/* you don't need a div, you can just use the nav*/
nav {
height: 100px;
background: green;
display: flex;
/* this is for centering it horizontally */
justify-content: center;
/* this is for centering it vertically */
align-items: center;
}
.navlist {
list-style: none;
display: flex;
background: red;
padding: 0px;
margin: 0px;
width: 300px;
}
.link1 {
padding-left: 10px;
text-decoration: none;
color: black;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<nav>
<ul class="navlist">
<li>Search</li>
<li>Browse</li>
<li>Tags</li>
<li>Filter</li>
<li>Dev</li>
</ul>
</nav>
</body>
</html>
To achieve this solution, I enclose the <nav> element in a <div> container and put the <nav> element in the middle of the page applying the specialContainer class style:
<style>
.specialContainer{
display: flex;
justify-content: center;
}
</style>
<div class="specialContainer">
<nav></nav>
</div>
*{
margin: 0px;
}
.navlist{
margin: 0 auto;
list-style: none ;
display: flex ;
background: red ;
padding: 0px ;
margin: 0px ;
width: 300px
}
.bar{
height:100px ;
background: green ;
justify-content: center
}
.link1{
padding-left: 10px;
text-decoration: none ;
color: black ;
font-size: 20px
}
/* Added the following css class. */
.specialContainer{
display: flex;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="bar">
<!-- The following element has been added. -->
<div class="specialContainer">
<nav>
<ul class="navlist">
<li>Search</li>
<li>Browse</li>
<li>Tags</li>
<li>Filter</li>
<li>Dev</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
*{
margin: 0px;
}
.navlist{
list-style: none ;
display: flex ;
background: red ;
padding: 0px ;
/* margin: 0px ; */
width: 300px
}
.bar{
height:100px ;
background: green ;
justify-content: center;
display: flex;
justify-content: center; /* Horizontal */
align-items: center; /* Vertical */
}
.link1{
padding-left: 10px;
text-decoration: none ;
color: black ;
font-size: 20px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="bar">
<nav>
<ul class="navlist">
<li>Search</li>
<li>Browse</li>
<li>Tags</li>
<li>Filter</li>
<li>Dev</li>
</ul>
</nav>
</div>
</div>
</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>
I reset the margins of all the elements, but there is a gap in between, which I don't know why.
I tried it in chrome and firefox browsers. Same result in both. I'm waiting for your help. This is really important
enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
}
#menu li {
display: inline-block;
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
color: white;
}
<!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>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
For the purpose of inline-block displayed elements, whitespace is treated as, well, whitespace. It's the spaces within your code. It would be easier if you were use #menu{ display: flex; } instead of making li into inline-blocks.
i will fix it for you
<!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>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
}
ul {
font-size: 0;
}
#menu li {
font-size: 16px;
display: inline-block;
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
color: white;
}
There are several ways you could get round this - probably the most inelegant would be to remove the newlines/spaces in your HTML list.
More practical probably is to have the ul display: flex. But you will have to consider what you want to happen responsive-wise. Do you ever need the elements to flow to the next line on a small device?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
display: flex;
}
#menu li {
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
color: white;
}
<!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>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</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>