In this situation what would be the best way to get my products aligned horizontally?
I have created a fiddle: http://jsfiddle.net/bxSE6/
CSS:
.cart-collaterals .cross-sells,
.cart-collaterals .cart_totals,
.cart-collaterals .shipping_calculator {
width: 48%;
float: right;
}
.cart-collaterals .cross-sells {
float: left;
}
.cart-collaterals .cross-sells ul.products li {
width: 48%;
margin-right: 3.8%;
}
.cart-collaterals .cross-sells ul.products li:nth-child(2n) {
margin-right: 0;
}
.cart-collaterals .cross-sells ul.products li.last {
margin-right: 3.8%;
}
HTML:
<div class="cross-sells">
<h2>You may be interested in…</h2>
<ul class="products">
<li class="post-430 product type-product status-publish hentry first instock">
<a href="http://www.drdermacare.co.nz/product/skin-polishing-cloth/">
<div class="img-wrap"><img width="400" height="319" src="http://www.drdermacare.co.nz/wp-content/uploads/2013/05/SkinPolishingCloth_7-400x319.jpg" class="attachment-shop_catalog wp-post-image" alt="SkinPolishingCloth_7" /></div> <!--/.wrap-->
<h3>Skin Polishing Cloth</h3>
<span class="price">NZD <span class="amount">$12.95</span></span>
</a>
Learn MoreBuy Now
</li>
<li class="post-436 product type-product status-publish hentry last instock">
<a href="http://www.drdermacare.co.nz/product/sos-acne-prevention-pen-new/">
<div class="img-wrap"><img width="328" height="400" src="http://www.drdermacare.co.nz/wp-content/uploads/2013/05/SOS-AcnePen-HIGH-RES_7-328x400.jpg" class="attachment-shop_catalog wp-post-image" alt="SOS-AcnePen HIGH RES_7" /></div> <!--/.wrap-->
<h3>SOS Acne Prevention Pen NEW!</h3>
<span class="price">NZD <span class="amount">$24.95</span></span>
</a>
Learn MoreBuy Now
</li>
</ul>
</div>
Try this
.product { display: inline-block; }
I just tried it and it works.
I hope that this is ok?
http://jsfiddle.net/bxSE6/1/
.products li {
list-style-type:none;
text-align:center;
}
I'd suggest:
.prooducts li {
float: left;
}
Related
My aim is to align the heading and the content underneath the date. I tried using float:right and play with margins and padding but it doesn't seem to work
<div class="content container_12">
<ul id="list-content">
<li> <img src="images/img_thumbnail1.png" alt="inferno cape">
<!-- <time datetime="2017-01-01" class="text-content">Game Updates | January 1st, 2017</time> -->
<h2 class="header-content text-content">This is a heading</h2>
<p class="paragraph-content text-content">This is the content</p>
</li>
<li> <img src="images/img_thumbnail2.png" alt="find option">
<!-- <time datetime="2017-01-01" class="paragraph-content text-content">Game Updates | November 17th 2016</time> -->
</li>
<li> <img src="images/img_thumbnail3.png" alt="duel arena">
<!-- <time datetime="2017-01-01" class="paragraph-content text-content">Game Updates | October 17th 2015</time> -->
</li>
</ul>
</div>
This is my css any idea what could've caused this?/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.content {
background-color: #3d4b5b;
}
#list-content li img {
list-style-type: none;
margin-left: -50px;
width: 300px;
height: 200px;
padding-top: 2em;
list-style-type: none;
}
.text-content{
float: right;
margin:0;
}
.header-content {
font-size: 1.5em;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
margin:0;
}
.paragraph-content{
float: right;
}
time{
padding-top:40px;
padding-right: 40px;
margin:0;
}
According to your expected behaviour image, here is the code snippet to implement what you want. Basically, you need to:
wrap heading & time & paragraph into one container (.desc).
float image to left and float .desc to right (I guess this is what you want, but if you want to put image and .desc near each other, you can float .desc to left).
use clear:both on :after pseudo element of li, to give li element height.
* {
margin: 0;
}
.content {
background-color: #3d4b5b;
}
#list-content li {
list-style-type: none;
padding-top: 2em;
}
#list-content li img {
width: 200px;
float: left;
}
#list-content li .desc {
float: right;
}
#list-content li .desc .text-content {
margin-bottom: 5px;
display: block;
}
#list-content li:after {
content: "";
clear: both;
display: block;
}
<div class="content container_12">
<ul id="list-content">
<li>
<img src="https://img1.doubanio.com/lpic/s27653128.jpg" alt="inferno cape">
<div class="desc">
<h2 class="header-content text-content">This is a heading</h2>
<time datetime="2017-01-01" class="text-content">Game Updates | January 1st, 2017</time>
<p class="paragraph-content text-content">This is the content</p>
</div>
</li>
<li>
<img src="https://img3.doubanio.com/lpic/s4554820.jpg" alt="find option">
<div class="desc">
<h2 class="header-content text-content">This is a heading</h2>
<time datetime="2017-01-01" class="text-content">Game Updates | January 1st, 2017</time>
<p class="paragraph-content text-content">This is the content</p>
</div>
</li>
<li>
<img src="https://img3.doubanio.com/lpic/s8958650.jpg" alt="duel arena">
<div class="desc">
<h2 class="header-content text-content">This is a heading</h2>
<time datetime="2017-01-01" class="text-content">Game Updates | January 1st, 2017</time>
<p class="paragraph-content text-content">This is the content</p>
</div>
</li>
</ul>
</div>
A jsfiddle is also made for reference.
Is there a way to have part of the text align left and the other right and stay in one line? I tried a few similar answers on similar questions but the result isn' close to what I'm hoping for
Example: TANYA RUMPFF left and SONGS OF A BIRD RIGHT within the 440px
HTML:
</head>
<div class="dean">
<ul>
<li>TANYA RUMPFF <p align="right">Songs of a bird</p></li>
<li>STANCE OONK Bolwerk</li>
<li>HARALD VLUGT Voor en na het meesterwerk</li>
<li>CORINNE BONSMA Secret garden</li>
<li>STEFAN KASPER Glitterkikkerlikker</li>
</ul>
</div>
<body>
</body>
the CSS:
.dean {width:440px;
background-color:#74f4ff;
}
.dean ul {
padding-left:-12px;
list-style-type: none;
padding-left:0;
padding: 0;
}
.dean ul li {
list-style-position:inside;
}
.dean a:hover {
text-decoration:none;
color:#000;
background-color:#fff;
}
.dean li:hover{
margin-left:-14px;
color:#F90;
list-style-type:disc;
}
.dean ul a {
text-decoration:none;
display:block;
padding-left:20px;
width:400px;
color:#000;
font-family:Arial, Helvetica, sans-serif;
}
you may float first element and use text-align:right;
li a{
display:block;
text-align: right;
}
li b {
float: left;
}
<ul>
<li><b>TANYA RUMPFF</b>Songs of a bird
</li>
</ul>
HTML
<ul>
<div id="textbox">
<li class="alignleft">TANYA RUMPFF</li>
<li class="alignright">Songs of a bird</li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
<li class="alignleft">STANCE OONK</li>
<li class="alignright">Bolwerk</li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
<li class="alignleft">HARALD VLUGT </li>
<li class="alignright">Voor en na het meesterwerk</li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
<li class="alignleft">CORINNE BONSMA</li>
<li class="alignright">Secret garden</li>
</div>
<div style="clear: both;"></div>
</ul>
css
.alignleft {
float: left;
}
.alignright {
float: right;
}
try this. it might work
I have a wordpress recently viewed products widget. I would like the name of the product to show up over the image, when you hover over it.
I have it working elsewhere, the difference is than with this widget, the li do not have a class attached. I know the line I need to fix is:
.product_list_widget ul li .attachment-shop_thumbnail:hover span.product_title {
I just don't know what it should be changed to, to show the span when the image is hovered!
For the first time I got a fiddle to work!
Any ideas?
.recent_view_prod ul.product_list_widget li {
width: 22%;
margin-right: 2%;
}
.recent_view_prod ul.product_list_widget li img {
width: 100%;
float: left;
}
.recent_view_prod ul.product_list_widget li {
display: inline-block;
}
.recent_view_prod span.product-title {
display: none;
}
.product_list_widget ul li .attachment-shop_thumbnail:hover span.product_title {
display: block!important;
z-index: 100;
position: absolute;
font-size: 1vw;
line-height: 1.5em;
text-align: left;
padding-left: .5em!important;
padding-right: .5em!important;
color: white;
background-color: rgba(160, 163, 162, 0.8);
left: 0px;
bottom: 25px;
width: 75%;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
<div class="wpb_widgetised_column wpb_content_element recent_view_prod">
<div class="wpb_wrapper">
<div id="woocommerce_recently_viewed_products-3" class="widget woocommerce widget_recently_viewed_products">
<h3 class="widget-title element-title">Recently Viewed Products</h3>
<ul class="product_list_widget">
<li>
<a href="http://uc.petekirkwood.co.uk/shop/opulent-bloom-card-holder/" title="Opulent Bloom Card Holder">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/TedBaker_CardHolderOpulentBloom_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="TedBaker_CardHolderOpulentBloom_2"> <span class="product-title">Opulent Bloom Card Holder</span>
</a>
<span class="amount">£19.95</span>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/store-ms/" title="Store-M's Nesting Food Boxes">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/StoreMs1-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="StoreMs1"> <span class="product-title">Store-M's Nesting Food Boxes</span>
</a>
<span class="amount">£11.95</span>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-crackers-tin/" title="Happy Jackson Crackers Tin">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/HappyJCrackersTIn-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="HappyJCrackersTIn"> <span class="product-title">Happy Jackson Crackers Tin</span>
</a>
<span class="amount">£6.99</span>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-snack-box-set/" title="Happy Jackson Snack Box Set">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/SnackBoxSetx4_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="SnackBoxSetx4_2"> <span class="product-title">Happy Jackson Snack Box Set</span>
</a>
<span class="amount">£9.99</span>
</li>
</ul>
</div>
</div>
</div>
If you want to use css only solution, you could use adjacent selector:
img.attachment-shop_thumbnail.wp-post-image:hover + span {
display: block;
position:absolute;
}
This targets element immediately after your img element, and you don't need to know the class of your span for that.
Only requirement, you'll need to stick to, is that span has to be immediately after imgin your markup.
Another alternative might be sibling combinator selector:
img.attachment-shop_thumbnail.wp-post-image:hover ~ span {
display: block;
position:absolute;
}
which only require your span element to be after img but not necessary immediately.
Here is the JSFiddle with that.
You should use following selector:
ul.product_list_widget li .attachment-shop_thumbnail:hover span.product-title {
//styles as above
}
Your <ul> tag has class "product_list_widget" so following selector:
.product_list_widget ul li .attachment-shop_thumbnail:hover + span.product-title
wouldn't work, because that would require <ul> to be inside element that has class "product_list_widget".
I have the following code on a wordpress site. I can't change the html, so, only using css #media queries I would like to make the list go from 4 per row on a desktop, down to 2 per row in a viewport of under 767px.
Is that possible?
.recent_view_prod ul.product_list_widget li {
width: 22%;
margin-right: 2%;
}
.recent_view_prod ul.product_list_widget li img {
width: 100%;
float: left;
}
.recent_view_prod ul.product_list_widget li {
display: inline-block;
}
.recent_view_prod span.product-title {
display: none;
}
a:hover > .attachment-shop_thumbnail + span {
display: block;
position:absolute;
}
<div class="wpb_widgetised_column wpb_content_element recent_view_prod">
<div class="wpb_wrapper">
<div id="woocommerce_recently_viewed_products-3" class="widget woocommerce widget_recently_viewed_products">
<h3 class="widget-title element-title">Recently Viewed Products</h3>
<ul class="product_list_widget">
<li>
<a href="http://uc.petekirkwood.co.uk/shop/opulent-bloom-card-holder/" title="Opulent Bloom Card Holder">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/TedBaker_CardHolderOpulentBloom_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="TedBaker_CardHolderOpulentBloom_2"> <span class="product-title">Opulent Bloom Card Holder</span>
</a>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/store-ms/" title="Store-M's Nesting Food Boxes">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/StoreMs1-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="StoreMs1"> <span class="product-title">Store-M's Nesting Food Boxes</span>
</a>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-crackers-tin/" title="Happy Jackson Crackers Tin">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/HappyJCrackersTIn-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="HappyJCrackersTIn"> <span class="product-title">Happy Jackson Crackers Tin</span>
</a>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-snack-box-set/" title="Happy Jackson Snack Box Set">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/SnackBoxSetx4_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="SnackBoxSetx4_2"> <span class="product-title">Happy Jackson Snack Box Set</span>
</a>
</li>
</ul>
</div>
</div>
</div>
Try using float: left in the under 767px and increase the width of <li>.
For example try this code:
.recent_view_prod ul.product_list_widget li {
float: left;
margin-right: 2%;
width: 40%;
}
It's entirely possible to do this. You could have your default code as something like this (mobile first approach) - you may need to play around with the percentage to make sure the two fit side by side:
.recent_view_prod ul.product_list_widget li {
display: block;
float: left;
width: 47%;
margin-right: 2%;
}
.recent_view_prod ul.product_list_widget li img {
width: 100%;
float: left;
}
.recent_view_prod ul.product_list_widget li {
display: inline-block;
}
.recent_view_prod span.product-title {
display: none;
}
a:hover > .attachment-shop_thumbnail + span {
display: block;
position:absolute;
}
and then add a media query at the end (again adjust the min-width to suit you) that brings them back to the four column layout as you currently have it, as the screen widens.
#media (min-width: 25em){
.recent_view_prod ul.product_list_widget li {
width: 22%;
}
}
I am putting horizontal line after each li. What I want to do is hr should be in the same distance to li(s).
This is my css to put hr
.divider {
content: "";
display: block;
height: 1px;
width: 100%;
background: #ccc;
}
This one of the li(s)
<li style="width:210px;padding:10px 0 10px 0" class="memberElement">
<div class="MemberImageHolder" style="float:left">
<a href="#">
<img class="mediumMemberPicture" src="picture.php?action=display&contentType=members&id=20&quality=medium" alt="" />
</a>
</div>
<div class="memberDetails" style="float:right">
Mert Metin<br>
<span id="title">
Administrator<br><br>
</span>
<span id="unit">
<b>University of Ottawa</b>
<br>
</span>
</div>
<span class="divider"></span>
</li>
However, this is how it looks:
Why it looks like that?
Try clearing your floats before the <span class="divider"> element. Since sibling <div> elements are floated, you'll need to clear the float before placing an element below them.
See also: clearfix
Also, CSS content applies to ::before and ::after pseudo-elements. I have removed it as it is not useful here.
.divider {
...
clear: both;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.divider {
display: block;
height: 1px;
width: 100%;
background: #ccc;
clear: both;
}
<ul>
<li style="width:210px;padding:10px 0 10px 0" class="memberElement">
<div class="MemberImageHolder" style="float:left">
<a href="#">
<img class="mediumMemberPicture" src="http://dummyimage.com/100x100/000/fff" alt="">
</a>
</div>
<div class="memberDetails" style="float:right">Mert Metin<br><span id="title">Administrator<br><br></span><span id="unit"><b>University of Ottawa</b><br></span>
</div><span class="divider"></span>
</li>
<li style="width:210px;padding:10px 0 10px 0" class="memberElement">
<div class="MemberImageHolder" style="float:left">
<a href="#">
<img class="mediumMemberPicture" src="http://dummyimage.com/100x100/000/fff" alt="">
</a>
</div>
<div class="memberDetails" style="float:right">Mert Metin<br><span id="title">Administrator<br><br></span><span id="unit"><b>University of Ottawa</b><br></span>
</div><span class="divider"></span>
</li>
</ul>
You might want to add after:
.divider:after {
content: "";
display: block;
height: 1px;
width: 100%;
background: #ccc;
}