I have an image and a caption within a figure tag. I was wondering how I can get the figcaption positioned next to the img and vertically centered, like the image attached.
Here's a jsfiddle I set up.
Thank you!
Here you go, just replace the css with following:
html { font-family: 'Helvetica-Neue', Arial, Helvetica; font-size: 1em; line-height: 1.4; letter-spacing: 1px; color:white; }
figure { float:left; padding:20px; display:block; background:#ffa2df; position:relative; }
.width { width:50%; }
.height { height:15em; }
img { width:auto; height:100%; float:left;}
figcaption { background:#5800ff; height:100%; display:flex; justify-content: center;
flex-direction: column;
text-align: center;
float:left;
}
Related
i got a "little" bug on my website. Here is the code im using:
product.tpl
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here is a Link to a product.
If you enlarge the picture by clicking on it, and hover to one of the sites and than jump to one of the other pictures you can see that the background is moving. In Internet Explorer it is working fine.
Now:
/* 1920x1200 ----------- */
#media only screen
and (min-width : 1681px) {
/* Styles */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.42857;
background: #f4f5f7 url('http://evoxity.net/themes/default-bootstrap/img/background/1920x1200.jpg');
margin: 0 ;
background-repeat: no-repeat scroll;
-moz-background-size:cover;
overflow: auto;
background-position:center 0;
}
}
In my asp.net mvc4 view I have some nested divs to show an image and under it a text like below:
<div id="Outer1" class="elementStatus">
<div class="image"> <!-- THIS IS THE IMAGE -->
<img id="MyImg1" src="#Url.Content("~/images/Image.gif")">
</div>
<div class="text"> <!-- THIS SHOWN THE TEXT UNDER IMAGE-->
Statuts Text
</div>
</div>
and the css:
.elementStatus
{
visibility: hidden;
}
.image{
float: left;
margin-top: 2px;
padding-top: 1px;
padding-left: 10px;
width: 35px;
}
.text{
float: left;
margin-top: 1px;
padding-left: 14px;
padding-bottom: 2px;
width: 35%;
font-weight: bold;
font-size: 1em;
}
I want that the image in the first div to be centered horizontally and vertically in the div where it is placed. The same for the second div, I want the text to be centered horizontally and vertically within its div. So how to do it?
Please, do not downvote!
Recommend a background image:
.image {
background-image: url('~/images/Image.gif');
background-repeat: no-repeat;
background-position: center;
background-size: 35px 35px;
}
For the text:
.text {
text-align: center;
}
For vertical text alignment:
.text {
line-height: 35px;
height: 35px;
}
This is a pretty broad question but it's easily solved using flexbox (assuming you're supporting newer browsers). Going to remove vendor prefixes for the sake of clarity but you'll want something like this:
#Outer1 {
display: box;
box-align: center;
box-orient: vertical;
box-pack: center;
}
http://jsfiddle.net/VqwLH/
Since you have updated saying you need support for older browsers, I think you can use display: table-cell for the parent container:
#Outer1 {
display: table-cell;
height: 500px;
width: 500px;
border: 1px solid red;
vertical-align: middle;
text-align: center;
}
http://jsfiddle.net/VqwLH/1/
I am having trouble ellipsis text (.title) found in between a span that is floated left and a span that is floated right. When overflow occurs .length is pushed down onto a new line. How can I fix this?
JS FIDDLE:
http://jsfiddle.net/VfHdS/6/
HTML:
<div class="song">
<span class="tracknumber">4</span>
<div class="title">This is the song tittle!!!!!!!!!!!</div>
<span class="length">4:31</span>
</div>
CSS:
.song {
font-size: 14px;
padding: 2px 20px;
}
.tracknumber {
margin-right: 10px;
}
.title {
color: #262626;
display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.length {
float: right;
}
Using the sample html you provided I set up a fiddle. Setting the .title element to display block is what gets the ellipses to show up.
http://jsfiddle.net/f4uUJ/
I've also repositioned the track number and play time absolutely so the song title can be 100% width. You just need to add padding to the track to give the title some breathing room.
CSS
.song {
font-size: 14px;
padding: 2px 40px 2px 20px;
position:relative;
}
.tracknumber {
position:absolute;
left:0;
top:2px;
}
.title {
white-space: nowrap;
width: 100%;
display:block;
overflow: hidden;
text-overflow:ellipsis;
}
.length {
position:absolute;
right:0;
top:2px;
}
My CSS UL menu doesn't seem to want to centre, any ideas? I have pasted the code below for your review, I am quite new to CSS so your help is greatly appreciated :-)
The only way I have been able to centre it is by fixing the width and using the html centre tags but I need the menu to be at 100% for expansion and I need to to automatically centre.
The CSS
#menu{
width:100%;
margin: 0;
padding: 5px 0 0 0;
list-style: none;
background-color:#333333;
text-align:center;
}
#menu li{
float: left;
padding: 0 0 5px 0;
position: relative;
list-style:none;
margin:auto;
}
#menu ul{
list-style:none;
display:inline;
margin: 0;
padding: 0;
text-align: center;
}
#menu a{
float: left;
height: 15px;
padding: 0 25px;
color:#FFF;
text-transform: uppercase;
font: 10px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#menu li:hover > a{
color:#F90;
font: bold 10px/25px Arial, Helvetica;
}
*html #menu li a:hover{ /* IE6 */
color: #F06;
}
#menu li:hover > ul{
display: block;
}
Thanks again :-)
Provide width to your menu and use margin: auto;
#menu{
width:300px; <--------Here
margin: 0 auto; <-----Here
padding: 5px 0 0 0;
list-style: none;
background-color:#333333;
text-align:center;
}
Moreover why are you doing this?
#menu li:hover > ul{
display: block;
}
And also this
#menu a{
float: left;
....
}
Update: just read all the styles your cascade looks pretty messed up, use the following
#menu { /* I Assume this ID is applied to <ul> element */
width:/*Whatever you want to define*/;
margin: 0 auto; <---Change Here
padding: 5px 0 0 0;
list-style-type: none; <---Change Here
background-color:#333333;
text-align:center;
}
#menu li{
float: left; <---You don't need this
padding: 0 0 5px 0;
position: relative; <---You don't need this too
list-style:none; <---You don't need this too
margin:auto; <---You don't need this too
}
/* Take out this entirely from here */
#menu ul{
list-style:none;
display:inline;
margin: 0;
padding: 0;
text-align: center;
}
/* till here */
#menu a{
float: left; <---You don't need this
height: 15px;
padding: 0 25px;
color:#FFF;
text-transform: uppercase;
font: 10px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#menu li:hover > a{
color:#F90;
font: bold 10px/25px Arial, Helvetica;
}
*html #menu li a:hover{ /* IE6 */
color: #F06;
}
#menu li:hover > ul{
display: block;
}
And if you want your links inside the menu too be centered simply use this
HTML
<ul id="#menu">
<li></li>
</ul>
CSS
#menu li {
text-align: center;
}
Putting
text-align:center;
in the ul means that text in the ul is centered. You should add:
margin-left:auto;
margin-right:auto;
to the ul. This will work for all major browsers save IE. To work in IE you need to make sure that a tag containing ul has
text-align:center;
in it.
I have looked through a tonne of posts which have similar issues, but I just can't figure out my problem. Please could someone help, it is driving me insane.
The below code is for my Site Navigation. I would like the background to be an image rather than just a background colour. I would also like the background image to change on hover. As our Meerkat friends would say...Simples!....but not for me.
<div class="sub-menu" id="sub-menu">
<ul>
<li><a class="on" href="#" title=" You Are Here ">ยป Overview</a></li>
<li>Endorsements</li>
<li>The Detail</li>
<li>Funding</li>
<li>Apply Online</li>
<li><a class="end" href="graduates-terms.html" title=" Terms & Conditions ">Terms</a></li>
</ul>
</div>
div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0; border-top: solid 1px #FFFFFF; }
#sub-menu ul { list-style: none; padding: 0; margin: 0; }
#sub-menu li { float: left; margin: 0; }
#sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; }
#sub-menu li a:hover { color: #050505; background-color: #f3b607; }
#sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; }
#sub-menu li a.end { width: 89px; }
#sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; }
/* Hide from IE5-Mac \*/
#sub-menu li a{ float: none }
/* End hide */
#sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; }
Thank you, I really appreciate your help.
In your question subject, you said you wish to put background image to "li" tag, but as per the code you have shown, you have given background to "a" tag.
You can put background image and color both together to any of the tag "li" and "a"
Eg.
background: #00ff00 url('smiley.gif') no-repeat fixed center;
For details refer:
http://www.w3schools.com/cssref/css3_pr_background.asp
If you want to put hover effect as well, implement it on anchor "a" tag. Because old browsers like ie6 doesn't have inbuilt support for li hover effect.
Use following pattern.
a{
background: url('img1') no-repeat fixed center;
}
a:hover{
background: url('img2') no-repeat fixed center;
}
Hope it helps you.