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
Related
markup 1: -
below I've created "about section" block. in this block have some mini blocks like:- stats and features.
` <section class="about">
<div class="about__container">
<div class="about__header">
<h2 class="about__title">about title</h2>
<p class="about__sub-title">about sub title </p>
</div>
<div class="about-stats">
<div class="about-stats__item">
<div class="about-stats__title">stats title</div>
<div class="about-stats__sub-title">stats sub title</div>
</div>
</div>
<div class="about-features">
<div class="about-features__item">
<div class="about-features__icon">features icon </div>
<div class="about-features__title">features title </div>
</div>
</div>
</div>
</section>`
Question from about code:-
Should i need to create new css file to each block like about.css, about-stats.css and about-features.css or create one file for this block about.css ?
markup: 2
`<section class="about">
<div class="about__container">
<div class="about__header">
<h2 class="about__title">about title</h2>
<p class="about__sub-title">about sub title </p>
</div>
<div class="about__stats about-stats">
<div class="about-stats__item">
<div class="about-stats__title">stats title</div>
<div class="about-stats__sub-title">stats sub title</div>
</div>
</div>
<div class="about__features about-features">
<div class="about-features__item">
<div class="about-features__icon">features icon </div>
<div class="about-features__title">features title </div>
</div>
</div>
</div>
</section>`
question from above code:-
should we mix child blocks with parent block or markup 1 is good ?
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 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>
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>
At the bottom of this page http://kimcolemanprojects.com/cyanotype-hats.html there is a section with the title "Related Projects".
I can't move this title down from the grid of images above. I think there must be an error in the Html structure, but I can't find it. I have given the element padding and margin but it still will not move.
This is a section of the html code from that page:
<div class="container">
<div id="header">
<h1>KIM COLEMAN PROJECTS</h1>
<div id="nav">
<ul>
<li id="work">
Work
</li>
<li id="about">
About</li></ul>
</div><!--end nav-->
</div><!--end header-->
<div class="main-individual">
<!-- grid of Work -->
<a rel="hats" href="images/hats/velour 2.jpg" class="fancybox" data-title-id="title-5">
<div class="view view-sixth">
<img src="images/hats/small-velour 2.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Velour trilby with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-5" class="hidden">
Velour trilby with Cyanotype ribbon</div>
<a rel="hats" href="images/hats/balaclava.jpg" class="fancybox" data-title-id="title-1">
<div class="view view-sixth">
<img src="images/hats/small-balaclava.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Balaclava with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-1" class="hidden">
Balaclava with Cyanotype ribbon.
</div>
<span class="similar"><h6>Related Projects</h6></span>
<a href="unique.html" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/uniques.jpg" />
<div class="mask-small">
<div class="mask-text">
<h2>Unique</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/glare.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Glare</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/act_natural.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/act-natural-glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Act Natural Glare</h2>
</div>
</div>
</div></a>
</div>
</div>
You could reduce the margin in the .view-small class, e.g. to margin: 20px 2%. Is this what you meant?
Update: Try to set the line-height: 30px; in .similar class. This moves the title down to the small images.