My navigation UL items are not being displayed inline with my website's logo: Is it possible of the logo size? I've tried adding the width property to the #logo but it wont react...
Picture of problem: http://prntscr.com/p5aygy
Logo properties: 496px x 109
HTML
<!--Navigation!!!-->
<nav>
<div id="logo"><img src="images/White.png"></div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop"/>
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li>Contact</li>
</ul>
</nav>
CSS FILE
nav {
margin: 0;
padding: 0;
background-color: black;
}
#logo {
display: block;
float: left;
padding: 10px 0 0 30px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
float: left;
}
#media (max-width:768px) {
#logo {
display: block;
width:100%;
text-align: center;
float: none;
padding: 20px 0 10px;
}
nav ul li {
width: 100%;
}
.toggle + a, .menu {
display: none;
}
}```
Your CSS is adding padding to the top of your logo for the #logo selector. That is probably where the spacing is coming from. If you'd like to get rid of the extra spacing on your logo, change the lines for the #logo selector like this:
#logo {
display: block;
float: left;
padding: 0 0 0 30px;
}
And again for the media query line below:
#media (max-width:768px) {
#logo {
display: block;
width: 100%;
text-align: center;
float: none;
padding: 0 0 0 10px;
}
}
Also, there may be a chance that your logo image has transparent space around the part that you can see? Sometimes if images aren't trimmed correctly, they can cause unintentional spacing errors.
If you can provide a link to the logo image file itself, we can try to rule this potential issue out.
Try adding margin-top: 10px to the UL part
Related
I have tried to use the margin and padding tags, but I can never get it right because screen sizes change, and that makes the arrangements change. Also tried using flex
I am trying to make a navigation bar (top) in HTML and CSS, but I want to make all the tags uniform in spacing so it looks nicer.
Right now it looks like this:
Here is my HTML code:
<div class="header">
<div class="container">
<h1 class="logo"></h1>
<div class="nav">
<ul>
<li>Home</li>
<li>History</li>
<li>Where to Eat</li>
<li>Places to visit</li>
<li>Beauties of Nature</li>
<li>How to navigate Seoul</li>
</ul>
</div>
</div>
</div>
CSS:
.container {
width: 80%;
margin: 0 auto;
}
.header {
background: #293380;
}
.header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
.nav {
float: right;
}
.nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
flex: 1;
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
.nav a {
color: #F0EFF7;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
.nav a:hover {
color: #953D60;
}
.nav a::before {
content: '';
display: block;
height: 5px;
background-color: #F7D9F1;
position: absolute;
top: 0;
width: 0%;
in your css file, under .nav ul, write justify-content: space-between;, which spaces all the elements evenly.
I really recommend you look further into justify-content, since its the main way to space out the content the way you want. Really good tool
I'm trying to recreate the Google homepage as part of theodinproject and I'm having trouble trying to get the navbar across the top to the right.
I tried display: flex and float: right but I'm not sure how to get the Images, Gmail, and Sign In button to the right. I've been told that my style isn't being applied also. Would anyone be willing to help? I'd greatly appreciate it. Below is a snippet of my html and css code and a link to how the page appears.
https://i.stack.imgur.com/pAgDn.png
<ul>
<li><a><button>Sign in</button></a></li>
<li>Images</li>
<li>Gmail</li>
</ul>
</header>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
padding: 10px 10px;
}```
Seems like your only mistake is not having a <style> tag around your css code. Try this.
<style>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
padding: 10px 10px;
}
</style>
Using float is not necessary for that, you can definitely use display: flex. The minimum to understand about flex is that it affects child elements only, so if you want to have a navbar which appears on the right for example, you need to use display: flex on the parent.
.header {
display: flex;
}
<div class='header'>
<div class='navbar'></div>
<div class='logo'></div>
</div>
You can also use justify-content to choose how they align among the main axis (by default the horizontal one)
For something like this I'd add justify-content: space-around or justify-content: space-between.
I'd highly recommend reading more about Flex, as it's super useful.
Good resource:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You need to wrap the css styling inside a as in the example below:
<style>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
padding: 10px 10px;
}
</style>
and also you need to remove the characters at the end ( ``` )
Try using:
header {
width: fit-content;
margin-left: auto;
}
For example, I did the top part using this idea. This is how it looks.
html {
font-family: sans-serif;
color: #333;
}
header {
width: fit-content;
margin-left: auto;
}
li,
ul,
buttom {
display: inline-block;
padding: 0 1ch;
}
li {
font-size: 0.85em;
color: #555;
}
img {
display: block;
margin: 0 auto;
width: 20em;
padding-bottom: 1.5em;
}
main {
padding: 20vh 0;
width: fit-content;
margin: 0 auto;
}
input {
margin: 0 auto;
display: block;
border: 1px solid silver;
border-radius: 2.8em;
height: 2.8em;
width: 40em;
}
<header>
<ul>
<li>Gmail</li>
<li>Images</li>
</ul>
<button>Sign in</button>
</header>
<main>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<input type="search">
</main>
I hope it works!
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
I know there are a lot of answers with this subject but it still doesn't work somehow with my code.
Every time I try to center the text with text-align center it doesn't work unless I remove float: left, display: inline or display: inline-block. But then I have a vertical centered navigation bar...
Can anyone help me with this?
This is my HTML code:
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Moviekids festivals</li>
</ul>
</div>
and here is the CSS code:
*{
margin: 0px;
padding: 0px;
}
body {
text-align: center;
font-family: arial;
background-color: white;
}
#wrapper{
width: 960px;
margin: 0 auto;
height: 100%;
text-align: left;
background-color: #1d1d1b;
}
.nav {
background-image:url("img/nav.jpg");
width: 100%;
height: 50px;
display: inline-block;
}
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
text-align: center;
}
.nav a {
text-decoration: none;
display: inline-block;
color: #1d1d1b;
padding: 10px;
}
You need to set the text-align on the parent element like so:
.nav ul {
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
}
See Demo
I just edited your css to acheive what you need
.nav ul {
list-style-type: none;
text-align:center;
}
.nav li {
display:inline-block;
text-align: center;
padding: 10px;
}
.nav a {
text-decoration: none;
display: block;
color: #1d1d1b;
}
DEMO
Always avoid using body text-align try using instead for wrapper.
Make sure you have mentioned <!DOCTYPE html> on the top of your HTML code.
Otherwise your code seems perfect.
Not sure why there is a space to the right of each li, as you can see here when you mouse over it. Obviously don't want it there and can't figure out how to get rid of it. Any help would be greatly appreciated!
Here is the code:
HTML:
<header>
<div class="nav-container">
<nav class="nav-items" role="navigation">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
position: fixed;
top:0;
background-color:#2C5463;
height:2.3em;
width: 100%;
border-bottom-color: black;
border-bottom-style: solid;
}
header .nav-container {
margin: 0 30px;
height: 100%;
display: block;
padding: 0;
}
.nav-items {
float: left;
margin: 0;
height: 100%;
}
.nav-items ul {
display: inline-block;
margin: 0;
height: 100%;
}
.nav-items ul li {
display: inherit;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
.nav-items ul li a {
display: inherit;
text-decoration: none;
color: #ffffff;
margin: 0 auto;
padding-top: 8px;
white-space: nowrap;
height: 100%; /* Width and height of top-level nav items */
width: 90px;
text-align:center;
vertical-align: middle;
}
.nav-items ul li:hover {
background: #617F8A
}
http://jsfiddle.net/eF83x/
Inline elements are sensitive to white space. Remove the white space and the problem goes away.
Ex:
<ul>
<li>list1</li><li>list2</li><li>list3</li>
</ul>
jsFiddle example
You can remove the spaces between the list items literally, occupy the space with HTML comments (<!-- -->), or float them left.
Just needs to changes on css class here for your solution,
.nav-items ul
{
display: **inline-table**;
margin: 0;
height: 100%;
}
Demostration
What you could also do is make the lis float left and display them as block. This will fix it without messing with the html code.
.nav-items ul li {
float: left;
display: block;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
jsFiddle example