I wanted to put some image in first list item but it seems to mess up when it's no content. i tried various methods in jsfiddle (various options of display and position) but none of them works to align inline al "li" when first is empty. it seems to be problem with inline property. Do enyone had such hilarious problem, and have clear solution.
PS: ul li {display:block; float:left;} doesn't work
ul {
font-size: 0px;
display: inline-block;
height: 40px;
width: 100%;
background-color: black;
}
ul li {
font-size: 14px;
display: inline-block;
width: 50px;
background-color: red;
border: solid black 1px;
height: 38px;
margin: 0px;
padding: 0px;
text-align: center;
}
div {
heght: 1.5em;
margin: 0px;
padding: 0px;
}
<ul>
<li>
<!--no content list item, why it mess up align to top others-->
</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
you need to reset vertical-align propertie to vertical-align:top; (defaut is baseline and depends on content wich sets the line-height)
https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
examples to play with
ul {
font-size: 0px;
display: inline-block;
height: 40px;
width: 100%;
background-color: black;
}
ul li {
font-size: 14px;
display: inline-block;
vertical-align:top;
width: 50px;
background-color: red;
border: solid black 1px;
height: 38px;
margin: 0px;
padding: 0px;
text-align: center;
}
div {
heght: 1.5em;
margin: 0px;
padding: 0px;
}
<ul>
<li>
<!--no content list item, why it mess up align to top others-->
</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Add vertical-align: top; to your li elements.
overflow: hidden; is missing into "ul li { }"
Use this:
ul li {
font-size: 14px;
display: inline-block;
width: 50px;
background-color: red;
border: solid black 1px;
height: 38px;
margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
ul li {display:block; float:left;}
works for me.
JSFiddle
Related
I have a list that uses display: inline-flex. The font-sizes of different items in the list are different. I discover that the list items are aligned according to the position of the bottom of the text. This makes the items with the smaller text sizes to appear lower than the others.
However, I want to align the items by the base of their bounding rects.
I have have found a hack to resolve this: I place a span containing a dot either side of the text I want to show, I set the font-size of this dot to size of the largest font-size in the list, and I set the visibility of these spans to hidden.
Is there a non-hacky, pure CSSÂ way to achieve this?
JSFiddle
body {
margin: 0;
}
ul {
padding: 0;
margin: 0;
}
li {
display: inline-flex;
border: 1px solid #000;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
font-size: 64px;
line-height: 64px;
}
li:last-child {
font-size: 16px;
}
span {
font-size: 64px;
visibility: hidden;
}
hr {
position: absolute;
top: 47px;
width: 204px;
}
<ul>
<li>1</li>
<li>2</li>
<li>THREE</li>
</ul>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li><span>.</span>THREE<span>.</span></li>
</ul>
You can achieve the alignment you want by adding display: flex to the container, in this case the ul element.
fiddle
body {
margin: 0;
}
ul {
padding: 0;
margin: 0;
display: flex;
}
li {
display: inline-flex;
border: 1px solid #000;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
font-size: 64px;
line-height: 64px;
}
li:last-child {
font-size: 16px;
}
<ul>
<li>1</li>
<li>2</li>
<li>THREE</li>
</ul>
I am trying to make some sort of a "2 option choice game" by using two circles as buttons. Within the circle there should be a text, which is centered and does not stick out from the circle. But, when the text is too large, it sticks out underneath the circle.
HTML:
<body>
<header>
<h1>Choose</h1>
</header>
<ul>
<li>Read a book and lay on bed the whole day</li>
<li>Go outside and ride a bycicle with friends</li>
</ul>
</body>
CSS:
h1 {
text-align: center;
font-family: 'oswalditalic';
font-size: 48px;
margin: 0;
}
ul{
text-align: center;
padding: 0;
}
ul li{
font-family: 'oswalditalic';
display: inline-block;
list-style-type: none;
margin:15px 20px;
color: black;
font-size: 26px;
text-align: center;
height: 300px;
width: 300px;
line-height: 300px;
-moz-border-radius: 50%;
border-radius:50%;
background-color: blue;
}
https://jsfiddle.net/sf3dquLs/
It's because of the value of the line-height to vertically center content. It works when there's one line but with two or more lines, it apply the 300px line-height and it is too much.
You can use display:table-cell combined with vertical-align: middle to make it works instead.
h1 {
text-align: center;
font-family: 'oswalditalic';
font-size: 48px;
margin: 0;
}
ul{
text-align: center;
padding: 0;
display: table;
margin: auto;
border-spacing: 30px;
}
ul li{
font-family: 'oswalditalic';
display: inline-block;
list-style-type: none;
margin:15px 20px;
color: black;
font-size: 26px;
text-align: center;
display: table-cell;
height: 300px;
width: 300px;
-moz-border-radius: 50%;
border-radius:50%;
vertical-align: middle;
background-color: blue;
}
<body>
<header>
<h1>Choose</h1>
</header>
<ul>
<li>Read a book and lay on bed the whole day</li>
<li>Go outside and ride a bycicle with friends</li>
</ul>
</body>
The problem you are facing is due to the line-height:300px. The effect of this is that every line (also after word-wrapping) will occupy 300px. I see that you added this property to center your text. So if we remove the line we must find another way to accomplish the centering. Another possible way is to use a :before element and giving it a certain height.
h1 {
text-align: center;
font-family: 'oswalditalic';
font-size: 48px;
margin: 0;
}
ul {
text-align: center;
padding: 0;
}
ul li {
font-family: 'oswalditalic';
display: inline-block;
list-style-type: none;
margin: 15px 20px;
color: black;
font-size: 26px;
text-align: center;
height: 300px;
width: 300px;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: blue;
word-wrap: break-word;
}
ul li:before {
display: block;
height: 120px;
content: "";
}
<body>
<header>
<h1>Choose</h1>
</header>
<ul>
<li>Read a book and lay on bed the whole day</li>
<li>Go outside and ride a bicycle with friends</li>
</ul>
</body>
So, I have a navigation bar and then an <ul> which has some <li>inside. I want it to be vertically aligned with the navigation bar .navbar but it seems it's not working. Do anyone have andy idea what am I doing wrong?
Here is the fiddle and code: http://jsfiddle.net/x7EAg/2/
<style>
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
</style>
<nav class="navbar" role="navigation">
<div class="container">
<div class="logo-holder"></div>
<ul class="sections">
<li>Shop</li>
<li>Team</li>
<li>Events</li>
<li>Experience</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Thank you!
If I understand what you are trying to achieve. Then you should make the logo absolutely positioned and then aligning the ul can be done with line-height. Full css:
.navbar {
width: 100%;
height: 90px;
line-height:90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
}
And updated fiddle
i changed the display of your logo-holder to inline-block and then set vertical-align:middle
now it appears next to the logo, and vertically centered.
see here for a fiddle http://jsfiddle.net/gaurav5430/x7EAg/3/
this is the complete css:
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
display:inline-block;
vertical-align:middle;
}
.navbar .sections {
display:inline-block;
vertical-align:middle;
list-style: none;
margin:0px;
padding:0px;
background:#aaa;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
What I believe is going on is your logo is pushing your ul down. like was mentioned above. You may want to float your logo-holder class left. That would allow you to position your li as you needed. Line-height is a way to do this, you could also use margin, padding, or absolute position for your li as needed. Good luck.
So I'm trying to keep an unordered list centered once the website hits a certain media query. I can't get it to stay in the center of it's container if the page is moved around. Here is the corresponding code.
HTML
<div id="centerNav">
<ul id="home-nav">
<li>DUI/DWI Defense</li>
<li>Criminal Defense</li>
<li>Estate Planning</li>
<li style="border: none;"> Agricultural Law</li>
</ul>
</div>
CSS
#media only screen and (max-width: 839px)
{
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
}
#home-nav li {
float: left;
position: relative;
display: block;
text-align: center;
background: none;
font-size: 20px;
width: 158px;
border-right: 1px solid #fff;
margin-top: 8px;
line-height: 1em;
padding-left: 10px;
}
#home-nav {
list-style:none;
position:relative;
height: 60px;
vertical-align: middle;
z-index: 5;
border-top: 4px double #fff;
border-bottom: 4px double #fff;
border: none;
margin: 0;
background: #7a0426;
}
}
Remove float from li and make it display: inline-block
I think this will solve your issue.
css
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
text-align:center;
}
#home-nav li {
position: relative;
display: inline-block;
text-align: center;
background: none;
font-size: 20px;
border-right: 1px solid #fff;
line-height: 60px;
padding:0 10px;
}
jsFiddle Code
In your media query you need to make sure float is none because you have float set from previous css
#home-nav li {
float: none;
display: inline-block;
}
The unordered list that contains the li, add text-align: center
#home-nav {
text-align: center;
}
Also your html structure is currently invalid because you have a div as the immediate child of a ul. You can wrap the ul with the div if you need to but it definitely should not be the way it is now
That should solve the issue
I have this code:
<div class="container" id="container">
<div class="content" id="content">
<div class='nav'>
<ul>
<li><a href='#'>One</a></li>
<li><a href='#'>Two</a></li>
<li><a href='#'>Three</a></li>
<li><a href='#'>Four</a></li>
<li><a href='#'>Five</a></li>
</ul>
</div>
<div class='innercontent'>
test
</div>
</div>
</div>
With the following CSS:
.content {
background-color: blue;
height: 190px;
padding: 30px;
}
.nav {
background-color: blue;
display: inline-block;
height: 140px;
width: 200px;
margin: 10px;
}
.nav a {
display: block;
text-decoration: none;
color: white;
font-weight: bold;
}
.nav li {
list-style: none;
padding: 0px;
background-color: #369;
padding: 4px 5px;
margin: 8px; 0px;
border-radius: 15px;
text-align: center;
}
.nav ul {
background-color: yellow;
padding: 0px;
margin: 0px;
}
.innercontent {
top: 0px;
background-color: red;
display: inline-block;
height: 20px;
width: 150px;
margin: 10px;
}
Problem: The second div (innercontent)'s top should exactly line up with the first ul's top. What have I done wrong?
Two things and you're done:
add float:left; to .nav
change margin:20px; in .innercontent
so in the end it should look like
.nav {
background-color: blue;
display: inline-block;
height: 140px;
width: 200px;
margin: 10px;
float:left;
}
.innercontent {
top: 0px;
background-color: red;
display: inline-block;
height: 20px;
width: 150px;
margin: 10px;
}
The float is necessary so .innercontent can float around .nav
Try setting the vertical-align:top; for the content. By default the vertical-align is set to baseline.
add float:left for both .nav and .innercontent
I see that you use top property for .innercontent but keep in mind that this properties are used only with positioned elements (relative,absolute,fixed)
I suggest you to read the following two articles to understand how position and float works:
CSS Floats 101 & CSS Positioning 101.
Demo: http://jsfiddle.net/GYPJH/