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.
Related
My question is how do I put the menu in the middle of the header block because I can't figure it out.
I am trying to make a website for my dad's business by using some templates that I find on the internet, this is one of them and I really like but I can't figure out how to center the navbar. I am not the best when it comes to CSS.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: black;
height: 70px;
width: 100%;
}
.navigation-bar ul {
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;
color: white;
text-align: center;
}
.navigation-bar li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
text-align: center;
}
#menu {
float: right;
color: white;
text-align: center;
}
<html>
<link rel="stylesheet" href="index.css" type="text/css">
<head>
<div class="navigation-bar">
<div id="navigation-container">
<img src="images/logo.png">
<ul>
<li>Home</li>
<li>Services</li>
<li>Rent a Boat</li>
<li>Gallery</li>
<li>Contact</li>
<li>Location</li>
</ul>
</div>
</div>
</head>
<body>
</body>
</html>
I rewrote most parts of your code to fix the invalid markup and to include the correct semantic tags for screenreaders. Also, I changed a bit the structure to be semantically correct. Simplified your CSS.
For the invalid Markup, read my comment below your question.
Use the <header>-tag for your header. It is a semantic tag.
The image is part of the header but not part of the navigation, semantically speaking. AS such place it inside the header but not inside the navigation
Use the <nav>-tag for your navigation bar as it is also a semantic tag.
Learn about Flexbox and use it! float is a property to float an element within a text block (like in a newspaper). It is not for aligning purposes. Since 2013 we have Flexbox which is well supported since 2015!
Side Note:
I know this sounds hard but it must be said. If the coding is done for a business Homepage then no unexperienced or beginner without proper skill/knowledge-base should attempt to do it. At least not without the supervision of an experienced coder. A Business Homepage is one of the most important marketing aspects. If you screw this up, then the business will be hurt from it and your dad would lose money!
Then even for experienced coders, it is a NO-GO to just copy code from the internet and include it without correction or knowing what they include. The coder is responsible for the code and can not just state that he didn't write those code pieces originally. It is a coder's job to correct errors such as invalid markups.
body {
margin: 0;
padding: 0;
}
/* ~~ Top Navigation Bar ~~ */
header {
display: flex;
width: auto;
align-items: center; /* vertically center the links */
}
nav {
margin: 0 auto; /* horizontally center the links */
}
nav > ul {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
}
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<header>
<img src="https://via.placeholder.com/50.jpg">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Rent a Boat</li>
<li>Gallery</li>
<li>Contact</li>
<li>Location</li>
</ul>
</nav>
</header>
</body>
</html>
#navigation-container set max-width instread of width.
margin:0 auto will push from left and right side to #navigation-container so it will be center.
I have replace you css with better approach by using display:flex and setting justify-content:center sets it center to horizontally.
Ans it's good practice to use <header></header> tag for header and include it inside of <body> rather than in <head>
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
max-width: 1200px;
/*you just need to set this*/
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.navigation-bar {
background-color: black;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: flex;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
color: white;
text-align: center;
}
.navigation-bar li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
text-align: center;
line-height: 70px;
}
<body>
<header>
<div class="navigation-bar">
<div id="navigation-container">
<img src="images/logo.png">
<ul>
<li>Home</li>
<li>Services</li>
<li>Rent a Boat</li>
<li>Gallery</li>
<li>Contact</li>
<li>Location</li>
</ul>
</div>
</div>
</header>
</body>
I suppose you are trying to center the navbar at the top of the page. To the (.navigation-bar li) class, add the following property: display: inline-block;
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: black;
height: 70px;
width: 100%;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
display: inline-block;
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
color: white;
text-align: center;
}
.navigation-bar li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
text-align: center;
}
#menu {
float: right;
color: white;
text-align: center;
}
So I'm trying to fill in the header part above the border fully in colour. But there seems to be like 3px of white space that's just bordering the entire page. I made the margin and padding for the entire page 0 so I'm a little confused. Here's the page code:
<DOCTYPE html?>
<head>
<title> Brittany Corl - Web Developer</title>
<link rel="stylesheet" href="CSSCoding.css">
<div id="MainHeader"><img id="HeaderPhoto" src="HeaderPhoto.png" height="100 px" width="100 px">
<center><h1>Brittany Corl - Web Developer/Graphic Designer</h1></center></div>
</head>
<body>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Work</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</body>
here's the CSS:
html {
width: 100%;
margin: 0;
padding: 0;
}
h1 {
font-family: tahoma;
font-size: 40px;
padding-top: 30px;
padding-bottom: 29px;
border-bottom: medium solid black;
}
#HeaderPhoto {
float: left;
padding-right: 20px;
}
#MainHeader {
background-color: #e0ffff;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
font-family: verdana;
font-size: 20px;
}
a:link, a:visited {
display: block;
width: 120px;
color: white;
background-color: #99C0F2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #5FA0F5;
}
Add the following to your css.
body {
margin: 0px;
padding: 0px;
}
Try setting the margin and padding to zero for the body of the page.
body
{
width: 100%;
margin: 0;
padding: 0;
}
or just add ,body after HTML
I'm playing around with some HTML5 and CSS3 and trying to build a single static page for now.
Currently working on the navigation menu with one of the items being a drop down menu.
When I hover above the drop down item, the item is pushing the items on its left and right away.
Could someone explain to me why this is happening? I have very little HTML or CSS experience, I just started putting something together.
The CSS is based on many tutorials on the internet for making drop down navigation menu's. I've stripped most of the code down to the "very basic" to get this working.
Edit: Any tips to make the CSS cleaner are welcome as well.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav role="navigation" class="nav-menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Services
<ul>
<li>Design</li>
<li>Development</li>
<li>User Experience</li>
</ul>
</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="content">
Content
</div>
<footer>
Footer
</footer>
</body>
CSS:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 1em !important;
color: #000 !important;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
body {
background-color: #646464;
}
header {
background-color: #444;
margin: 0px;
border: 0px;
height: 2.55556em;
width: 100%;
}
#content {
margin: 0px;
border: 0px;
padding: 0px;
height: 70%;
}
footer {
margin: 0px;
border: 0px;
padding: 0px;
height: 30%;
background-color: white;
}
nav {
margin:0;
padding:0;
text-align:center;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li {
float: left;
margin: 0 20px;
}
nav ul li a {
display: block;
margin: 10px 20px;
background: #444;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 10px 20px;
margin: 0 20px;
}
I think the issue is that your secondary menu UL is wider than your primary menu LI containing it. When the embedded UL switches from display:none to display:block it increases the width of the parent LI.
A couple possible solutions:
specify a width for your main menu LIs, e.g.:
nav ul li {
float: left;
margin: 0 20px;
width: 200px;
}
Use position: absolute to take the embedded UL out of the layout flow, e.g.:
nav ul ul {
display: none;
position: absolute;
}
Both of these options have some issues with your current layout, though, and would required you to rework things a bit. Hopefully this is helpful in terms of pointing you in the right direction.
Try by like bellow:
nav>ul { display: inline-block; list-style: none; }
I have a very plain navigation menu using an unordered list laid out horizontally using display:inline;. The previews in my HTML editor show the page coming together just fine. However, when it's viewed in Chrome and IE, there's a strange padding on top of the nav menu and only on the top. Using the process of elimination, I know this is a problem with my CSS for the <li> tag but I'm not sure what the problem is.
So far I've tried display:inline-block, lowering the font size, setting the <ul> tag in the nav menu to display:inline, and a myriad other things. None seems to be helping. Any advice for where the CSS went wrong? Here is the HTML in question...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul>
<li>welcome</li>
<li>who we are</li>
<li>what we do</li>
<li>contact</li>
</ul>
</div>
<div id="content"> </div>
</div>
</body>
And here is the CSS...
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
}
#header {
background-color: #ffffff;
height: 100px;
}
#wrapper {
width: 960px;
text-align: left;
}
#navigation {
height: 45px;
background-color: #C0C0C0;
font-size: 1.3em;
text-align: right;
}
#navigation a {
color: #00132a;
text-decoration: none;
}
#navigation a:hover {
color: #483D8B;
}
#navigation ul {
padding-top: 10px;
}
#navigation ul li {
display: inline;
list-style-type: none;
padding: 0 30px 0 30px;
}
#navigation-symbol {
font-size: 1em;
}
#content {
background-color: #ffffff;
text-align: left;
font-size: 14px;
}
And for interactive fun there's a jsFiddle as well which shows the exact same phenomenon I'm seeing. Thanks ahead for the advice!
Simply set margin to zero
#navigation ul {
margin: 0;
padding-top: 10px;
}
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.