I am trying to make a list of images horizontal. They keep displaying vertical. Any idea what I am doing wrong?
<div ng-repeat="i in product.images">
<ul id="navlist">
<li>
<img class="thumbnail" ng-src="{{i.image}}"> </img>
</li>
</ul>
</div>
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
You need to put the 'ng-repeat' in the li tag (not the div), otherwise you are repeating the entire div, which is not inline. Here's a link to a CodePen with this code http://codepen.io/jwncoexists/pen/XbdOVY
<body ng-app="ImageDemo">
<div ng-controller="Demo.controller">
<div>
<ul id="navlist">
<li ng-repeat="i in product.images">
<img class="thumbnail" ng-src="{{i.image}}">
</li>
</ul>
</div>
</div>
</body>
calthoff, if you remove the ul, li and float the images..then how about this for simplicity's sake:
<div ng-repeat="i in product.images">
<img class="thumbnail" ng-src="{{i.image}}">
</div>
img
{
float: left;
padding-right: 20px;
}
<div ng-repeat="i in product.images">
<ul id="navlist">
<li>
<img class="thumbnail" ng-src="{{i.image}}" />
</li>
<li>
<img class="thumbnail" ng-src="{{i.image}}" />
</li>
</ul>
</div>
< img > tags are self-closing, your code should work like this.
Related
In the following code I've found that the div size doesn't equal at the top and bottom of the ul.
The div still doesn't have equal size even though I put the padding equal.
What is wrong?
.footer {
background-color: #4dbce9;
padding: 40px 0;
text-align: center;
color: #fff;
}
.footer ul,
li {
display: inline-block;
}
.footer a {
font-size: 14pt;
padding-right: 20px;
color: #fff;
}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<ul>
<li>
<a href="https://www.facebook.com/rony.fhebrian" />Facebook
</li>
<li>
<a href="https://www.twitter.com/ronyfhebrian" />Twitter
</li>
<li>
<a href="https://ronyfhebrian.wordpress.com" />Blog
</li>
<li>
<a href="mailto:rony.fhebrian#outlook.com">Contact
</li>
</ul>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
The <a> closing tag is missing.
.footer {
background-color: #4dbce9;
padding: 40px 0;
text-align: center;
color: #fff;
}
.footer ul,
li {
display: inline-block;
}
.footer a {
font-size: 14pt;
padding-right: 20px;
color: #fff;
}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<ul>
<li>
Facebook
</li>
<li>
Twitter
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
Your ul element should look like this :
<ul>
<li>
Facebook
</li>
<li>
Twitter
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
the 'a' link tag is not self closing
try to close the <a>tags ..
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<ul>
<li>
<a href="https://www.facebook.com/rony.fhebrian" />Facebook</a>
</li>
<li>
<a href="https://www.twitter.com/ronyfhebrian" />Twitter</a>
</li>
<li>
<a href="https://ronyfhebrian.wordpress.com" />Blog</a>
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
I'm trying to code a Nav bar for my site but as soon as I implemented css imgBox my links stopped working. The're in the same directory so I don't believe this is the problem but for the life of me I can't figure out what's wrong
here's the HTML code
<ul id="menu">
<li> <div class="imgBox" id="img1"> </div> </li>
<li> <div class="imgBox" id="img2"> </div> </li>
<li> <div class="imgBox" id="img3"> </div> </li>
</ul>
and here's the css
.imgBox
{
float:left;
border: 1px solid #9325BC;
}
#img1
{
background: url(images/home.png) no-repeat;
width: 129px;
height: 50px;
}
#img2
{
background: url(images/media.png) no-repeat;
width: 112px;
height: 50px;
}
.imgBox:hover
{
-moz-box-shadow: 0 0 30px #0000cc;
-webkit-box-shadow: 0 0 30px #0000cc;
box-shadow: 0 0 30px #0000cc;
}
Any help will be greatly appreciated
You must close all tags you open. link tags and div tags. Also if you want your link to be visible it must contain at least a word or image.
<ul id="menu">
<li><div class="imgBox" id="img1"> Index </div> </li>
<li> <div class="imgBox" id="img2"> Media </div></li>
<li> <div class="imgBox" id="img3"> Social media</div></li>
</ul>
<ul id="menu">
<li> <div class="imgBox" id="img1"> </div> </li>
<li> <div class="imgBox" id="img2"> </li>
<li> <div class="imgBox" id="img3"> </li>
</ul>
Is this what you're trying to do?
Working version of your question can be found here: JSFIDDLE
<li> <div class="imgBox" id="img1"> Some Text here </div> </li>
The problem was that you did not close your href element
I want to show pictures of icons from left to right and have their respective names underneath each and it spaced. the text "Icon1" underneath icon1 and so on. tierGo has no CSS in it.
<div id="tierGo">
<h1>Icon List</h1>
<img src="tinyIcons/icon1.png" style="margin-right:15px;" />
<img src="tinyIcons/icon2.png" style="margin-right:15px;" />
<img src="tinyIcons/icon3.png" style="margin-right:15px;" />
<img src="tinyIcons/icon4.png" style="margin-right:15px;" />
<img src="tinyIcons/icon5.png" style="margin-right:15px;" />
</div>
I had success using divs and a list.I also added a bit of CSS to the list.
Fiddle
<div id="tierGo">
<h1>Icon List</h1>
<ul>
<li> <div image1>
<img src="http://placehold.it/50x50"/>
<div >
Image 1
</div>
</div>
</li>
<li> <div image2>
<img src="http://placehold.it/50x50"/>
<div >
Image 2
</div>
</div>
</li>
<li> <div image3>
<img src="http://placehold.it/50x50"/>
<div >
Image 3
</div>
</div>
</li>
</ul>
CSS:
li{
list-style-type: none;
display: inline;
margin-right: 15px;
float: left;
}
I am trying to display several social media icons side by side in a footer. I have tried using the float: left property which did not work. Can someone spot my error?
I have the following html code:
<div id="footer">
<div id="v_line"></div>
<div class="social-popout">
<div class="columns">
<ul id="lpro">
<div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook">
</ul>
<ul>
<div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In">
</ul>
<ul>
<img id="social_me" src="googleplus.png" alt="Google Plus">
</ul>
</div>
</div>
</div>
And the following CSS:
.social_me {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
Remove unnecessary ul tags and add li to each item
CSS:
ul li {
display:inline-block;
}
HTML:
<ul id="lpro">
<li><div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook">
</li>
<li><div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In">
</li>
<li><img id="social_me" src="googleplus.png" alt="Google Plus">
</li>
</ul>
DEMO
Just correcting some html errors:
1) Remove the unnecessary ul
2) Remove the div inside the <a> tags
3) Your id="social_me" is wrong.. It is a class, not an id.
4) After that, no need for css what so ever (<a> and <img> tags are already inline elements by default): http://jsfiddle.net/M665q/
<div id="footer">
<div class="social-popout">
<div class="columns">
<a class="social_me" href="https://www.facebook.com/" target="_blank"><img src="facebook.png" alt="Facebook" /></a>
<a class="social_me" href="https://www.linkedin.com/" target="_blank"><img src="linkedin.png" alt="Linked In" /></a>
<a class="social_me" href="https://plus.google.com/" target="_blank"><img src="googleplus.png" alt="Google Plus" /></a>
</div>
</div>
</div>
Put them all in one <ul> and the <div> tags next to the images was messing it up.
Something like this should work:
<div id="footer">
<div id="v_line"></div>
<div class="social-popout">
<div class="columns">
<ul id="lpro">
<img id="social_me" src="facebook.png" alt="Facebook">
<img id="social_me" src="linkedin.png" alt="Linked In">
<img id="social_me" src="googleplus.png" alt="Google Plus">
</ul>
</div>
</div>
</div>
<ul id="navlist">
<li><div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook"></li>
<li><div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In"></li>
<li><img id="social_me" src="googleplus.png" alt="Google Plus"></li>
</ul>
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
float: left;
}
it sounds like you're having a problem linking your CSS to your HTML page. Try putting it into the head.
<html>
<head>
<style type="text/css">
.lpro li {
float: left;
padding: .5em;
list-style-type: none;
}
</style>
</head>
<div id="footer">
<div class="social-popout">
<div class="columns">
<ul class="lpro">
<li><img src="facebook.png" alt="Facebook"></li>
<li><img src="linkedin.png" alt="Linked In"></li>
<li><img src="googleplus.png" alt="Google Plus"></li>
</ul>
</div>
</div>
</div>
</html>
I was able to get it working by creating three different unordered lists. I used:
.column {
float:left;
padding: 10px 20px 0px 10px;
}
ul{
list-style-type:none;
padding-left:0px;
text-decoration:none;
padding-top: 10px;
}
.title-logo{
color: #5E81F4;
font-family: 'Inter', sans-serif;
margin-left: 10px;
}
.logo a{
display: flex;
justify-content: start;
align-items: center;
}
<div class="logo">
<a href="/#">
<div class="shap-logo">
<H1>O</H1>
</div>
<h3 class="title-logo">Ohara</h3>
</a>
</div>
I tried this for my code, but I don't know it's correct or not.
I've got html like so:
<div class="content-wrapper">
<div class="float-left">
<img alt="Track System" src="Images/myimage.png" />
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li class="tab"><a runat="server" href="~/">Home</a></li>
<li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
<li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
<li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
</ul>
</nav>
</div>
</div>
The first div (The one float-left) is just an image that has some length to it...
The second div (the float-right) are tabs that I want to align on the bottom. Right now they are too high up...
the css classes simply are:
.float-left{
float:left;
}
.float-right{
float:right;
}
I tried changing to absolute and relative positioning but it did not help...
Here's what it looks like with the logo correctly being displayed on the left but the tabs on the right floating...I'd like to get those aligned to the bottom.
Is this what you want? http://jsfiddle.net/86Pr2/4/
I added a div with a class of "clear" and the following CSS: (I added !important to all of them cause I didn't feel like looking through all your code.)
.float-right {
position:absolute !important;
bottom:0 !important;
right:0 !important;
}
.content-wrapper {
position:Relative !important;
}
.clear {
clear:both !important;
}
And the changed HTML:
<div class="content-wrapper">
<div class="float-left">
<img alt="Track System" src="http://i.imgur.com/2M3DyCv.png" />
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li class="tab"><a runat="server" href="~/">Home</a></li>
<li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
<li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
<li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
</ul>
</nav>
</div>
<div class="clear"><!--This makes the wrapper have a height--></div>
</div>
<div id="body">
<section class="content-wrapper main-content clear-fix">
hi
</section>
</div>
Not that #codedude didn't create something that would work but you wouldn't ever want to use the !important tag in your CSS.
Here's what I was working on: http://jsfiddle.net/dancameron/86Pr2/7/
It doesn't require any additional markup either (an empty div to clear!) and cleans up the class names to be more semantic.
HTML:
<div class="content-wrapper clear-fix">
<div class="float-left">
<img alt="Track System" src="http://i.imgur.com/2M3DyCv.png" />
</div>
<div class="nav-wrap">
<nav>
<ul id="menu">
<li class="tab"><a runat="server" href="~/">Home</a></li>
<li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
<li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
<li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
</ul>
</nav>
</div>
</div>
<div id="body">
<section class="content-wrapper main-content clear-fix">
hi
</section>
</div>
CSS:
.content-wrapper {
margin: 0 auto;
max-width: 100%;
position: relative;
}
.nav-wrap nav {
position: absolute;
bottom: 5px;
right: 5px;
}