Pretty frustrating when something as simple as this has me stuck! I've tried many different things, but for some reason, it's stuck in the vertical display.
Relevant HTML
body {
margin: 0 auto;
max-width: 90%;
min-width: 45%;
background-color: #dadada;
height: 100%;
}
header {
background-color: black;
max-width: 90%;
min-width: 45%;
margin: 0 auto;
margin-top: 1%;
font-family: typographica;
padding: 45px;
}
.logo h1 {
text-align: center;
}
h1 {
color: white;
font-size: 300%;
margin-left: 3%;
position: absolute;
top: 2%;
}
ul li a {
color: white !important;
text-decoration: none;
width: 50%;
position: relative;
}
.nav li {
float: none;
display: inline;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Title</title>
<link href="../Style Docs/Home-page.css" type="text/css" rel="stylesheet" >
</head>
<body>
<header>
<div type="logo">
<h1>Name</h1>
</div>
<div type="head-wrap">
<ul type="nav">
<li>Home</li>
<li>Discover</li>
<li>Upload</li>
<li>More</li>
</ul>
</div>
<div id="decoration-banner">
</div>
</header>
</body>
</html>
Like I said, I've tried a lot of different things, but I must be missing something. I'm not sure if it's because of the way I wrote my html or what, but I haven't had this problem before..
Your CSS is looking for a class called .nav. If you look at your <ul>, you meant to use the attribute class but instead used type.
<ul type="nav">
</ul>
Should be
<ul class="nav">
</ul>
In your CSS you're calling a .nav li. If you call with a dot, you call a class in CSS.
Just renamed type by class and it works now.
body {
margin: 0 auto;
max-width: 90%;
min-width: 45%;
background-color: #dadada;
height: 100%;
}
header {
background-color: black;
max-width: 90%;
min-width: 45%;
margin: 0 auto;
margin-top: 1%;
font-family: typographica;
padding: 45px;
}
.logo h1 {
text-align: center;
}
h1 {
color: white;
font-size: 300%;
margin-left: 3%;
position: absolute;
top: 2%;
}
ul li a {
color: white !important;
text-decoration: none;
width: 50%;
position: relative;
}
.nav li {
float: none;
display: inline;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Title</title>
<link href="../Style Docs/Home-page.css" type="text/css" rel="stylesheet" >
</head>
<body>
<header>
<div type="logo">
<h1>Name</h1>
</div>
<div type="head-wrap">
<ul class="nav">
<li>Home</li>
<li>Discover</li>
<li>Upload</li>
<li>More</li>
</ul>
</div>
<div id="decoration-banner">
</div>
</header>
</body>
</html>
I can think of these two possible ways of doing it:
1. change it into a table
<table style="width:50%; margin-left: auto; margin-right: auto;">
<tr>
<td>
Home
</td>
<td>
Discover
</td>
<td>
Upload
</td>
<td>
More
</td>
</tr>
</table>
2. Use flex and flex-direction
<div type="head-wrap" >
<ul type="nav" style="display: flex; flex-direction: row">
<li>Home</li>
<li>Discover</li>
<li>Upload</li>
<li>More</li>
</ul>
</div>
Related
I'm making a website from scratch and all I currently have is the NAV bar. But I figured I'd get this problem solved before I continue on with development. Anytime I minimise the browser, my nav bar will not stay in a straight line. I've included the code below. The text editor I use is Brackets, I've tried multiple things for the past week but nothing has worked.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 86.5%;
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
}
.header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 0.5%;
}
nav {
float: right;
position: relative;
top: 0px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 99px;
padding-top: 25px;
position: relative;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
You are probably looking for something like this.
When I'm stuck with a layout and I cannot get it right, I start by adding borders to each element. This way you see how each element is spaced on the page and based on that I start to tweak CSS properties to place items in its place. Obviously, the more you work with CSS the easier it gets. Once I'm happy with the layout I then remove the borders.
Adjustments I've made:
Made the header full width so it covers the entire width of the page
Gave the logo 20% width of the page.
The remaining space 80% is taken up by the menu
Then each list-item is allowed to take up 20%.
If you resize the page, you'll see that by using percentages it will assign space properly. I hope this helps you along and good luck with the rest of the page.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
border: 1px solid black;
}
.logo {
float: left;
width: 19%;
border: 1px solid blue;
}
nav {
float: right;
position: relative;
top: 0px;
width: 80%;
border: 1px solid yellow;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
}
nav li {
position: relative;
display: inline-block;
width: 20%;
margin: 1rem 0;
border: 1px solid red;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
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>
I have a navigational bar as a list- that's required for my assignment. Anyways, I'm trying to center it but it's not quite working. What's happening is I'm having to specifiy specifc margins. I'm quite new to CSS and HTML.
{
background-color: #bdd2ed;
text-align: center;
}
h1,h2
{
font-family: sans-serif;
}
ul.navigbar
{
margin: 0 auto;
display: block;
width: 100%;
}
li.navigbar
{
list-style-type: none;
width: 10%;
text-align: center;
float: left;
}
a.navigbar
{
text-decoration: none;
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>china_travel.html</title>
<link rel="stylesheet" type="text/css" href="travel.css">
</head>
<body>
<img src="images/flags/china_flag.jpg" height="50" width="75" alt="Flag of China" title="Flag of China" class="center">
<h1 class="center">China Travel Deals</h1>
<ul class="navigbar">
<li class="navigbar">Home</li>
<li class="navigbar">Australia Travel</li>
<li class="navigbar">Brazil Travel</li>
<li class="navigbar"><a href="china_travel.html" class="navigbar">China Travel</li>
<li class="navigbar"><a href="us_travel.html" class="navigbar">United States Travel</li>
</ul>
</body>
</html>
You can use this code:
See live demo: https://output.jsbin.com/vukisat
https://jsbin.com/vukisat/14/edit?html,css,output
HTML:
<!DOCTYPE html>
<html>
<head>
<title>china_travel.html</title>
<link rel="stylesheet" type="text/css" href="travel.css">
</head>
<body>
<img src="images/flags/china_flag.jpg" height="50" width="75" alt="Flag of China" title="Flag of China" class="center">
<h1 class="center">China Travel Deals</h1>
<ul class="navigbar">
<li>Home</li>
<li>Australia Travel</li>
<li>Brazil Travel</li>
<li><a href="china_travel.html">China Travel</li>
<li><a href="us_travel.html">United States Travel</li>
</ul>
</body>
</html>
CSS:
body{
background-color: #bdd2ed;
text-align: center;
}
h1,h2{
font-family: sans-serif;
}
ul.navigbar{
margin: 0px;
padding: 0px;
display: block;
width: 100%;
}
.navigbar li{
list-style-type: none;
width: 10%;
text-align: center;
display:inline-block;
}
.navigbar li a{
text-decoration: none;
display:block;
}
You can use flexbox. Though I am not very sure exactly what you are looking for.
https://jsfiddle.net/8pycp48z/
ul.navigbar
{
margin: 0 auto;
display: flex;
width: 100%;
justify-content: space-around;
padding: 0;
}
Mathy answer (will size and center for any number of items, with any padding)
HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
CSS:
ul {
padding: 0px;
margin: 0px;
float: left;
position: relative;
left: 50%;
}
li {
padding: 0px;
margin: 0px;
float: left;
position: relative;
right: 50%;
list-style: none;
padding: .5em;
background-color:red;
}
Fiddle: https://jsfiddle.net/xc4yktc5/
Beware: You may run into issues with overflow on the main UL.
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
I have a menu bar and i want to drop the profile tag so I put an <ul>
<html>
<head>
<title><?php $title; ?></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">
<div class="centrado-fluid">
<div class="loginregister"></div>
<div class="espacio"></div>
<div class="menu">
<p class="menuleft">Home</p>
<p class="menuleft">Películas</p>
<p class="menuleft">Series</p>
<input class="buscador" type="text" placeholder="Busca">
<p class="menuright">Añadir Serie</p>
<p class="menuright">Añadir Película</p>
<ul><p class="menuright">Profile</p></ul>
</div>
<hr class="linea">
</div>
</head>
<body>
When I put the <ul> the <p> profile comes down
This is the css
.centrado-fluid {
height: 100%;
width: 80%;
background-color: #ffffff;
margin: 0 auto;
}
.menu {
height: 44px;
width: auto;
/*background-color: blue;*/
background: url("../img/slash-layer.png") repeat scroll 0% 0% rgb(99, 99, 130);
border-radius: 15px;
padding-top: 10px;
}
.espacio {
height: 10px;
}
.menuleft {
width: 100px;
height: auto;
margin-top: -2px;
margin-left: 15px;
text-align: center;
background-color: yellow;
border-radius: 10px;
font-family: hasa;
font-size: 20px;
padding-top: 5px;
display: inline;
}
.buscador {
height: auto;
margin-top: -2px;
margin-left: 7%;
text-align: center;
background-color: whitesmoke;
border-radius: 10px;
font-family: hasa;
font-size: 20px;
padding-top: 5px;
display: inline;
}
.menuright {
height: auto;
margin-top: -2px;
float: right;
margin-right: 15px;
text-align: center;
background-color: yellow;
border-radius: 10px;
font-family: hasa;
font-size: 20px;
padding-top: 5px;
display: inline;
}
How I can return it up?
To markup your menu, you can do something like this - JSFiddle Demo
HTML
<ul class="menu">
<li>link</li>
<li>link</li>
<li>link</li>
<li class="right">link</li>
<li class="right">link</li>
</ul>
CSS
* { margin:0; padding:0; }
ul.menu { float:left; width:100%; }
ul.menu li { float:left; margin:0 10px; list-style: none;}
ul.menu a { display:inline-block; padding:5px 10px; background:yellow; }
ul.menu .right { float:right;}
<ul> tag has default margin and space like paragraph. So don't use UL tag. Simple use <p> tag
Your HTML has some problems with validity. Try using http://validator.w3.org/#validate_by_input for checking your code:
You are closing <head> too late; starting from <div class="centrado-fluid"> you have to wrap everything inside a <body>
<p> is not allowed inside of <a>, but the other way round.
The only element allowed as children of <ul> is <li>
The best way to fix your problem would be to fix your HTML before going for the original problem.