trying to get my first HTML/CSS uni assignment sorted but have become a bit stuck on this. My body tag doesn't sit at the top of the page. I can ensure it does by giving it a negative margin, but I shouldn't need to do that, right? Any help would be much appreciated, thanks.
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PhotArt</title>
<link href="main.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--begin container -->
<div id="navigationContainer">
<!-- begin navigation bar -->
<div id="navigationBar">
<ul>
<li><a class="logo" href="index.html">PhotArt</a></li>
<li><a class="active" href="index.html">Home</a></li>
<li>Create your art</li>
<li>Framing</li>
<li>Originals</li>
<li>About us</li>
<li>Contact us</li>
</ul>
There are a few other paragraphs after this but I doubt the html is causing any issues.
And then the CSS looks like this:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
border: 0;
}
#navigationContainer {
background-color: #2f2f38;
padding: 0;
margin: 0 auto;
}
#navigationBar {
padding: 0em 0em 10em 0em;
background-color: #2f2f38;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#navigationBar ul {
margin-left: auto;
margin-right: auto;
width: 900px;
padding: none;
}
#navigationBar li {
list-style-type: none;
display: inline;
font: 1em "Trebuchet MS", Helvetica, sans-serif;
}
#navigationBar .active {
color: #ffffff;
}
#navigationBar .logo {
font: 3.5em "Trebuchet MS", Helvetica, sans-serif;
color: #fcfcfc;
}
#navigationBar li a {
text-decoration: none;
color: #a6a4a4;
margin-right: 30px;
}
#navigationBar li a:hover,
#navigationBar li a:active {
color: #ffffff;
}
You need to edit your CSS and add margin-top: 0px; to navigation bar:
#navigationBar ul {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 900px;
padding: none;
}
Try adding margin-top:0px; to #navigationBar
I also assume you've closed all your divs/tags in code below what you've given us.
Related
I am currently making my first mockup website, fiddled around with making a navbar and having a logo on it. I've managed to do it, but now when I try to add the 'name' onto the navbar it won't show up.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #333;
height: 70px;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
float: right;
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!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/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I've tried moving the text around to different places, but it ends up moving the navbar to be under the text.
You have set .navigation-bar ul to be float: right. float removes items from the normal flow of the page, which is why it is leaving your navbar.
You can fix this using flexbox, by adding the following rules to .navigation-bar ul:
.navigation-bar ul{
...
display: flex;
justify-content: right;
}
Here are some extra observations on your code, that are unrelated to the main problem
There are several places where you have hardcoded the height of the navbar - this could instead be replaced with a CSS variable - i.e.
:root{
--navbar-height: 70px;
}
.logo {
height: calc(var(--navbar-height) - 10px);
}
#navigation-container {
height: var(--navbar-height);
}
.navigation-bar {
height: var(--navbar-height);
}
/* etc */
You should try to avoid pixel units where possible as these are not responsive - instead, the preferred unit is rems.
However, in this case I don't actually think you need to set the height - the content inside (i.e. the header, logo and navbar) should instead make the header resize. This is particularly important for responsive pages.
Adapted code:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
}
.navigation-bar {
background-color: #333;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
display: flex;
justify-content: right;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!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/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</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.
Should be a common and not a rare question, but still I tried everything and nothing worked. So maybe this time somebody can help and this question will be for everyone to check their mistakes.
So I am making Car Service website, I am a bit of a beginner in both HTML and CSS.
This is the normal full screen mode of my browser and it looks fine:
As soon as I resize my browser size this happens with navbar
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="img/header.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services
<li>Registration
<li>Contact</li>
<li>Profile</li>
</ul>
</nav>
</div>
</header>
</body>
CSS CODE:
body{
margin: 0;
padding: 0;
background-color: black;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background-color: #25DE8B;
}
header::after{
content: '';
display: table;
clear: both;
}
.logo{
float: left;
padding: 10px 0;
}
nav{
float: right;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 35px;
position: relative;
}
nav a{
color: #012b4f;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
nav a:hover{
color: #28AA1A;
}
nav a::before{
content: '';
display: block;
height: 8px;
width: 0%;
background-color: #012b4f;
position: absolute;
top: 0;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
I need to change code so my navbar stays on its place in any case. Thanks for any help.
you use px as your units. you should use % or something else that is relative to the size of the page.
you can see more information in this link:
https://www.w3schools.com/cssref/css_units.asp
I'm new to HTML and CSS and am trying to make a menu bar. I placed a navigation bar inside a div assuming that it would kind of be in the center. Instead, it appears to sit on the bottom. Also, how could I position the navigation bar so it's not just floating to the left or the right.
Side question, how can I have it so the menu bar completely extends to the edge of the screen. Like the one at the top of this site.
Here's the code:
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Is this what you want?
I have added margin:0; to the ul.
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</body>
</html>
Other ways this could have been done would have by messing with top and bottom margins(depending on what specific ratios you want). Using this way will get you specifically what alignment you want vertically.
I just started learning HTML/CSS and am trying to make a personal site from scratch (no CSS tools)
When I tested my site in Firefox and IE last night it looked nice and clean as seen
When I tested my site in Chrome my links got moved around:
Does anybody know what happened here?
This is my markup:
<!DOCTYPE html>
<html>
<head>
<title>Home | Some Website!</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 960px;
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
background-color: #FFFFF0;
margin: 0 auto;
}
#header {
border-style: solid;
}
#header img {
margin: 4px 0px 0px 4px;
}
#header ul {
list-style-type: none;
display: inline;
margin: 25px 30px 0px 0px;
float: right;
font-size: x-large;
}
#header ul li {
display: inline;
margin: 0 30px;
}
#header li a:link {
color: #FF00FF;
text-decoration: none;
}
#header li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="header">
<img src="http://i.imgur.com/YbAx7y1.png" alt="Temp Logo!">
<ul>
<li>About Me</li>
<li>Résumé</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Change #header ul css definition fromdisplay: inline; to display: inline-block;.
Every browser interprets things differently. You should be more specific than body { font-size: small }. I recommend using a px value unless you really intend to leave it up to the browser.