ok hi guys i am really confused here now.I have my CSS and HTML code below.
CSS-:
#nav_wrapper ul li{
//float: left;
padding-left: 70px;
position: relative;
left: 33px;
display: inline;
}
#nav_wrapper ul li a{
text-decoration: none;
//display: block;
border: 1px solid black;
}
Below is my HTML CODE-:
<div id="nav_wrapper">
<ul>
<li>ELECTRONICS </li>
<li>APPLIANCES</li>
<li>MEN</li>
<li>WOMEN</li>
<li>BABY&KIDS</li>
<li>HOME&FURNITURE</li>
<li>BOOKS&MORE</li>
</ul>
</div>
Now my issue is when i use display: inline; in #nav_wrapper ul li all the li elements align them self horizontally.And then when i write display: block;(commented for now) in #nav_wrapper ul li a(commented for now) they align them self vertically.Now if i comment display: inline; and remove comments from //float: left;.They align them self horizontally again.How is it working ?????
MY POINT IS-:
How does display: inline; and float: left; property are adjusting them self with //display: block; or i am doing something wrong?
Basically There is two type of element in HTML.
Block type
Inline
Anchor tag(a) is a inline element. So when you use 'display: block;' in Anchor tag(a), it behave like block type element and like other Block type element it takes full width and it looks like vertically aligned. So use the following code and hope it will be helpful -
#nav_wrapper ul li{
display: inline;
}
#nav_wrapper ul li a{
text-decoration: none;
border: 1px solid black;
padding: based on your design;
margin: based on your design;
}
Normally list(li) are shown vertically. But when we have to arrange the list(li) horizontally we can give the display property as inline or can give float:left. Normally block elements like div are shown vertically. If we want to arrange them in horizontal, we can give style as display: inline or give float as left. Please go through the link which i have posted previously to understand about the display properties.
nav_wrapper ul li{
float: left;
padding-left: 70px;
position: relative;
left: 33px;
display: inline-block;
}
#nav_wrapper ul li a{
text-decoration: none;
border: 1px solid black;
}
//try the above code
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 have following CSS code:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
display: block;
width: 100%;
height: 100%;
}
nav li :hover {
background-color: var(--main-color);
color: white;
}
Which makes elements in my navbar look like this:
But there's actually 4 items, not 6. I'll add some padding in <li>:
But when I hover over the first item, I have this ugly white space from both sides of it. Margin does exactly the same thing. Let's remove margin/padding and set <li> width manually to 120px:
First two items are now formatted somehow acceptably, but items a and b take visually far too much space than necessary. What I aim for would be something like this (made in image editor):
In other words, I'd like my <li> elements to have their width adjusted to their content with extra padding, while child <a> elements still take up 100% of <li> space. Any ideas?
Edit
I've updated updated the JSFiddle that you've posted.
You need to change your a element to not have display:block (should be inline instead). Also, you don't need to specify width and height of 100%. Just make your padding: 15px for the a, and you'll have equal, well-spaced hover padding.
I adapted your code above and put it into a codepen, see here:
http://codepen.io/himmel/pen/BNJZoL
Here is how I changed your CSS:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
padding-left: 15px; ** add padding to both sides
padding-right: 15px;
display: inline;
}
nav li :hover {
background-color: brown;
color: white;
}
Try using table layout
body {margin:0}
nav ul {
padding:0;
margin:0;
width: 100%;
display: table;
}
nav li {
display: table-cell;
text-align: center;
}
nav li a {
background: #fafafa;
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px;/*or whatever*/
}
nav li :hover {
background-color: brown;
color: white;
}
<nav>
<ul>
<li>Item</li>
<li>Very long item</li>
<li>a</li>
<li>b</li>
</ul>
</nav>
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
As an example take the following unordered list and it's container:
<div class="table-like">
<ul>
<li><span>Table-cells</span></li>
<li><span>play nice</span></li>
<li><span>automatically</span></li>
<li><span>with auto-height/width/stretching and of course, vertical alignment..</span></li>
</ul>
<ul class="row2">
<li><span>but</span></li>
<li><span>do</span></li>
<li><span>they</span></li>
<li><span>stack up (vertically)?</span></li>
</ul>
</div>
With the following CSS:
.table-like {
display: table;
font-variant: small-caps;
width: 100%;
}
.table-like ul {
display: table-row;
}
.table-like ul li {
background-color: #DDD;
border: 1px solid #FFF;
display: table-cell;
overflow: hidden;
padding: .5em 1em;
vertical-align: middle;
width: 25%;
}
.table-like ul li span {
display: block;
max-height: 2.1em;
}
Is there no way to force a row to stack vertically while retaining the benefits of the display:table-cell property (auto-height, vertical alignment, etc.)?
The following CSS might be close to what you need:
.table-like {
font-variant: small-caps;
width: 100%;
}
.table-like ul {
}
.table-like ul li {
background-color: #DDD;
border: 1px solid #FFF;
display: table;
width: 25%;
}
.table-like ul li span {
padding: 0.5em 1.0em;
vertical-align: middle;
display: table-cell;
height: 2.1em;
}
If you want the cells to stack vertically, you need to have one table-cell per row,
that is how tables work.
What I would do is apply display: table to the li elements, which will force them
to be block level and hence start on a separate line.
You can then apply display: table-cell to the li span elements to take advantage
of the vertical-align properties and so on.
Note that if you want a max-height within the table-cell, you will need to add an
inner wrapper element within the <span> elements and apply a fixed or max-height
to an inline-block display type.
Also, for a table-cell, the height value is taken to be a minimum value (min-height
will not do anything).
Note that if you have long non-breaking text lines, the table width will expand to
accommodate the text, see 4th cell of first ul element. You may need a min-width
value on the table li elements depending on your design.
See demo at: http://jsfiddle.net/audetwebdesign/4tZhd/ and image below:
Trying to put menu text right in the middle. No luck so far, and people here proved to be very helpful. :) text align center usually helps with most of the questions that came up here. Didn't help me though. What am i doing wrong?
<header>
<div id="navmenu">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
</div>
</header>
#navmenu {
margin-left:auto;
margin-right:auto;
height:60px;
width:836px;
}
#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {
display: inline-block;
margin-left:1px;
background-color:#3D3D3D;
width:49%;
height:40px;
color:#FFF
font-size: 15px;
font-weight: bold;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
If the text will always be on a single line, you can vertically align the text by making the line-height the same height as the container.
Add line-height: 40px to your li:
#navmenu li {
...
line-height: 40px;
}
Did you try by giving table-cell (instead of inline-block) for display property for #navmenu li ?
I believe that will work.
I quickly grabbed this snippet out of one of my css files.
This was used to create a top right corner nav bar.
ul {
position: absolute;
top: 20px;
right: 35px;
}
ul li {
display: inline;
text-transform: lowercase;
text-align: right;
padding-left: 10px;
}
Hope that helps
If you want to center the whole menu container, use position:relative, and than apply the margin:auto property. If you need to center the individual links, i hope giving width and text-align center will surely work, as it is a block. If not, you can always use padding-left and padding-right to achieve that. But the width of the menu items will be scaled according to it's content. One more thing, try giving pixels instead of percentage and check. Hope this helps you.