I want to put multiple <ul> on the same line, simulating products in a shop. So far I've got multiple unordered list tags:
ul {
display: inline;
}
li {
list-style: none;
}
<ul>
<li><img src="http://au.alexu.edu.eg/English/Academics/PublishingImages/Central%20Library%20Logo%20Design%20-%20English.png" width="20%" height="20%" /></li>
<li>Name</li>
<li>Author</li>
</ul>
<ul>
<li><img src="http://au.alexu.edu.eg/English/Academics/PublishingImages/Central%20Library%20Logo%20Design%20-%20English.png" width="20%" height="20%" /></li>
<li>Name</li>
<li>Author</li>
</ul>
How can I accomplish this? I have them show vertically but I dont want them this way.
You could set it to ul {display:inline-block;}.
Be aware of width="20%" height="20%" on the image in your example, it may give you unwanted results. As percentage width or height is always relative to container's width, not itself.
For simplicity, I just use fixed width in the demo below.
ul {
display: inline-block;
vertical-align: top;
padding-left: 0;
}
li {
list-style: none;
}
<ul>
<li><img src="//dummyimage.com/100"></li>
<li>Name</li>
<li>Author</li>
</ul>
<ul>
<li><img src="//dummyimage.com/100"></li>
<li>Name</li>
<li>Author</li>
</ul>
Use CSS:
li{
float:left;
}
floating left will fix it..
Related
The layout I want to achieve is the following, one large image with a gallery of four thumbnails below it:
I'm using a Javascript gallery to actually display a full screen gallery, activated when clicking on this element.
The problem is that the gallery script expects the images as direct children in an unordered list, all of them including the one that is the big image in my layout:
<ul>
<li data-src="img1.jpg">
<img src="thumb1.jpg" />
</li>
<li data-src="img2.jpg">
<img src="thumb2.jpg" />
</li>
</ul>
The first <li> is the big image, all the others are small thumbnails.
Is there a way to achive my desired layout while still having all the images in the unordered list? If I could break up the list this would be easy, but that wouldn't be recognized by the gallery script anymore.
Is it possible to achive this layout without changing the underlying structure of the list?
I suggest using float: left and display: block on li, and float: none on li:first-child:
ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
li
{
margin: 2px 5px;
display: block;
float: left;
}
li:first-child
{
float: none;
}
<ul>
<li>
<img src="http://lorempixel.com/g/430/430/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
</ul>
Simple and clean, no JS involved.
This is my attempt based on flexbox. The skewed images are a side effect of taking random cat images from the web, and constraining them to a certain width and height (fiddle).
The CSS:
ul {
padding: 0;
margin: 0;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
li {
/** add box-sizing: border-box; if you include padding or borders **/
}
li:first-child {
width: 100%;
height: 500px;
}
li:not(:first-child) {
/** add box-sizing: border-box; if you include padding or borders **/
width: 25%; /** use calc if you include margins **/
height: 100px; /** whatever height you want **/
}
li > img { /** demo only - because of image sizes **/
width: 100%;
height: 100%;
}
The HTML:
<ul>
<li data-src="whatever">
<img src="http://www.gordonrigg.com/the-hub/wp-content/uploads/2015/06/little_cute_cat_1920x1080.jpg" />
</li>
<li data-src="whatever">
<img src="http://rufflifechicago.com/wp-content/uploads/cat-treats.jpg" />
</li>
<li data-src="whatever">
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
</li>
<li data-src="whatever">
<img src="http://animalia-life.com/data_images/cat/cat8.jpg" />
</li>
<li data-src="whatever">
<img src="http://www.catprotection.com.au/wp-content/uploads/2014/11/5507692-cat-m.jpg" />
</li>
</ul>
You are looking for some simple CSS, there are multiple ways to approach this, the easiest is likely:
<style type="text/css">
ul.thumbs li{
float:right;
}
</style>
<ul class="thumbs">
<li data-src="img1.jpg">
<img src="thumb1.jpg" />
</li>
<li data-src="img2.jpg">
<img src="thumb2.jpg" />
</li>
</ul>
you could also set the ul to display:table-row and the lis to display:table-cell which would allow them to evenly spread and fill the space allowed in the ul
Based on your edit you will need something a little more complicated, without knowing which plugin you are using, or how it works, you can try this approach (uses a little jQuery):
$(document).ready(function(){
$('li').click(function(){
$(this).parent().find('.selected').removeClass('selected');
$(this).addClass('selected');
});
});
ul{
padding-top:405px;
position:relative;
}
li{
height:100px;
width:100px;
float:left;
background:blue;
}
li.selected{
background: red;
position: absolute;
top: 0;
height: 400px;
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
<li class="selected">test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
</ul>
i have a unordered list that displays a link and an image, and i want to display them inline. i have used the following:
<ul>
<li><img src="www."/>Link one
<li><img src="www."/>Link two
<li><img src="www."/>Link three
</ul>
in the css i have put:
li {
display: inline;
margin: 0 10px;
}
but the list is still showing one item per line
Close the li tags
<style>
li {
margin: 0 auto;
position: relative;
float: left;
display: inline;
}
</style>
<ul>
<li><img src="www."/>Link one</li>
<li><img src="www."/>Link two</li>
<li><img src="www."/>Link three</li>
</ul>
i found the answer was to change it to display: inline-block;
hope this helps others.
Try this
li {
float: left;
width: 100px; /*your width*/
margin: 0 10px;
}
Close your li's and use , its working as expected
<ul>
<li><img src="www."/>Link one</li>
<li><img src="www."/>Link two</li>
<li><img src="www."/>Link three</li>
</ul>
I just started HTML/CSS two days ago.. Please go easy on me. I'm currently building a website. For some reason, I cannot get the the HTML class/id to render with CSS. To make it work, I have to make a class for each list. How do I make it so that the class for ul as a whole? (When I take out the <li class="name_here>, all the styles don't work anymore)
HTML
<div>
<ul class="navi">
<li class="navi"><img src="../images/bestfoodservicesweb_07.jpg" width="104" height="67" />
<img src="../images/bestfoodservicesweb_09.jpg" width="105" height="67" />
<img src="../images/bestfoodservicesweb_11.jpg" width="110" height="67" />
<img src="../images/bestfoodservicesweb_13.jpg" width="105" height="66" /></li>
</ul>
</div>
<div>
<div>
<ul class="lastbit">
<li><img src="../images/bestfoodservicesweb_34.jpg" width="85" height="29"/></li>
<li><img src="../images/bestfoodservicesweb_37.jpg" width="62" height="16" /></li>
<li><img src="../images/bestfoodservicesweb_38.jpg" width="69" height="16" /></li>
<li><img src="../images/bestfoodservicesweb_39.jpg" width="100" height="16" /></li>
</ul>
<ul class="lang">
<li class="lang"><img src="../images/bestfoodservicesweb_41.jpg" width="29" height="14" /></li>
<li class="lang"><img src="../images/bestfoodservicesweb_43.jpg" width="39" height="17" /></li>
</ul>
<ul class="social">
<li class="social"><img src="../images/bestfoodservicesweb_27.jpg" width="30" height="29" /></li>
<li class="social"><img src="../images/bestfoodservicesweb_29.jpg" width="30" height="29" /></li>
<li class="social"><img src="../images/bestfoodservicesweb_31.jpg" width="30" height="29" /></li>
</ul>
</div>
</div>
CSS
.navi {
list-style: none;
display: inline;
margin-left: 5px;
position: relative;
top: 5px;
}
.lastbit {
list-style: none;
display: inline-block;
}
.lang {
list-style: none;
display: inline;
}
.social {
list-style: none;
display: inline;
}
You should read up more on selectors in CSS. In a nutshell what you are doing with this:
.social {
list-style: none;
display: inline;
}
is saying that everything with the class social gets the given styles applied to it.
When you have that class on each of the li elements it applies as you want. However when you are putting that class on the ul it is applying the styles to the ul and not the li. To fix this you need to specify that you want the styles on the li by changing the selector slightly:
.social li {
list-style: none;
display: inline;
}
The above says that all li elements that are descendents of items with class social should have the styles which is what you want.
Not exactly sure what you are trying to do, but you might try something like this.
.lastbit li {
list-style: none;
display: inline-block;
}
Your markup can then be:
<ul class="lastbit">
<li></li>
...
</ul>
This will apply the style to all the li elements of the ul you mark with that style.
To style all lists, use:
ul{
/* styles here */
}
To style all of the items in the list, use
li{
/* styles here */
}
To style all of the anchors in all of the items in the list, use
li a{
/* styles here */
}
Also, just so you're aware, your first ul has the class name "navi" and so do the items within the list. It also only has one <li>, although you likely want 4 (since you have 4 links in it).
I'm trying to create a drop down menu, however I'm having difficulty "hiding" the nested menu items. The links and styling work fine, it's just the drop-down effect that I've missed something on. Ideas?
jsfiddle
css-
#header .social {
float: right;
list-style: none;
padding-top: 20px;
}
#header .social ul li {
display: inline;
position: relative;
}
#header .social ul li ul {
display: none;
}
#header .social ul li a {
display: inline;
padding-left: 6px;
white-space: nowrap;
}
#header .social ul li:hover ul {
display: inline;
position: absolute;
}
#header .social ul li:hover li {
float: none;
}
html/php-
<div class="social">
<ul>
<li><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="cait and shannon barker instagram" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/youtube.png" alt="cait and shannon barker youtube" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/facebook.png" alt="cait and shannon barker facebook" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/twitter.png" alt="cait and shannon barker twitter" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/pinterest.png" alt="cait and shannon barker lockerz" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
</ul>
</div><!-- end social -->
Is this what you are looking for ? http://jsfiddle.net/cScrD/3/
The HTML structure was not standard (ul should not be ideally put as a child of another ul. Rather open an li tag and put the ul inside the li). The structure should ideally be like this.
<div id="header">
<div class="social">
<ul>
<li><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="cait and shannon barker instagram" /><!-- li should not end here -->
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
</li><!-- li should end here -->
</ul>
</div>
</div>
I am trying to design a web-page where I have a list of bands, and every image will be a small set picture of the band logo(or something). I am setting the style inline and I have tried vertical-align and line-height etc and nothing seems to work.
I am pretty sure I could accomplish this with tables but I have been told many times that is not the proper use of the table.
<div id ="Content">
<ul>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
</ul>
</div>
Here is the small amount of CSS I have
#content li{display:inline;}
img {
max-height:100px;
max-width: 100px;
}
#content ul{list-style-type: none;
clear:left;
}
Any help or tips would be greatly appreciated
If I understood what you're trying to do, try this:
#content li {
display: inline-block;
background-color: #eaeaea;
border: 1px solid red;
text-align: center;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
margin: 5px;
}
img {
max-height:100px;
max-width: 100px;
display: block;
}
#content ul{
list-style-type: none;
clear:left;
}
Have a look at it here: http://jsfiddle.net/zDhKQ/
My best guess is that you are looking for this:
#content ul li {
float:left;
}
otherwise you'd have to be a bit more specific on what you are trying to accomplish.
I believe you want the align tag. Something like this:
<li><img src="IMG_3117.jpg" alt="Smiley face" width="42" height="42" align="left">This is some text.
</li>
Will result in something that looks nice.