I was wondering if it's possible to achieve an effect as shown in my mock up, with a single ul as opposed to a ul for the image and a ul for text, to to have an image and text shown below in a single ul, using css?
Something like this
<ul>
<li><img src=""/><p>text</p></li>
<li><img src=""/><p>text</p></li>
</ul>
Any help would be great,
Cheers
Here's the mock up:
Completely doable. Each <li> gets an <img> and <p> tags, and then text-align:center; on the <ul>.
HTML
<ul>
<li>
<img src="http://placehold.it/100x100.png>
<p>Here's a caption</p>
</li>
<li>
<img src="http://placehold.it/100x100.png>
<p>And another caption</p>
</li>
<li>
<img src="http://placehold.it/100x100.png>
<p>One more caption</p>
</li>
</ul>
CSS
ul{
text-align: center;
}
li{
display: inline-block;
}
Codepen
Related
Hope somebody can see what's going on with this, it's got me beat.
I have an issue with the tag text elements inside a drop-down menu extending beyond the li element for the mobile version of the navigation in the footer. The li element has a width restriction (is shaded orange to see clearly), you can see the problem on this page when browser is mobile width wide https://www.mcveaghfleming.co.nz/nav-issues.html There are some long link names and instead of flowing under the line above they are extending past the end of the li element.
Here's the relevent html
<div class="footer">
<div class="blockfooter">
<div class="row ft-low-nav ">
<style>
.foot-mobile-on .dropdown-menu li{float:left; width:100%; background:orange; word-wrap: break-word !important;}
.foot-mobile-on .dropdown-menu li,
.foot-mobile-on .dropdown-menu li a{display:inline-block;}
</style>
<span class="foot-mobile-on">
<div class="col-md-12">
<div id="navbar" class="navbar-collapse collapse dropdown">
<ul class="nav navbar-nav" >
<li><a href="#" class="dropdown-toggle make-b" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Business & Corporate <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="make-b">Business & Corporate </li>
<li>Anti-Money Laundering and Countering Financing of Terrorism Act 2009 Compliance and Advice
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</span>
<!-- end-->
</div>
</div>
</div>
<!--end-->
Be sure to set position:relative or anything different than the static default to the UL.
Adding up, this is to prevent the 100% width to be referring to an upper parent. My guess is that a lack of position declaration on the parent is scaling up the DOM to the entire body width. A quick inspect on the code should give you a hint about this, but is hard without seeing the actual code in action.
First of all, I´m not very firm with CSS. I try to show an icon (right side) on my sidebar link (nav-first-level) on mouseover. The Sidebar-Link currently uses 100% of the Sidebar. Do you have a tip for me?
<ul>
<li class="nav-first-level">
<a class="facetGroup" href="#">Cardiology<span class="fa arrow"></span></a>
<span class="markGroup "><i class="fa fa-pencil fa-2" ></i></span>
<ul class="nav nav-second-level collapse">
<li ng-repeat="facet in cardiologyItems">
<span>{{ facet.name }}</span>
</li>
</ul>
</li>
</ul>
this should get you there, take a look (show image icon on rollover with CSS).
• Swap .image class with your .facetGroup > remove <span> use a <div> and swap demo .play class with your .markGroup. Basically follow how it's done below and customize with your selectors!
<div class="itemsContainer">
<div class="image"> <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg" /> </div>
<div class="play"><img src="http://cdn1.iconfinder.com/data/icons/flavour/button_play_blue.png" /> </div>
</div>
CSS:
.itemsContainer {
background:red;
float:left;
position:relative
}
.itemsContainer:hover .play{display:block}
.play{
position : absolute;
display:none;
top:20%;
width:40px;
margin:0 auto; left:0px;
right:0px;
z-index:100
}
Use li:hover property.Try this:
<html>
<body>
<style>
ul li ul li:hover {
list-style-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-16.png');
}
ul li ul li
{
list-style-type: none;
}
</style>
<ul>
<li>Cardiology
<ul>
<li>citem1</li>
<li>citem2</li>
<li>citem3</li>
</ul>
</li>
<li>Other
<ul>
<li>oitem1</li>
<li>oitem2</li>
<li>oitem3</li>
</ul>
</li>
</ul>
</body>
</html>
Working JSFiddle sample: https://jsfiddle.net/t41w9u2w/2/
For each list item, I want an image with text below the image.
I read on this technique, but it is not supported in IE. Instead, I'm floating the list items to the left. It does the trick except the content below the list wraps to the right. How do I prevent the content from wrapping this way?
Here is my code:
<style>
.horizlist{
list-style:none;
text-align:center;
}
#menulist ul{
width:360px;
}
#menulist li{
float:left;
padding-right:50px;
}
#menulist li img{
display:block;
}
</style>
<div id="container" style="">
<div id="top">
<img src="joblove.jpg" style="float:right;">
<div id="title" style="width:500px;text-align:center;">
<h1>"THE TOUGHEST JOB YOU'LL EVER LOVE:"</h1>
<p style="font-size: 1.6em;">A RESOURCE FOR THOSE THINKING ABOUT A CAREER IN DIRECT CARE</p>
</div>
</div>
<div id="menulist">
<ul class="horizlist" >
<li>
<img src="images/purplestyle_11_home.png"></img><span>Home</span>
</li>
<li>
<img src="images/purplestyle_01_heart.png"><span>Brochure</span>
</li>
<li>
<img src="images/purplestyle_05_cut.png"><span>Video</span>
</li>
<li>
<img src="images/purplestyle_15_buddies.png"><span>Personality</span>
</li>
<li>
<img src="images/purplestyle_03_folder.png"><span>Resources</span>
</li>
<li>
<img src="images/purplestyle_02_talk.png"><span>FAQ</span>
</li>
</ul>
</div>
<img src="phone.jpg">
<ul class="horizlist">
<li><button type="button">Click </li>
<li></li>
</ul>
</div>
Add an height to #menulist in css :
#menulist ul{
width:360px;
height:100px;
}
Use CSS backgrounds. They give you more control over image positioning and require less mark-up.
HTML:
<a class="home" href="home">Home</a>
CSS:
.horizlist a {
display:block;
background-repeat:no-repeat;
padding-top: 20px;
padding-left: 20px
background-position: 10px 10px;
a.home {
background-image:url(/images/purplestyle_11_home.png);
}
Can can adjust the padding and background-position values to suit. Repeat as needed.
i need
at this moment code look
Css
ul#content {height:1%;overflow:hidden;list-style:none;margin:0;padding:0;max-width: 1020px;}
ul#content li{vertical-align:top;display:inline-block;margin:0 2% 26px 0;width:auto;}
* html ul#content li{display:inline;}
*+ html ul#content li{display:inline;}
Html
<ul id="content" >
<li>
<div style="height: 420px;width: 740px;" ></div>
</li>
<li>
<ul>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
</ul>
</li>
</ul>
Maybe css media queries are something you want to look in to:
http://css-tricks.com/6731-css-media-queries/
This specific tutorial explains how to make changes to the layout/styles based on screen width.
Basically it allows to conditionally set styles on elements, in this case you could make seperate styles for the ul depending on screen width. Browser support is pretty decent, and as a fallback you could supply some pretty simple js code to handle the not supporting browsers.
I'm guessing you need something like the following for it to look like the second image...
html:
<div id="content"></div>
<ul id="contentList">
<li>Text</li>
<li>Text</li>
...
</ul>
css:
#content {width:740px; height:420px}
#contentList {margin:10px 0; overflow:hidden}
#contentList li {min-width:220px; float:left; list-style:none}
Hello I've got this weird problem with css.
I'm displaying an unordered list
<ul>
<li>
<div class='align-left'>
PMI
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='19' class="elim" name="19">
</div>
</li>
<li>
<div class='align-left'>
GRANDS COMPTES
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='21' class="elim" name="21">
</div>
</li>
<li>
<div class='align-left'>
associations
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='22' class="elim" name="22">
</div>
</li>
<li>
<div class='align-left'>
PME
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='25' class="elim" name="25">
</div>
</li>
<li>
<div class='align-left'>
ecoles privees
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='28' class="elim" name="28">
</div>
</li>
<li>
<div class='align-left'>
organisme
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='32' class="elim" name="32">
</div>
</li>
<li>
<div class='align-left'>
test
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='34' class="elim" name="34">
</div>
</li>
</ul>
now this is accompanied by these css rules:
.align-right{
float: right;
}
.align-left{
float: left;
}
On chrome, the bullet point from the list is actually UNDER the text for the bullet point.
Why did I do this, I want the images to be aligned from top down.
here are screenshots of the problem
thanks in advance.
the code you provided won't cause this problem.
Depending on what you want to do, adding
ul { list-style-type:none; }
or
ul li { padding-left:40px; }
may achieve desired effect.
edit
try adding overflow:hidden; to the li elements
I'd also personally do it like this:
li {
background:url(/img/delete_icon2.png) no-repeat center right;
padding-right:25px; /*might need to adjust */
}
<ul>
<li>PMI</li>
<li>Bla bla</li>
</ul>
no need to over-complicate things.
If you want the DIVS clickable you can just do
<li>PMI</li>
and CSS:
li a { display:block; width:xxx; height:xxx; }
as required.
Try playing with the list-style-position property. Options are inside and outside.
I had the same problem and it seems that you do not have exact control over the position of the default bullet point.
For me the following was working in Firefox and in IE, but in Chrome it is positioned inside the text:
<ul style="list-style-position: outside; margin:0; padding:0;">
<li />
<li />
</ul>
I needed to set margins and paddings for both the list and the list items to get the bullet point(disk) outside the text
<ul style="list-style-position: outside; margin:10px; padding:10px;">
<li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
<li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
</ul>
The strange part is, that if I set those bottom margins to anything less than 7 pixel, the bullets jump inside. 8px is the smallest working value, although there is lots of space around and between the elements (they move closer to each other fluently, only the bullet points start to jump).