I've been trying to do this for a while but I can't seem to get my navbar centered and I want to have it adjust it's width to everything that is inside it.
<nav>
<ul id="menu" class="black">
<li>Home</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
http://jsfiddle.net/e4fa6/
Couple of changes I've made, setting your li to:
#menu li {
display: inline-block;
float: none;
margin: 0;
}
Also having your #menu as:
#menu {
text-align: center;
}
Demo here: http://jsfiddle.net/e4fa6/2/
I would use display: table; to center auto width elements.
DEMO http://jsfiddle.net/kevinPHPkevin/e4fa6/4/
nav {
display: table;
margin: auto;
}
I forked your fiddle with the updates: http://jsfiddle.net/dvdNf/
I added width: 25%; and text-align: center; to your <li>s
Related
I have a problem where the links are not shown in a row but instead some of them are stacked underneath eachother. Are there any step by step tips out here on how I can solve it and also an explanation to why my links in the navbar shows up messed up?? I only wanna use CSS and HTML, no JS.
Please take note: I have a picture of how i want the header to look and also a print screeen of how it looks in GChrome right now. However i am not familiar with posting questions here on StackOverflow so i dont know how to post 2 images in the same question. So please dont be too hardjudging since I am a beginner.
header {
border-bottom: 4px solid #000;
}
.logo img{
position: absolute;
margin-top: 15px;
margin-left: 10px;
}
.header ul {
padding: 0;
margin: 0 0 0 150px;
list-style: none;
float: right;
}
.header li {
float:left;
font-family: 'Brother 1816';
font-weight: bold;
font-size: 2rem;
color: #000;
}
nav {
width: 100%;
background: #FFFFFF;
overflow: auto;
}
nav a{
width: 400px;
display: block;
text-decoration: none;
color: #a71b1a;
}
<header class="header">
<div class="logo"> <img src="logo/logo_250x150.png" alt="Freyas logotype.">
</div>
<nav class="navigation">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PORTFOLIO</li>
<li>SERVICES</li>
<li>CONTACT ME</li>
</ul>
</nav>
</header>
How it should look
How it looks
The width property associated with your links is causing them to take up 400px each which then wraps down the page
nav a{
width: 400px;
}
remove the width property and the links should sit on the same line.
Alternatively use flexbox https://www.w3schools.com/css/css3_flexbox.asp to space the links across the page as you desire.
Width and display: block in your a tag are causing the issue. Also add display: inline to your <li> properties to make elements render in the same row.
I'm trying to add an image to my navigation bar, and fit the image to the navigation bar, however I could not manage to resize the image for this purpose; no matter what I did the image just extends to the whole page. I am quite new to HTML & CSS, could you please explain how to fit the image to the navigation bar?
#profile-image {
height: auto;
width: auto;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
<div class="top-padding">
<nav>
<div id="profile-image"><img src="profile-image.jpg"></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>
</div>
try with this
#profile-image{
height:auto;
width:auto;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
#profile-image img{
object-fit:cover;
}
nav{
overflow:hidden;
}
I just added the rule for nav and the cover for th eimage
How large do you want this image to be on the navbar? Let's say you want it to be 100px by 100px.
First you need to set the height and width of the parent element of the image. I just gave the div with id profile-image a height: 100px and width: 100px.
Next you need to tell the <img /> tag to conform to these dimensions. We can do that by giving it a style of height: 100% and width: 100%.
#profile-image {
height: 100px;
width: 100px;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
#profile-image img {
height: 100%;
width: 100%;
}
<div class="top-padding">
<nav>
<div id="profile-image"><img src="profile-image.jpg"></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>
</div>
I'm not sure what you're trying to achieve so this is something of a guess:
nav {
display: flex;
align-items: center;
background: #eeeeee;
}
#profile-image {
flex-basis: 20%;
font-size: 0;
}
#profile-image img {
width: 100%;
}
ul.menu {
display: flex;
margin: 0;
justify-content: space-around;
flex-grow: 1;
list-style-type:none;
padding:0;
}
ul.menu li {
padding:10px;
}
<nav>
<div id="profile-image"><img src="http://placekitten.com/150/150" /></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>
If you want to "fit the image to the navbar" then you need to give the nav bar a size for the image to fit into.
You can probably get rid of the profile-image div if you wish, unless you want to add special styles to the image area.
I am assuming that you want the image to be like an icon on the left (because you added the float: left style), as opposed to an image that covers the entire nav bar like a background image would.
If that's the case:
nav {
height: 150px; or whatever you want the image and the nav bar to be
}
#profile-image {
height: 100% or you can use the same height as the nav style
width: auto; That will keep the image proportions correct
float: left;
padding-left: 2%;
margin: 0 auto; <== not sure what you are doing here. Try deleting it as it won't help.
padding: 10px 0;
}
I'm just starting to develop in HTML and CSS, and despite reading about the box model I am still having trouble with some of the basics of positioning.
I want to create a header navigation bar with three elements - one to the left of the page, one to the right, and one in the center. I want these elements to be inline with each other.
At the moment, they are represented in HTML like so
<body>
<div class="header">
<ul class="child">
<li id="lodestone">The Lodestone</li>
<li id="mogstation">The Mog Station</li>
<li id="user">User Account</li>
</ul>
</div>
I have then attempted to align them using the 'text-align' property in CSS.
.header {
background-color: #ffd9e7;
border: black;
display: block;
box-sizing: border-box;
}
.header ul {
display: inline-block;
}
.header > ul > li {
display: inline-block;
}
#lodestone {
text-align: left;
}
#user {
text-align: right;
}
#mogstation {
text-align: center;
}
However, instead of the expected result it produces this.
The three items are aligned, next to each other, on the left.
Can anyone recommend what css property I should be using to solve this problem? My research has shown there are ways of using float, but other people recommend against it, and when I try I get issues with the text overflowing off the page.
If you give the ul and lis a width and (100 ul /30 for li s for example) then they should display correctly
.header {
background-color: #ffd9e7;
border: black;
display: block;
box-sizing: border-box;
}
.header ul {
display: inline-block;
width:100%;
}
.header > ul > li {
display: inline-block;
position:relative;
vertical-align:top;
width:30%;
}
#lodestone {
text-align: left;
}
#user {
text-align: right;
}
#mogstation {
text-align: center;
}
<div class="header">
<ul class="child">
<li id="lodestone">The Lodestone</li>
<li id="mogstation">The Mog Station</li>
<li id="user">User Account</li>
</ul>
</div>
I added vertical-align:top; but it's excess to requirements, you could take that out..
Fiddle
Hope this helps
Take a look at CSS Flexbox for a different approach to layout your elements
header{
display: flex;
justify-content: space-around;
}
<header>
<div>A</div>
<div>B</div>
<div>C</div>
</header>
Why not make the li elements a third of the width?
First make the ul 100% width, you'll also need to ensure there's no padding on the right of the ul as it tends to be automatically added by browsers:
.header ul {
display: inline-block;
padding: 0;
width: 100%;
}
Then have each li 33%
.header > ul > li {
display: inline-block;
width: 33%;
}
Style the rest as required
I'm having weird problems centering a div within another div. I was trying to make a nav bar, here is the html:
<body>
<div class="nav">
<div class="navbar">
<ul>
<li>Home</li>
<li>Our Story</li>
<li>Gallery</li>
<li>Our Future</li>
<li>Join us</li>
<li>Contact</li>
</ul>
</div>
</div>
And the corresponding css:
.nav{
width:100%;
}
.navbar {
width:75%;
height:50px;
margin: 0 auto;
background-color:#E64888;
position:fixed;
}
so this didn't work in any of my browsers-chrome,firefox,ie...The bar is just sitting on the very left side. I have also tried the "margin-left:auto;margin-right:auto" method, but still didn't work. This is really annoying, cuz I cant figure what went wrong. Thanks in advance.
If you want the primary nav ul to be centered, you need to set it's parent (in this case html and body) to have width. Otherwise, you have to handle the dimensions and the layout (display) type on the lis and the list-style-type on the ul li elements (so you don't see the dots).
There's also a padding on the ul (which is what spaces the lis to the right when it's a normal list) that you have to deal with, or it will appear to far to the right (and "uncentered").
body, html {
width: 100%;
margin: 0;
padding: 0;
}
.nav {
width: 100%;
}
.navbar ul {
width: 75%;
height: 50px;
margin: 0 auto;
padding: 0;
background-color: #E64888;
list-style-type: none;
text-align: center;
}
.navbar ul li {
display: inline;
padding: 0;
margin: 0;
}
http://jsfiddle.net/97B52/
Try: (As far as I understood your question):
.nav li {list-style: none; display: inline-block; }
Working Fiddle
I have an unordered vertical list..
<div>
<ul>
<li>home</li>
<li>portfolio</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
css:
div {
width: 600px;
}
ul {
text-align: center;
}
What I really want is the list to be text aligned left, while the ul is still horizontally in the center. is there a way to that?
You can do something like this to center dynamically generated content of varying widths:
div { text-align: center; }
ul { display: inline-block; }
li { text-align: left; }
jsFiddle example
Alternatively, you can set a defined width on the parent, and use margin:0px auto, assuming it is a block level element.
ul {
width: 100px;
margin: 0px auto;
}
jsFiddle example