I need some help with some CSS coding. I have been trying to get this navigation menu to center on the page and no matter what I do, I cannot get it to work. I have tried padding-left, margin-left, text-align:center, and nothing works. The menu continues to remain more to the left than the right.
Here is a screenshot of the problem: http://i132.photobucket.com/albums/q38/blacktiphunter/center.jpg
I'm sure it's something very simple, but I just can't seem to figure out what I am doing wrong?
Here is the live link of the page: http://blacktiphfishing.org/test.html
Any help is greatly appreciated!
If you remove the
margin:0; from #nav
it looks centered.
Tested in Chrome
first add overflow:hidden for #nav, #nav ul to clear floats. Then add margin:0 auto .But this always require a fixed width, so set it, for example: width:760px So the new css is:
#nav, #nav ul {
list-style: none outside none;
margin: 0 auto;
overflow: hidden;
padding: 0;
position: relative;
width: 760px;
z-index: 30;
}
CSS layouts can be a bit of a headache sometimes. Try using 'inspect element' in chrome or firebug in firefox to enable/disable and alter styles to get fine tuned adjustments
You need to specify the exact width of the MainMenu div and set his left-right margin to auto if you want to reach a correct centered layout.
The exact width would be 780px (150px * 5 (5 link each row) + 10px * 2 (10px left + 10px right border) + 2px * 5 (right margin of each li))
Use this css :
#mainMenu {
background: none repeat scroll 0 0 #000000;
border: 10px solid #000000;
color: #FFFFFF;
display: block;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
To get the nav section centered
Related
I am creating a website with Wordpress for my mother-in-law (that's for the girly design). Basically I am near completion, but I am way over my head with two issues in the CSS. These seem very basic issues even from my standpoint of view, but with hours and hours of tinkering I am fresh out of ideas and Google didn't help me this time. It's been a while since I have had to create or modify any CSS.
First problem:
I cannot get the horizontal menu to center. I have tried to remove the float:left, I have tried to replace it with float:none and I have changed the display: block and display:inline lines to inline-blocks but the menu stays in its position. Only difference I have managed to make is to move the whole menu to the top of the page and that's not desired. What could be the issue in this?
Second problem:
There seems to be padding (the white lines) at the top of the menu and at the bottom and top of the small menu (mobile). I have tracked down all the padding-lines in the CSS but none of them really make a difference, only one which removed the horizontal paddings and that's not desired.
I would be really glad if somebody spots where I have gone wrong!
The website is at http://janenlahwr.cluster020.hosting.ovh.net/
Thanks in advance!
Best regards,
Tero Korhonen
Lappeenranta, Finland
Hi Tero,
the first problem has really quick solution - CSS3 Flexbox. You can read about it on this w3schools site.
Remove unnecessary float: left and add display: flex and justify-content: center to .main-navigation ul. So it should looks like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
display: flex;
justify-content: center;
}
Second problem you can fix with setting div.site-logo max-height = height your logo (I see that is 200px). So in this case should looks like this:
.site-logo {
min-height: 70px;
padding: 0px;
float: left;
line-height: normal;
max-height: 200px;
}
Edit:
Sorry, I forgott check for lower resolutions. There is problem with overflow. You set in style.css:640 overflow: hidden and it works correctly since resolution is above 800px. If not then activates this rule:
#media only screen and (max-width: 800px) {
#main {
overflow: visible;
}
}
that overwrites previous correct rule for #main overflow: hidden. So you have two options: delete this rule for screens over 800px or change this property from visible to hidden.
I hope I helped you with your problems :) Good luck!
For the menu problem, change your CSS rules like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
/* remove float: left; */
text-align: center; /* added */
width: 100%; /* added */
}
.main-navigation ul li {
position: relative;
display: inline-block;
/* remove float: left; */
text-align: center; /* not necessary */
}
I have an issue with this site made under Wolf CMS.
I dont know what happened, but the menu child items are not
showing anymore!. Cant understand why when I add CSS to allow
the display and style it, it doesn't work!
I dont see JavaScript code affecting it..maybe I'm missing something
can somebody advice??
http://goo.gl/PE238a
All the code via CSS i try to apply wont make any effect...
I cant figure out why my css wont render what I need to see...
#team-nav li {
background: none repeat scroll 0 0 red !important;
height: 100px !important;
left: 1px !important;
position: absolute !important;
top: 1px !important;
width: 100px !important;
}
I tried to position absolute and opacity 10 but wont work :(
At the wayback machine http://goo.gl/hYhuHB
i can see the working menu in a captured page of the site....
but there is so much addded code that I get confused..
You need to add the following style to your #nav
#nav {
position: relative;
z-index: 3;
float: left;
margin: 0;
border-bottom: solid 1px #ccc;
width: 700px;
padding-top: 100px;
overflow: initial;<-- Added
}
Since your overflow is hidden and you #nav is position:relative; the submenu which overflows your #nav cannot be displayed. Try the above code that works like a charm. You can also add overflow:visible;
NOTE: Your mobile.css inherits the values of your screen.css. #menu, #nav{overflow:hidden} so your screen.css has to change with #nav{overflow:visible}
The site I've made is at www.marigolds-cleaners.co.uk.
As you can see the menu looks fine in firefox and all the other browsers I've tested in, but for some reason there is padding or margin or something that is creating space between the menu links and the pink line at the bottom.
What is causing this problem?
Its because of the padding in the outer div
#block-system-main-menu {
padding: 0 0 2px 0;
Once you remove the padding, it will be fine
#block-system-main-menu {
padding: 0;
#block-system-main-menu .menu li {
float: left;
list-style-image: url("../images/bullet.png");
margin: 0 4%;
}
with this code looking nice in my browsers
I have this website I'm making for my aunt.
I seem to have a problem with this menu.
When I put the browser on my 1920x1280 screen it's all perfect but when I put it on a lower resolution screen the menu bar goes out of screen on the right, but what is strange about this is is that my width is at 100%.
You can find the website here : mathiasotw.be
Thanks in advance.
P.S.: if you want the code i can post it . but normally u can see the code by right-clicking and inspecting it or pressing F12.
You have applied 20px padding for DIV with ID menu
change it to
padding:20px 0;
It should work for you.
Your new css should be looking like below:
#menu {
background: none repeat scroll 0 0 white;
box-shadow: 0 1px 6px black;
float: left;
height: 70px;
padding: 20px 0; // here padding was declared as 20px.
position: relative;
width: 100%;
z-index: 999;
}
I have not gone through your entire CSS file but seen these styles applied in firebug through #menu ruleset.
I'm having a CSS problem in Chrome (build: 17.0.9) with an image element that is not showing up. Please take a look at this link: http://next.lab501.ro/smartphone/nokia-n9-meego-to-go/3
In the top-right part of the main body you should see a list of pages with two image arrows acting as next and previous links. In Chrome only the next image arrow appears.
In any other browser (Firefox, IE9) everything shows up OK. What am I doing wrong?
You have to give .prev - float left [it will automatically make the element block]. is an inline element -> width, height, padding [top, bottom], margin[top, bottom] etc.. will not get applied unless its a block level element.
If you set float:left in your .prev element, it shows up, but you have to lower the right padding so it gets closer to the numbers.
In http://next.lab501.ro/wp-content/themes/new-theme/style.css, it says:
.prev {
background: url(img/nav-left.png) no-repeat scroll 0 0 transparent;
padding: 3px 12px 5px;
margin-right: 2px;
width: 23px;
height: 22px;
}
Add a float: left; to the end of that. I would also change the padding on the right side to move it closer to the numbers. I changed it to 0 in this case. The code now looks like this:
.prev {
background: url(img/nav-left.png) no-repeat scroll 0 0 transparent;
padding: 3px 0 5px;
margin-right: 2px;
width: 23px;
height: 22px;
float: left;
}