Fiddle Here
My question is, why is the headline text not showing under the thumbnails in IE (8 and earlier). Works fine in all other browsers.
HTML:
<div id="thumbsGrid">
<div class= "thumbs">
<a href="http://youtu.be/A30XhK8Vtmg">
<img src="http://www.jillmedinger.com/NCPIE/images/thumbs/shadowed/recoverythumb.png"id="1.thumb"/>
</a>
<h4>Ben</h4>
</div>
<div class= "thumbs">
<img src="http://www.jillmedinger.com/NCPIE/images/thumbs/shadowed/recoverythumb.png" id="2.thumb"/>
<h4> The Resonator</h4>
</div>
<div class= "thumbs">
<a href="/NCPIE/re.html">
<img src="images/thumbs/door2/friendsThumbs.png"id="3.thumb"/>
</a>
<h4>RE-Covery</h4>
</div>
<div class= "thumbs">
<a href="/NCPIE/divedeeper2.html">
<img src="images/thumbs/door2/divedeeper2Thumb.png"id="5.thumb"/>
</a>
<h4> Dive Deeper </h4>
</div>
<!--thumbsGrid close-->
</div>
CSS:
.thumbs {
float:left;
width:100px;
height:100px;
margin-right:12px;
margin-bottom:0;
border:0;
padding:0;
}
#thumbsGrid {
float:left;
width:500px;
min-height:216px;
margin-left:110px;
border:0;
padding-right:40px;
background: black;
}
.thumbs h4 a {
color: #FFF;
}
And here it is live: www.jillmedinger.com/NCPIE/door2.html
It has to do with the filter on the .thumbs. The easiest resolution is to set position: relative to the h4 as this fiddle shows.
Related
http://plnkr.co/edit/10Xx2dkqPBeK24cEFVtC?p=preview
<li class="language-list">
li doesn't seem to want to adopt my css class:
.language-list, li.language-list {
height:50px;
background: silver;
}
Check the Plunkr for a full example.
It works just fine: JSFiddle Example. You're just not linking to your CSS file yet. In Plunkr, html files are full files, so you need to include a <link rel="" href="" type=""> line.
Here's an updated working Plunkr
ol {
list-style-type: none;
padding: 0em;
}
.language-list, li.language-list {
height:50px;
background: silver;
}
<button type="button" data-ng-bind="data.language.next" data-ng-click="profilePage()" class="btn btn-lg btn-success center-block">
</button>
<ol class="scroll">
<li style="height:50px; background: silver;">
<div style="height:100%; width:10%; float:left; background: red;">
<img src="http://www.wwf.hu/images/zaszlo_en1.png">
</div>
<div data-ng-bind="lang.languageInLanguage" style="height:100%; width:10%; float:left; background: pink;">
english
</div>
</li>
<li class="language-list">
<div style="height:100%; width:10%; float:left; background: red;">
<img src="http://www.wwf.hu/images/zaszlo_en1.png">
</div>
<div data-ng-bind="lang.languageInLanguage" style="height:100%; width:10%; float:left; background: pink;">
english
</div>
</li>
</ol>
I have a <Div> that I would like 2 images to be displayed in. The first one set in the top left and the other at the bottom right.
Ideally i'd like to do this on <Div> so that the content sits in it also and goes over the images.
I have managed to get the top left image in but I cant figure out how to get the bottom one in.
My CSS is
.tab-content > .tab-pane,
.pill-content > .pill-pane
{
display: none;
background-image: url("../images/brand/QuotationOpen.JPG");
background-repeat: no-repeat;
padding-top: 50px;
padding-left: 25px;
}
My HTML is
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent</li>
<li>Principled</li>
<li>Personal</li>
<li>Focused</li>
<li>Straightforward</li>
<li>Energetic</li>
</ul>
<div class="tab-content col-sm-9 col-md-8">
<div class="tab-pane active">
<h2>Heading 2</h2>
<p>Content here</p>
</div>
<div class="tab-pane" id="Intelligent">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Content here</p>
</div>
</div>
</div>
</div>
And this give me
I need to get the following image in the bottom right which also allows the text to over-run it
The image below is a mock-up I did in paint to show what i'm after
You can also do this by assigning two background images to the div.
.quote {
background-image: url("http://i.stack.imgur.com/kXynJ.jpg"), url("http://i.stack.imgur.com/aduet.jpg");
background-repeat: no-repeat, no-repeat;
background-position: top left, bottom right;
height: 200px;
width: 400px;
}
<div class="quote">Here is some text.</div>
If anyone is interested in a solution without the framework css-classes i created a demo jsfiddle:
http://jsfiddle.net/q5dn5589/
HTML:
<div class=wrapper>
<img src="http://i.stack.imgur.com/Smqyd.jpg">
<img class="image2" src="http://i.stack.imgur.com/aduet.jpg">
</div>
CSS:
.wrapper {
position: relative;
width: 499px;
height: 213px;
border: 1px black solid;
}
.image2 {
position: absolute;
bottom: 0;
right: 0;
}
solved it
try positioning two images absolutely and position its accordingly!
See jSfiddle
css
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
Snippet (see it full-screen for effect)
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
border:1px solid #ccc;
padding-top: 50px;
padding-left: 25px;
}
.tss {
position:relative;
display: flex;
height:300px;
}
h2 {
z-index:999;
display:block;
}
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent
</li>
<li>Principled
</li>
<li>Personal
</li>
<li>Focused
</li>
<li>Straightforward
</li>
<li>Energetic
</li>
</ul>
<div class="tss tab-pane" id="Intelligent ">
<h2>Heading 2</h2>
<img class="first" src="http://i58.tinypic.com/1zm2tmp.jpg" border="0" alt="Image and video hosting by TinyPic">
<img class="second" src="http://i62.tinypic.com/dyoopu.jpg" border="0" alt="Image and video hosting by TinyPic">
</div>
</div>
</div>
</div>
I have the following code:
<div class="altimages">
<div class="altimgbox spacer">
<a class="gallery cboxElement" href="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6723_1024x1024.jpg?v=1402772641" title=""><img src="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6723_large.jpg?v=1402772641" alt="Waltz" title=""></a>
</div>
<div class="altimgbox spacer">
<a class="gallery cboxElement" href="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6751-768x1024_1024x1024.jpg?v=1402772644" title=""><img src="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6751-768x1024_large.jpg?v=1402772644" alt="Waltz" title=""></a>
</div>
<div class="altimgbox spacer">
<a class="gallery cboxElement" href="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6758-768x1024_1024x1024.jpg?v=1402772647" title=""><img src="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6758-768x1024_large.jpg?v=1402772647" alt="Waltz" title=""></a>
</div>
<div class="altimgbox ">
<a class="gallery cboxElement" href="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_4933_1_1024x1024.JPG?v=1402876174" title=""><img src="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_4933_1_large.JPG?v=1402876174" alt="Waltz" title=""></a>
</div>
</div>
With the following CSS:
.altimages{
clear:both;
width:800px;
padding-left:40px;
min-height:100px;
float:left;
margin-bottom:30px;
}
.altimgbox{
width:192px;
height:192px;
margin-top:10px;
overflow:hidden;
display:inline-block;
}
.spacer{
margin-right:6px;
}
.altimgbox img{
width:300px;
margin-left:-60px;
}
This seems to align fine on Chrome & Firefox but when the page first loads in Safari the images are mis-aligned. When you reload the page everything works fine (so something to do with images being loaded in after the css or something?
You can see the live URL here: http://www.fiercelycurious.com/collections/susan-weinthaler/products/waltz
Thanks!
With Bootstrap 3, I'm trying to make an image stay within the boundaries of it's parent div.
This works fine for width, but no matter what I try, the image keeps falling out of the bottom of the parent div, because it's height doesn't update when I decrease browser height. Is it possible to make this work ? If so, how ? Thanks.
JSFiddle : http://jsfiddle.net/rensdenobel/9486t/
HTML :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-4"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 center">
<div class="content">
<div id="text">You chose this photo :</div>
<div id="thumbnail-container">
<img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
</div>
<div id="button-share">
<button class="btn btn-success">Share it !</button>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-4"></div>
<div>
</div>
CSS :
html, body {
height:100%;
}
.container {
height:100%;
width:100%;
border:1px solid blue;
}
.row {
border:1px solid green;
height:100%;
}
.center {
display:table;
border:1px solid red;
padding-top:12px;
padding-bottom:12px;
text-align:center;
height:100%;
max-height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
height:auto;
border:1px solid green;
}
#thumbnail-image {
margin-left:auto;
margin-right:auto;
height:auto;
}
#thumbnail-container{
width:100%;
border:1px solid pink;
max-height:70%;
height:70%;
margin-top:12px;
margin-bottom:12px;
}
try
<div id="thumbnail-container col-sm-4 col-xs-4">
<img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
</div>
change the col-sm-* and col-xs-* to get your desired output
This approach works for me. Please try adding this to your css:
.container {
height:max-content;
}
In the theme that I use, there is a shortcode making googd accordians. I am making the site RTL. Accordian's title and content have been RTL. But the plus sign (the square) does not follow the CSS rules added. I was wondering if anyone could help me make the plus sign RTL.
Page URL: http://sciself.com/?page_id=4766
HTML code is as follows,
<div id="text-13" class="widget widget_text">
<div class="textwidget">
<div class="accordian">
<h5 class="toggle">
<a href="#">
<span class="arrow">
</span>
title
</a>
</h5>
<div class="toggle-content " style="display: none;">
text
</div>
<h5 class="toggle">
<a href="#">
<span class="arrow">
</span>
title
</a>
</h5>
<div class="toggle-content " style="display: none;">
text
</div>
<h5 class="toggle">
<a href="#">
<span class="arrow">
</span>
title
</a>
</h5>
<div class="toggle-content " style="display: none;">
text
</div>
</div>
</div>
</div>
and CSS rules added are,
#text-13 .textwidget .accordian .toggle-content {
font-family: bkoodak !important;
direction: rtl !important;
text-align: justify !important;
}
#text-13 .textwidget .accordian h5.toggle a {
font-family: bkoodak !important;
direction: rtl !important;
float: right !important;
}
in the .arrow class in the line "2073" in your style.css add property like so:
h5.toggle span.arrow {
float:right;
direction:rtl;
margin-right:0;
margin-left:17px;
}
also your form need to be rtl, in the .gform_fields class add this property:
.gform_fields{
direction:rtl;
text-align:right;
}
موفق باشید :)
Try this:
h5.toggle span.arrow {
float:right;
direction:rtl;
margin-left:10px;
font-family:bkoodak;
}