I have this problem when i want to put some text in my body or place something like a div or a section there , the text goes above the navbar which is in header.I tried to put a margin top to the body but it only made a bigger gap between the top.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.logo {
float: left;
height: auto;
width: auto;
}
body{
background-color: #444064;
margin-top:10ex;
}
nav {
float: right;
margin-bottom: 50px;
}
nav ul {
margin: 0,auto;
padding: 0,auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
nav a:hover {
color: #a34963;
}
section{
text-align: center;
margin-top: 5ex;
}
h1{
font-size: xx-large;
}
<html>
<div id="wrapper">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</head>
<header>
<div id="menu">
<img src="Logo.png" alt="logo" class="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
<body>
Hello world
</body>
</div>
</html>
Please help me
You have many issues with your code as you have an invalid HTML structure. however the issue you have is: nav { float: right; } that causes you navbar to float and as such the content can flow around the nav element and be displayed above. If you remove the line it not happen anymore.
However, I strongly recommend to get back to some decent tutorials and start at the basics. Like I said your HTML structure is an invalid mess. Some css declarations are incorrect/unnecessary as well (e.g. webkit prefix for box-sizing). Also don't use float as styling technique. Use a modern solution like flexbox or css-grid.
Last but not least, this is how the html structure should look like.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logo {
float: left;
height: auto;
width: auto;
}
body {
background-color: #444064;
margin-top: 10ex;
}
nav {
margin-bottom: 50px;
}
nav ul {
margin: 0 auto;
padding: 0 auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
nav a:hover {
color: #a34963;
}
section {
text-align: center;
margin-top: 5ex;
}
h1 {
font-size: xx-large;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</head>
<body>
<header>
<div id="menu">
<img src="Logo.png" alt="logo" class="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
<div id="wrapper">
Hello world
</div>
</body>
</html>
Related
if you copy this code,for example in notepadd++ and open it with chrome, you can see a website that i have started to build. I want to add a Navigation bar in h2. But i already added a word called"Elektrotechnik " there. How can i add a navigation bar there that includes three other words on the right side of the H2 box?
enter code here
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="Stylesheet"
href="main.css"
</head>
<body>
<div id="wrapper">
<header>
<h1>CrackTec GmbH</h1>
<h2>Elektrotechnik<h2>
</header>
<nav>
<ul>
</ul>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</div>
</body>
enter code here
header {
width: 100%;
height: 50px;
background-color: #B8860B;
}
h1 {
font-size: 50px;
margin-top: 15px;
color: white;
padding-left: 100px;
font-family: Arimo;
}
h2 {
color: white;
background-color: #556B2F;
padding-left: 100px;
margin-top: -39px;
font-family: Arimo;
}
You could insert list items to your list in such a way:
<header>
<h1>CrackTec GmbH</h1>
<div class="sub">
<h2>Elektrotechnik</h2>
<nav>
<ul>
<li><a>About</a></li>
<li><a>Portfolio</a></li>
<li><a>Contact Us</a></li>
</ul>
</nav>
</div>
</header>
Then use Flexbox to position your h2 and your list
*{
margin: 0;
padding: 0;
}
header {
width: 100%;
background-color: #B8860B;
}
h1 {
font-size: 50px;
color: white;
font-family: Arimo;
padding:1rem;
}
h2 {
color: white;
font-family: Arimo;
}
.sub {
padding: 1rem;
display: flex;
align-items: center;
background-color: #556B2F;
}
ul{
display: flex;
list-style: none;
padding: 0;
margin-left:1rem;
}
li {
margin: 0 0.5rem;
}
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
I am aware that there are plenty of question identical to mine, but it seems that I have a problem with my code. I'm trying to make a website, and for now the layout I'm looking for is a logo at the very top followed by the name of the brand and then under it a navigation bar. I did the nav bar first, but when trying to put the image in, I couldn't resize it, let alone center it with text. Can somebody help me achieve what I'm trying to do, or at least explain what I'm doing wrong? Thanks
P.S. Here is my code.
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo img{
float: center;
width: 80;
height: 80;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
P.S.S. If it helps, when I inspect the image on the page, I get this thing here.
There is no float: center. Instead, you can use text-align: center; on .logo (the container of the image). And you need to use the px unit on width and height of the image.
BTW: Since you wrote about centering image and text, I added an h1 in my snippet which is also centered via text-align: center. (You could also add settings for margin-top and margin-bottom if you want to change the default distance to the elements above and below)
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li {
float: left;
}
h1 {
text-align: center;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
text-align: center;
}
.logo img {
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<h1>Header Text</h1>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
Use display: flex is much easier to use and flexible
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
display: flex;
justify-content: center;
}
.logo img{
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
i'm here to beg for your help! the problem is regarding Navigation bar, and the text/links for it.
The issue is that the last list item is all the way to the right of the header, i want to move everything to the left, not to center it completly, just to be able to move it bit by bit to fit it for my purpose!
Thanks on beforehand
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80% margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
float: right;
}
nav ul {
margin 0;
padding 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 20px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}
.logo {
float: left;
padding: 10px 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li>Deals</li>
<li>Radiostyrt</li>
<li>El-fordon</li>
<li>Kontakta oss</li>
<li>Media Galleri</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
try putting a margin-right: 50px or something on your nav tag
Please see the code snippets on CSS parts for the change. I hope this is your expected output.
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 10px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li>Deals</li>
<li>Radiostyrt</li>
<li>El-fordon</li>
<li>Kontakta oss</li>
<li>Media Galleri</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
put margin-right: how much you want px on your nav tag, and don't forget to create a div to the logo, because if you put the margin-right the logo will go togheter to the left.
i have searched about and can't seem to find the answer I am looking for.
I want to know how to move my div down below my fixed header.
#import url(http://fonts.googleapis.com/css?family=Oswald);
body {
width: 100%;
margin: auto;
}
.container {
width: 75%;
margin: 0 auto;
}
.header {
background: #6396bc;
width: 100%;
top: 0;
position: fixed;
}
.logo {
float: left;
font-family: "Oswald", sans-serif;
font-size: 15px;
margin-left: 15%
}
a {
text-decoration: none;
color: white;
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: "Oswald", sans-serif
}
.nav {
float: right;
margin-right: 15%
}
<!DOCTYPE html>
<html>
<head>
<title>team Zeus | Home</title>
<link rel="stylesheet" href="../stylesheets/styles.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1>team Zeus</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Page</li>
<li>Another page</li>
<li>1 other page</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>I copied and pasted some article from Wikipedia in here, you could do that too (to test out the header at the top)</p>
</div>
</body>
</html>
I think it is something to do with the containers, because when I try and resize them with width, it just messes the full page around. I cannot figure it out
Thanks
You mean just move the content down below the header? If that's what you want just position the content div like this:
.div {
position:relative;
top: 100px;
}
i think this will definately help