I got a major problem, that I don't seem to solve. I'm trying to get a logo (text) and a navbar (text) to align horizontally, but when that's completed, it seems like it doesn't align so, that the navbar stays at the same line as the logo.
Can anyone help me?
#navbar {
width: 100%;
margin: 0px auto;
}
#logo {
width: 40%;
float: left;
margin: 0px;
padding: 0px;
}
#navbar-links {
width: 40%;
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
#navbar-links ul {
width: 40%;
padding: 8px 0px;
margin: 0px;
float: right;
}
#navbar-links li {
display: inline;
padding: 0px;
}
#navbar-links li a:link {
color: #000000;
text-decoration: none;
}
#navbar-links li a:visited {
color: #000000;
text-decoration: none;
}
#navbar-links li a:hover {
color: #c3c3c3;
text-decoration: none;
}
#navbar-links li a:active {
color: #c3c3c3;
text-decoration: none;
}
<div id="navbar">
<div id="Logo">
<h1>NUMBERS</h1>
</div>
<div id="navbar-links">
<ul>
<li>Home
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</div>
</div>
Reposition the #navbar-links before #Logo:
#navbar {
width: 100%;
margin: 0px auto;
}
#logo {
width: 40%;
float: left;
margin: 0px;
padding: 0px;
}
#navbar-links {
width: 40%;
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
#navbar-links ul {
width: 40%;
padding: 8px 0px;
margin: 0px;
float: right;
}
#navbar-links li {
display: inline;
padding: 0px;
}
#navbar-links li a:link {
color: #000000;
text-decoration: none;
}
#navbar-links li a:visited {
color: #000000;
text-decoration: none;
}
#navbar-links li a:hover {
color: #c3c3c3;
text-decoration: none;
}
#navbar-links li a:active {
color: #c3c3c3;
text-decoration: none;
}
<div id="navbar">
<div id="navbar-links">
<ul>
<li>Home
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</div>
<div id="Logo">
<h1>NUMBERS</h1>
</div>
</div>
Don't use float for the layout, then you can simply use the vertical-align property.
#logo,
#navbar-links {
display: inline-block;
margin-right: -.25em // If you are not compressing html
vertical-align: middle;
width: 50%; //adjust to taste.
}
#navbar-links {
text-align: right;
}
The issue you are facing is very simple one ...
you had id in the HTML as "Logo" and in css it is "logo".
So because of the case sensitivity, browser is not connecting the CSS to HTML.
#Logo { //Its case sensitive so not "logo"
width: 40%;
float: left;
margin: 0px;
padding: 0px;
}
You can refer this link for the code correction
Related
In the code below, I have a navbar where I specify the height to be 40px, in #nav {... height:40px;} On the left of this navbar, I put a logo image. To make everything fit, I have resized the image to have height 40px also. Yet, as can be seen in the demo, the image goes down and is partially hidden.
What am I doing wrong ?
body {
background: #666;
color: white;
font-family: Helvetica;
}
a {
color: white;
text-decoration: none;
}
ul {
padding: 0;
}
#container {
background: #333;
width: 400px;
margin: 30px auto;
overflow: hidden;
}
#nav {
background: #666;
height: 40px;
}
#nav ul {
padding-top: 13px;
padding-left: 10px;
}
.lileft .li {
list-style: none;
float: left;
}
.lileft img {
display: block;
}
#nav li {
list-style: none;
float: right;
padding-right: 20px;
}
<div id="container">
<div id="nav">
<ul>
<lileft><img src="https://i.ibb.co/WVxqWc7/crown.png" alt="crown" border="0"></li>
<li>Pears</li>
<li>Grapes</li>
<li>Apples</li>
<li>Oranges</li>
</ul>
</div>
</div>
It's cause you have padding-top on your ul which is affecting the first-child (image).
Set the padding on the li instead and exclude the :first-child using the :not() pseudo-class.
body {
background: #666;
color: white;
font-family: Helvetica;
}
a {
color: white;
text-decoration: none;
}
ul {
padding: 0;
}
#container {
background: #333;
width: 400px;
margin: 30px auto;
overflow: hidden;
}
#nav {
background: #666;
height: 40px;
}
#nav ul {
padding-left: 10px;
}
#nav ul > li:not(:first-child) {
padding-top: 13px;
}
#nav li {
list-style: none;
float: right;
padding-right: 20px;
}
<div id="container">
<div id="nav">
<ul>
<lileft>
<img src="https://i.ibb.co/WVxqWc7/crown.png" alt="crown" border="0">
</lileft>
<li>Pears</li>
<li>Grapes</li>
<li>Apples</li>
<li>Oranges</li>
</ul>
</div>
</div>
I want to know how to put a logo in my css navbar because I don't know how to put a logo in my css navbar. I have no clue on how to put the logo in the css navbar so it would be very nice if one of yall can help me out.
body {
margin: 0px;
}
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
background: #222;
padding: 0px;
}
li {
float: right;
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
img {
height: 70px;
}
<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
The first thing you need to do is to create a columnar structure and have the background on the parent. And then add the logo to the left and links to the right. The best way to do is to use the <header> and <nav> tags as they are really semantic.
Here's something you might find useful:
body {
margin: 0px;
}
/* Add these */
header {
overflow: hidden;
background: #666;
}
header h1 {
float: left;
padding: 0 20px;
}
header nav {
float: right;
padding: 20px 0 0;
}
/* End Add these */
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
padding: 0px;
}
li {
float: left; /* Changed here. */
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
img {
height: 70px;
}
<header>
<h1>
<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325" />
</h1>
<nav>
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
</header>
Also, I just changed the background colour from #222 to #666 to keep it websafe and also make the logo visible. Feel free to change it.
Preview
Here is a fiddle that I hope will help you get you on the right track;
https://jsfiddle.net/Lyrw49mj/7/
HTML
<ul>
<li class="NavHeader"><a><img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325"></a></li>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
CSS
body {
margin: 0px;
}
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
background: #222;
padding: 0px;
}
li {
float: right;
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
.NavHeader a img{
position: relative;
top: 0px;
left: 0px;
height: 70px;
width: auto;
}
.NavHeader a:hover{
border-bottom: none;
padding-bottom: 20px;
}
Having trouble with how the drop-down-menu looks like when the mouse hovers over it. Note that the problem only started when I converted my nav li's from fixed to fluid. (instead of specifying it in px I specify it in %)
Here is my code:
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, Helvetica, sans-serif;
font-size: 100%;
width: 99%;
max-width: 800px;
margin: 0 auto;
background-color: rgba(255, 248, 228, 0.95);
border: 2px solid #585858;
}
a:link {
color: #e07400;
}
a:visited {
color: gray;
}
a:hover,
a:focus {
font-style: italic;
}
header img {
float: left;
width: 100%;
max-width: 136.078px;
}
.orange_header {
color: #e07400;
}
header h1 {
margin: 0;
font-size: 200%;
text-shadow: 2px 1px 1px black;
/*text-align: center;*/
padding-left: 7em;
padding-top: 0.7em;
padding-bottom: 0.5em;
}
/*====================NAV MENU========================*/
#nav_menu a {
margin: 0;
}
#nav_menu a.current {
color: white;
display: block;
background-color: #a78349;
}
#nav_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 34px;
}
#nav_menu ul li {
float: left;
/*width:165.985px;*/
/*(800-136.06)/4 - fixed layout - uncomment to see that the dropdown menu at the lessons tab looks fine*/
width: 20.748125%;
/* 165.985/800*100 - here the dropdown menu looks strange...how to I fix this?*/
}
#nav_menu ul li a {
display: block;
text-align: center;
text-decoration: none;
padding: 0.5em 0;
margin: 0;
background-color: #ab6b06;
color: white;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li {
float: none;
}
#nav_menu ul li:hover>ul {
display: block
}
#nav_menu>ul::after {
content: "";
clear: both;
display: block;
}
<body>
<header>
<img src="images/guitarlogo2.png" alt="Guitar" height="109.93">
<h1 class="orange_header">Annemie's Guitar School</h1>
</header>
<nav id="nav_menu">
<ul>
<li>Home</li>
<li>Useful links</li>
<li>Lessons
<ul>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ul>
</li>
<li>Bio</li>
</ul>
</nav>
</body>
Change this css:
#nav_menu ul li {
float: left;
/* width: 165.985px; */
width: 20.748125%;
}
to this
#nav_menu > ul > li {
float: left;
/* width: 165.985px; */
width: 20.748125%;
}
I'm having difficulty aligning an unordered list inside a div.
As you can see by the picture, my list of icons are being pushed to the right instead of taking up 100% width of the div they are being contained in.
I'm pretty sure this is because I've set list-style-type:none
I'm not sure how to combat this without setting negative margins.
I'll also add the code used yet:
div#mobile-nav {
position: absolute;
width: 100%;
height: auto;
background-color: orange;
padding: 0px;
margin: 80px 0px 0px 0px;
}
ul.responsive {
min-width: 100%;
margin: 0 auto;
list-style-type: none;
}
ul.responsive li {
float: none;
}
ul.responsive li a {
text-align: center;
color: black;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border: 1px solid black;
height: 56px;
display: block;
width: 100%;
}
ul.topnav li {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
<div id="mobile-nav">
<ul class="responsive">
<li> HOME </li>
<li> ABOUT US </li>
<li> PROJECTS </li>
<li> CONTACT US </li>
</ul>
</div>
Reset the default padding of <ul>:
div#mobile-nav {
position: absolute;
width: 100%;
height: auto;
background-color: orange;
padding: 0px;
margin: 80px 0px 0px 0px;
}
ul.responsive {
min-width: 100%;
margin: 0 auto;
padding: 0; /* Here, reset like this! */
list-style-type: none;
}
ul.responsive li {
float: none;
}
ul.responsive li a {
text-align: center;
color: black;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border: 1px solid black;
height: 56px;
display: block;
width: 100%;
}
ul.topnav li {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
<div id="mobile-nav">
<ul class="responsive">
<li> HOME </li>
<li> ABOUT US </li>
<li> PROJECTS </li>
<li> CONTACT US </li>
</ul>
</div>
I have a quick question, can anyone help me out with making my menu look like the the on this website:
https://forums.digitalpoint.com/threads/please-help-with-css-navigation-overhang.2102229/
I have tried several things now and just can't seem to get it...
My current code is:
HTML:
<div class="navbar">
<ul>
<li>HOME</li>
<li>TREATMENTS</li>
<li>CONTACT</li>
<li>OTHER</li>
</ul>
</div>
CSS:
/*Content for Navigation Bar*/
.navbar {
width: 760px;
padding-left: 200px;
height: 50px;
background-color: #534b49;
text-align: center;
float: left;
font-size: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
.navbar ul {
}
.navbar ul li {
list-style: none;
text-align: left;
}
.navbar li {
float: left;
padding-right: 15px;
}
.navbar li a {
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
color: #00a6bd;
text-decoration: none;
}
.navbar li a#active {
color: #00a6bd;
text-decoration:none;
}
Thanks in advance!
Jock
Here is the latest code :
Html
<div>
<div class="navbar">
<div class="cornerl"></div>
<ul>
<li>HOME</li>
<li>TREATMENTS</li>
<li>CONTACT</li>
<li>OTHER</li>
</ul>
<div class="cornerr"></div>
</div>
<div class="strip" style="clear:both"> </div>
</div>
css
.navbar {
position: relative;
width: 760px;
padding-left: 200px;
height: 50px;
background-color: #004080;
text-align: center;
float: left;
font-size: 16px;
padding-top: 0px;
padding-bottom: 0px;
}
.navbar ul {
}
.navbar ul li {
list-style: none;
text-align: left;
}
.navbar li {
float: left;
}
.navbar li a {
padding:12px;
padding-bottom:15px;
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
color: #00a6bd;
border-radius:3px;
text-decoration: none;
background:#ff7000;
color:#534b49;
}
.navbar li a#active {
color: #00a6bd;
text-decoration:none;
}
.strip{
background-color: #ff7000;
height: 3px;
width: 948px;
margin-left: 7px;
}
.cornerl{
border-color: transparent #FF7000 transparent transparent;
left: -10px;
}
.cornerl,.cornerr{
position: absolute;
bottom: -10px;
z-index: -1;
border-style: solid;
border-width: 10px;
}
.cornerr{
float:right;
right:-10px;
border-color: transparent transparent transparent #FF7000;
}
here is the live example