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...)
Related
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'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
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 would need some help me! I work on something and I can't get it to work. :) I want the text align to the center. Here is the picture: http://imageshack.us/photo/my-images/266/sn54.jpg/
Can anyone give me some tip please? Thanks.
Here is the code what I use:
HTML:
<div id="container">
<div id="header">
<ul class="nav">
<li>Home</li>
<li>Protfolio</li>
<li>About Me</li>
<li>Contact Me</li>
</ul>
</div><!-- header end -->
</div><!-- container end -->
CSS:
#header{
position: relative;
margin: 60px 0 0 0;
width: 100%;
height: 80px;}
.nav{
background: url(../images/navbar.png) no-repeat 0 0;
width:100%;
height:80px;
text-align:center;
display:block;}
.nav li{
float:left;
list-style: none;
margin: 10px;}
.nav li a{
width:150px;
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1.6em;
margin: 0 .5em;}
.nav li a:hover {
margin-top: 2px;
background-color: #d0d5d6;}
An easy way of doing this is to add padding to your nav element on the right and left equal to with width of the ribbon sections.
.nav {
padding:0 XXpx; /* XXpx = width of the ribbon ends */
}
.nav li {
width:25%;
text-align:center;
margin:0;
}
As a basis, this should fix your problem. You may have to play around with the exact code to fit your needs based on margins, etc.
Alternatively, check out this tutorial on how to create this type of ribbon with just CSS and not rely on an image at all: http://css-tricks.com/snippets/css/ribbon/
Without knowing the dimensions of the background image its hard to be specific, but try putting the background on the header element rather than the nav. You can then set the width of the nav UL to the width of the inner part of the ribbon image and set a margin 0 auto on it to center it horizontally
I would wrap the ul with a div an this div has the background image. Than you can adjust the ul.
I'm trying to center this bottom nav on a test site:
http://heroicdreams.com/kktest/
The ul li uses float:left; which is what I think is making it stay stuck to the left. I'm trying to figure out how to get it to be centered.
To get the links displayed horizontally I needed to float them left, but now I can't get the whole nav to be centered. Is there a way?
often using:
.divStyle {
text-align: center;
}
ul.styleName {
margin: 0 auto;
text-align: left;
}
will do the trick.
Applying an "auto" margin to the left and right of the ul like this will cause it to center itself in the div whenever the div has centered text. This is how many websites center the div that serves as the main content of their page.
Here is how I solved it, and is for dynamically generated menus also.
Assume this is the dynamically generated menu:
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
and this is the CSS:
.menu {
width:300px;
text-align: center; /*Set a width and text-align on the main div*/
}
.menu ul{
margin:0;
padding:0;
display:inline-block;
list-style: none; /*Set display to inline-block to the ul*/
}
.menu ul li {
float: left;
margin-right: 1.3em; /*this is the usual*/
padding: 0;
}
Now, for the list to be centered you need to add an empty paragraph to clear the float. You can do it manually if the menu is static or using jQuery like this:
$(document).ready(function() {
$("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
})
and the CSS of the .clear paragraph will be:
p.clear{
clear:both;
margin:0;
padding:0;
height: 0;
width: 0;
}
and that's it!
Add style="text-align: center;" to the parent div of the ul.
Add style=" display:inline-table;" to the ul.
Either CSS:
margin: 0px auto;
or
/*on the nav's parent*/
text-align: center;
/*on the nav*/
text-align: left;
In order for margin:0 auto to work, you need to set a width on your ul and remove the display:inline:
#footerLinks ul {
list-style:none;
margin:0 auto;
padding:0;
width:400px;
}
Hmm, I think the KISS rule applies here:
ul { text-align: center; }
ul li { display: inline-block; }