Can I float:right Image1 one on top of Image2 if image1 and image2 are in the same container? - css-float

Here is my problem http://jsfiddle.net/hkebxend/ I want to move that woman to the top right corner of section#historia and on top with that flowers image with float:right (NOT WITH position:absolute BUT with float:right).
HTML:
<section id="historia">
<div class="pasek-one">
<span class="data-one">1940-1950</span>
</div>
<div class="zdjecie-one"></div>
<p class="tekst-one">
Rodzina Tatomirów przeprowadza się z Lwowa do Krakowa pod koniec I Wojny Światowej. Na początku lat 20. Tomasz Tatomir –
pierwszy przedstawiciel fryzjerskiego rodu Tatomirów – rozpoczyna praktykę na Rynku Głównym w Krakowie. To tam zyskuje przydomek
„Roman”. W 1927 roku Tomasz „Roman” Tatomir na krakowskim Placu Inwalidów otwiera swój pierwszy salon (na zdjęciu). Wkrótce
wybucha jednak II Wojna Światowa. „Roman” jest zmuszony do opuszczenia salonu. Zaraz po wojnie otwiera zakład fryzjerski na
nowo – tym razem w swoim domu rodzinnym na Bronowicach.
</p>
</section>

I changed css a bit of div.pasek-one and added properties float:left; width:70% and i think you want exactly the same result
sorry. understood it a bit wrong. here is the fiddle with corrected css http://jsfiddle.net/gopal280377/tpmchbd5/

Just changed the structure of the divs - moved the
<div class="zdjecie-one"></div>
inside the pasek-one. See the code below with no CSS changes
<section id="historia">
<div class="pasek-one">
<span class="data-one">1940-1950</span>
<div class="zdjecie-one"></div>
</div>
<p class="tekst-one">
Rodzina Tatomirów przeprowadza się z Lwowa do Krakowa pod koniec I Wojny Światowej. Na początku lat 20. Tomasz Tatomir –
pierwszy przedstawiciel fryzjerskiego rodu Tatomirów – rozpoczyna praktykę na Rynku Głównym w Krakowie. To tam zyskuje przydomek
„Roman”. W 1927 roku Tomasz „Roman” Tatomir na krakowskim Placu Inwalidów otwiera swój pierwszy salon (na zdjęciu). Wkrótce
wybucha jednak II Wojna Światowa. „Roman” jest zmuszony do opuszczenia salonu. Zaraz po wojnie otwiera zakład fryzjerski na
nowo – tym razem w swoim domu rodzinnym na Bronowicach.
</p>
</section>

Related

Select the correct element

I'm trying to setup with GTM a event when someone add this product to 'my favourite' section. I get all the elements to setup the event except the 'product name'.
The url is this -> https://www.silversanz.com/categoria/1/subcategoria/10/productos
Here are some code:
<article class="product cmp-product " data-product-id="2166" data-gtm-name="Funda Shockwave anti-impactos iPad 9.7\" Silver HT" data-gtm-id="111943640199" data-gtm-price="24.1879" data-gtm-brand="Silver HT" data-gtm-category="Apple-ipad" data-gtm-variant="" data-gtm-list="Fundas tablets" data-gtm-position="1" id="cmp-product_1" data-state="rendered">
<a href="/producto/2166" class="product__content-link" title="Funda Shockwave anti-impactos iPad 9.7" Silver HT">
<section class="product__content">
<div class="img-wrapper">
<img alt="Funda Shockwave anti-impactos iPad 9.7" Silver HT | Silver Sanz" src="//s3-eu-west-1.amazonaws.com/silversanz.com/product_images/images/product_images_2533_grid.png?1548836431" class="">
</div>
<h4 class="title">Funda Shockwave anti-impactos iPad 9.7" Silver HT</h4>
</section>
</a>
<article class="product cmp-product " data-product-id="519" data-gtm-name="Funda Wave azul marino para iPad Air 1,2, y iPad Pro 9,7\"" data-gtm-id="111933840199" data-gtm-price="19.9892" data-gtm-brand="Silver HT" data-gtm-category="Apple-ipad" data-gtm-variant="" data-gtm-list="Fundas tablets" data-gtm-position="2" id="cmp-product_2" data-state="rendered">
<a href="/producto/519" class="product__content-link" title="Funda Wave azul marino para iPad Air 1,2, y iPad Pro 9,7"">
<section class="product__content">
<div class="img-wrapper">
<img alt="Funda iPad Air 1,2, iPad Pro 9,7" src="//s3-eu-west-1.amazonaws.com/silversanz.com/product_images/images/product_images_1378_grid.png?1528287248" class="">
</div>
<h4 class="title">Funda Wave azul marino para iPad Air 1,2, y iPad Pro 9,7"</h4>
</section>
</a>
With tihis code, I tried in GTM to make an Element Dom Variable to get the title with this element selector -> article#cmp-product_1.product.cmp-product
But my problem is that the number, in this case the 1, is depending of the product's position in the grid, therefore, with the 1, the variable only get the name of first grid product.
How can I get the product name correctly?
Thanks in advance!
If you would like your CSS to select any element which has an id which starts with
cmp-product_
then the selector is:
[id^="cmp-product_"]
In this case ^= means any id beginning with these characters.
Further Reading on Attribute Selectors:
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

sidebar layout in ember-paper not working

I'm trying to use ember-paper in my ember app but i can't float content to the right.
Example
What I want to achieve (from ember-paper official website)
My code
application.hbs
{{#paper-nav-container}}
{{#paper-sidenav class="md-sidenav-left site-sidenav md-whiteframe-z2" locked-open="gt-sm"}}
{{#paper-toolbar}}
<div class="md-toolbar-tools">
<div class="logo">
<strong>Paper</strong>
</div>
</div>
{{/paper-toolbar}}
{{#paper-content}}
{{#paper-list}}
{{#paper-item action=(transition-to "employees.list")}}Introduction{{/paper-item}}
{{#paper-item action=(transition-to "index")}}Another link{{/paper-item}}
{{/paper-list}}
{{/paper-content}}
{{/paper-sidenav}}
<div layout="column" tabindex="-1" role="main" flex>
{{#paper-toolbar}}
<div class="md-toolbar-tools">
<span class="md-breadcrumb-page">Title</span>
</div>
{{/paper-toolbar}}
{{#paper-content class="md-padding"}}
{{outlet}}
{{/paper-content}}
</div>
{{/paper-nav-container}}
How can I float sidebar to the left? I have no errors in console, and it was a straight copy-paste from official guide
The example is using the display:flex probably thats not supported in your browser http://caniuse.com/#search=flex ? provided you copy pasted the entire CSS required.

How do I mimic images swiping within an iPad frame?

We have a series of slides. Each slide contains an image. We want to have a static iPad frame on each slide and have slide transitions make it appear as if the images are swiping within that frame only.
I'm using Swiper to mimic the touch slider effect.
I've created a codepen illustrating what we're after here.
The basic HTML looks like this:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://unsplash.it/200/302/?random" />
<p>Harry Potter is a series of fantasy literature written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School
of Witchcraft and Wizardry.</p>
</div>
<div class="swiper-slide">
<img src="https://unsplash.it/200/301/?random" />
<p>Jason Bourne is a fictional character and the protagonist of a series of novels by Robert Ludlum and subsequent film adaptations. He first appeared in the novel The Bourne Identity (1980), which was adapted for television in 1988.</p>
</div>
<div class="swiper-slide">
<img src="https://unsplash.it/200/304/?random" />
<p>Chiang Mai (/ˈtʃjɑːŋˈmaɪ/, from Thai: เชียงใหม่ [tɕʰiəŋ màj] ( listen), Lanna: ᨩ᩠ᨿᨦᩉ᩠ᨾᩲ᩵ [t͡ɕīaŋ.màj] ( listen)) sometimes written as "Chiengmai" or "Chiangmai", is the largest and most culturally significant city in Northern Thailand.</p>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Maybe there is a best way to do this within Swiper, and maybe it's just a clever CSS solution? I'm not sure.
Ideas? Suggestions? Solutions? :)
So I finally worked out a solution.
If instead of 1 slider, I use 2 and sync them. I can constrain the size of the 1 slider to be exact size I need for the iPad.
My forked codepen solution here.
<div class="ipad-slider">
<div class="swiper-container image-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://unsplash.it/300/400/?random" />
</div>
<div class="swiper-slide">
<img src="https://unsplash.it/300/420/?random" />
</div>
<div class="swiper-slide">
<img src="https://unsplash.it/300/410/?random" />
</div>
</div>
<img class="ipad-frame" src="https://dl.dropboxusercontent.com/u/14057353/ipad_isolated-cropped.png" />
</div>
<div class="swiper-container quote-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>Harry Potter is a series of fantasy literature written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School
of Witchcraft and Wizardry.</p>
</div>
<div class="swiper-slide">
<p>Jason Bourne is a fictional character and the protagonist of a series of novels by Robert Ludlum and subsequent film adaptations. He first appeared in the novel The Bourne Identity (1980), which was adapted for television in 1988.</p>
</div>
<div class="swiper-slide">
<p>Chiang Mai (/ˈtʃjɑːŋˈmaɪ/, from Thai: เชียงใหม่ [tɕʰiəŋ màj] ( listen), Lanna: ᨩ᩠ᨿᨦᩉ᩠ᨾᩲ᩵ [t͡ɕīaŋ.màj] ( listen)) sometimes written as "Chiengmai" or "Chiangmai", is the largest and most culturally significant city in Northern Thailand.</p>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<hr />
Making sure I sync the sliders with the following JS..
$(document).ready(function() {
var quoteSwiper = new Swiper('.quote-slider');
var imageSwiper = new Swiper('.image-slider', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
control: quoteSwiper
});
});

float property does not work

I have a problem with float. The text does not flow the picture from the right side except for the first line. When I create a new html document and insert a picture with description everything works fine. I don't know where the problem is.
Here's the html:
<div id="container">
<div id="logo">
<h1>Best movies of all time!</h1>
</div>
<div id="nav">
Shawshank Redemption <br />
Forrest Gump <br />
Seven <br />
The Lord of the Rings <br />
American Gangster <br />
</div>
<div id="content">
<h2>Shawshank Redemption</h2>
<p id="shawshank_description">
<img id="shwashank" src="img/shawshank.jpg" width="200" height="150" />
The Shawshank Redemption is a 1994 American drama film written and directed by Frank Darabont, and starring Tim Robbins and Morgan Freeman. Adapted from the Stephen King novella Rita Hayworth and Shawshank Redemption, the film tells the story of Andy Dufresne, a banker who is sentenced to life in Shawshank State Penitentiary for the murder of his wife and her lover, despite his claims of innocence. During his time at the prison, he befriends a fellow inmate, Ellis Boyd "Red" Redding, and finds himself protected by the guards after the warden begins using him in his money-laundering operation. Although it was a box office disappointment, the film received multiple award nominations (including seven Oscar nominations) and outstanding reviews from critics for its acting, story, and realism. It has since been successful on cable television, VHS, DVD, and Blu-ray. It was included in the American Film Institute's 100 Years...100 Movies 10th Anniversary Edition.[4] It is considered to be one of the greatest films of all time. The Shawshank Redemption is a 1994 American drama film written and directed by Frank Darabont, and starring Tim Robbins and Morgan Freeman. Adapted from the Stephen King novella Rita Hayworth and Shawshank Redemption, the film tells the story of Andy Dufresne, a banker who is sentenced to life in Shawshank State Penitentiary for the murder of his wife and her lover, despite his claims of innocence.
</p>
</div>
<div id="ad">
<img src="img/banner.gif" />
</div>
<div id="footer">
Best movies of all time! © All rights reserved
</div>
</div>
Here's the css:
#shawshank {
float: left;
}
The issue here is that your float: left styling is not being applied... Try this:
HTML:
<p id="shawshank_description">
<div class="shank_image">
<img src="img/shawshank.jpg" width="200" height="150" />
</div>
It is considered to be one of the greatest films of all time...
</p>
CSS:
.shank_image img{
float: left;
}
https://jsfiddle.net/qbbbm514/
In your CSS file, you need #shawshank {...} instead of just shawshank{...}, since you are targeting an element by its id. Also I noticed in your code the id property on your image is "shwashank" instead of "shawshank", so that could be an issue too.
Also, your floats may not work with your current nesting of the image inside the paragraph tag, since they are supposed to float alongside each other. Try:
<img id="shawshank" src="img/shawshank.jpg" width="200" height="150" />
<p id="shawshank_description">...</p>
And in your CSS file add:
#shawshank_description {
float: right;
}

Using regular expressions in a css selector

Im scraping a page using Kimono and Ive come across some data that is structured as below.
The issue is that all of the data is stored in an element called <div class="agents-stats-seperator"> some entries only have one of these elements, some have up to 4.
There is different data in each of them that im trying to scrape and the only structured differential between them is the Text, either :
Residential for sale:
Residential for rent:
Commercial for sale:
Commercial for rent:
Im Kimono you have the option to define what you want to select either by css path or regex.
At the moment im defining with the below :
div > div > div > div.agents-stats-seperator > div
/^()(.*?)()$/
Which is causing an issue as it picking up all the <div class="agents-stats-seperator"> elements, what ive been stuck on is how to set the regular expression to target jsut the elements that contain the text Residential for sale:
Ive tried using :
div > div > div > div.agents-stats-seperator > div [str="Residential to rent:"]
/^()(.*?)()$/
But to no avail, any ideas ?
For reference here is a snippet of the html
<div class="clearfix top agents-stats bg-muted">
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Residential for sale:
<strong>14</strong>
</div>
<div class="agents-stats-c">
Avg. asking price:
<strong class="price">£447,143</strong>
</div>
<div class="agents-stats-r">
Avg. sale listing age:
<span>18 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Residential to rent:
<strong>9</strong>
</div>
<div class="agents-stats-c">
Avg. asking rent:
<strong class="price">£1,660 pcm</strong>
</div>
<div class="agents-stats-r">
Avg. rental listing age:
<span>3 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Commercial for sale
<strong>1</strong>
</div>
<div class="agents-stats-c">
Avg. asking price:
<strong class="price">£700,000</strong>
</div>
<div class="agents-stats-r">
Avg. sale listing age:
<span>11 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Commercial to let
<strong>1</strong>
</div>
<div class="agents-stats-c">
Avg. asking rent:
<strong class="price">£22,516 pa</strong>
</div>
<div class="agents-stats-r">
Avg. rental listing age:
<span>56 weeks</span>
</div>
</div>
</div>
Try something like :
div:nth-child(1).agents-stats-seperator > div:nth-child(1).agents-stats-l > strong > a

Resources