I have a list item, with floated objects inside of each item.
html:
<ul>
<li>
<div class="icon" /><div class="text">blah</div>
</li>
<li>
<div class="icon" /><div class="text">blah</div>
</li>
</ul>
css:
.icon, .text { float: left; }
.text:after { clear: both; }
My understanding is that the second style should add a clear: both after the text box. But it doesn't appear to be the case.
Normally, I would add an extra DIV after the .text div which had a class of 'cleared' or something to that affect which would clear the objects, but I have noticed many people don't do that and simply use the :after selector, equating to less hacky code.
Any pointers on what I am missing on how this works? Cheers
Related
I am trying to arrange an image next to some text. I was able to accomplish this with font awesome icons and text, but two images I was unable to get an icon for, so I am using images. I can't seem to get them side by side. What am I missing? Here is the code:
<ul className='lower-nav-ul'>
<li className='lower-nav__link'>
<FontAwesomeIcon
icon={'question-circle'}
className='question-circle'
/>
Help
</li>
<li className='lower-nav__link'>
<FontAwesomeIcon
icon={'map-marker-alt'}
className='map-marker-alt'
/>
Where to Buy/Rent
</li>
<div>
<img src={require('../images/safety-icon-light.png')} alt='safety-icon'className='safety-icon'/>
</div>
<li className='lower-nav__link-with-img'>Safety</li>
<div>
<img src={require('../images/en-flag-light.png')} alt='en-flag' className='en-flag'/>
</div>
<li className='lower-nav__link'>EN</li>
</ul>
And my CSS:
.lower-nav__link {
margin-bottom: 15px;
}
.lower-nav-ul {
margin-top: 0px;
display: flex;
justify-content: flex-start;
flex-direction: column;
padding-left: 15px;
padding-top: 15px;
}
I've tried so many different things and just took it all back to where it looks best. Any help would be appreciated. Thanks!
a div is not a valid child of a ul (only li’s can be children of ul’s). You need to put your content into an li and use display: flex on the li to space them. the display: flex styling only applies to the immediate children of the element it is applied to
Flex property applying on a container element. In your case li so move your div inside the li .
I believe the issue is that the second <li> element closes too early. The <div> that contains the <img> is after the closing </li> tag, so the style rules that apply to both the <ul> and <li> will not apply to it. Does moving that <div> inside the <li> tags solve the issue?
This is my Mixin:
.dialog-inputs() {
:not(.input-list) {
label,
input,
select,
textarea {
width: 100%;
display: block;
}
}
}
I Want that all inputs etc, got this 2 Styles when its no UL around there with class .input-list... But this Less Code dont work =/ Any Idea?
The problem is that the sub-selectors of a selector are applied to all elements that they can be applied to.
Simplified, if you have this
.block :not(.list) input {background:red}
<div class="block">
<ul class="list">
<li>
<input/>
</li>
</ul>
</div>
In the above example, the input is red because the div matches .block and the li matches :not(.list)!
So the solution in this simplified example is to just make the :not(.list) more specific by adding ul in front of it.
.block ul:not(.list) input {background:red}
<div class="block">
<ul class="list">
<li>
<input/>
</li>
</ul>
</div>
However, that won't always do the trick. In your code, you have nested uls, which will complicate matters.
Therefore, a more thorough solution is to write out in full what your intention is: "make all inputs red, except the ones in .list lists, which should have the default color".
.block input {background:red}
.block .list input {background:initial}
<div class="block">
<ul class="list">
<li>
<input/>
</li>
</ul>
</div>
This is a bit longer, but it will work, no matter what!
By the way, sorry I can't use your exact source. Stack snippets don't support LESS (or, I don't know how to make LESS work in a snippet). But I hope you get the point and you can adapt this to your needs.
The Problem was only that i forgot the & Symbol in before the ul =)
.dialog-inputs() {
"&"ul:not(.input-list) {
label,
input,
select,
textarea {
width: 100%;
display: block;
}
}
}
I have a problem and I can't seem to find the solution.
I'm making a drupal site, and I want to make these list-items come next to eachother. Their width is 45% so it should be possible to have 2 next to eachother, but I can't figure out how.
I've tried putting display inline and inline-block on mutiple of the UL's and LI's but nothing changes.
What should I do?
Just use float :
ul {
width: 940px;
}
li {
margin: 6px;
float: left;
list-style: none;
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
<ul>
<li>
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
<li>
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
<li>
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
<li class="clearfix">
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
</ul>
It's hard to find out what you are doing wrong when you don't provide any code.
My guess is that you have not changed the display type and thus the elements are still blocks. If so then it does not matter how the width is set, each element will stay on it's own row.
either use float or display:inline; if you want to show the list items next to each other
See this fiddle for an example of different methods and why some don't work.
I'm trying to develop a menu where dynamically some text must have the property vertical-align:super.
It's happening that this item containing "super" text is not vertical aligned with other item.
Here the CSS code:
<style>
#menu{width:300px;height:100px;background:#ABD4E6;}
#menu ul{list-style:none;}
#menu li{float:left;background:#054664;padding:20px;}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Contacts</li>
</ul>
</div>
How can I solved the issue?
Many thanks in advance
Elements with float: left behave in such way that they won't position themselves verticaly, no matter what vertical-align would you set to them. All li elements should not have float: left so they would preserve some specific line-height. Then you can position them together with the span, relatively to the line-height. One of the possibilities is to change the #menu li styles to this:
#menu li {
display: inline-block;
vertical-align: top;
background:#054664;
padding:20px;
}
You will also have to remember to change the HTML markup a bit. There must be no white-spaces between each opening and enclosing li tags, like this:
<ul>
<li>
Home
</li><li><!-- HERE: no space -->
App<span style="vertical-align: super;">*</span>
</li><li><!-- HERE: no space also -->
Contacts
</li>
</ul>
Here's an example: http://jsfiddle.net/eLft6/
I've another issues. The text in now vertically aligned but the position changed if I use span with super property or not.
Vertical alignment of this code:
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Test</li>
</ul>
is different from that one:
<div id="menu">
<ul>
<li>Home</li>
<li>App</li>
<li>Test</li>
</ul>
I've tried to modify the line-height using span for all li item, also setting it with different value in case of super usage or not but it doesn't work!
Given mark-up similar to:
<h1 id="Menu1Title">Menu1</h1>
<nav id="Menu1">
<a>Item1-1</a>
<a>Item1-2</a>
<a>Item1-3</a>
</nav>
<h1 id="Menu2Title">Menu2</h1>
<nav id="Menu2">
<a>Item2-1</a>
<a>Item2-2</a>
<a>Item2-3</a>
</nav>
<h1 id="Menu3Title">Menu3</h1>
<nav id="Menu3">
<a>Item3-1</a>
<a>Item3-2</a>
<a>Item3-3</a>
</nav>
How can this presentation be achieved using CSS only?
Menu1 Menu2 Menu3
Item1-1
Item1-2
Item1-3
Item2-1
Item2-2
Item2-3
Item3-1
Item3-2
Item3-3
ULs can also be used as long as they are three separate elements and not sub-lists of one another. I'd prefer not to use absolute positioning as there is other content below this that should flow around the mark-up above. I also have no need for old IE hacks; only supporting IE9 and modern browsers.
Is this even possible? Thanks!
Edit... The above formatting question is to style for mobile. Non-mobile is displayed as below which is why I was hoping for a CSS-only solution that didn't require mark-up changes.
Menu1
Item1-1
Item1-2
Item1-3
Menu2
Item2-1
Item2-2
Item2-3
Menu3
Item3-1
Item3-2
Item3-3
OK, if you really cant change mark up or use jQuery to alter the mark up then below is a CSS only solution:
http://jsfiddle.net/wSLEb/
You could absolutely position the headers and give the first ul margin top. Then using :nth-of-type pseudo class selector you could target individual headers and give them more left positioning to push them across the page and away from one another.
It's not very flexible as you have to hard code the left positioning so take into account how the width of the headers are rendered on a mobile screen.
Mark up would be:
<h1 id="Menu1Title" class="header">Menu1</h1>
<nav id="Menu1">
<ul class="first">
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<h1 id="Menu2Title" class="header">Menu2</h1>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<h1 id="Menu3Title" class="header">Menu3</h1>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
and CSS would be:
.header {
position: absolute;
top: 0;
left:0;
}
.header:nth-of-type(2) {
left:50px;
}
.header:nth-of-type(3) {
left:100px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
ul.first {
margin-top: 20px;
}
You can read more about pseudo class selectors on Chris Coyier's site here: http://css-tricks.com/pseudo-class-selectors/
Good luck
To start your lists should be in uls.
if you can't use absolute positioning then you need to change your mark up to achieve that kind of styling. The headers should appear after one another in the html. If you can't change your mark up at the source then you will have to use jQuery to reorder the mark up on page load.
in your jQuery I would target all of the headers and then remove all of them except for the first and then insert these removed headers after the first one, and then place a clearing div after the last header.
See this or the code below: http://jsfiddle.net/wSLEb/
Your mark up would become like so:
<h1 id="Menu1Title" class="header">Menu1</h1>
<h1 id="Menu2Title" class="header">Menu2</h1>
<h1 id="Menu3Title" class="header">Menu3</h1>
<div class="clear"></div> <!--clearing div added to move first ul under the headers-->
<nav id="Menu1">
<ul>
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
The styling would then be like so:
.header {
float: left;
margin-right: 10px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
.clear {
clear: both;
}