Having the following code: http://codepen.io/anon/pen/wCcfA
HTML:
<ul id="menu-main-menu">
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Portfolio</a></li>
<li><a>Blog</a></li>
<li><a>Contact</a></li>
</ul>
CSS:
#menu-main-menu {
padding: 0;
height: 77px;
-webkit-column-count: 2;
-webkit-column-gap: 42px;
border: 1px solid blue;
width:250px;
}
#menu-main-menu li{
display: block;
list-style: none;
height: 24px;
border: 1px solid red;
}
How can I vertically align all the "li" elements at the very bottom of "menu-main-menu" rather than at the top?
How can I vertically align all the "li" elements at the very bottom of "menu-main-menu" rather than at the top?
I don’t think vertical-align can be applied here.
But there is an approach that should work: Using transform to first flip the whole menu around on the Y axis – and then again on the list items to flip them “back” to readable:
#menu-main-menu {
/* … */
-webkit-transform:scaleY(-1);
transform:scaleY(-1);
}
#menu-main-menu li{
/* … */
-webkit-transform:scaleY(-1);
transform:scaleY(-1);
}
http://codepen.io/anon/pen/Abrxl
Of course flipping the menu around changes the order of items – to correct that, their order in the HTML would have to be changed too: http://codepen.io/anon/pen/yxDsi Whether that’s a compromise your’re willing to make, is for you to decide.
I added the -webkit- prefixed version and the unprefixed one here, and also the -moz- versions of the column properties, yet in Firefox there seem to be some extra margins or something like that going on. That seems to come from applying the columns properties already though, and doesn’t seem to be a result of applying the transformation. Maybe you’ll find a solution to make that look smoother by yourself.
One solution is to use margin-top every 4n li elements like:
#menu-main-menu {
padding: 0;
height: 77px;
-webkit-column-count: 2;
-webkit-column-gap: 42px;
border: 1px solid blue;
width: 250px;
}
#menu-main-menu li {
display: block;
list-style: none;
height: 24px;
border: 1px solid red;
position: relative;
}
#menu-main-menu li:nth-child(4n) {
margin-top: 24px; /*add margin top*/
}
<ul id="menu-main-menu">
<li><a>Home</a>
</li>
<li><a>About</a>
</li>
<li><a>Portfolio</a>
</li>
<li><a>Blog</a>
</li>
<li><a>Contact</a>
</li>
</ul>
Related
I'm trying to figure out if it's possible to incorporate a css border around an image I imported as a custom bullet for my li's:
ul {
list-style: none;
margin-right: 0;
padding-left: 0;
list-style-position: inside;
}
ul > li {
align-content: center;
display: flex;
margin: 5px 0;
padding-left: 1em;
text-indent: -1em;
}
ul li:before {
/* I'm a different image but found a similar
sized one online for demonstration
purposes seen below */
content: url("https://www.dicentral.com/css/assets/imgs/Flag_Nation_france.png");
border: 1px solid grey;
}
<ul>
<li>Get to know the business</li>
<li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li>
<li>Learn how the team's priorities impact our mission</li>
<li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li>
</ul>
The results in the embedded code editor mirror that of the image I'm using.
This is the desired output:
Any ideas? I'm thinking unfortunately I might have to import the icon with border, but am seeing if I can manage without.
Thanks!
Yes, it is quite easy to do, please take a look at the example below. You just mess up things a bit.
You have align-content instead of align-items that makes line positioning incorrect. text-indent results into incorrect offset. I've removed these small issues.
About image itself - I've used em as example because of emoji, but for image it will be better to use px and re-calculate values that are currently defined as em.
ul {
margin-right: 0;
padding-left: 0;
list-style: none;
}
ul > li {
align-items: center;
display: flex;
margin: 5px 0;
}
ul li:before {
/* I'm using the url method to fetch an icon, but
inserted a emoji for demonstration
purposes seen below */
/*content: url("path/to/icon");*/
content: '🚩';
border: 1px solid #808080;
border-radius: 100%;
width: 1em;
height: 1em;
display: inline-block;
padding: 0.25em;
line-height: 1.0;
margin-right: 0.5em;
}
<ul>
<li>Get to know the business</li>
<li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li>
<li>Learn how the team's priorities impact our mission</li>
<li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li>
</ul>
there are many ways to achieve result.
1) use image with rounded border as background on "li". background should be no-repeat left center and some padding-left on li.
2) give height, width, inline-block and border-radius to li:before.
You should remove "display:flex" from ul > li
ul {
list-style: none;
margin-right: 0;
padding-left: 0;
}
ul > li {
align-items: center;
display: flex;
margin: 5px 0;
}
ul li:before {
/* I'm using the url method to fetch an icon, but
inserted a emoji for demonstration
purposes seen below */
content: '🚩';
border: 1px solid #808080;
border-radius: 100%;
width: 1em;
height: 1em;
display: inline-block;
padding: 0.25em;
line-height: 1.0;
margin-right: 0.5em;
}
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I can't figure out how to remove this space from my navbar and the picture..
The CSS code I have for the navbar and the image is:
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner is the image id.
And the html goes like so:
<header>
<img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
<h1 id="pagetitle">Cycling Tours</h1>
<nav>
<ul>
<li>About Us</li>
<li>Ask Us</li>
<li>Destinations</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Seminars</li>
<li>Trip Prep</li>
</ul>
</nav>
</header>
Looking for a universal fit as I have other things with white space between them as well.
Thanks.
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
what space you are talking about ?
Keep in mind h1 by default has white space around it
every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.
h1 {
margin: 0;
padding: 0;
}
look at this jsfiddle https://jsfiddle.net/zn7wtdLp/
This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.
Nav Items
There are two popular solutions:
Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).
So my CSS would look something like this:
ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
Images
If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:
header img {
display: block;
margin: 0 auto;
}
The problem is display:inline. This treats the elements like text, so if you have
<li>...</li>
<li>...</li>
you have the problem you mentioned, because the linebreaks cause a space.
Try to put your list elements like this:
<li>...</li><li>...</li>
For other solutions see here
i'm pretty new to css and html and trying to make a site to work on improving and learning. I've been searching and cant figure out how to fix my menu in the sidebar, to me it looks like the li's in the ul are floating to the right for some reason, heres my code:
also Jsfiddle Link:
https://jsfiddle.net/h2bpxcxe/
#side-bar #recents {
width: auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#recents h3 {
text-align: center;
padding-top: 4px;
}
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
}
#recents ul li {
padding: 2% 0px;
border-bottom: 1px solid black;
background: grey;
Thanks if somone can help! :)
UL-elements have a padding-left by default.
You need to reset this padding which will center your li-elements in your sidebar.
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
padding-left:0px; //Adding this will center your LI's
}
FIDDLE
a tip for when dealing with issues like this. Look at the element in your browsers developer tools. Padding and Margin will always be shown clearly there.
I feel there is also an issue with the positioning of the sidebar's list/ul element.
If you apply:
#recents ul {
position:absolute;
}
to your CSS, it will preclude the list element from overflowing the parent, which is the case with your current code. Here's a jsfiddle: https://jsfiddle.net/46t4f5zs/
just do like this
<div id="recents">
<ul><h3>Recent Posts</h3>
<li>Recent One
</li>
<li>Recent Two
</li>
<li>Recent Three
</li>
<li>Recent Four
</li>
</ul>
</div>
I'm a CSS-beginner. Basically I have the following html:
<ul>
<li>О нас</li>
<li>Галерея</li>
</ul>
I want to have a thick underline when hovering my a tags, but I use a custom font with big descenders, so if I use the common trick for this:
a:hover {
text-decoration: none;
border-bottom: 2px solid;
padding: 0;
margin: 0;
}
The underline is far below the base line: But I want it to look like this:
I tried to do it like this:
<ul>
<li class="over">О нас</li>
<li class="over">Галерея</li>
</ul>
.over{
font-size: 30px;
height:30px; // makes the text overlap this element
overflow:visible;
}
.over:hover {
border-bottom: 2px solid #ec6713;
}
But the width of the underline is the same for all the strings now:
Then I added display: inline-block; for .over. But I got this:
Then I changed inline-block to table, but the underline is again far below:
I ended up adding an extra span, so now I have:
<ul>
<li><span class="over">О нас</span></li>
<li><span class="over">Галерея</span></li>
</ul>
.over{
font-size: 30px;
height:30px; // makes the text overlap this element
overflow:visible;
display:inline-block;
}
.over:hover {
border-bottom: 2px solid #ec6713;
}
And this gives me finally the desired behaviour (the underline width is adjusted to the string width, and it's positioned close to the baseline). But is it a good practice to add an extra span for this purpose? Doesn't it look hacky?
A span is a meaningless tag, so it won't give extra 'weight' to your code. Therefor, imho, it is okay to use it (but better to avoid).
Alternatively you could do the following:
<ul>
<li>О нас</li>
<li>Галерея</li>
</ul>
a {
font-size: 30px;
text-decoration: none;
position: relative;
}
a:hover:after {
content: "";
border-bottom: 2px solid #ec6713;
position: absolute;
left: 0;
right: 0;
bottom: 3px;
}
And a DEMO.
Please note that the :after is overlapping the a. I've tried adding a z-index, but that didn't fix it.
OPTION 2
Add a background-image to your a.
I have ONLY one <UL> and under that we have group of <LI>
<ul>
<li>1<li>
<li>2<li>
<li>3</li>
<li>4<li>
</ul>
now I wanted to show them as TABLE, please help me with CSS, how can we show as a TABLE for above UL/LI in below table format, 2 LI set in one TR (two TD) and so on....
Well, here's one possible solution:
ul {
width: 450px; /* change it to whatever you like */
position: relative;
/* these should be probably already set up by `reset.css` */
list-style-type: none;
margin: 0;
padding: 0;
}
ul:before, ul:after {
text-align: center;
display: block;
border: 1px solid black;
border-bottom: 0;
width: 48%;
}
ul:before {
content: 'col1';
border-right: 0;
}
ul:after {
content: 'col2';
position: absolute;
top: 0;
left: 48%;
margin-left: 1px;
}
li {
text-align: right;
width: 48%;
float: left;
border: 1px solid black;
margin-bottom: -1px;
}
li:nth-child(even) {
margin-left: -1px;
}
It works (JSFiddle; tested in Chrome, Firefox and Opera; nth-child(even) selector obviously fails in IE8, so you have to emulate it with class or other means; but otherwise it's still solid), but I admit I feel guilty about this. )
P.S. If you want to add padding to the "cell" contents, don't forget to change their widths as well, like here:
li {
width: 47%;
padding-right: 1%;
}
It's a really late answer, but I think this is a common topic. Here's a codepen I made.
Obviously it's just a starting point. It also has some example of how to add styles like bg or borders. If the 'cells' contain some arbitrary content, you'll have to adjust dimensions, for example. I use this kind of code for thumbnails galleries, for example, where you don't have to worry about borders or bgs and it's quite elementary code (the example is for a 2x3 table, see codepen):
ul{
list-style:none;
}
ul li{
float:left;
padding:10px;
border-bottom:1px solid #000;
border-right:1px solid #000;
}
ul li:nth-child(3n){
background-color:#888;
}
ul li:nth-child(3n+1){
clear:both;
border-left:1px solid #000;
background-color:#ccc;
}
ul li:nth-child(-n+3){
border-top:1px solid #000;
}
Hope it helps.
You cannot convert a single list (containing more than 2 items) into 2 columns via the display: table properties because you need some element to act as the table-row. Without an element acting as a table-row, all adjacent elements that are set to display: table-cell will be contained within an anonymous table-row element that cannot be modified or styled in any way.
Your only option is to either change the markup (to use tables or lists of lists) or use a different approach to your CSS: either floats/inline-block on the lis or using the columns property on the ul.