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!
Related
is it possible to hover an image and visible other css element such as menu links:
<div class="carousel">
<div class="row" style="margin-top:60px;">
<div class="col-md-6 col-sm-6 col-xs-7 text-left" > <div class="logo"></div> </div>
<div class="col-md-5 col-sm-5 col-xs-4 text-right" id="mymenu" style="padding-right:80px;">
HOME <span class="d">|</span>
ABOUT <span class="d">|</span>
CONTACT
</div>
<div class="col-md-1" id="myimg">
<img src="images/menu.JPG"> </div>
</div>
...]
Once I hover image (menu.jpg) I want to visible menu links (home contact etc.) gradually to the left like a drawer. I use bootsrap.
My CSS code is:
#mymenu a.m, .d {
font-size:22px;
font-weight:bold;
color:#000;
display:none;
}
.carousel #myimg img:hover > .carousel #mymenu a.m{
display:block;
}
Any ideas ?
Thanks in advance.
I've created this content with drupal. Below the image you have a next page button.
I also set a button for next image on top of the image (pager) so if the visitor clicks on the image it would go next page.
How can i stretch the link over my image, drupal generated 2 divs and the images are variable in height.
<div class="view-content">
<div class="container12">
<div class="pagerfoto column12">
<h2 class="element-invisible">Pagina's</h2>
<div class="item-list">
<ul class="pager">
<li class="pager-next first">
›
</li>
<li class="pager-last last">
</ul>
</div>
</div>
</div>
<div class="container12">
<ul>
<li class="views-row views-row-1 column12">
<div>
<div class="views-field views-field-field-image">
<div class="field-content">
<img width="900" height="675" alt="" src="http://www.logicaarchitectuur.be/test/sites/default/files/styles/gallery_large/public/desert.jpg?itok=J6D4TAEL" typeof="foaf:Image">
</div>
</div>
</li>
</ul>
</div>
site
.pagerfoto{
z-index:1;
position:absolute;
padding-top:1.71429em;
display:block;
}
.pagerfoto ul li.pager-next a{
display:block;
margin:0 auto;
padding:0;
text-indent: -9999px;
}
This is the current css i use for ma a label.
Try giving this css:
.view-project11 {
position: relative;
}
.item-list {
left: 50%;
position: absolute;
top: 50%;
}
If I understand your question correctly you would like the user to click on the image and then the page will go to the next image.
wrapping your image in the tag will allow you to do that.
example
<a width="900" height="675" href="/test/project11?page=1">
<img width="900" height="675" alt="" src="http://www.logicaarchitectuur.be/test/sites/default/files/styles/gallery_large/public/desert.jpg?itok=J6D4TAEL" typeof="foaf:Image">
</a>
I'm trying to add a sub-footer on top of my footer, like so
header+footer(blue)
sub-footer(red)
I used Ryan's sticky-footer method, so my HTML looks like this
<div id="root">
<div id="header">
<div class="wrapper">
<h1 class='logo'>Logo</h1>
</div>
</div>
<div id="content"></div>
<div id="root-footer"></div>
</div>
<div id="footer">
<div class="wrapper">
<div id='subfooter'>
<div class='subfooter-content'>
<a id="main-nav01" href="javascript: void(0)" target="_self">トップ</a>
<a id="main-nav02" href="javascript: void(0)" target="_self">「世界のKitchenから」の思い</a>
<a id="main-nav03" href="javascript: void(0)" target="_self">タイのお母さんのKitchenから</a>
<a id="main-nav04" href="javascript: void(0)" target="_self">ちいさなKitchenのムービー</a>
</div>
</div>
</div>
</div>
and my CSS for the subfooter like this
#subfooter
position: relative
.subfooter-content
position: absolute
margin-top: -200px
height: 70px
z-index: 10
but it doesn't work on FF, if you see the screen-shots (FF is on the right), the subfooter(red) follows the footer(blue)
edit
I used compass and in the actual design it uses outline top, which i'm having problem with in FF.
here's the jsbin http://jsbin.com/fifeleru/1
If you replace outline:1px solid blue by border-top:1px solid blue; on the .footer the problem is solved.
See here
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.
I've been going through documentation, tutorials and examples. But I can't seem to get these 4 boxes to align properly no matter what I do.
div#frontpage{width:100%; }
div#1{width:25%; float:left; position:relative;}
div#2{width:25%; float:left; position:relative;}
div#3{width:25%; float:right; position:relative;}
div#4{width:25%; float:right; position:relative;}
.clear{clear:both;}
<div id="frontpage">
<div id="1">
</div>
<div id"2">
</div>
<div id="3">
</div>
<div id="4">
</div>
<div class="clear">
</div>
</div>
This is what I came up so far and the closest result I want to achieve. Get them to all align horizontal straight across one row. The reason why I use % instead of px is because my wordpress theme is responsive.
Just tweaked it a bit and it works fine.
CSS
div#frontpage{width:100%; }
div.box{width:25%; float:left; position:relative;}
.clear{clear:both;}
HTML
<div id="frontpage">
<div class="box">
a
</div>
<div class="box">
s
</div>
<div class="box">
d
</div>
<div class="box">
f
</div>
<div class="clear">
</div>
</div>
As mentioned by Phil, Ids should not be numbers. Also, your <div id"2"> should have been <div id="2"> (missing '=' sign)
see this working example http://jsfiddle.net/QFMXx/
change Id's in your code. Id's shouldn't start with digits
<div id="frontpage">
<div id="d1">sfdfs
</div>
<div id="d2">dfsdf
</div>
<div id="d3">dsfsdf
</div>
<div id="d4">dfsfsd
</div>
<div class="clear">sdfsd
</div>
</div>
and css:
div#frontpage{width:100%; }
div#d1{width:25%; float:left; position:relative;}
div#d2{width:25%; float:left; position:relative;}
div#d3{width:25%; float:right; position:relative;}
div#d4{width:25%; float:right; position:relative;}
.clear{clear:both;}
I have modified your code little bit and got the result. Could you please try this?
<style>div#frontpage{width:100%; height:50%;border:1px solid red }
div.s1{width:25%; height:50%;float:left; position:relative;border:1px solid blue;clear:both}
.clear{clear:both;}
</style>
<div id="frontpage">
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="clear">
</div>
</div>
</div>
Hope this helps.
--Felix
Id must not start with a number. and maybe you can use the following style
<style>
div#frontpage{width:100%;background-color:#ccc; }
div#a1{width:25%; float:left; position:relative;background-color:red;margin-right:75%;}
div#a2{width:25%; float:left; position:relative;background-color:#ffccea;margin:0 50% 0 -75%}
div#a3{width:25%; float:right; position:relative;background-color:blue;margin:0 25% 0 -50%}
div#a4{width:25%; float:right; position:relative;background-color:yellow;margin:0 0 0 -25%}
.clear{clear:both;}
</style>
I used a margin to the right to push away all the elements and a negetive margin to the left to pull up my desired elements.
div#frontpage{width:100%; position:relative;}
div#a{width:25%; float:left; }
div#b{width:25%; float:left; }
div#c{width:25%; float:right;}
div#d{width:25%; float:right;}
.clear{clear:both;}
<div id="frontpage">
<div id="a"></div>
<div id"b"></div>
<div id="c"></div>
<div id="d"></div>
<div class="clear"></div>
</div>
I am not sure,