Develop Reference

how to separate image and text in li css

Is there a way to format my text in one right place (separated from the image, whole heading)?
This is my HTML:
<div class="tab-pane container fade" id="environmental">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">ENVIRONMENTAL</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<li class="list-item"><img class="heat" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png">UV RATED WALLS – HEAT TRANSMISSION REDUCTION
</li>
<li class="list-item"><img class="air_window" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/air_window.png">DOUBLE GLAZED WINDOWS – COOL AIR CONTAINMENT
</li>
<li class="list-item"><img class="low_energy" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/low_energy.png">LOW ENERGY CONSUMING HEAT PUMPS
</li>
</div>
<div class="col-sm-6">
<li class="list-item"><img class="solar_panel" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/solar_panel.png">SOLAR PANELS SPACE
</li>
<li class="list-item"><img class="sensor" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sensor.png">OCCUPANCY SENSORS TO CONTROL LIGHTING AND AC – BOTH IN-ROOM AND THROUGHOUT COMMON AREAS
</li>
<li class="list-item"><img class="shower" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/shower.png">WATER CONSERVING SHOWERHEADS
</li>
</div>
</div>
</div>
Right now, it looks like this:
But, I need this:

try this...
li.list-item {
display: flex;
margin-bottom: 12px;
align-items: center;
}
li img {
margin-right: 21px;
}
<div class="tab-pane container fade" id="environmental">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">ENVIRONMENTAL</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<li class="list-item"><img class="heat" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png">UV RATED WALLS – HEAT TRANSMISSION REDUCTION
</li>
<li class="list-item"><img class="air_window" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/air_window.png">DOUBLE GLAZED WINDOWS – COOL AIR CONTAINMENT
</li>
<li class="list-item"><img class="low_energy" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/low_energy.png">LOW ENERGY CONSUMING HEAT PUMPS
</li>
</div>
<div class="col-sm-6">
<li class="list-item"><img class="solar_panel" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/solar_panel.png">SOLAR PANELS SPACE
</li>
<li class="list-item"><img class="sensor" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sensor.png">OCCUPANCY SENSORS TO CONTROL LIGHTING AND AC – BOTH IN-ROOM AND THROUGHOUT COMMON AREAS
</li>
<li class="list-item"><img class="shower" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/shower.png">WATER CONSERVING SHOWERHEADS
</li>
</div>
</div>
</div>

Just use a <span> tag to wrap your HTML. It's inline level element so no impact to HTML structure. Additionally you can provide CSS to span tag
like li span {max-width:100px}
<li class="list-item"><img class="heat"src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png" >
<span>UV RATED WALLS – HEAT TRANSMISSION REDUCTION</span>
</li>

There are many ways to do this like using a float, using display: table, using flex-box.
I have used the flex-box in my answer. Also your content was not in a tag. So I have used p tag for that. Hope this helps.
li{
list-style:none;
}
.list-item{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.img-sec{
width: 10%;
}
.list-item p{
width: 90%;
}
<div class="tab-pane container fade" id="environmental">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">ENVIRONMENTAL</h3>
<div class="container">
<div class="row">
<div class="col-sm-6" >
<li class="list-item"><div class="img-sec"><img class="heat"src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png" ></div>
<p>UV RATED WALLS – HEAT TRANSMISSION REDUCTION</p>
</li>
<li class="list-item"><div class="img-sec"><img class="air_window"src="http://dubai.themyriad.com/wp-content/uploads/2020/02/air_window.png" ></div>
<p>DOUBLE GLAZED WINDOWS – COOL AIR CONTAINMENT </p>
</li>
</div>
</div>
</div>

If you are using Bootstrap, then try Flex utility, this is nice and easy! :)
Well supports horizontal and vertical alignment also.
https://getbootstrap.com/docs/4.3/utilities/flex/
<ul class="list-unstyled">
<li class="list-item">
<div class="d-flex justify-content-start align-items-center">
<div>
<img width="48" class="heat" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png">
</div>
<div class="pl-2 text-uppercase">
UV Rated Walls - Heat Transmission Reduction
</div>
</div>
</li>
</ul>

trying to have a jQuery, javascript, click function which changes an image to the related id

I have a vertically divided page, down the middle. On one side I have a list of restaurants, I would like when/if a name of a restaurant is clicked on, an image of the restaurant and a description appears inside a div that is on the other side of the divided page.
I am trying to do this with jQuery and have it so when there is a click event the id of the name clicked is stored in a variable and then that variable corresponds to a picture which will then be displayed in the div.
I am sure there is simpler way to do this, and I am drawing a blank on this, or if someone could help me in doing it in the way I am trying, it would be greatly appreciated. All insight is welcomed and thank you.
This is new to me. I know i could do it by going through each id and having its own function call but I am trying to be less repetitive and have a function that works for all. thanks
JS CODE :
$('.hover').click( function(){
var iD = $(this).attr(id);
$('.pictureofeats').removeAttr("id");
$('.pictureofeats').attr('id', iD);
});
HTML CODE :
<div class="row drinks brunchpic">
<img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li>
<br>
<li class="hover" id="716">716 (Food and Sports)</li>
<br>
<li class="hover" id="bdb">Big Ditch Brewing</li>
<br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li>
<br>
<li class="hover" id="lloyds">Lloyds</li>
<br>
<li class="hover" id="abv">Allen Burger Venture</li>
<br>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" id="foodInfo">
<div class="row">
<div class="pictureofeats" id="foodImg"></div>
</div>
</div>

Store the required classname in the data-id attribute for the restaurant name
and toggle the display for the images keeping the positioned as absolute
JS Fiddle
Structure your HTML as following:
<div class="parent">
<div class="a">
<div class="img1 active">
1
</div>
<div class="img2">
2
</div>
<div class="img3">
3
</div>
</div>
<div class="b">
<div data-id="img1">abc</div>
<div data-id="img2">def</div>
<div data-id="img3">ghi</div>
</div>
</div>
CSS:
.parent {
width: 100%;
}
.a,.b {
display: inline-block;
min-width: 48%;
}
.img1,.img2,.img3 {
position: absolute;
display: none;
}
.active {
display: block;
}
JS:
$('.b div').click(function() {
var x = $(this).data('id');
$('.a div').removeClass('active');
$('div.' + x).addClass('active');
})

try something like this:
<div id="restId" class="row drinks brunchpic"><img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li><br>
<li class="hover" id="716">716 (Food and Sports)</li><br>
<li class="hover" id="bdb">Big Ditch Brewing</li><br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li><br>
<li class="hover" id="lloyds">Lloyds</li><br>
<li class="hover" id="abv">Allen Burger Venture</li><br>
</ul>
</div>
</div>
</div>
and in javascript:
$('#restId').click( function(){
$('#restId img').attr('src', newSource);
});
I think this is the logic

Why is my Bootstrap Sidebar overlapping my footer? Using stickynavbar.js

When there are a certain number of items in my Bootstrap sidebar the sidebar overlaps with the footer content. I cannot just change the footers top margin or give the sidebar a bottom margin. Neither of these resolves the overlap. Also, I am using stickyNavbar.js which may be what is causing the overlay issue. If so, would this be solved by determining when the sidebar is activated and adding a margin to the footer? How would I detect this and make this change with StickyNavbar.js? http://www.jozefbutko.com/stickynavbar/
Here is an image of the resulting issue:
HTML:
<div class="container" id="main-content" >
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4">
<div id="sidebar" class="hidden-xm" data-spy="affix" data-offset-top="100">
<nav class="leftnav">
<ul class="nav nav-pills nav-stacked">
<li>Jobs#IU</li>
<li>Recruitment & Outreach</li>
<li>The Hiring Process
<ul>
<li>Pre-posting steps</li>
<li>Posting process</li>
<li>Hiring proposals</li>
<li>Closing the posting</li>
</ul>
</li>
<li>Temporary Hiring Process</li>
<li>Student Employment</li>
<li>Related Resources
<ul>
<li>Employee Policies</li>
<li>PeopleAdmin</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-sm-8 ajaxContent">
<div ng-view> </div>
</div>
</div>
Sidebar CSS:
None, using default styles from bootstrap
Footer CSS:
.footerspan{ background-color:#4b3b32; padding-bottom: 50px; margin-top: 50px; }

sticky nav, idk what's going on :\

I am having an issue with my sticky nav. The problem seems to be that my JS is not applying the class I have told it to. you can view it live here http://test.makx.ca
Here is my code.
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
nav = $('.nav-bar').offset();
if (nav.top <= scroll) {
$('.nav-bar').toggleClass('sticky-nav');
} else {}
});
</script>
the HTML
<div class="row nav-row">
<div id="nav-bar" class="medium-12 column nav-bar">
<ul class="links">
<li>home</li>
<li>about us</li>
<li>pricing</li>
<li>contact</li>
</ul>
<ul class="links-right">
<li class="has-form">
<div class="row collapse">
<div class="large-7 small-7 columns">
<input type="text" placeholder="enter text">
</div>
<div class="large-3 small-4 pull-2 columns">
<a href="#" class="search button expand" style="padding-top: 0.6rem;
padding-bottom: 0.6rem;">Search</a>
</div>
</div>
</li>
</ul>
</div>
</div>
the CSS
.sticky-nav {
position: fixed;
top:0;
width: 100%;
display: block;
}
any feedback would be most welcoming. This has me and a friend completely stumped.

You're using the wrong selector. .nav-bar is a class selector, but you want to select the element with the id nav-bar, not the class nav-bar. Use #nav-bar as the selector instead.
Unrelated to your question, but FYI: Your use of toggleClass is going to have some odd results; it will constantly be toggling the class on and off while the user scrolls.

Stick a div when using Foundation

I want to stick a div on top when scrolling the window.
Looks like Magellan of Foundation provides similar behavior. But I want to stick my custom elements(the div with attribute data-magellan-expedition="fixed") on top instead of Sub-Nav in Magellan's example.
<body>
<!-- Header and Nav -->
<nav id="nav" class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Foundation Magellan
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Sitemap</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active" >Item1</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Login</li>
</ul>
</section>
</nav>
<!-- End Header and Nav -->
<!-- Main Feed -->
<div data-magellan-expedition="fixed" >
<div id="calendar" class="row">
<dl id="calendar-per-day" class="sub-nav">
<script>
someCodeToCreateCalendar();
</script>
</dl>
<hr>
</div>
<div class="row">
<div class="large-12 columns">
<div id="baidumap"
style="height:300px; overflow: hidden; margin: 0;"></div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns">
<p>
very long content can be scrolled............
</p>
</div>
<div class="large-3 columns">
<div class="row">
<div class="large-11 large-centered columns">
<h4>Right side content</h4>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-5 columns">
<p>© 2013 All Rights Reserved</p>
</div>
<div class="large-7 columns">
<ul class="inline-list right">
<li>About</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is full my code to try my thought. I want the calendar and map always stick on top when scrolling the window. But it does not work at all. Does anybody know how to do it?

Use CSS
.div-to-stick {
postion:fixed;
}
This will stick it to the top of the page on scroll.