This is something that should be pretty simple, but I've been struggling with this for quite a while now. I want an unordered list to remain centered inside a div. The unordered list's display is set to inline, and I want to keep a consistent distance between items in the ul.
In my code below you will notice I have '.menu2' set to display:none. For larger windows I have 2 unordered lists structured vertically, sitting side by side. For the smaller windows which I'm working with now I want to hide one of those ul's and the remaining ul I want to be displayed inline. The only problem I'm having is keeping that ul centered with the page.
Couple of things to note:
-I'm trying to keep the ul on just one line
-This is just supposed to be for tablet sized windows so because of space the ul needs to take up the whole width of the page.
-When I preview this in a browser and resize the window, I've noticed that it seems like the ul remains a set distance from the left side of my window while as the window size changes the gap on the right side of the ul changes. To try and fix this I have tried giving a % position on the right side, but that didn't make any difference.
.menu li {
list-style-type: none;
width: auto;
font-family: source-sans-pro;
font-style: normal;
font-weight: 200;
float: left;
clear: both;
color: rgba(248,248,248,1.00);
padding-top: 1%;
font-size: 100%;
}
.menu {
width: 20%;
margin-top: 12%;
position: relative;
left: 1%;
float: left;
}
#media only screen and (min-width: 482px) {
.menu2 {
display: none;
}
.menu {
width: 100%;
margin-top: 60px;
}
.menu li {
display: inline;
clear:none;
padding-left: 3%;
padding-right: 3%;
font-size: 80%;
}
http://jsfiddle.net/nickatnite_9/8UDC9/embedded/result/
Not exactly how it looks in my page but hopefully it will give you an idea.
It is not working because you have float: left at .menu li
Remove it and add:
display: inline-block;
Related
So I'm developing a web page, and I'm making it now responsive. I managed to get everything responsive except the main menu nav.
It's a ul element and it has li inside with text. Here are some pictures about the problem
Full webpage:
On mobile:
I just want to adjust the text or the ul element to fit without making another line.
Here's the css ul element:
.main-menu ul {
display: table !important;
background-color: #98B709;
padding: 0;
margin: 0;
text-align: center;
}
And the li element:
.main-menu ul li {
display: inline-block;
float: left;
position: relative;
list-style: none;
}
I tried a lot of things but nothing works...
Thanks and hope you guys can help me!
I found a very useful Stackoverflow post that should answer your question:
Responsive Font Size
And I experienced that changing font size and other problematic parts from px to em generally helps to make is more responsive too.
Try to use different font size e.g
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
Here is a variation that does not use display:table, which I always avoid.
The important bit you can play with is the 'width' of the 'li' element. If you really want to squash them all on one line, you can make this a very small %.
If you do use the second line, the 'text-align:center' in the 'ul' element will keep everything centered, instead of floating left as you have it now.
I use this code block all the time; it's a common problem.
#main{
width:100%;
}
#main ul {
display: block;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
}
#main li {
width:10%;
list-style: none;
display: inline-block;
padding: 0;
margin: 8px;
}
I am using this template on my website: http://www.css3templates.co.uk/templates/CSS3_gallery_grey/index.html
jsfiddle: http://jsfiddle.net/uPw85/
What I need help with:
1) Center the menu on the page, as you can see on the link it's left aligned.
2) Still keep the text in the drop down menus aligned to the left (just as in the link above).
I've searched this page and on Google a lot before asking for help and none of the results have worked for me. I've tried just about every tip I've found but the menu still won't be centered for me, the only thing that happens is that the text in the drop down menu is centered but I want to keep it to the left.
I've tried with multiple variations of these in different places (nav, menu, li, ul) in the CSS but with no luck:
display: inline-block;
margin-left: auto;
margin-right: auto;,
margin: 0 auto;
text-align: center;
width: auto;
EDIT 2/10, 1 PM EST: I appreciate you guys trying to help but so far none of the answers you've given has helped.
Try this:
ul.sf-menu {
text-align: center;
}
ul.sf-menu li {
display: inline-block;
}
ul.sf-menu li a {
display: block;
}
ul.sf-menu ul {
text-align: left;
}
EDIT:
I've edited the JSfiddle: http://jsfiddle.net/uPw85/3/
EDIT 2:
Remove float: left in ul#nav, or just remove the id="nav" in the ul-tag in the html
In order to center the menu you need to set the width of the child div to be smaller than a set width of a parent. Additionally need to remove the float of the menu as floating an element effectively takes it out of the parent div.
Try setting the following:
ul.sf-menu {
float: none;
width: 760px;
margin: 0 auto;
}
Works when inspecting element. Another alternative would be to try the following code.
ul.sf-menu {
float: none;
display: table;
margin: 0 auto;
}
Just add:
ul#nav {
float:left;
padding-left: 80px;
}
Hi There when I make my browser smaller than 420px (Using Chrome Stable) the Navigation elements in the first navigation line disapear, when I hover them. I cannot find the mistake.
Can anybody help? Website is: http://www.tokemedia.de
go to style.css and change display:inline to inline-block;
#navi ul li {
float: left;
margin-left: 10px;
list-style: none;
text-align: center;
display: inline-block;/* not inline*/
}
Ok. This is really weird and I have spent countless hours in vain searching for anything similar. I will add code, but you'll need visuals as well, so I'll include a couple of cropped images to show you what I mean.
My goal: Simple. Push my horizontal nav bar in my footer about 25px below the top edge of the footer. (Footer has a static background image)
Code used: #footer ul {margin:25px}
Result: No change.
HUH? So I played with it... tried several variations, but nothing worked. NOW, I did find a workaround... used padding instead of margin... but it bothered me that margin wouldn't work so I kept trying to figure out if I messed up my code somewhere.
I used float in the body, but I cancelled it out. Validations all came out ok. So I accidentally stumbled upon Firebug (never used it before... and still don't know how) but in my aimless clicking, I noticed something odd... when I clicked onto my footer ul, a box overlapping the footer and content was highlighted. So it appeared that my margin did exist, but instead of pushing my nav list down... it kept the nav list static, and expanded into the content.
HUH? So I did a little experiment. I created a bright border around the divs in my content and footer and ul to figure out exactly what was happening. (My content section has three divs: content (floating left); sidebar (floating right); and contentWrapper that contains both).
With the borders on, I noticed that my 'outerContent' div was collapsed. A mere 20% or so of the height of the area. So after some (lengthy) research, I came up with the overflow-auto fix. And although I still don't quite understand it, it worked. The contentWrapper expanded to meet the footer, and the footer ul moved to where I wanted to.
So problem fixed, right? Well..... not exactly.
My previews did fine, so I went back in and deleted the borders so I can get on with the rest of the formatting. Only when I previewed again... the footer ul was right back where it started. At the very edge of the top of the footer.
I did the borders again... the divs seemed fine, except that the contentWrapper was now pushed slightly above the footer to allow for that margin.
Now the REALLY weird thing is that when I put the border around my footer... the ul margin works. When I take it off... the ul goes back to where it was.
What the #$#%!? Although I know of the workaround (the padding) I am worried about compounding whatever mistake I have made and repeating constantly in the future (I have to build another website after this). If someone can figure out what I did to screw things up... it would be GREATLY appreciated.
#contentWrapper {
overflow: auto;
padding: 20px 10px;
}
#content {
float: left;
width: 660px;
}
#content h1 {
padding: 0 0 20px;
}
#content h2 {
padding: 20px 0 10px;
}
#content p {
line-height: 160%;
text-align: justify;
}
#content img {
float: left;
margin-right: 10px;
}
#content ul {
line-height: 160%;
list-style: disc outside url("../images/Bullet-artsy1.png");
margin: 0 0 10px 325px;
padding: 10px 0;
}
#content .info {
margin: 5px 0 10px 250px;
}
#rightSide {
float: right;
line-height: 140%;
padding: 0 10px;
width: 220px;
}
#rightSide h2 {
margin-top: 10px;
padding-bottom: 10px;
}
#rightSide p {
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
text-align: justify;
}
#rightSide img {
display: block;
margin: 5px auto;
}
#footer {
background-image: url("../images/TCS-Footer1b-plain-230px h.png");
background-repeat: no-repeat;
clear: both;
height: 230px;
}
#footer ul {
list-style: none outside none;
margin: 25px;
text-align: center;
}
#footer ul li {
display: inline;
margin: 30px 0;
}
#footer ul li a {
color: #E8FAFF;
padding: 30px;
}
#footer p {
color: #E8FAFF;
text-align: center;
}
#footer img {
bottom: -60px;
position: relative;
right: -900px;
}
The site is not active, but I've uploaded a word doc with images showing what I am talking about. This is the link to Temp Share: http://temp-share.com/show/dPf3UCobW
Thanks in advance to everyone who can perhaps show me where I went wrong.
First, to prevent your margin from disappearing, either change the margin on the #footer ul element to padding, or add one px of padding to the #footer element.
In this fiddle, we've set the padding on the #footer to 1px and reduced the height by 2px to compensate.
FIDDLE
#footer ul {
list-style: none outside none;
padding: 40px;
text-align: center;
}
or
#footer {
background-color: #DDDDDD;
background-repeat: no-repeat;
clear: both;
color: #808080;
font-size: 12px;
height: 228px;
padding: 1px;
}
looking at the css, your padding settings on the <a> tags won't work the way you expect, since by default they are aren't block elements. Add this to the css to have them padded correctly:
#footer ul li a {
display: inline-block;
}
likewise, your ul li should be inline-block.
so ...
#footer ul li {
display: inline-block;
margin: 30px 0;
}
#footer ul li a {
display: inline-block;
color: #E8FAFF;
padding: 30px;
}
Basically, just be aware that when top and bottom margins touch, including those of parent and child elements, the largest margin is used, but the margin is pushed outside the outermost element.
I tested it using firebug and working fine. If you have problem you can add !important at the end as this
#footer > ul {
margin: 13px !important;
}
And even what you would like to do is to get some margin before and or after the ul. For this you could set margin and/or padding value to your #footer.
Hope this help!
This is for future reference. I simply wanted to add the following link to compliment Dom Day's above. I am still having difficulty conceptualizing the event but between the two links, it will help me research it until I find the equivalent to an 'adjoining/collapsing margins-for-dummies' site. www.w3.org/TR/CSS2/box.html - Details near the bottom of the web page.
Here's my struggle. So I've been wondering how I could make the navbar-links fill out 100% of the nav. So that they have an equal amount of spacing and the font-size will decrease if more links were added - this way it will always fill out 100%.
As it is now, I cannot seem to achieve this. I've only got a set padding, but I've tried doing stuff like:
display: block;
float: left;
width: 100%;
but it's giving me all kind of effects that doesn't work at all :S
Anyone able to help me out on this?
Codepen example
Remove width from #main-navigation and add with to #main-navigation li with a value equal to the 100/the_numberof_elements_in_the list. Your css should be:
#main-navigation {
height: 54px;
overflow: hidden;
border-bottom: 1px solid black;
}
#main-navigation ul {
height: 54px;
overflow: hidden;
}
#main-navigation li {
font-size: 1.0em;
text-transform: uppercase;
list-style: none;
float: left;
width: 20%;
}
This way you'll have your nav occupying all the available width, but your font-size will not automatically resize. You'll should change it also in function of the number of elements (similar the way you have to do to the li's width). If your are generating this list dynamically at server side, you could do the same with the css and then calculate the right values for these two attributes. If your are using ajax to populate the list, you could do change the attributes with javascript.
A way of doing this is using display: table on the parent and display:table-cell on the children. I believe it won't work on some versions of IE (of course). Here's an exaple
You can use the nav tag instead and treat it as table. Treat the <ul> tag as table-row and <li> tag as table-cell. Ex:
nav{
display: table;
text-align: center;
width: 100%
}
nav ul{
display: table-row;
}
nav ul li {
display: table-cell;
}
This will stretch the contents of <li> 100%
I learnt it from the following link: http://www.darkstardesign.com/darkstar-blog/2012/11/27/stretching-horizontal-navigation-menus-to-the-full-width-of-a-layout/