I have these images that reside in every list element in my unordered list:
<ul class="bot">
<li>
<img src="images/crime.png" class="pil-img">
Fire
</li>
</ul>
I wish to align the text in the list item as shown in the image
Now, I've given the following style to the <img /> element in my list item:
.pil-img {
padding-right: 10px;
margin: 4px 0px 0px 15px;
}
and to the <a /> tag
.bot li a { margin-top: -5px; }
but this doesn't seem to work. Any ideas?
Cheers
Html:
<ul>
<li>Some text</li>
<li>Some text</li>
</ul>
CSS:
ul li {
background: url(image.png) no-repeat 100% 0;
line-height: HEIGHT OF IMAGE (i.e. 100px);
padding: 0 30px 0 0;
}
There's a start. I would need to know the dimensions of your image to help you more.
If you need to have 2 images (star + cross/check) then you should add 1 bg to the <li> and another to <a>. That should start you off on the right track.
See if this works for you in your overall context.
HTML
<ul class="bot">
<li>
<div class="div_class"><img src="images/crime.png" class="pil-img"></div>
<div class="div_class">Fire</div>
</li>
</ul>
CSS
.div_class {
vertical-align: middle;
display: inline-block;
}
You can tweak the pil-img class as desired.
Here's a fiddle.
Related
The misaligned image
<menu style="list-style:none;text-align:center;font-size:200%;border: 6px solid white;border-style:dotted;margin-top:100px;margin-left:600px;margin-right:600px;padding-top:30px;color:GhostWhite;background: rgb(0,0,0,0.8)">
Idk why the text is not aligning in the center of the box even tho I gave text-align:center :(.(image attached )
Any help will be appreciated!
My guess is that you are using a list inside the box - and browsers put a padding of 40px to the left of a ul element. So try applying padding::0 to your UL.
.list-wrapper {
width: 200px;
border: solid 1px #222;
margin: 0 auto;
text-align: center;
}
ul {
list-style: none;
}
.with-padding-removed {
padding-left: 0;
}
<h2>With padding removed</h2>
<div class="list-wrapper">
<ul class="with-padding-removed">
<li>Expensive breeds</li>
<li>Cat memes</li>
<li>Adopt</li>
<li>Cat pictures</li>
<li>Best breeds</li>
</ul>
</div>
<hr/>
<h2>Without padding removed</h2>
<div class="list-wrapper">
<ul class="without-padding-removed">
<li>Expensive breeds</li>
<li>Cat memes</li>
<li>Adopt</li>
<li>Cat pictures</li>
<li>Best breeds</li>
</ul>
</div>
text-align css style does work well with block level tags such as h1. The following code makes the element centered But not excatly. I also changed the width of the element.
<menu style="list-style:none;font-size:200%;border: 6px solid white;border-style:dotted;margin-top:100px;width:10%;margin-left:40%;margin-right:40%;padding-top:30px;color:GhostWhite;background: rgb(0,0,0,0.8)">
I'm trying to make a basic navigation bar where a child dropdown appears when hovering over a list item. I want to position this dropdown starting at the right most edge of the list item I am hovering over, but I want it this dropdown be able to scale bigger than the list item you're hovering over.
The trouble is that when I position the parent relative, the dropdown's width is constricted to the width of the list item you're hovering over, when I remove postion relative I lose the ability to position it the way I want it.
When the parent List item doesn't have position relative it looks like this:
But I want the right edge of that dropdown to align with the right side of the list item I'm hovering on. When I add position relative to the list items, the width of the dropdown is contsrained like this:
The markup looks like follows:
<nav>
<ul class="outer-list">
<li>
<a>
Work
</a>
<ul class="inner-list">
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</li>
</ul>
<ul class="outer-list">
<li>
<a>
Contact
</a>
</li>
</ul>
<ul class="outer-list">
<li>
<a>
Helpdesk
</a>
<ul class="inner-list">
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</li>
</ul>
<ul class="outer-list">
<li>
<a>
Subscriptions
</a>
<ul class="inner-list">
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</li>
</ul>
I am not in charge of the markup, but if it needs to change to allow for a solution that is fine.
My CSS is as follows:
.outer-list{
.dropdown{
padding-right: 20px;
a{
color: black;
text-decoration: none;
position: relative;
.icon-dropdown{
position: absolute;
display: inline-block;
width: 6px;
height: 4px;
background-image: url('./Assets/BlueArrowIcon.svg');
background-size: cover;
background-position: center;
top: 50%;
right: -11px;
transform: translateY(-50%)
}
}
.inner-list{
padding: 25px 20px;
display: none;
position: absolute;
background-color: $color-white;
box-shadow: 5px 0px 50px rgba(0,0,0,0.16);
z-index: 1;
max-width: 310px;
li{
margin-bottom: 20px;
&:hover{
a{
color: $color-dark-red;
}
}
}
}
&:hover{
a{
color: $color-blue;
}
.inner-list{
display: block;
a{
color: black;
}
}
}
}
&:last-of-type{
.dropdown{
padding-right: 0px;
}
}
}
If anyone could help me that would be much appreciated.
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've been having this issue in different places where I have a ul list and Im trying to add it on top of a div (image, or a background) but the list does not appear on top. I wonder if it gets sent in the back..i even added z-index
JSFiddle
CSS
.toolbar p{ text-align: right; padding: 10px 180px 0 0; color: #fff; font-size: 26px; z-index: 1; }
.toolbar { width: auto; height: 50px; background-color: #cc1e2c; z-index: 1;}
.social-icons { z-index: 2;}
HTML
<div class="col_full toolbar">
<p>CALL NOW: +1 555.555.1234</p>
<ul class="social-icons">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
The reason you aren't seeing anything is because you posted links, without any content. If you added words, the list would appear:
<div class="col_full toolbar">
<p>CALL NOW: +1 555.555.1234</p>
<ul class="social-icons">
<li> Twitter </li>
<li> Instagram</li>
<li> Facebook</li>
</ul>
</div>
On this example I made the height bigger so you could see that the links are in fact on top.
If you want to see the images, you need to use the image tag like so:
<li> <img src="path/to/your/twitter_image.jpg"/> </li>
JSFiddle
I need to change something without touching HTML codes.
So I have this code in my HTML
<span class="share">
<ul>
<li>Share </li>
<li class="twitter">twitter</li>
<li class="facebook">facebook</li>
<li class="delicious">delicious</li>
<li class="friendfeed">friendfeed</li>
<li class="addthis">share</li>
<div class="clear"></div>
</ul>
</span>
and this in CSS
.twitter {
background: url('../images/tt.png') no-repeat;
width: 10px;
height: 14px;
}
This works fine, but twitter text is visible under the twitter logo, I don't want those texts to appear in my list, I want to replace them with images in CSS.
Is it possible to do without touching HTML Codes?
Make the text transparent. Since it's a link, you'll want to use a few selectors to make sure all cases are addressed:
.twitter a, .twitter a:link, .twitter a:visited
{
color: transparent;
}
Edit: This other option, while more verbose, has the benefit of keeping the focus border (the little dots that appear when a link is selected) to the size and shape of the twitter icon. Also, the text will not be revealed if selected and copied and pasted. It becomes invisible and unselectable. Here is the technique:
.twitter a {
display: inline-block;
overflow: hidden;
width: 0;
height: 14px;
padding-left: 10px;
}
You could use text-indent:
text-indent: -9999px; /* get rid of any text */
Try making your font-size : 0px; in your css.
use text-indent with a little magic in it :)
HTML:
<span class="share">
<ul>
<li>Share </li>
<li class="twitter">twitter</li>
<li class="facebook">facebook</li>
<li class="delicious">delicious</li>
<li class="friendfeed">friendfeed</li>
<li class="addthis">share</li>
<div class="clear"></div>
</ul>
</span>
CSS:
a.twitter {
background-image:url('../images/tt.png');
display:block;
height:58px;
text-indent:-9999px;
width:200px;
}
So you see the text is indented but still the image is still clickable because i've put a class in the twitter link ;)