So here is my code:
#headerMenu_outer #headerMenu_inner
{
background-color:#333333;
}
#headerMenu_outer #headerMenu_inner li
{
padding-left:15px;
padding-right:15px;
text-align:center;
font-size:13px;
font-weight:bold;
display:inline;
color:#00FF33;
background-color:#00CCCC;
cursor:pointer;
}
I want headerMenu_inner to be centered inside of headerMenu_outer. Usually, "margin-left: auto" and "margin-right: auto" works. However, headerMenu_inner is occupying the entire width of headerMenu_outer. Is there anyway to make it not do that? I want it to be as wide as the li's need it to be.
Thank you
#headerMenu_inner is most likely a block-level element and therefore will take up as much horizontal space as it can. Assign a width to that element, and then do your margin trick, e.g. margin: 0 auto to center it.
If you want it to be as wide as the LIs, (off the top of my head) set the LI elements to not wrap, then set the "inner" element to be display: inline-block.
Related
JS Fiddle here
I am attempting to align child elements evenly between left and right. I tried using margin-left and right: auto but nothing happened.
Here is a screen shot of the navigation in question. I have added a border of 1 px around each element so you can see:
I'd like the nav line items to be centred in comparisson to their parent. So in the image the line items would move to the right a bit to be centred between the parent rectangle, which is an unordered list.
Here is my approximation of the relevant html:
<nav>
<div id="main-nav">
<ul id="menu-main">
<li>cats</li>
<li>dogs</li>
<li>sheep</li>
</ul>
</div>
</nav>
Currently relevant (I think) CSS is:
#main-navigation {
display: inline;
float: left;}
#main-navigation div {
display: block;}
#menu-main {
position: relative;
float: left;}
#menu-main li {
float: left;
}
Put another way, I'd like to centre floated child elements against the parent. If I zoom in and out with my browser I can see that the nav adjusts and change size with some line items moving between top and bottom row in order to fit.
But is there a way to ensure that, whatever the current size of the nav, the child line items will be centred?
Here's another picture, where I have manually added a margin left to #menu-main.
Now it looks more centred on my screen right now. But is there a way to auto centre it?
See this : http://jsfiddle.net/rahjrLny/1/
You don't need to float your li elements, simply set them to display:inline . Then you can add text-align: centre to your ul element, and all should be good.
(You'll need to remove some margins that have appeared in the fiddle due to the changes)
This would be my solution: JSFiddle
There's some redundant CSS (for example, no need to specify #main-navigation div {display: block;} if you don't have any div elements inside the #main-navigation).
I've gone with display:inline-block as opposed to display:inline (plus added some colour borders for visual clarity). Please bear in mind I'm working with the code you supplied in the question rather than building the code from the screenshots.
nav {display:inline-block; width:100%;}
#main-nav {
float:left;
width:100%;
}
ul#menu-main {
margin:0;
padding:0;
text-align:center;
width:100%;
float:left;
}
#menu-main li {
list-style: none;
padding: 0.5em;
display:inline-block;
}
EDIT: I answered this question before I observed there was a fiddle supplied, and worked instead from the code supplied in the question. This may not be the right answer for OP but I'm going to leave it alone for now as I believe it gives a valid example of how one could approach the task of centering a nav list.
I am making a website's top navigation. There is a margin bug with the menu.
I have defined margin / padding : 0 for list items as well as display: inline-block.
See the demo: http://tinkerbin.com/495Qb956
Basically I want to remove that left/right margin from the list items, and know why this margin is there.
By default display:inline-block take margin from left. Write like this:
.top-right ul {
background:black;
height:43px;
font-size:0;
}
.top-right ul li {
display:inline-block;
border:1px solid red;
margin:0;
padding:0;
font-size:13px;
}
Check this http://tinkerbin.com/YWeV7osy
That room you're seeing are spaces between the blocks. If you remove all white-space between the </li> and <li> you'll see the space disappear. Basically an inline-block will behave like a word in a sentence, and any white-space between two of those blocks will be folded into 1 space char.
One solution is to use floats to make the blocks stick together:
li { float: left; }
You might need to clear the elements that come after such floating elements.
Why can't the #navbar be shifted further upwards ? I tried margin-top but it didn't work. Only an extremely large value had some effect, but the positioning is too skewed.
The #container contains all 3 elements.
#container {
position:relative;
margin: 0 auto;
width:790px;
}
#chicklogo {
float:left;
border:1px solid black;
}
#rightext {
float:left;
border:1px solid black;
}
#navbar {
clear:both;
border:1px solid blue;
}
It can't because #navbar has clear:both and is going to fall under the tallest of the floated elements. From your image, you can see that #rightext is taller and #navbar sits flush under it.
If you gave the logo and right text the same height then your nav would sit just under both.
I have created a JS Fiddle to demonstrate a negative margin-top which would mean the navbar would overlap the preceding element, even though it is set to clear: both.
Ideally, you would reduce the height of the #righttext element as it looks like the white-space in that element is causing your layout issue, but the negative margin-top can also work if that isn't possible.
I would like to center a text element (in this case, the h2 sub-headline) by having it ignore the floated image to the left. My preference would be for the h2 sub-headline to vertical center-align with the h1 headline. Is there any way to do this with CSS alone?
Here is a sample layout:
http://tinyurl.com/84otx8y
Note: the width and height of the sample image may change.
You want to ignore the floating element? That's possible, however, I would not recommend this, as this will create an ugly result if your h2 headline is to wide:
.wrapper{
position:relative;
}
.wrapper h2{
position:absolute;
left:0;
right:0;
margin-top:1.5em
z-index:2;
}
.wrapper h2 + p{
margin-top:2.5em;
}
Note that this solution will have the h2 border on top of the image. You can prevent this by using position:relative;z-index:4 on your floating image.
Here's my current markup: http://jsfiddle.net/LcMU3/64/.
I am having issues with positioning / aligning elements in the middle column.
First, I want to vertically align the elements in the middle and also horizontally center.
Second, I want to "float" the arrows to the left and right of the "weekLabel".
Ultimately, it would look like this:
I actually did try positioning and aligning the elements in nested 3-column layout, but the main issue I have with this approach is the HTML markup gets difficult to follow with all the nested divs.
Would appreciate any help.
As well as a display:inline-block since a div by default is display:block
.weekLabel{
display:inline-block;
float:left;
}
.leftArrow {
display:inline-block;
float:left;
}
.rightArrow {
display:inline-block;
float:left;
}
http://jsfiddle.net/LcMU3/67/
you have to give these elements a float:left; and assign an text-align:center to the weeklabel to center the text, and some margins to finish it off:
.leftArrow {
float:left
}
.rightArrow {
float:left;
}
.weekLabel{
float:left;
text-align:center;
margin-left:10px;
margin-right:10px;
}
Combo inline-block/vertical-align FTW:
.leftArrow,.rightArrow,.weekLabel {
display:inline-block;
vertical-align:middle;
}
(beware of the #wrapper's width)