I am currently creating a website for my friend, but I ran into an issue. A very irritating one. I have a header (a div with the id of header) and an ul inside of it. I added my <img src="filename.extension" id="logo"> into my header div, but it appears underneath the actual header. I did float: right; thinking it would appear inside the header but it doesn't. And I added a border of 1px around the ul to see if it took up to much space, but there were enough space left for the logo to fit.
Here's my code:
(HTML)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="headercon">
<ul>
<li>Home</li>
<li>About</li>
<li>Vote</li>
<li>Rules</li>
<li>Discord</li>
<li>Status</li>
</ul>
</div>
<img id="logo" src="vglogo.png">
</div>
</body>
</html>
(CSS):
#header {
width: 100%;
height: 60px;
position: absolute;
top: 0;
background-color: #ededed;
border-bottom: 5px solid #dddddd;
}
body {
margin: 0;
padding: 0;
}
#header>#headercon>ul {
display: flex;
line-height: 10px;
font-size: 25px;
}
#headercon {
display: block;
width: 60%;
height: auto;
margin-right: 500px;
margin-left: 100px;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
padding: 0 10px;
}
#logo {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"> </head>
<body>
<div id="header">
<div id="headercon">
<ul>
<li>Home</li>
<li>About</li>
<li>Vote</li>
<li>Rules</li>
<li>Discord</li>
<li>Status</li>
</ul>
</div> <img id="logo" src="vglogo.png"> </div>
</body>
</html>
You may expected it like this?
body {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 60px;
position: fixed;
top: 0;
left:0;
background-color: #ededed;
border-bottom: 5px solid #dddddd;
}
#header>ul>li {
float:left;
list-style-type: none;
}
#header>ul>li>a {
font-size: 25px;
text-decoration: none;
color: black;
padding: 0 10px;
}
.logo {
float: right!important;
right:40px;
position: relative;
top: -10px;
}
.logo img{
height:50px
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<ul>
<li>Home</li>
<li>About</li>
<li>Vote</li>
<li>Rules</li>
<li>Discord</li>
<li>Status</li>
<li class="logo"><img id="logo" src="https://static1.squarespace.com/static/579d30036a49638cd66ee855/57a69cadb3db2b8908f27da1/57a69d90e6f2e1f140d7bcfa/1470542795812/Intel_logo.png"></li>
</ul>
</div>
</body>
</html>
Related
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 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 have looked online and tried different things to make the contact form be centered when the screen is or gets smaller. The header and navbar are responsive, the contact form is not. Also, my code was in two separate sheets on here and then the website randomly combined them. You can break them apart if you know how.
body {
margin: 0;
padding: 0;
font-family: 'arial', serif;
}
.nav {
background-color: #ffb6c1;
color: #ffffff list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
img {
max-width: auto max-height: auto;
}
.nav>li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav>li>a {
text-decoration: none;
color: #ffffff
}
.nav>li>a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner>.bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav {
margin: 0;
}
.cognito {
margin: 0 auto;
width: 100px;
}
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Events.css">
<link rel="stylesheet" type="text/css" href="contactusmobile.css" media="screen and (max-width: 900px)">
</head>
<body>
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<style>
.cognito {
position: absolute;
margin-top: 20px;
margin-left: 450px;
}
body {
background: url('heartcoffee.jpeg');
background-repeat: no-repeat;
background-size: 2000px 1000px;
}
</style>
<div class="cognito">
<script src="https://services.cognitoforms.com/s/q8sF4QFeokuqNI1bQZm3vg">
</script>
<script>
Cognito.load("forms", {
id: "1"
});
</script>
</div>
</body>
</html>
It’s useless post all code of your problem request.
However, for center a form inside a div container you can use:
.center{
margin:0 auto;
}
Else inside a position:relative; container:
.center{
position:absolute;
left:50%;
transform:translateX(-50%);
top:0;
}
What I want to do
I would like to display the navigation bar inline with the header for the site I am creating.
HTML and CSS
header {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
background: blue;
}
#logo, nav {
float: left;
}
#logo {
width: 40%;
background: red;
color: white;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 24px;
}
nav {
width: 60%;
background: #333;
height: 100px;
position: relative;
}
#top-nav {
position: absolute;
bottom: 0;
}
#top-nav li {
float: left;
background: #333;
}
#top-nav li a {
display: block;
color: white;
text-decoration: none;
padding: 14px 16px;
}
#top-nav li:hover > a {
background: #111;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content li {
float: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<div id="logo">
<span>My Site</span>
</div>
<div style="clear:both;"></div>
<nav>
<ul id="top-nav">
<li>Item</li>
<li class="dropdown">
Item
<ul class="dropdown-content">
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Item</li>
<li>Item
<li>
</ul>
</nav>
<div style="clear:both;"></div>
</header>
</body>
</html>
What broke the code
Adding padding: 10px; to header seems to have broken the code, as it was working fine previously, as in the nav bar was displaying properly inline with the header. I cannot seem to get my head around the issue, I really do not see what causes it.
Also, I understand that this is not Code Review, but any remarks as to what can be improved upon/formatted differently in the code will be appreciated.
You should remove the <div style="clear:both;"></div> div to display the nav bar inline with the logo.
Also add this to your css to eliminate list styling:
ul {
list-style-type: none;
}
Adding 10px of padding to your header makes it wider than 1000px, it will be 1020px wide. To prevent this, you should use box-sizing: border-box.
More information: https://www.w3schools.com/css/css_boxmodel.asp
EDIT:
That's not the problem here, I misread your question. The div's were not inline, because of the div with inline styling clear: both, since it clears the floating within the parent div.
If you remove it, the #logo and nav will be floating next to each other:
header {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
background: blue;
}
#logo, nav {
float: left;
}
#logo {
width: 40%;
background: red;
color: white;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 24px;
}
nav {
width: 60%;
background: #333;
height: 100px;
position: relative;
}
#top-nav {
position: absolute;
bottom: 0;
}
#top-nav li {
float: left;
background: #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<div id="logo">
<span>My Site</span>
</div>
<nav>
<ul id="top-nav">
<li>Item</li>
<li class="dropdown">Item
<ul class="dropdown-content">
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Item</li>
<li>Item<li>
</ul>
</nav>
<div style="clear:both;"></div>
</header>
</body>
</html>
You have unwanted <div style="clear:both"></div> the one under logo immediately, remove it and your issue will be fixed, check the snippet below:
header {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
background: blue;
}
#logo, nav {
float: left;
}
#logo {
width: 40%;
background: red;
color: white;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 24px;
}
nav {
width: 60%;
background: #333;
height: 100px;
position: relative;
}
#top-nav {
position: absolute;
bottom: 0;
}
#top-nav li {
float: left;
background: #333;
}
#top-nav li a {
display: block;
color: white;
text-decoration: none;
padding: 14px 16px;
}
#top-nav li:hover > a {
background: #111;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content li {
float: none;
}
ul {
list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<div id="logo">
<span>My Site</span>
</div>
<!-- This clear div is making your nav below the logo-->
<!--<div style="clear:both;"></div>-->
<nav>
<ul id="top-nav">
<li>Item</li>
<li class="dropdown">
Item
<ul class="dropdown-content">
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Item</li>
<li>Item
<li>
</ul>
</nav>
<div style="clear:both;"></div>
</header>
</body>
</html>
Update
As #A. Ahmed mentioned, you could also insert this rule:
ul {
list-style-type: none;
}
To beautify the design.
I am having some problems with floated nav. As can be seen in the first image below, I use position in my code and the result is that the nav is floated above the logo when I scaled the browser.
But I want the nav and the logo to be separated (like the second image) whenever I scale the browser. What should I do?
Are there any other ways to do that without using float?
This my my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<style>
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav{
float: right;
position: absolute;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="images\logo.png" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
There are many ways to do that. Here's one:
Add this to your style:
nav {margin-left: 50px;}
Here is one version where nav floats right: jsfiddle
CSS:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
margin-left: 50px;
}
/* width is set to 80% and nav floats right, no pos absolute */
header nav{
float: right;
width: 80%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
This is other method using display:flex.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header {
display: flex !important;
justify-content: space-between;
}
.logo img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
#media screen and (max-width:1024px){
.logo {
width: 20%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/250x150/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
You might need to adjust the widths a little bit. You can add max-width and min-with to both your logo and nav too.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
/* add the width and margin to your logo class*/
header .logo{
float: left;
margin-right:2%;
width:26%;
}
/* make sure your image has a width */
header .logo img{
width:100%;
}
/* add the width to your nav class */
header nav{
float: right;
width:70%;
padding-top:5%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
This is one method using float:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav {
float: right;
position: relative;
margin-top: 35px;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
#media screen and (max-width:1169px){
header .logo {
width: 19%;
}
}
#media screen and (max-width:767px){
header .logo {
width: 15%;
}
header a {
padding: 5px;
font-size: 14px;
}
header nav {
margin-top: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>