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
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've been having trouble centereing a navigation bar on blogger. I seems like a very easy thing to do normally but this time its troublesome.
Take a look at the website: Center Navigation
I've tried text-align, margin:0 auto; etc etc. Nothings seems to work!
If someone could help me out that would be great, cheers
Current code:
.nav{
position: relative;
margin: auto;
list-style-type: none;
text-transform: uppercase;
text-align: center;
border-top: 1px solid #aaaaaa;
list-style:none;
text-align:center;
}
li {
display:inline-block;
}
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
Both text-align:center and margin:0 auto can logically only work if the element to be centered has a non-default width, since that is otherwise auto, which for a block element is 100%. An element that fills up its entire parent cannot be centered.
Give ul.nav a fixed width and it will center.
To use text-align:center you will need to restrict the ul as well, for example by also making it display:inline-block. See this sample.
Remove float: left; to .tabs .widget li, .tabs .widget li
Try This:
.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
}
Instead of:
.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
float: left;
}
add text-align:center; to the parent div
So my html is this:
<div id="background">
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
and my CSS is this:
#background {
min-widh: 960px;
}
#navigation {
min-width: 960px;
}
#navigation ul {
min-width: 960px;
}
#navigation ul li {
display: inline;
width: 100px;
height: 50px;
background-color: red;
}
Now, this does create an inline bar except no matter how much I change the width and height of
#navigation ul li
the background color (red) just stays strictly around the letters and nothing else. It seems as if the width and heights of the actual li's are not changing no matter what number I change it to. Any idea why it is doing this?
Use display:inline-block instead or display:inline.
#navigation ul li {
display: inline-block;
}
jsFiddle here
Alternatively, you can also float the elements for a similar effect:
#navigation ul li {
float:left;
}
jsFiddle here
Aside from both of the above solutions, if you wanted to use display:inline, you could just add padding as opposed to trying to set a height/width.
#navigation ul li {
display:inline;
padding:20px;
}
jsFiddle here
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
I know this is pretty simple, but I've been fussing with this for hours now.. In my header, I want my logo and my nav to be on the same line... basically, I have this HTML:
<div class="menu">
<div class="ct-header-line"></div>
<img class="logo" src="images/clinictechlogo.png">
<ul class="nav">
<!--common features, coded? or static?-->
<li class="active">Home</li>
<li>Appointments</li>
<li>Prescriptions</li>
<li>Patient Records</li>
<li>Bills</li>
<!--special features, coded.....-->
<li>Charts</li>
<li>something</li>
</ul>
</div>
And here's the some of the CSS for the header part:
.logo {
padding: 20px 10px 10px 10px;
display: inline;
}
.menu {
background: #4F97BD url(images/headerbg.jpg) repeat;
}
.nav {
list-style:none;
margin:0;
}
.nav li {
display: inline;
}
The result is that the logo appears on one line, and the ul nav appears on the next...
You need to give the <ul> display: inline-block. If the logo's height is fixed, you might also want to give the <ul> a suitable line-height so that the options appear vertically aligned with regards to the logo.
Try adding to the logo:
.logo {
float: left;
width: 20%; //Or whatever the width is
}
This should make the wrap up next to it. If it doesnt you may need to add somethign similar to the
.nav {
float: left;
width: 70%;
}
Check this one: Inline Logo and Nav
just float both the .logo and .nav to left and have clear fix at the bottom.
.logo {
padding: 20px 10px 10px 10px;
display: inline;
float:left;
}
.menu {
background: #4F97BD url(images/headerbg.jpg) repeat;
}
.nav {
padding: 20px 10px 10px 10px;
list-style:none;
margin:0;
float:left;
}
.nav li {
display: inline;
}
.clear{
clear:both;
}
To make them align correctly(vertically) apply the padding to nav same to what you were using on the image..
hope this helps
Merx..
Try this...
.logo {
margin:0;
padding:0;
display:inline;
}
Take a look http://jsfiddle.net/vZZDJ/
Good Luck...)