I have some HTML, and I am trying to figure out a way to make my logo, nav menu and social media icons one a single line.
<div class="header">
<div class="logo"><h1>Logo</h1></div>
<ul class="nav">
<li class="menuitem">Home</li>
<li class="menuitem">Blog</li>
<li class="menuitem">Test</li>
<li class="menuitem">Contact</li>
</ul>
<div class="social-media">
<img src="facebook.jpg">
<img src="twitter.jpg">
<img src="pinterest">
</div>
</div>
I want to logo to the left, nav menu in the middle, and the social media icon to the right.
I just realized that I forgot to post my CSS:
div .h1 {
float: left;
}
li {
display: inline-block;
}
ul {
float: left;
}
.nav {
float: left;
}
The easiest way to achieve this is text-align: justify:
Take a look at this Fiddle
Another good Tutorial for this effect is found on Codrops.
Related
I created a little test website with UIKit. Now that I messed around with that I wanted to try and create the design without using a pre-made framework. I am having issues with my navbar though.
This is the Original navbar that was created on the UIKit, see how the text is aligned vertically with the middle of the logo.
This is the second image, which is the Navbar i am trying to create, as you can see the text is on the same row as the image, but it is aligned with the top of the image (logo)
I am Trying to make the second image like the first image, the text aligned with the centre of the logo. I have tried "vertical-align: middle;" in my css but it doesn't seem to work... Any ideas?
Here's my code:
html {
font-family: monospace;
font-size: 12pt;
}
body {
margin: 0;
}
header {
background-color: honeydew;
}
nav .ul {
list-style-type: none;
display: table;
margin: 0;
padding: 0;
overflow: hidden;
float: left;
vertical-align: middle;
}
li {
display: table-cell;
vertical-align: middle;
}
<header>
<div class="row">
<nav>
<ul class="column small-hidden large-12">
<li class="column small-hidden large-3"> </li>
<li class="column small-hidden large-1">Yep</li>
<li class="column small-hidden large-1">Yep</li>
<li style="float: center;" class="column small-hidden large-1 logo"><img alt="Website Logo" src="img/image.png"></li>
<li class="column small-hidden large-1">Yep</li>
<li class="column small-hidden large-1">Yep</li>
<li class="column small-hidden large-3"> </li>
</ul>
</nav>
</div>
</header>
Thanks in advance!
You can try this:
nav li.img{ vertical-align: middle;}
I am having issues getting my menu to align properly. The images are all spaced far away from each other even when they should be closer. I am new to using Ul and Li and am not sure how to fix this. Ideally I would have the images across the whole screen with no space on the right or left and just a thin space between each image, but instead, there is a large space. I am unsure if this is something in the Ul Li tags or if there is something I can do with margin.
Could someone please advise me. I am including a jsfiddle to show what it currently looks like. https://jsfiddle.net/f1bctqzn/ is what I am currently getting. How do I these lines to touch their respective sides of the screen and still have a small space between the rest.
<li class="header"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kale-grain-bowls"></li>
<li class="header"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kids-real-meals"></li>
Add padding: 0 to your ul and margin: 1px (or something) to li
Also, add width: 100% to img
See this fiddle
To add space betwwen the li items, don't add the margin property to the ul, but add a margin to the li items (I used the 2px you had set for the ul). To add a margin only between the li items, I used
li.header{
margin-left:2px;
}
li.header:first-child{
margin-left: 0;
}
Adjusted the margins and used a flexbox to adjust the images across the whole screen.
Check it out and let me know your feedback. Thanks!
body {
margin: 0;
padding: 0;
}
ul.toplist {
list-style: none;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li.header {
display: inline-block;
height: 100%;
margin-right: 1px;
}
img.kale-grain-bowls,
img.salads,
img.burgers-sandwiches,
img.sides,
img.smoothies-milkshakes,
img.kids-real-meals {
max-width: 100%;
max-height: 100px;
}
<ul class="toplist">
<li class="header">
<a href="/menu/kale-grain-bowls">
<img src="https://i.imgur.com/T4ZAaK3.png" class="kale-grain-bowls">
</a>
</li>
<li class="header">
<a href="/menu/salads">
<img src="https://i.imgur.com/T4ZAaK3.png" class="salads">
</a>
</li>
<li class="header">
<a href="/menu/burgers-sandwiches">
<img src="https://i.imgur.com/T4ZAaK3.png" class="burgers-sandwiches">
</a>
</li>
<li class="header">
<a href="/menu/sides">
<img src="https://i.imgur.com/T4ZAaK3.png" class="sides">
</a>
</li>
<li class="header">
<a href="/menu/smoothies-shakes">
<img src="https://i.imgur.com/T4ZAaK3.png" class="smoothies-milkshakes">
</a>
</li>
<li class="header">
<a href="/menu/kids-real-meals">
<img src="https://i.imgur.com/T4ZAaK3.png" class="kids-real-meals">
</a>
</li>
</ul>
I'm trying to add a site banner above the menu on my site using a simple img tag but whenever I do so the menu just overlaps the image. What I want to achieve is the menu to be pushed down by the image above it so it appears right under it.
HTML:
<header>
<img src="site_logo.jpg" alt="">
<img src="banner_small.png" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page
</li>
<li>Classes
</li>
<li>Game modes
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
My first img is for the site logo and the second one is in the menu. I want to position the first img to be on top of the site and push the menu down
CSS:
header {
height: 50px;
background: #333333;
}
header nav {
display: inline-block;
vertical-align: middle;
}
header nav ul {
margin: 0;
padding: 0;
}
#banner,
header ul li {
display: inline-block;
vertical-align: middle;
}
header nav > ul > li {
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
Try to put the images inside div elements:
<div id='x'><img src="site_logo.jpg" alt=""></div>
<div id='y'><img src="banner_small.png" alt="" id="banner"></div>
Then if you want to increse ou decrease the space between elements use the Margin property:
x{margin-bottom:...px;}
y{margin-top:...px; margin-bottom:..px;}
I've build a navigation and I wanted the img and the list (ul,li) centered on the same line (vertical-align:middle;) but the list is above the img. So my question is, how I can get both centered on the same line?
HTML:
<div id="logo">
<img src=""></img>
</div>
<nav id="main-nav">
<ul>
<li>
</li>
</ul>
</nav>
CSS:
#logo, #main-nav ul li {
display: inline-block;
float: left;
margin-left: 2.5%;
position: relative;
vertical-align: middle;
}
I appreciate every comment and help!
In your CSS, you are aligning the list items, while you would want to align <nav>.
I want to create a navbar with a logo in the center, and two navbar items (links) on either side, width equal spacing. I also need the logo to be lined up center with the navbar items.
Here's the code i have thus far. I'm using bootstrap.
HTML:
<div class="nav">
<div class="container">
<ul>
<li> Navbaritem1 </li>
<li> Navbaritem2 </li>
</ul>
<div class="logo">
<img src="Img/logo.png" class="img-responsive">
</div>
<ul>
<li> Navbaritem3 </li>
<li> Navbaritem4 </li>
</ul>
</div>
</div>
CSS:
.nav li {
display: inline;
margin-left:5%;
margin-right:5%;
}
.logo {
width: 100px;
display: inline-block;
height: auto;
}
.logo img {
float: none;
padding-top:10%;
}
ul {
display: inline;
text-align:center;
width:30%;
}
Did you try centering a div inside the container?
<div class="container">
<div class="center">
Centered content here
</div>
</div>
And the css:
.center {
display: table;
margin: 0 auto;
}
Also this post might've helped you with a quick search.