I have a horizontal nav bar, and my a elements are not expanding to be the width & height of the parent li element.
How can I fix my CSS so that the a elements are as wide & tall as the outer/parent li element?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#navbar {
width: 450px;
height: 40px;
background-color: RGB(112,112,112);
list-style: none;
}
#navbar li {
width: 112.5px;
height: 40px;
display: inline;
float: left;
}
#navbar li a {
color: white;
width: 112.5px;
height: 40px;
}
#navbar a:link {
background-color: red;
}
#navbar a:visited {
background-color: purple;
}
#navbar a:active {
background-color: green;
}
#navbar a:hover {
background-color: blue;
}
-->
</style>
</head>
<body>
<ul id="navbar">
<li>home</li>
<li>contact us</li>
<li>about us</li>
<li>other</li>
</ul>
</body>
</html>
By making all a elements display:block
But why, sdleihssirhc? Why?
Because the <a> element is an inline element by default, which means (among many, many other things) you cannot give it a width or a height. If you try, the browser will ignore you.
Make all a elements display: inline-block.
It combines the best of both worlds - you can put them side-by-side without the need for float, and give them whatever width and height you choose. You can even use vertical-align to determine how it should be aligned with surrounding text!
I have indented the additional lines to help with appearance. The a elements must be set to display:block as mentioned by sdleihssirhc. Notice also that by adding some padding to the top ( and subtracting from the overall height of the block) we have some vertical centering as well.
<style type="text/css">
<!--
#navbar {
width: 450px;
height: 40px;
background-color: RGB(112,112,112);
list-style: none;
padding: 0;
}
#navbar li {
width: 112.5px;
height: 40px;
display: inline;
float: left;
}
#navbar li a {
display: block;
float:left;
padding-top: 6px;
text-align: center;
color: white;
width: 112.5px;
height: 34px;
}
#navbar a:link {
background-color: red;
}
#navbar a:visited {
background-color: purple;
}
#navbar a:active {
background-color: green;
}
#navbar a:hover {
background-color: blue;
}
-->
</style>
Modify your CSS as follows:
#navbar li a {
...
display: table;
height: 100%;
width: 100%;
...
}
Related
I'm kind of a beginner using CSS3 and I'm trying to center a li tag that contains a SVG object.
I want the SVG object to appear centered while the other li tags float to the left and right.
Also, the SVG object is bigger than the other li, I'd like to align all the li so the bottom of the SVG is at the same height as the other li.
Any tips on how to do that ?
Thanks !
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
background-color: red;
height: 200px;
}
ul {
list-style: none;
background-color: red;
position: absolute;
bottom: 0;
width: 100%;
}
ul li {
background-color: yellow;
display: inline-block;
float: right;
}
ul li:first-child {
float: left;
}
ul li.svg {
float: center;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg"><object id="svg" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="20%"></object></li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
How about targeting the object #svg ?
Try a text-align: center; for the containing li tag. Works in Safari and Chrome.
I tried to take off the SVG object and it looks like I can't even get the li tag to be centered:
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
background-color: red;
height: 200px;
}
ul {
list-style: none;
background-color: red;
position: absolute;
bottom: 0;
width: 100%;
}
ul li {
background-color: yellow;
display: inline-block;
float: right;
}
ul li:first-child {
float: left;
}
ul li.svg {
float: center;
text-align: center;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg">Example</li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
for this you can simply add this code to your css
ul li.svg {
text-align: center;
}
very simple . but i seen you use incorrect value for "float"
float:center ;
in css float can be
float:right;
or
float :left;
hope this can help
Here's a try with "title" (the first item) floating on left and all generic items on right, due to a margin-left as wide as 2 columns.
Columns have similar but not equal heights by fixing line-height to 1.5 and a multiple of latter. That means you must know the number of items to set height of title with this quick solution.
Codepen: http://codepen.io/PhilippeVay/pen/ORqQoo
Note on semantics: a title should be a h1-h6 element just before this list. If you had previously on your page a h1, than it would be a h2 followed by that list.
/* (Codepen normalize and Autoprefixer are ON) */
.container {
position: relative;
background-color: red;
min-height: 200px;
}
ul {
list-style: none;
width: 100%;
padding-left: 0;
}
li {
width: 33.33%;
}
li:nth-child(n+3) {
margin-left: 66.67%;
line-height: 1.5;
background-color: yellow;
}
li:first-child {
float: left;
line-height: 4.5;
text-align: center;
background-color: tomato;
}
li.svg {
float: left;
vertical-align: top;
background-color: lightblue;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg"><object id="svg" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="20%"></object></li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
I know there are a lot of answers with this subject but it still doesn't work somehow with my code.
Every time I try to center the text with text-align center it doesn't work unless I remove float: left, display: inline or display: inline-block. But then I have a vertical centered navigation bar...
Can anyone help me with this?
This is my HTML code:
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Moviekids festivals</li>
</ul>
</div>
and here is the CSS code:
*{
margin: 0px;
padding: 0px;
}
body {
text-align: center;
font-family: arial;
background-color: white;
}
#wrapper{
width: 960px;
margin: 0 auto;
height: 100%;
text-align: left;
background-color: #1d1d1b;
}
.nav {
background-image:url("img/nav.jpg");
width: 100%;
height: 50px;
display: inline-block;
}
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
text-align: center;
}
.nav a {
text-decoration: none;
display: inline-block;
color: #1d1d1b;
padding: 10px;
}
You need to set the text-align on the parent element like so:
.nav ul {
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
}
See Demo
I just edited your css to acheive what you need
.nav ul {
list-style-type: none;
text-align:center;
}
.nav li {
display:inline-block;
text-align: center;
padding: 10px;
}
.nav a {
text-decoration: none;
display: block;
color: #1d1d1b;
}
DEMO
Always avoid using body text-align try using instead for wrapper.
Make sure you have mentioned <!DOCTYPE html> on the top of your HTML code.
Otherwise your code seems perfect.
I'm trying to build a HTML/CSS dropdown menu which is flexible in width. Due to the position:absolute for the second level of the navigation, I don't get the width of the first level. Removing the position:absolute will move all following elements on hover...
How can I solve this?
Here is the code:
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
<ul class="level_1">
<li>
Level one (1)
<ul class="level_2">
<li>Level two (1)</li>
</ul>
</li>
<li>Level one (2)</li>
</ul>
<p>Paragraph</p>
See the result here: http://jsfiddle.net/5uf2Y/
Hover "Level one (1)" and you will see, that the second level is not the same size like the first level...
You have forgotten two elements for display 100%.
Correction here
1st elements forgets it's :
Position relative on level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
**position:relative;**
}
2nd elements corrections it's :
change size of 2nd li
.level_2 {
display: none;
position: absolute;
width: 100%;
}
With "width:100%" on .level_2 it automatically turns out with the width of its parent.
Add position:relative to level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
position:relative;
}
Try to set the body { width:100%;} property, it will fix this issue, like shown below (added to your original CSS):
body{ width:100%;}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
Hey man you have a margin of 6px on your first row li thats why its a little bigger. I would use a margin left rather than right. That should fix the spacing.
It is common to have a set of links in a footer represented in a list, such as:
<div id="footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I want everything inside div#footer to be centered horizontally. If it was a paragraph, you would just easily say: p { text-align: center; }. Or if I knew the width of the <ul> I could just say #footer ul { width: 400px; margin: 0 auto; }.
But how do you center the unordered list items without setting a fixed width on the <ul>?
EDIT: clarification - the list items should be next to each other, not below.
The solution, if your list items can be display: inline is quite easy:
#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }
However, many times you must use display:block on your <li>s. The following CSS will work, in this case:
#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }
Use the below css to solve your issue
#footer{ text-align:center; height:58px;}
#footer ul { font-size:11px;}
#footer ul li {display:inline-block;}
Note: Don't use float:left in li. it will make your li to align left.
One more solution:
#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }
Then ul doesn't jump to the next line in case of zooming text.
It depends on if you mean the list items are below the previous or to the right of the previous, ie:
Home
About
Contact
or
Home | About | Contact
The first one you can do simply with:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
The second could be done like this:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }
Try wrapping the list in a div and give that div the inline property instead of your list.
The answer of philfreo is great, it works perfectly (cross-browser, with IE 7+). Just add my exp for the anchor tag inside li.
#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */
#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }