I'm coding my new portfolio and the navigation on it is in the wrong place and I can't figure out why.
http://i26.tinypic.com/25psi10.png
I want the text to be inline with the lines on the sides but instead it's moved to the right and down and I can't figure out why it's done this.
This is the relevant coding:
body {
padding: 0px;
margin: 0px;
background:url('images/Background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#logo {
background:url('images/Logo.png');
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('images/Nav_Container.png');
width: 427px;
height: 33px;
float: right;
margin-top: 100px;
padding: 0px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
padding: 0px;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
</div>
</body>
</html>
What happens when you decrease the margin-right: 17px;
I believe to your last element you should add less margin-right
You should try to decrease the "font-size: 18px;" and/or "margin-right: 17px;" until the text is positioned as you desire.
[update] Also try to add
#main_nav { float: left; }
to have better control over the position of your links. [update]
It's most likely default padding/margins on your ul and li items. Try zeroing everything out in your CSS like so and then adding it back slowly until you find the point where the menu layout breaks:
#main_nav,
#main_nav li {
margin: 0;
padding: 0;
list-style: none;
}
#main_nav li {
display: inline;
margin-right: 17px; /* lower this value and see if that fixes the layout */
font: 18px century gothic, sans-serif; /* specify a fall back font that's at least the same type as century gothic */
color: white;
}
Instead of adding margin-right, try inserting invisible spacers, like so:
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li> </li>
<li>about me</li>
<li> </li>
<li>gallery</li>
<li> </li>
<li>blog</li>
<li> </li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
That way you don't wind up with unneeded spacing at the end. Give the spacers classnames if you like and set their size until they're just right.
Related
Hi I'm making a site for a project and can't resize or change anything in a logo that I have.
I don't really know what am I doing wrong.
Here's the part with html and when I try to select the logo in css , it won't change in any way.( I've tried to change it's position to the right of navbar,but it still sticks to the left)
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.logo {
float: right;
}
header {
background-color: #c4c4c4;
}
nav {
float: right;
}
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;
}
<html>
<div id="wrapper">
<div id="imports">
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</div>
<header>
<div id="menu">
<img src="https://dummyimage.com/100x100/000/fff.png" alt="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
</html>
I think your .logo class is missing from img
<img src="Logo.png" alt="logo" class="logo">
give img tag logo class
<img src="Logo.png" alt="logo" class="logo">
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>
So Im currently creating a webpage, and I want to put a navigation bar at the top, but for some reason its not showing even though I set the colour of it to black in my CSS. I need the header "JG.OFFICIAL" to be inside the nav since its the logo. But it does not seem to be working well, some advice is appreciated.
My site: https://jgofficial1.000webhostapp.com/index.html
Here is my code:
h1 {
color: white;
font-family: 'Montserrat', sans-serif;
height: 40px;
width: 70px;
}
body {
background-image: url("../images/hello.jpg");
background-size: cover;
position: fixed;
}
nav {
color: black;
height: 60px;
width: 100%;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<nav>
<div class="header-logo">
<h1>JG.OFFICIAL</h1>
</div>
<ul>
<li>HOME
</li>
<li>WORK
</li>
</ul>
</nav>
<h2>There's Still a bit of work to be done, come back soon</h2>
You should declare background: black; in nav if thats what you're looking for.
The CSS property for setting background color is background or background-color and not color.
h1 {
color: white;
font-family: 'Montserrat', sans-serif;
height: 40px;
width: 70px;
}
body {
background-image: url("../images/hello.jpg");
background-size: cover;
position: fixed;
}
nav {
background: black;
height: 60px;
width: 100%;
}
<nav>
<div class="header-logo">
<h1>JG.OFFICIAL</h1>
</div>
<ul>
<li>HOME</li>
<li>WORK</li>
</ul>
</nav>
<h2>There's Still a bit of work to be done, come back soon</h2>
This code will work for you
h1 {
color: white;
font-family: 'Montserrat', sans-serif;
height: 40px;
width: 70px;
}
body {
background-image: url("../images/hello.jpg");
background-size: cover;
margin:0;
padding:0;
}
nav {
background-color: #e76160;
height: 60px;
width: 100%;
}
ul{
list-style: none;
}
li{
display: inline-block;
}
<nav>
<div class="header-logo">
<h1>JG.OFFICIAL</h1>
</div>
<ul>
<li>HOME</li>
<li>WORK</li>
</ul>
</nav>
<h2>There's Still a bit of work to be done, come back soon</h2>
There are other problems besides the background color. I've put in a few inline styles using Chrome that may be helpful to see some possible changes. You also have an element at the bottom with a z-index that's amazingly high. You may want to reconsider that number as I don't know of a good reason to have a z-index that's 2 billion something.
<html>
<head>
<meta charset="utf-8">
<title>JG.OFFICAL</title>
<link rel="stylesheet" href="style.css">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?
family=Montserrat:600" rel="stylesheet">
</head>
<body data-gr-c-s-loaded="true" cz-shortcut-listen="true">
<nav>
<div class="header-logo" style="
display: inline-block;
margin-left: 20px;
margin-right: 50px;">
<h1>JG.OFFICIAL</h1>
</div>
<ul style="
display: inline-block;
margin-left: 650px;">
<li>HOME</li>
<li>WORK</li>
</ul>
</nav>
<h2>There's Still a bit of work to be done, come back soon</h2>
<!-- the rest of your body -->
</body>
I am currently designing a simple web page which will consist of a logo, a horizontal navbar to the right of that, a full width image with a fixed height underneath and if on a certain page, an extra horiontal navbar underneath. Something like this:
HTML
<img src="img/imgicon.jpg" />
<nav id="mainnav" style="float: right />
<img src="img/fixedimg" style="width: 100%; height: 30%; />
<nav id="secondnav" />
The problem I have is that the fixed image is always full size and not fixed. I've tried using a parent container (div) and setting a fixed height on that, however the image always goes full size. The only solution I could find is setting the position of the image to absolute but then the nav bar underneath is hidden under the image, and I don't want to use 20 <br> to get it underneath.
What would be the best possible way to solve this?
Here's a snippet:
body {
font-family: cambria;
margin: 0;
}
/*TOP NAVBAR */
#topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
float: right;
height: 71px;
}
#topnav li {
margin-top: 13px;
float: right;
}
#topnav li a {
display: block;
padding-top: none;
padding: 14px 16px;
text-decoration: none;
font-weight: bold;
color: #4d4d4d;
margin-right: 3px;
}
#topnav li a:hover {
color: blue;
}
.active1 {
color: blue;
}
/*SECONDARY NAVBAR */
#secondnav {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666666;
border-bottom: 5px solid #8c8c8c;
width: 100%;
}
#secondnav li {
float: left;
}
#secondnav li a {
display: block;
padding-top: none;
padding: 14px 16px;
text-decoration: none;
color: white;
margin-right: 3px;
font-weight: bold;
}
#fullwidth {
width: 100%;
}
<DOCTYPE html>
<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="stylesheet/stylesheet.css" />
<title>Website</title>
</head>
<body>
<!--LOGO-->
<div style="width: 100%; height: 71px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" style="float: left; margin-left: 150px; height: 71px; width: 220px;" />
<!--MAIN NAV-->
<ul id="topnav">
<li>LOGIN
</li>
<li>GALLERY
</li>
<li>CONTACT
</li>
<li>INFORMATION
</li>
<li>HOME
</li>
</ul>
</div>
<div style="height: 5%; width: 100%;">
<img src="http://images.freecreatives.com/wp-content/uploads/2016/04/Blue-Scratched-Textured-Background.jpg" alt="welcome" style="width: 100%; height: 5px%;" />
</div>
<!--SECONDARY NAV-->
<ul id="secondnav">
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
</ul>
</body>
</html>
As you can see from the snippet, even though the image is set to small it goes full size, as if I haven't set any attributes at all.
Use css and give the img a class
#fixed {
width: 100% height: 30%;
}
<img src="img/imgicon.jpg">
<nav id="mainnav" style="float: right;>
<img class=" fixed; src="img/fixedimg,png">
<nav id="secondnav"></nav>
I'm currently converting my portfolio mock up into html/css and I've come across something that has confused me.
http://www.mozazdesign.co.cc/
As you can see, the navigation text is positioned in the wrong place; I want it to be inline with the markers. I've looked through the code loads and looked at other websites but can't figure out why it's not working..
This is the exact code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
</body>
body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#logo {
background:url('Images/Logo.png');
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('Images/Nav_Container.png');
width: 427px;
height: 33px;
float: right;
margin-top: 100px;
}
#main_nav li {
list-style-type: none;
display: inline;
font-family: century gothic;
font-size: 18px;
color: white;
margin-right: 17px;
}
Any ideas why it isn't positioned correctly?
Thanks in advance!
Add a new CSS class:
#main_nav
{
position: relative;
top: -10px;
}
Adjust the top value until it looks correct.
The relative position says 'position this element where it naturally occurs' and then you can use 'Top' and 'Left' values (positive values to move it down and right, negative to move it up or left) to modify it's position from it's relative position.