working on a pretty simple page, with a navbar and a few links. everything was working, appearing correctly, i then made a change to the html and the navbar links moved left whereas before they were centered. im sure i didnt change any of the css and ive scanned over it manytimes over the last day. i wa going to start rom scratch but heard about stackoverflow and thought id try my luck.
heres the page
http://coleio.com/html/poc.html
thanks :)
Add text-align:center and width:100% to the style for the ul:
ul {
display: inline-block;
margin: 0 auto;
list-style-type: none;
text-decoration: none;
text-align: center;
width: 100%;
}
Add .nav {text-align: center;} to the CSS
Related
I'm trying to get my navigation bar to the right of the logo in my Wordpress theme. It's being built with Underscores. I've managed to line up the primary navigation and the logo the way I want it, basically, with this CSS:
.main-navigation {
position: relative;
float: right;
top: -4em;
width: 55%;
display: block;
clear: both;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
float: right;
}
and here's a picture of how I want it to look:
I understand that negative margins (assuming top: -4em; is considered with negative margins) aren't elegant or the best way to handle these sorts of things. Plus, I generally find these kinds of workarounds usually come back to bite me later on.
I'm new to playing around with JSFiddle, so I hope I've done this correctly! Here's my code, now condensed!: http://jsfiddle.net/DMDesigns/d39ej96r/11/
What's the best way to make this happen? I've been searching, seen a lot of people ask this question, but many of the answers have been too specific to their website to help me.
This took me the better part of the day to figure out, yesterday, but disappointed with the lack of responses, here's what I figured out. I'm posting it here for anyone else having a similar problem.
First, I took the logo (named .header-image) and added:
float: left;
position: relative;
Then I took the navigation I wanted to the left of (named .main-navigation) and removed my workaround, which was
float: right;
top: -4em;
width: 55%;
and changed clear:both; to clear:none;
I added a little personal CSS to my .main-navigation to make it match the logo which was
height: 112px;
background: #69d7f9;
z-index: -1;
padding: 28px 0;
and I removed any floats from .main navigation ul.
It's better to create a main div and insert both logo and navigation section in the same div with float:left; for both of them. Let me know if you get this or I'll let you know by an example.
Using the Underscores starter theme for WordPress, the navigation bar can be floated to the right of the logo (or site title) using the following method:
Add the following CSS to your style-sheet:
.site-branding{
float: left;
display: inline-block;
}
.site-description{
display: none;
}
#site-navigation{
float: right;
clear: none;
width: auto;
}
These instructions are based on the Underscores theme as is before customisation.
I hope I am right here, I need your help with my upcoming online shop. I would like to center the main categorie menu on the top but I am missing the right CSS order.
This is what it looks right right now and there are 2 ways I want to test the looking.
First I want is a centered menu where "home" and "Kollektionen" have the same distance to the left or right.
And secondly I want to try out what it looks like when every li-element 'pushes' the next element to the right so that it's centered at the last one.
You know what I mean? 2 different ways of centering my menu and I don't find the right command....
I hope you can help me.
Thanks in advance.
PS: sorry for my bad english, it's not my native language.
EDIT: I cannot post code I'm afraid as it's not mine. But maybe this is enough: the basic template is made of this http://www.shopwaredemo.de/
2nd EDIT: after trying Asko's, Mike's and Tom's answer and both works I ask myself why? What is the difference between display:flex and display:inline-box and between text-align and justify-content set to center???
Perhaps use display: inline-block? E.g the following:
.menu {
text-align: center;
}
.menu li {
float: none; /* assuming the template has set this to 'left' */
display: inline-block;
margin-left: 20px; /* tweak this for the space inbetween items */
margin-right: 20px; /* and this, too */
}
Note that I didn't look at the code, so the div .menu is an example.
You can try to make the <ul> display: inline-block and apply text-align: center on parent.
JSFiddle Demo: http://jsfiddle.net/Q2hSv/1/
Without seeing some code, maybe this will help.
.topmenu {
width: 80%;
margin: auto;
}
.menuitems {
float: left;
width: // Here you take the number of items divided by 100%
// remember to take borders and margins into account
Dependent on your browser scope you could use display:flex;
HTML:
<nav>
<ul>
<li>Home</li>
<li>Neuheiten</li>
<li>Orschmuck</li>
<li>Ringe</li>
<li>Halsketten</li>
<li>Armbander</li>
<li>Kollecktion</li>
</ul>
</nav>
CSS:
nav {
background: #000;
margin: 0 auto;
width: 70%;
}
ul {
display: flex;
justify-content: center;
}
li {
list-style: none;
}
Example http://codepen.io/tom-maton/pen/AFpnJ
back to work and managed to achieve my goal:
Thanks again for every answer, I used and played a lot with your snippets and and I ended up using this (click click!):
#mainNavigation {
margin: 0 auto;
width: 98%;
}
#mainNavigation ul {
display: flex;
justify-content: center;
}
#mainNavigation li {
list-style: none;
width: 15%;
text-align: center; /* to center the li-elements itself */
}
which works perfectly! Still figuring out what excatly justify-center and display:flex do but I want you to know that you helped a lot.
CHEERS!
PS: how come my thread got a negative rating? it says -1 to me!? Did I do anything wrong?
Please look at my jsFiddle: http://jsfiddle.net/AnNyf
I am trying to get those icons to fit right under that block of text there on the right. I've tried a lot of methods but I just can't get it to work. I'm just a bit rusty on things so I need a refresher.
Thanks in advance!
add right:300px to your li css class
header#header .inner .networks li {
float: right;
list-style: none;
margin-top:122px;
position: relative;
right:300px; //recommend you play around with the value
}
http://jsfiddle.net/AnNyf/2/
I am trying to build a website and have encountered a tricky issue with li having display: inline-block; property.
My website is: http://www.gypsytours.in/
If you visit this site, on homepage, I have a horizontal list under the heading "Himalayan Packages by Gypsy Tours".
In this list, I have a block element A with display: block; property.
Here are my simplified codes:
HTML:
<div id="menu-board">
<ul>
<li>Elephant Safari Packages in Jim Corbett Park, India</li>
<li>Chopta Tungnath Trekking Package</li>
<li>River Rafting Packages in Rishikesh</li>
</ul>
</div>
CSS:
#menu-board
{
text-align: center;
}
#menu-board ul
{
}
#menu-board ul li
{
float: none;
display: inline-block;
}
#menu-board ul li a
{
display: block;
width: 180px;
height: 130px;
background-color: #C50000;
text-align: center;
overflow: hidden;
}
Now, the issues is: My link-text in 2nd box, is not longer than two lines, unlike the other two boxes where link-text spreads in three lines. This boxes look perfectly fine in IE and FireFox but when I open the site in Google Chrome or Safari, the box in the center (with relatively shorter text) pops down. If I make the text long enough to span in three lines, it comes back to original position. I am not able to figure out how to fix this. My apologies for not being able to put across my issue in simple and short manner. I am relatively inexperienced with web-designing. I will really appreciate if you guys can help me out. Thanks in advance.
Ok, after more digging, I found out that it was a computed float issue.
I believe that adding:
#splash-list ul li a {
float:left;
}
will solve the problem. It may compute very slightly differently on other browsers, but at least they'll be in the proper line.
Hope this helps!
Mason
I have been building a site and can't figure out how to center the navigation links. The site is in HTML using a CSS sheet.
I have tried to center them using
margin: 0 auto;
Any suggestions would be great!
The site address is http://tinyurl.com/7x7nzz3
If you would like me to paste all the code into here then please request that however I didn't feel it necessary as the code is openly available from view source
try applying the following css rule to div#header
text-align: center;
First, in your CSS you have this:
#menu li {
float: left;
}
DELETE THIS!
Second, try with this:
#menu
{
text-align: center;
}
It will only center any text in #menu and you can also add this if it doesn't work:
#menu ul, #menu ul li
{
text-align: center;
}
If it doesn't work, I don't know why!
add
display: block;
width: 600px
margin: 0px auto needs an fixed width and a block element !
This works using firebug:
#menu ul {
line-height: normal;
list-style: none;
margin: 0 auto;
padding: 0;
width: 600px;
}
CSS is used when one has to print text in a specified format like color,positioning,font etc..
repeatedly after certain intervals.For example say you have 2 type of fonts font1,font2.
Now you want to print the text as follows,
font1
font2
hyperlink(navigation link)
font1
table
font2
Here we have used CSS for two type of fonts that we use repeatedly but not continously and writting the logic for same color,position,font type etc.. each time is a tiresome process hen ce CSS comes into picture lo make our job easy.In this case as, it is alreay writtrn in HTML and navigation links have nothing to do with CSS hence a simple <center> CLICK ME</center> in HTML code would do the required change. <center> tag here indicates that this should be printed in the center and if dont close the tag </center> properly after the use then all the remaining contents on the page would also be centered by dafault.