I have this html structure :
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet"/>
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg" />
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
</div>
</div>
But then once loaded in electron, the last div (.metadataContainer2) is moved inside the .previewContainer2 div :\
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet">
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg">
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
<p>ncndnlkcd</p>
</div>
</div>
</div>
Did I do something wrong ?
If you follow the HTML5 rules a div tag can not be self closed. Check more on this site
So modify your original code line#6 to mentioned below.
<div id="whiteSheet"></div>
Related
I am working on html through angularjs.
While I am working on the title of the page, it shows me the part of title
What I mean about it is that the image below shows you.
My code for html is below,
<div class="wrapper">
<div class="page-header section-dark" style="background-image: url('./assets/img/Cover1.jpg')">
<div class="content-center">
<div class="container">
<div class="title-brand">
<div class="angular-logo"><img alt="" src="./assets/img/asia-logo.png"></div>
<h1 class="presentation-title"> ASIA-SMS</h1>
<div class="type">pro</div>
<div class="fog-low">
<img src="./assets/img/sections/fog-low.png" alt="">
</div>
<div class="fog-low right">
<img src="./assets/img/sections/fog-low.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
Is there any way to fix it?
Thanks
I am trying to display 4 similar cards in a grid. I am able to create the columns however the card actions only apply to the first one. (On click, an overlay appears with a 'view details' button and a further description about the product).
On hovering over the other 3 cards, nothing happens. Only the first one works.
<div class="container_grid">
<div class="row">
<div class="col-3">
<div id="product-card" style="margin: 1rem">
<div id="product-front">
<div class="shadow"></div>
<img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">Ksh.500</span>
<span class="product_name">Chocolate Cake</span>
<p>Tasty cake</p>
<div class="product-options">
<strong>Available in</strong>
<span>1kg, 2kg, 3kg, 4kg, 5kg</span>
<button class="btn">Add To Cart</button>
<!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div id="product-card" style="margin: 1rem">
<div id="product-front">
<div class="shadow"></div>
<img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">Ksh.500</span>
<span class="product_name">Chocolate Cake</span>
<p>Tasty cake</p>
<div class="product-options">
<strong>Available in</strong>
<span>1kg, 2kg, 3kg, 4kg, 5kg</span>
<button class="btn">Add To Cart</button>
<!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What could be the problem?
Link to the full JFiddle https://jsfiddle.net/5yoerguh/1/
The problem is you use id for div, need change it to class
or use this selector $('.col-3 > div').hover(function(){}
https://jsfiddle.net/viethien/2nesgtLy/1/
I'm trying to make the entire content inside the <a> tag clickable but only the text is right now.
Here a CodePen: http://codepen.io/francobermudez/pen/dvBpNw?editors=1100
HTML:
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<a class="btn-evento btn-azul" href="#">Detalles</a>
</div>
</div>
</div>
</a>
</div>
</section>
You have a link inside a link (The "Detalles" text) - that cannot work. Delete the inner link (i.e. convert it to a regular text div or p tag) and you'll be able to click the whole container.
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<div>Detalles</div>
</div>
</div>
</div>
</a>
</div>
</section>
http://codepen.io/anon/pen/GWbNjN?editors=1100
https://jsfiddle.net/ax26f966/
HTML:
<section id="btn">
<p>View the Newsletter</p>
<div id="facebook">
<div class="logo"><div class="recto"></div></div>
<div class="top"></div>
<div class="logo verso"></div>
</div>
<div id="shadow"><img src="http://lab.aqro.be/img/shadow.png" alt="shadow" /></div>
</section>
How can I add the text WEBSITE or something else next to the envelope, so when hovered, it also flips.
check here : jsfiddle
remove text-indent: -9999px; from #facebook
and change your html to:
View the Newsletter
<div class="logo">
<div class="recto">
<h2>WEBSITE</h2>
</div>
</div>
<div class="top"></div>
<div class="logo verso">
<h2>WEBSITE</h2>
</div>
</div>
<div id="shadow"><img src="http://lab.aqro.be/img/shadow.png" alt="shadow" /></div>
</section>
I need to make image positioned like on below picture:
I have code:
<footer>
<div class="stopka1">
<div class="container">
....................
</p>
</div>
</div>
</footer>
<div class="container">
<div class="row" style="padding-right:0; padding-left:0;padding-top:30px;padding-bottom:20px;">
<div class="col-md-6">
<div class="row">
<div class="col-xs-6"><img src="phone.png" style="vertical-align:middle !important;"> <span style="font-weight:lighter;color:rgb(10, 55, 110);font-size: 28px; vertical-align:middle !important;">22 213 18 31</span></div>
<div class="col-xs-6"><button class="col-cs-12 przycisk-pytanie" style="font-weight: bold;margin-top:0;">Zadaj pytanie</button></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-xs-2"><img src="women.png" style=""></div>
<div class="col-xs-5">.. price ..</div>
<div class="col-xs-5"><button class="przycisk-rezerwuj-big" style="font-weight: bold;height:35px;">Rezerwuj teraz</button></div>
</div>
</div>
</div>
</div>
Have someone any idea how to get this effect? I have no idea how to force it to cover higher div.
You can do one of two options:
OPTION 1
img {margin-top:-20px;}
OPTION 2
img {position:relative; top:-20px;}