I'm displaying a set of thumbnail images with links on a webpage like this
Here's the HTML
<div id="newsletters-and-journals">
<p id="pubs-caption">Publications</p>
<ul>
<li class="pubs">
<img class="pub-cover" src="images/CXuyv.png" />
<span>Journal - January 2012</span>
</li>
<li class="pubs">
<img class="pub-cover" src="images/vER9H.png" />
<span>Newsletter - May 2012</span>
</li>
</ul>
</div>
and the CSS
#newsletters-and-journals ul { position:relative; top:12px; left:30px; }
.pubs { display:inline; margin-right:60px; }
.pub-cover { width:120px; height:140px; }
also a fiddle http://jsfiddle.net/nK0de/3jeVF/2/
How can I display the links under each corresponding image?
Thank you
It is also works:
.pubs {
display: inline-block;
margin-right: 60px;
width: 120px;
}
width is your image's width.
You can make either <img> or <span> to display:block
http://jsfiddle.net/3jeVF/6/
to solve your problem just add a
br
tag in between
img and span tag.
Related
I have a list that contains texts and two icon images. The text doesnt align with the images so I want to be able to add a margin to the links. However, after at least an hour of checking I still can't get it to work, here is my code:
<div class="company-info pull-right">
<ul class="social-header">
<li>Follow Us</li>
<li class="socials"><i class="twit-icon"></i></li>
<li class="socials"><i class="linked-icon"></i></li>
</ul><!--/social header-->
</div><!--/pull right-->
</div><!--/company info-->
.social-header{
list-style:none;
}
.social-header li{
display:inline;
}
.social-header li.socials{
margin-top:10px;
}
margin wont work on an inline element.
.social-header li{
display:inline-block;
float: left;
}
.social-header li.socials{
padding-top:10px;
}
You're using display:inline, change this to display:inline-block.
This is because inline elements cannot have any size, padding etc. Think of them as if they were a letter in a paragraph.
I would recommend reviewing the vertical-align property, its options, and see if one of those will do the trick. I often use vertical-align: middle.
I don't have you image files, but I just snagged some off Google and added my own img CSS class. The key was changing it to inline-block and using the vertical-align attribute. CSS classes to as follows
.social-header{
list-style:none;
}
.social-header li{
display:inline-block;
}
.social-header li{
vertical-align: middle;
}
img{
width: 45px;
height: 45px;
}
and the html
<div class="company-info pull-right">
<ul class="social-header">
<li><h2>Follow Us</h2></li>
<li class="socials"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-512.png" /></li>
<li class="socials"><img src="http://inhouseww.com/static/assets/imgs/icon-linkedin.png" /></li>
</ul>
</div>
Well, I coded this page, but I got stuck at why does the third column is pushing down my text (or other elements). It uses the same style from the first box, but while the first box is ok, the third one is pushing the elements down by some pixels.
Like this:
HTML
<div id="contentWrapper">
<div id="sideBar">
<div class="sidebarBox"></div>
<div class="sidebarContent">
<h4>
Índice
</h4>
<ul class="tree">
<li>
Sinopse
</li>
<li>
Tropas
</li>
<li>
Geladeira
<ul>
<li>
Lógica
</li>
<li>
Gênio
</li>
<li class="last">
Horror
</li>
</ul>
</li>
<li>
Notas
</li>
<li>
Mídia
</li>
<li class="last">
Referências
</li>
</ul>
</div>
</div>
<div id="mainBody"></div>
<div id="infoBar">
<div class="sidebarBox"></div>3º Column
</div>
</div>
CSS
* {
margin:0;
padding:0;
font:normal normal 14px/20px Helvetica,Arial,sans-serif
}
h4 {
font-size:14px;
font-weight:700;
text-transform:uppercase;
padding-top:10px;
border-bottom:2px solid #2a558c;
margin-bottom:10px
}
#contentWrapper {
display:table;
border-spacing:0;
width:100%;
height:500px
}
#contentWrapper > div {
display:table-cell
}
#sideBar {
background-color:#E4E5DD;
width:200px
}
#mainBody {
background-color:#EEEEE6
}
#infoBar {
background-color:#e4e5dd;
width:200px
}
#footer {
background-color:#323540;
height:50px
}
.sidebarBox {
background-color:#323540;
height:30px;
width:100%
}
.sidebarContent {
padding:15px
}
I messed a lot with the Firebug and even tried to open it in IE and Chrome, with same results. Both columns use the same CSS, and this difference is freaking me out. I thought about "fixing" it with some negative margins, but I want to understand the problem first, insted of "workahacking" away.
Thanks a lot in advance!
Add vertical-align: top to #contentWrapper > div. Currently it is baseline.
Have a fiddle!
CSS
#contentWrapper > div {
display: table-cell;
vertical-align: top;
}
Without vertical-align: top, the div is basing its vertical alignment on .sidebarContent which has 15px of padding. This is resulting in the 15px gap.
Change the following and it should fix your problem. I've found that when using display:table-cell it always mis-aligns the last cell unless I specifically give it a vertical alignment
#contentWrapper > div {
display: table-cell;
vertical-align:top;
}
Example
Add display:inline-block to this class:
.sidebarBox {
background-color: #323540;
height: 30px;
width: 100%;
display: inline-block;/*Add this*/
}
fiddle
.sidebarBox {
float:right;
}
will work.
I'm creating a website and I have a footer at the bottom of the page. I want to place the text at some above from the current position, without increasing the height of the footer. Can someone tell me how to do this please?
Current HTML is
<div class="footer">
<ul id="footer">
<li> <img src="Images/facebook.png" /> <img src="Images/twitter.png" /> </li>
<li> Jewllery</li>
<li> ADDRESS </li>
<li> TEL PHONE</li>
</ul> </div>
and the current css is
.footer
{
text-align:centre;
background-color:#C8C8C8;
color:#000000;
}
#footer li
{
display:inline-block;
padding-right:3em;
}
You can set a negative margin-top like this:
.footer {
margin-top: -3em;
}
Edit:
What he tried to do is move the text inside the footer up, not the footer itself.
So you have to give the li-element a negative margin-top:
#footer li {
display:inline-block;
vertical-align:middle;
margin-top: -50px;
}
One thing you could try
.footer {
margin-top: -1em;
}
From what you said im taking it as (move the text in the footer up, without actually effecting the footer)
set the child footers margin as a negative.
#footer{
margin-top:-20px;
}
I have a normal li element, it contains a picture. Now when I hover it, it should be surrounded by a div for example which contains some descriptions for the image in the li. Please check out this link http://www.zalando.de/damenschuhe-sandaletten/ and hover the shoes. As you see, it adds information around the image.
I tried several things but the results are not really what I want. Any ideas how to to that in a good way?
Thanks!
Something like this?
<ul>
<li>
<div class="info">Info 1</div>
[Image 1]
</li>
<li>
<div class="info">Info 2</div>
[Image 2]
</li>
<li>
<div class="info">Info 3</div>
[Image 3]
</li>
<li>
<div class="info">Info 4</div>
[Image 4]
</li>
</ul>
ul{
list-style:none;
text-align:center;
padding: 0 35px;
}
li{
display:inline-block;
background: #ddd;
height:200px;
width:200px;
margin:10px;
padding:0;
position:relative;
}
li > .info{
display:none;
position:absolute;
top:0;
left:-40px;
width:35px;
height:100%;
background:#ffa;
}
li:hover{
background:#ccf;
border:5px solid #afa;
margin:5px;
}
li:hover > .info{
display:block;
}
DEMO: http://jsfiddle.net/NhfF3/
you should add a hidden div inside the li element. http://jsfiddle.net/SKxjM/
this is the CSS
.expandable .expansion { display: none; }
.expandable:hover .expansion { display: inline; }
And the HTML should look like this
<ul>
<li class="expandable">this is expandable
<div class="expansion">more info</div>
</ul>
You could try using the CSS :after tag with content.
<li>
<img src="whatever.jpg">
</li>
li:hover:after{
content: 'image caption here';
}
Also, you could dynamically add it, if that makes it work for your site easier:
document.styleSheets[0].addRule('li:hover:after', 'content: \'image caption here\'');
So, this might sound basic for some of you guys. But i just haven't been able to figure it out.
So i have this CSS and this HTML Code:
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
position: absolute;
left:0;
right:0;
}
.ppt img {
margin-left: 5px;
}
</style>
<center>
<ul class="ppt">
<li>
<img src="#">
<img src="#">
</li>
</ul>
With this code i will have 2 pictures next to each other in the center.
Now i would like to add 2 more pictures, those 2 just can't be in "lo" nor "li". But the pictures will have to be on the same row, one of them will be at the start and the other one will be at the end, how can i do this?
(Click here for a picture explanation)
Thanks in advance.
Check http://jsfiddle.net/AvqEB/1/
ul.ppt {
position: relative;
list-style:none;
display:inline-block;
padding:0;
margin:0
}
.outerimg { display:inline-block; margin-left: 5px;}
.ppt li {
display:inline-block;
}
.ppt img {
margin-left: 5px;
}
and html
<img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />
<ul class="ppt">
<li>
<img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
<img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
</li>
</ul>
<img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />
You can do this by floating things to the left. Here is a jsfiddle demo: http://jsfiddle.net/6L7x9/1/
On an aside, I find using DIV with a centered class far preferable to using the CENTER tag.
<style type="text/css">
ul.ppt {
position: relative;
padding:0px;
margin:0px;
}
.ppt li {
padding:0px;
margin:0px 5px;
list-style-type: none;
float: left;
}
.leftfloat { float: left; }
.inlineimage {
margin:0px 0px 0px 5px;
border:0px;
}
</style>
<center>
<img src="#" class="leftfloat inlineimage" />
<ul class="ppt leftfloat">
<li>
<img src="#" class="inlineimage">
<img src="#" class="inlineimage">
</li>
</ul>
<img src="#" class="leftfloat inlineimage" />
One does wonder why the bounding images must be outside the UL...
UPDATE POST OP COMMENT
Ok, I've taken your sample, dropped it into JSFiddle, and modified it so that back & forward are on either side of the "slideshow" image (http://jsfiddle.net/SFvGk/). One immediate issue is the varying width of the slideshow frame, which causes the "next" button to jump around. You could mitigate that by setting a fixed with for the UL, and then accepting empty space when narrower images are displayed.
Modifications:
Add class "payitforward" to the next/prev buttons.
Add style "display:inline-block" to UL and set margin/padding to 0 for UL and LI.
Add to top of script:
var $slideContainer = $("ul.ppt");
$slideContainer.width(cur.width())
Add to end of "forward" function:
$slideContainer.width(cur.width())
Comments:
You might look into events on the fadeIn/fadeOut functions to possibly smooth out movement of the "Next" button on the right, or just fix the width of the slideshow container so the "Next" button never moves.
Definitely look into requestAnimationFrame to replace "setInterval". Here is one resource: http://creativejs.com/resources/requestanimationframe/.
Use :after and :before.
li{height:20px; width:20px; margin:10px; background:red; display:inline-block; position:relative;}
li:before, li:after{content:" "; position:absolute; height:20px; width:20px;}
li:last-child:after{background:blue; right:-25px;}
li:first-child:before{left:-25px; background:green;}
Fiddle here.