I am trying to center my navigation bar but every way I have tried so far results with either the navigation bar not centered or it is centered but the links aren't in one line. I would also like to keep the logo in line with the navigation bar but floating left. I tried adding a container class and a nav id but I don't think that did anything. Please Help!
Here is my html:
<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" type="text/css" href="HCstyle.css">
<title>Hockey Corner</title>
</head>
<body>
<div>
<img class="logo" src="images/Hockey Corner logo real png.png" alt="Hockey Corner logo">
</div>
<div class="container">
<div id="nav">
<div class="wrap">
<ul>
<li>Our Sponsers</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</body>
</html>
And here is my css:
img.logo{
float:left;
width:10%;
padding-left:5%;
}
ul{
list-style-type:none;
margin:0;
padding-left:20px;
padding-right:20px;
display:inline-block;
overflow:hidden;
float:right;
}
li{
display:inline-block;
}
li a{
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a:hover{
background-color:#34495E;
}
body{
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("images/Background1.jpg");
background-size:cover;
background-repeat:no-repeat;
}
.nav{
float:left;
text-align:left;
}
.container{
text-align:center
}
Using flex property will solve your problem. Learn more here.
Working code: https://codepen.io/Sahero/pen/rzmVjN
You should change your CSS Code .nav to #nav.
There are a lot of way to make located your logo.
I'd like to recommend display:flex.
You can find easy about flex.
Related
I'm confused in this specific part of code. If anyone could explain to me, it'd be greatly appreciated!!
I'm making a navbar and it looks like this:
This is part of the CSS I'm confused about:
img{
weight:100px;
height:100px;
border-radius: 100%;
}
body{
margin:0;
}
header{
background-color: lightblue;
}
/*don't really understand this part*/
header::after{
content:" ";
display:table;
clear:both;
}
.container{
width:80%;
margin:0 auto;
}
.logo{
float:left;
padding:5px 0;
}
nav{
float:right;
}
nav ul{
margin:0;
padding:0;
list-style: none; /*remove HTML bullets*/
}
nav li{
display:inline-block;
margin:0 25px;
padding-top:55px;
font-family: 'Montserrat', sans-serif;
}
nav a{
color:#444;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color:black;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My logo</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--a navbar should be in header section becuase it's not the content-->
<header>
<div class="container">
<img class="logo" src="logo.jpg" alt="">
<nav>
<ul>
<li>Home</li>
<li>Product</li>
<li>Services</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
header::after{content:" "; display:table; clear:both; }
So my question is the background color in the pic would disappear without this part of code and I don't understand why, esp the display:table and clear:both. I do have logo and the li part float on both sides and clear:both doesn't stop them from floating and the background color would still show. I'm confused as why it's there and how display and clear both would affect the background color. Thanks!!
It is because you have floated all the content of header. This is like giving them all an absolute position and removes them from the flow of their parent which means the parent container, with no other content, will act as if it is empty. You could also give the header a height to see the background color, however, that might make it harder to adjust based on the content wrapping.
The CSS in question adds some content via the ::after's content prop. Then you clear the floats to make the content be seen by header, which is technically it's parent. The display table could be display block as well. It just makes sure that the after acts like an element would if it were placed in the html. But instead you are faking it with CSS.
i have a stack right now when i explore HTML5 and CSS3 , i try to create a expand and collapse menu but i have problem when menu pull down a border bottom from css3 not pull down too, how can i solve it?
i post my code for you can easy to see and correct for me, tks!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script>
$(function() {
$('#MainMenu').click(function(){
$('.sub').slideToggle();
});
});
</script>
<title>Admin Control Panel - TBB Rocking Crew</title>
</head>
<body>
<div id="dHeader">
<header> </header>
</div>
<div id="dBody">
<aside>
<article class="asideBoxTitle"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </article>
<article class="asideBoxTitle"> <a href="#"> <img src="img/world.png" class="ico"/>
<ul id="menu">
<li id="MainMenu" class="asideTitle">WorldWide</li>
<li class="sub">Chapterz</li>
<li class="sub">Memberz</li>
</ul>
</a> </article>
<article class="asideBoxTitle"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </article>
</aside>
<!-- end aside-->
<section> </section>
</div>
</body>
</html>
==============================
#charset "utf-8";
/* CSS Document */
body{
margin:0px;
}
aside{
width:240px;
background:#f5f5f5;
position:absolute;
top: 58px;
bottom:0;
border-right-width:1px;
border-right-style:solid;
border-right-color:#e2e2e2;
}
.asideBoxTitle{
height:40px;
line-height:40px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#e2e2e2;
width:100%;
}
.asideBoxTitle a{
text-decoration:none;
float:left;
}
.asideTitle{
color:#000;
text-decoration:none;
margin-left:20px;
margin-top:-10px;
vertical-align:middle;
}
.asideBoxTitle ul{
display:inline-table;
list-style-type: none;
margin: 0;
padding: 0;
cursor:pointer;
}
.sub{
display:none;
color:#000;
text-decoration:none;
margin-left:20px;
vertical-align:middle;
}
.sub:after{
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#e2e2e2;
width:100%;
}
.ico{
vertical-align:text-top;
margin-left:10px;
}
#dHeader{
background:#20638f;
height:58px;
width:100%;
}
The problem is that you're specifying the height of each item at 40px. They must stay at 40px. They won't move. You are currently making the <a> tags move dynamically, and that will work, but just for the stuff inside the <a> tags; the parent object won't be affected.
A simple way to solve this is to simply set the height attribute of the <article class="asideBoxTitle"> elements to be a min-height instead and remove the float properties from the child <a> tags so that they affect the position of their parent's next sibling. Like so:
.asideBoxTitle{
min-height:40px;
line-height:40px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#e2e2e2;
width:100%;
}
.asideBoxTitle a{
text-decoration:none;
}
Here's a JSFiddle. Regards.
The website I'm developing has a horizontal scroll bar and I'm not sure why.
Fiddle
HTML
<body>
<div id="header">
<div id="logoHolder">
Logo
</div>
<div id="loginHolder">
Login
</div>
<div class="container_12">
<div class="grid_12">
<div id="navigationHolder">
<ul id="navigation">
<li>GuidedChoice</li>
<li>Pricing</li>
<li>FAQs</li>
<li>Investment Tools</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
body {
}
/*Header*/
#logoHolder{
width:20px;
background-color:green;
float:left;
}
#loginHolder{
width:20px;
background-color:green;
float:right;
}
#navigationHolder{
display:block;
margin-left:auto;
margin-right:auto;
width:775px;
background-color:brown;
height:auto;
}
/*Navigation*/
#navigation{
list-style:none;
font-family:Arial;
font-size:1.3em;
}
#navigation li{
float:left;
display:block;
}
#navigation li a{
color:inherit;
text-decoration:none;
display:block;
text-align:center;
padding:1.25em;
}
#navigation li a:hover{
background:#609941;
text-decoration:underline;
}
I'm using the 960 gridsystem as well.
Example
It is #loginHolder
You can either take away width:20px; or give it a margin-right:20px; and it will go.
You ought to be using the development tools that are built into browsers these days. Firefox and Chrome both have features that can be accessed by pressing F11. There is also Firebug for firefox.
Any of these will go into an 'inspect elements' mode where you can hover over your page and identify where your elements sit and exactly how big they are, even when they are filled with whitespace.
These tools also let you experimentally edit css directly in situ, so you can find a better way to style the elements the way you intended them to work.
Also Chris Pederick's Web Developer Toolbar has proven to be a useful development tool.
I've been trying to absolutely position my navigation at the bottom right of its parent div (header>nav>menu) and i'm a little lost. Help would be appreciated!
I've been trying to relatively position its parent div, but each property i try, it either disappears from the browser, aligns all the way at the bottom right of the page and not its parent div, or somewhere else i'm not wanting it to go.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/favicon.png" />
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<img src="images/logo.png" / id="logo">
</div>
<nav>
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
body {
margin:auto;
width:960px;
}
.logo {
display:block;
float:left;
width:242px;
height:141px;
margin:0px;
}
#header {
position:relative;
height:100%;
}
#nav .menu {
position:absolute;
bottom:0px;
right:0px;
margin:0px;
padding:0px;
float:right;
}
#menu ul {
list-style:none;
}
#menu li {
display:inline;
float:left;
}
#menu a {
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover,a:active
{
background-color:#7A991A;
}
you define in your css nav is a tag element not id or menu is a id not class Please change to your css and define as like this
Change to this
#nav .menu
into this
nav #menu
Demo
You made some mistakes,
you use #header in css but you don't put id header to the <header> tag,
you use #nav in css instead of nav tag because there is no id in nav tag,
#header height is 100%. it will take the height of parent. put height:auto; so that it will take only the height it need to fit its content.
I made a JSFiddle. please check. hope this will solve your problem.
http://jsfiddle.net/banded_krait/Q4Zjj/
OK! I just started HTML and CSS today and thought it would be a good approach to learn by building something rather than just reading some text.
[ http://jsfiddle.net/GUkrK/ ]
So I decided to build one sample navigation bar.
<html>
<head>
<title> navigation bar </title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul id="menu">
<li id="menu1">
<a href="http://www.google.com">
<span>GOOGLE</span>
</a>
</li>
<li id="menu2">
<a href="http://www.github.com">
<span>GITHUB</span>
</a>
</li>
<li id="menu3">
<a href="http://www.quora.com">
<span>QUORA</span>
</a>
</li>
<li id="menu4">
<a href="http://www.facebook.com">
<span>FACEBOOK</span>
</a>
</li>
</ul>
<hr/>
</body>
</html>
and the css
ul {
list-style:none;
color:red;
}
#menu {
float:left;
vertical-align:middle;
display:block;
width:600px;
height:108px;
}
#menu li {
display:inline;
font-size:20px;
padding:0px;
}
#menu a:link {
color:white;
font-weight:bold;
padding:20px;
background-color:#27A285;
}
#menu a:hover {
background-color:#E1C618;
color:brown;
}
hr {
height:5px;
background-color:red;
}
But now my problem is the positioning of that horizontal line. Do I have to place that by setting the pixels in absolute or relative positioning? Can't it be done automatically?
And how come the horizontal line does not cover the total width of the browser? and Can I adjust the width of that horizontal line?
EDIT: Thanks everyone. Here is the edited sample http://jsfiddle.net/sunu0000/zdDU5/
Remove float: left; from the CSS definition of #menu.
Sample
http://jsfiddle.net/Y8AAH/3/
CSS for #menu
#menu {
vertical-align:middle;
display:block;
width:600px;
height:108px; /* Looks better with like: 40px !! */
}
Depending on what your layout should look like this definition may be sufficient:
#menu {
display:block;
height:108px; /* Looks better with like: 40px !! */
}
Updated sample: http://jsfiddle.net/Y8AAH/4/
Updated sample with centered menu
#menu {
height:40px;
text-align: center;
}
http://jsfiddle.net/Y8AAH/5/
I sugger you read this before continuing. It appears you don't really know what you're doing, so learn before asking question =p