I'm trying to make a navigation bar at the top of my site. But the items wont align horizontally properly. I used display: inline. That should make things align side by side right? Well... Once I set display to inline, the width of the item seems to be set to 100%, so the items are not allowed to go side by side. When I set the display to inline-block, the height seems to triple, but is the items are set side by side. Though, I don't want it to be higher than it is because then the appearance isn't what I want.
How can I make the items align properly!? Please help and thank you if you do.
html code
<div id="Bars">
<ul>
<li><p style="width: 50px">Home</p></li>
<li><p style="width: 73px">Software</p></li>
<li><p style="width: 62px">Gallery</p></li>
</ul>
</div>
css code
#Bars{
height: 30px;
width: 100%;
background-color: #000099;
border-radius: 10px;
}
#Bars ul li p{
color: black;
font-size: 20px;
}
#Bars ul li{
list-style: none;
display: inline;
}
Add below css to your style sheet and set inline-block to li, in your case predefined margin and padding are applying
* {
margin:0;
padding:0;
}
#Bars ul li{
list-style: none;
display: inline-block;
}
Use Fiddle
HTML:
<div id="nav">
<ul>
<li class="current_page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
</ul>
</div>
CSS:
#nav ul {
list-style: none;
height:16px;
background: #ccc
}
#nav ul li {
position: relative;
display: inline-block;
}
#nav {
position: relative;
text-align: center;
}
use can use display: inline-block; and need to adjust the margin.
js fiddle link :
`https://jsfiddle.net/2pr2pq78/`
Related
I would like to place an image on a div which I use for a navigation bar, but when I resize the image to 50px or above, the padding on the div gets bigger as well. I don't like this since the image will either be too small to see or the navigation bar will be too big to look pleasing, any ideas on how to fix this?
.navbar{
background-color:green;
padding:20px;
}
.navbar #image1{
width:40px;
margin-left:950px;
padding:0px;
}
<div class='navbar'>
<a href='home.html'>Home</a>
<a href='1.html'>Profile</a>
<a href='2.html'>Transactions</a>
<a href='3.html'><p>Settings</p></a>
<img src='https://picsum.photos/200/300' id='image1'/>
</div>
You should first start by removing
margin-left:950px
as the margin will exclude your item from your navbar
then apply flex properties to your navbar
.navbar {display : flex}
so your navbar items become in the same line
I recommend checking out this flex-box guide as well flexbox properties
can you please share the image's link so we can help you?
also you most edit margin-left:950px; to margin-left: auto; if you want to center it
and this is an example navbar code (press run to see what is it)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar{
padding: 10px 20px;
background: black;
color: white;
display: flex;
align-items: center;
}
.navbar li{
list-style: none;
display: inline-block;
padding: 0 20px;
cursor: pointer;
}
.navbar li a{
color: white;
text-decoration: none;
}
.navbar li:hover,
.navbar li a:hover{
color: #666;
}
.navbar img{
width: 50px;
height: 50px; /*or :auto ; */
}
<ul class="navbar">
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
</ul>
<br><br><br>
<p>or</p>
<br><br><br>
<ul class="navbar">
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
</ul>
I think you need to learn the basics before start doing websites
I'm trying to get my menu working with an image on the left side. For some reason whenever I try to align the image in same line with the menu it's not working out. This is what the html looks like, I can't get the CSS working at all. It's either throwing the menu under the image or the background disappears and the content overlaps the menu but the image is in the right place. The image is 50px in height as well so it shouldn't be a problem.
HTML:
<div>
<img src="logo_small2.png" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page</li>
<li>Classes</li>
<li>Game modes</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
header div {
height: 50px;
background: #333333;
}
#banner,
header ul li {
display: inline-block;
}
header nav > ul > li{
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
What happens now is that the banner is in place over the background of the div and the menu is under the banner and the background in a new line. If I replace the img with a simple h1 it works as a charm >.> I'm clueless, please help
Your CSS does not match the HTMl, there is no header shown.
Assuming that the div is, in fact the header, the nav needs to be inline-block too I suspect. It's currently block level and so 100% wide.
Then you can just align the elements.
header {
height: 50px;
background: tomato; /* for demo only */
}
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;
}
<header>
<img src="http://www.fillmurray.com/200/50" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page
</li>
<li>Classes
</li>
<li>Game modes
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Possible reason is the width of the image not allowing the inline-block comand:
try this:
img{ float:left; width:50%; vertical-align:middle;}
ul{float:right;width:40%;vertical-align:middle;}
I'm trying to create a header/nav bar where there will be navigation options on either side of a logo, which I would like all to be vertically centered. To achieve this, I'm using <li> and <li class> elements, but am having little luck with the vertical centering. Any ideas?
HTML
<header>
<nav>
<ul>
<li class="btn"><span>01</span>Home</li>
<li class="btn"><span>02</span>Vendors</li>
<li><img src="img/logo.png" alt="sews logo" /></li>
<li class="btn"><span>03</span>Tickets</li>
<li class="btn"><span>04</span>Blog</li>
</ul>
</nav>
</header>
CSS
nav {
margin: 40px auto;
width: 600px;
padding-bottom: 80px;
}
nav ul li {
display: inline;
}
nav ul li a {
margin:0 10px;
}
nav ul li.btn a {
padding-top: -10px;
}
nav ul li a span {
color: #e3c22a;
font-family: fanwood;
}
To vertically center something, apply the css rules display: table cell in addition to vertical-align: middle on the container element.
If the links and image were in the same element, say a div, you could set the image to use the style tag: vertical-align: middle;
position relative the header. position absolute the image. left: 50%; the image
Here's some HTML.
<div id = "header">
<div id = "menu">
<ul>
<li>Home</li>
<li>Browse</li>
<li>Account</li>
<li>About</li>
</ul>
</div>
And, here's some CSS
#menu
{
width: 80%;
height: 30px;
}
#menu li a
{
display: block;
background-color: #999999;
color: #FFFFFF;
font-weight: bold;
line-height: 30px;
text-align: center;
}
The above HTML and CSS give 4 rectangles. I'd like to have those rectangles to be evenly stretched horizontaly inside the the menu div.
Each time I try, I either get free space after About rectangle (i.e. the last rectangle) or get the About box flow to the next line.
Thanks for helping
You need to add:
#menu li a
{
float:left;
width:25%;
}
#menu li
{
display:inline;
}
Demo: http://jsfiddle.net/BPyUB/
I am trying to have some LIs within a UL align left, right, and center within a page. For the life of me, I can't figure out how to keep something "centered" on the same line as a left and right aligned LI.
ul {
margin:1em 0;
padding:0
}
ul li{
display:inline-block;
white-space:nowrap;
margin:5px
}
ul li.left{
float: left;
text-align:left;
}
ul li.center{
float:left;
text-align: center;
}
ul li.right{
float: right;
text-align:right;
}
<ul>
<li class="left">left</li>
<li class="center">center</li>
<li class="right">right</li>
</ul>
<ul>
<li class="left">left</li>
<li class="right">right</li>
</ul>
<ul>
<li class="left">left</li>
</ul>
Can anyone help? BTW, I've trying to avoid DIVs.
Thanks!
If you want each to share screen space equally, you can do this:
<style>
.split { width: 33%; float: left; }
</style>
<ul>
<li class="split">left</li>
<li class="split">center</li>
<li class="split">right</li>
</ul>
You'll want to move your styles to an external stylesheet, though.
You can definitely do this with only one thing being floated.
ul li { float:right; }
If you float them all to the left, then you will get (with three LI elements) a right, center, and left.
<ul><li>right</li><li>center</li><li>left</li></ul>
A good way to think of this is thinking of what you want to happen to each individual LI element: you want each one to be moved to the right of the other. This is the most common method of making horizontal navigation with a list structure.
Your li elements will only be as wide as the text that it contains since you are floating them and are not specifying width. Do you want your center element to be fluid? If I'm not mistake., it sounds like you're going for a fluid three-column layout? There are plenty of examples of these on the net if that's what you're going for.
Thanks to mitch and everyone else, this is the solution I came up with and works for me.
<style>
ul {
margin: 1em 0;
padding: 0;
list-style-type:none;
}
li.three {
width: 33%;
}
li.two {
width: 50%;
}
li.one {
width: 100%;
}
li.left {
float: left;
text-align: left;
}
li.center {
width: 33%;
float: left;
text-align: center;
}
li.right {
width: 33%;
float: right;
text-align: right;
}
</style>
<ul>
<li class="three left">left</li>
<li class="three center">center</li>
<li class="three right">right</li>
</ul>
<ul>
<li class="two left">left</li>
<li class="two right">right</li>
</ul>
<ul>
<li class="one left">left</li>
</ul>