I am new to all this. I cant align the navbar with the logo because for some reason margin-top/ bottom don't seem to work.
<HTML>
<HEAD>
<link href="style.css" rel="stylesheet">
</HEAD>
<BODY>
<div class="nav_header" "nav">
<ul>
<img src="assets/logo2.png" class='title'>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</BODY>
Here is CSS code
body {
background-image: url('assets/bg.png');
background-repeat: repeat;
}
a:link, a:visited {
color: gray;
font-weight: normal;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: white;
}
.nav {
list-style-type: none;
height: 60px;
background-color: #000000;
}
.nav_header {
height: 60px;
background: #000000 left no-repeat;
}
.title {
margin-left: 80px;
}
li {
display: inline-block;
margin-left: 40px;
margin-bottom: 40px;
font-size: 20;
float: none;
}
You code should look like this:
<div class="nav_header" "nav">
<div class="logo">
<img src="assets/logo2.png" class='title'>
</div>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
add css:
.nav_header ul, .nav_header ul li, .nav_header .logo {
float: left;
}
it very recommended to set height and width to div that wrap image.
Try wrapping your image in <li></li> tags and then manage the image dimensions.
Try putting the he <img /> tag outside your <ul><ul> but still inside your <div><div> and then float the <li><li> and the image left.
After a bit of guessing what you actually want to achieve...
You can use CSS vertical-align :
vertical-align: middle;
Then you can also use margin-bottom to further align them if you want.
DEMO
add img in <li> tag
a:link, a:visited {
color: gray;
font-weight: normal;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: white;
}
.nav_header {
height: 60px;
list-style-type: none;
background-color: #000000;
display:block;
}
.title {
margin-left: 80px;
}
li {
display: inline-block;
margin-left: 40px;
margin-bottom: 40px;
font-size: 20px;
float: none;
}
li img {
border:10px solid #333;
}
<div class="nav_header">
<ul>
<li><img src="assets/logo2.png" class='title'></li>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
See JSfiddle:
<div class="nav_header nav">
<img src="https://s.w.org/about/images/logos/wordpress-logo-32-blue.png" class="title" height="32" width="32" />
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
The CSS:
.nav_header {
height: 34px;
padding:13px 0 13px 20px;
background: #000000 left no-repeat;
}
.nav_header > ul,
.nav_header > img{display:inline-block; vertical-align:middle; margin:0; padding: 0;}
li {
display: inline-block;
margin-left: 40px;
font-size: 20;
}
Semantically you'll want to pull your image out of your unordered list. If you set both img and ul as inline-blocks, you can align themselves to eachother. I've vertically centered both image and navigation to your header by compensating the nav's height for some padding (top and bottom).
A few notes about your above code:
The only elements that can be direct descendents of ul and ol are li. If you want to add an img to a list, it has to be included within a li.
Multiple classes need to be inluced within the same double quotations, see nav_header and nav.
Always declare your height and width attributes on your image tags.
Keep a certain standard when writing HTML in regards to using single our double quotations for your attribute value (see title class) and uppercase and lowercase HTML tags.
Related
I've been trying to get all those elements on the same grey background but I don't know why the header and navigation bar are separated, and the logo not being on top of the grey background.
The code:
.header {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
margin:0;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navigation li a:hover {
background-color: #111;
}
<div>
<h2 class = "header" >Personal Portal</h2>
</div>
<div>
<div>
<nav>
<a> <img src="logo.png" alt="Logo" style="float:right; position:relative; "> </a>
<ul id = "navigation">
<li><a class="active" href="Home.htm">Home</a></li>
<li>Opened Tickets</li>
<li>FAQ</li>
<li>Stats</li>
</ul>
</nav>
</div>
<div>
<div id="loggedas" style = "float:right; padding-top:0; background-color:#666; color:#FFFFFF"> Logged in as </div>
This is a very beginner-style question but I can't find the answers I want. Any help is appreciated thank you!
You could try something like this:
<div style="background-color: #666; height: 50px">
<nav style="clear: both">
<ul id = "navigation">
<li><a class="active" href="Home.htm">Home</a></li>
<li>Opened Tickets</li>
<li>FAQ</li>
<li>Stats</li>
</ul>
<h2 class = "header" >Personal Portal</h2>
<div class="rightInfo">
<div id="loggedas" style = "float:right; padding-top:0; background-color:#666; color:#FFFFFF">
Logged in as
</div>
<a>
<img src="logo.png" alt="Logo" style="float:right; position:relative; ">
</a>
</div>
</nav>
.header {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
float: left;
display: inline-block;
margin-top: 0;
}
.rightInfo{
float: right;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666;
float: left;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navigation li a:hover {
background-color: #111;
}
Your three display elements should have a common parent, otherwise, they will not display as you want them to, except if you use position: absolute to position them (I would not recommend that)
To complete the previous answer (regarding the question why the title and nav bar are separated). You have placed those elements in separate divisions each with its own background color. You could correct the situation by removing the margin between them, but: if you want two (or more) things to be on a common background, it is best to set that background on a common parent.
Also, in any case when you're wondering why the browser rendered your code as it did: ask the browser. Press Ctrl-Shift-I (works on Chrome, Chromium and Firefox). It will show you all the applied styles (and exactly where they came from), plus the element size, padding, borders and margins.
I Created this page with the help of some tutorial and I edited the code to attach a text box in the center of the page but the text box is mixing with the navigation menu. Some Help Would be appreciated. I have very less knowledge of html and css so please guide me in a simple way. I searched on the google and also got a w3 article but that did not help as I have used it in the css as yu can can see I have used margin-top , bottom , left and right to solve problem but instead it is mixing or overlapping it self with the navigation menu.
body {
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
div.transbox {
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
margin-top: 200px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<html>
<link href='style.css' rel='stylesheet'>
<ul>
<li>Home</li>
<li>About
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li>Things to do
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li>News</li>
</ul>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</html>
You have to add
.background {
clear: both;
}
This is to clear the float: left that was applied before.
Read more on float
I'm new to HTML and CSS and I'm making my first website. I came across this issue in my project and I can't find the way to solve it. For some reason, my navbar isn't sitting on the top of my page. I also want to know how I can centre my image and also text so it's inline with the box.
CSS/HTML
body {
margin: 0;
padding: 0;
font-family: 'Arial', serif;
background-color: #232323
}
.nav {
background-color: #b73844;
color: #FFFFFF;
list-style: none;
text-align: left
}
.nav > li {
display: inline-block;
padding-right: 25px;
}
.nav > li > a {
text-decoration: none;
color: #ffffff;
}
.nav > li > a:hover {
color: #ffffff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AccountPanda - Home</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<ul class="nav">
<a href="index.html">
<img src="images/logo.png" title="AccountPanda" style="width:225px;height:75px;">
</a>
<li>Accounts</li>
<li>About</li>
<li>FAQ</li>
</ul>
</body>
</html>
vertical-align: middle and line-height: 0 is what you're looking for.
.nav > li {
display: inline-block;
padding-right: 25px;
vertical-align: middle;
line-height: 0;
}
I also wrapped the <a> that holds the image with a li, so all items in the ul are li:
<ul class="nav">
<li>
<a href="index.html">
<img src="//placehold.it/225x75" title="AccountPanda" style="width:225px;height:75px;">
</a>
</li>
<li>Accounts</li>
<li>About</li>
<li>FAQ</li>
</ul>
Plunker Demo here: http://plnkr.co/edit/PUpoQcGn6qexWD1hkDKF?p=preview
Using flex you can align it center. Also your class nav is on a ul element which has its default properties like margin, padding etc. You can either override them or use them. See below.
/* CSS Document */
body {
margin: 0;
padding: 0;
font-family: 'Arial', serif;
background-color: #232323
}
.nav {
background-color: #b73844;
color: #FFFFFF;
list-style: none;
text-align: left;
margin: 0;
display: flex;
align-items: center;
padding: 10px;
}
.nav > li {
display: inline-block;
padding-right: 25px;
}
.nav > li > a {
text-decoration: none;
color: #ffffff;
}
.nav > li > a:hover {
color: #ffffff;
}
<body>
<ul class="nav">
<a href="index.html">
<img src="images/logo.png" title="AccountPanda" style="width:225px;height:75px;">
</a>
<li>Accounts</li>
<li>About</li>
<li>FAQ</li>
</ul>
</body>
I searched Stack overflow and google and tried all the suggestions to getting my h1 and nav on the same line. I tried inline, inline-block, setting the header itself to 100%. It's just not aligning. On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning. here's my code
.header{
background-color: #00001a;
height: 40px;
width: 100%;
}
ul{
list-style-type: none;
}
.header h1{
float: left;
color: #ffffff;
font-size: 15px;
display: inline-block;
}
.nav li{
float: right;
display: inline-block;
color: #ffffff;
}
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
<div class="Maincontent">
<div class="container">
<h2>Try It</h2
<p>Today's Try It Recipe!<p>
</div>
</div>
display: flex; justify-content: space-between; will put them on the same line and separate them with the available space.
.header {
background-color: #00001a;
padding: 0 1em;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
list-style-type: none;
}
.header h1 {
color: #ffffff;
font-size: 15px;
}
.nav li {
color: #ffffff;
display: inline-block;
}
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
Put the heading and the navigation in their own containers. Float one left, the other right, and make sure to clear them afterwards.
header {
background-color: #00001a;
padding: 0px 10px;
box-sizing: border-box;
}
h1 {
color: white;
margin: 5px 0;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
color: white;
margin-left: 20px;
}
<header>
<div class="left">
<h1>
EaTogether
</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
<li>Couples</li>
<li>Family</li>
</ul>
</div>
<div class="clear"></div>
</header>
Note: I've changed "Togeter" to "Together", assuming it was a typo.
I am not sure if you want this thing but I just gave a try,
For this, set float:right to ul element and not on li elements.
Since you want to align h1 and li content set line-height to 0.5 for ul element
please check this fiddle: https://jsfiddle.net/hz0104mp/
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
<div class="Maincontent">
<div class="container">
<h2>Try It</h2>
<p>Today's Try It Recipe!<p>
</div>
</div>
.header{
background-color: #00001a;
height: 40px;
width: 100%;
}
ul{
list-style-type: none;
}
.header h1{
color: #ffffff;
font-size: 15px;
display: inline-block;
}
.nav ul{
float:right;
line-height:0.5;
}
.nav li{
display: inline-block;
color: #ffffff;
}
I like the flexbox method mentioned by #Michael Coker but here's a solution using floats as the OP attempted to do.
You were on the right track but might have been applying some of your CSS to the wrong elements for the wrong reasons.
On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning.
The reasons for this are not obvious until you break things down. The reason this happens is because float: right is applied to each element separately and in the order they appear in the markup, not as a whole. The browser will float Home as far to the right as it can. After that, it will move About as far to the right as it can. Rinse and repeat for any other li.
I rectified this by floating the ul instead of individual li and setting those to display: inline;. Floating the li to the left would also work.
header {
padding: 0 0.5rem;
height: 40px;
color: #ffffff;
background-color: #00001a;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
header h1 {
margin: 0;
font-size: 15px;
display: inline-block;
}
header h1,
.nav li {
line-height: 40px;
}
.nav {
float: right;
}
.nav li {
padding: 0 0 0 0.25rem;
display: inline;
}
<header>
<h1>Eat Together</h1>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Couples</li>
<li>Family</li>
</ul>
</header>
<main>
<h2>Try It</h2>
<p>Today's Try It Recipe!<p>
</main>
Please note that I took a few liberties with your markup to help provide an example of how it can be more semantic and achieved with less markup (along with a few choice styles to make it a little more "pretty").
I am having a problem when using the css property margin-top on <li> elements.
I am trying to have my list align to the top of the page but my li element isn't moving to the top as it should.
Below is my HTML code:
<body>
<div class="main_header">
<h1>Title</h1>
<ul>
<li>About Me</li>
<li>Order</li>
<li>Designs</li>
<li>Contact</li>
</ul>
</div>
</body>
This is my CSS code:
.main_header li a {
margin-top: -20px;
display: inline-block;
}
If your looking for a inline navigation style ul change the css to:
.main_header li {
margin-top: -20px;
display: inline-block;
}
If your looking to move the whole list up try:
ul {
margin-top:-10px;
}
If your looking to move just the li elements closer to each other try:
.main_header li {
display: block;
}
Note - if your looking to have a inline navigation, use the <nav> html element instead to reduce styling, as it automatically places the links inline
Replace
.main_header li a{
margin-top: 20px;
display: inline-block;
}
by
.main_header li {
margin-top: 20px;
display: inline-block;
}
Output
Check it out.
From what I can gather - you're wanting to do something like this...
HTML
<div class="main_header">
<h1>Title</h1>
<ul>
<li>About Me</li>
<li>Order</li>
<li>Designs</li>
<li>Contact</li>
</ul>
</div>
CSS
.main_header {
width: 500px;
margin: 0 auto;
}
.main_header ul {
list-style: none;
margin: 0;
padding: 0;
}
.main_header li:first-child {
border-left: 1px solid #ccc;
}
.main_header li {
display: inline-block;
margin: 0;
padding:10px;
border-right: 1px solid #ccc;
}
Codepen
http://codepen.io/anon/pen/zKxGPY