Here is my UI design
<div>
<ul>
<li>
<a></a>
</li>
</ul>
</div>
I want to create a menu.
The text for the anchor will be set on run time and can be of any length but I don't want text to be wrapped. any idea how can I solve this.
To prevent text from wrapping using a CSS rule, use the following:
ul li a {
white-space: nowrap;
}
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'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;
}
I got a problem for you to solve, as you know.
I ripped off all my hair trying to figure out why the heck last-child isn't working.
I tried to remove border-right with last-child but for some reasons, it didn't work out.
Here's is the link
Your selector is #countdown .num:last-child.
Your HTML is
<ul ID="countdown">
<li> <div ID="days" class="num">00</div> <div CLASS="text">days</div> </li>
<li> <div ID="hours" class="num">00</div> <div CLASS="text">hours</div> </li>
<li> <div ID="mins" class="num">00</div> <div CLASS="text">minutes</div> </li>
<li> <div ID="secs" class="num">00</div> <div CLASS="text">seconds</div> </li>
<div class="clear"></div>
</ul>
Think: is .num the last child of its parent? Answer: no.
Your selector should be more like #countdown > li:last-of-type .num, selecting .num inside the last li in #countdown.
Note that in this case last-of-type must be used rather than last-child because you've got that <div class="clear"></div>, which is invalid HTML (you can't have a div directly inside a ul).
The main reason why the last-child is not working because in your #countdown UL the last-child is <div class="clear"></div> not LI. So it's better to use last-of-type instead of last-child. Like this:
#countdown li:last-of-type .num,
#countdown li:last-of-type .text{
border:0;
}
Check this http://jsbin.com/apuhep/4/edit#html,live
Inside your ul element, there is a div element after the last li element. This is invalid markup and may have unpredictable effects. Moreover, it probably makes browsers treat the div element the last child of the ul element.