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.
Related
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>
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>
My website has a vertical navigation bar to the left, so when I center text it is centered but not centered in the green section.
.sidebar {
position: fixed;
height:100%;
left: 0;
top: 0px;
width: 300px;
background:#6495ED;
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
background-color: #6495ED;
}
li a {
display: block;
color: #000000;
padding: 8px 0 8px 16px;
text-decoration: none;
font-size: 50px;
font-family: "Verdana", Geneva, sans-serif;
}
li a:hover {
background-color:#27C0FD;
color: #000000;
}
<html>
<link rel="stylesheet" type="text/css" href="css.css">
<body bgcolor="#81F781">
<head>
<h1> Informational Tech Site</h1>
</head>
<body>
<div class="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
Code is here. http://pastebin.com/xgvt4P0a
Here is the image the text is centered, but not centered in the green section. https://imgur.com/kkDlnik
Thanks!
You are using wrong HTML, So i will not go any forward.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body bgcolor="#81F781">
<div id="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="content">
<h1> Informational Tech Site</h1>
<div>
</body>
</html>
You have specified an absolute width to your sidebar, which in general is fine. But your <h1> is declared outside of your sidebar container (which, as already said, has a fixed width). To put your <h1> into the center, just specify a padding-left: 300px; (as already mentioned a few times by others in here) to your <h1> or, and that's more responsive for future purposes, wrap your sidebar and <h1> inside a parental container, so your sidebar and <h1> will automatically fit into that parent container. While doing so, using text-align: center; on your <h1> should work without a padding.
As per you code add margin-left:300px; to h1 will make your h1 in proper center.
Because your sidebar is fixed and having width:300px.
And why your have h1 in head section.
.sidebar {
position: fixed;
height: 100%;
left: 0;
top: 0px;
width: 300px;
background: #6495ED;
}
h1 {
text-align: center;
margin-left: 300px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
background-color: #6495ED;
}
li a {
display: block;
color: #000000;
padding: 8px 0 8px 16px;
text-decoration: none;
font-size: 50px;
font-family: "Verdana", Geneva, sans-serif;
}
li a:hover {
background-color: #27C0FD;
color: #000000;
}
<html>
<link rel="stylesheet" type="text/css" href="css.css">
<body bgcolor="#81F781">
<head>
<h1> Informational Tech Site</h1>
</head>
<body>
<div class="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
Fiddle
Add padding-left:300px to body
This is something to do with layouts.
Anyhow, as your side bar width is 300px and fixed positioned, you could just add padding-left:300px to body, so any content added will be aligned into the green place.
Here you go:
.sidebar {
position: fixed;
height:100%;
left: 0;
top: 0px;
width: 25%;
background:#6495ED;
}
#Content {
width: 75%;
float: right;
}
jsFiddle
You need another div to put h1 to it then use percentage for width of both divs, mean new div called content and sidebar. your issue is h1 got full width of your page because your sidebar has fixed position and you need to use percentage width to keep them equal. just a float: right for content and width: 75%; and 25% width for sidebar will solve your problem.
First, your elements isn't sorting well, you have to write the <h1> inside the <body> tag not in <head>
To center the h1 you have to add 300px padding in left, because your 'fixed' positioning sidebar isn't take physical place in body canvas, so, if you're using 'fixed' or 'absolute' positioning it's not taking effect in positioning of other elements.
Use following css for .sldebar rule:
.sidebar {
position: fixed;
height: 100%;
left: 50%;
top: 0px;
width: 300px;
background: #6495ED;
transform: translateX(-50%);
}
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'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.