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?
Related
I have an i tag with background image and then follows <span>.
Basically its an icon followed by text. I am trying to align the icon in center and then below the icon the text.
How can I do this?
I tried with vertical align, but it did not work.
<li>
<i class="icons" ></i>
<span>Icon text</span>
<li />
CSS :
.icons ::before {
content: url(/Style/Image1.svg);
}
You can do this a few ways (once you fix the syntax errors):
1. Using flexbox
With flex you only need to style the container element using the right options to make the child elements act as we wish - see the comments:
li {
display: flex;
align-items: center; /* center align the elements in the container */
flex-direction: column; /* make the child elements appear one under another */
}
.icons:before { content: url(https://via.placeholder.com/200x100); }
<ul>
<li><i class="icons"></i><span>Icon text 1</span></li>
<li><i class="icons"></i><span>Icon text 2</span></li>
</ul>
2. Block elements with text-align: center
/* center-align the container element */
li { text-align: center; list-style: none; }
/* make i and span block elements so they appear one below the other */
li i, li.span { display: block; }
.icons:before { content: url(https://via.placeholder.com/200x100); }
<ul>
<li><i class="icons"></i><span>Icon text 1</span></li>
<li><i class="icons"></i><span>Icon text 2</span></li>
</ul>
Note - you also have a number of syntax errors:
You cannot have a space between the selector and :before (or ::before - both work)
Also <li /> is not correct - you close an li element using </li>
As you can see first error you write .icon instead of .icons and second just use double ::
.icons::before {
content: url("https://placeholder.pics/svg/300");
}
<i class="icons" ></i>
<span>Icon text</span>
Pack them into div styled like this:
<div style="text-align: center;">
<i class="icons" ></i>
<div>Icon text</div>
</div>
Vertical alignment works, when you want to center them putting in one line, but if I understood well you want to put text under the icon, so you should use text-align instead of vertical-align
Here's a simpler way of doing this
.icons {
display: flex;
align-items: center;
}
.icons::before {
content: url(https://static2.clutch.co/s3fs-public/logos/r7q9_xgp.png);
}
<li>
<span class="icons">Icon Text here</span>
</li>
I have a problem with w3css. When I add a link to a w3css navigation bar, it will come with a line break.
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet">
<div class="w3-bottom" style="margin-bottom: 1px">
<ul class="w3-navbar w3-red" style="float: clear;">
<li style="margin-left: 2px">
Powered by w3css and fontawesome |
</li>
</ul>
</div>
I would like everything to be on one line. I hope you can help me, thanks. :)
//Cripi
This is a snippet of code that comes from the W3 css file you've included
.w3-navbar li a, .w3-navitem, .w3-navbar li .w3-btn, .w3-navbar li .w3-input {
display: block;
padding: 8px 16px;
}
If you edit the display property on that to be inline-block then things work as you'd expect.
Here is the code and an example link
.w3-navbar > li > a {
display:inline-block !important;
}
You need the "!important" to overwrite their stylesheet which would have priority otherwise.
http://codepen.io/hoonin_hooligan/pen/Mpwqwm
You have to change the display: block behavior to display: inline behavior. (And remove the padding to make it look less weird.) I used !important to make sure the browser accepts that specific value; you should replace this with a higher specificity selector, the same specificity selector later in the pageload so it overwrites the old value or change the css file of the current selector.
.w3-navbar li a{
display:inline !important;
padding: 0px !important;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-bottom" style="margin-bottom: 1px">
<ul class="w3-navbar w3-red" style="float: clear;">
<li style="margin-left: 2px">
Powered by
<a href="https://www.w3schools.com/w3css/">
w3css
</a> and
<a href="http://fontawesome.io/">
fontawesome
</a> |
</li>
</ul>
</div>
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!
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