1
\$\begingroup\$

I've created some full-width divs containing images and text to exposure products. It did take a lot of trial and error (I do not have any kind of education).

However, it feels a bit clumsy and i'm starting to wonder if i could have done it any other way that might been easier or even better.

The way I set it up was to try having the text as close to the middle of the screen as possible. To have diversity between the exposures i set every other to be left/right. I also added srcset so it would look good, and load better on smaller devices.

So I'm thinking, could I have done this any other way? This is only for the sake of learning new things.

For example, could I have done the heading better with the lines above and below the H2-tag? Cause when I'm having longer titles, the lines are not centered.

And on some parts of the image the link becomes unclickable (I think it is because of how the div is set up).

.advertheading {
  font-size: 20px;
  line-height: 100px;
  display: inline-block;
  position: relative;
}
.ad-col-lg {
  position: relative;
  width: 100%;
  height: auto;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}
.ad-col-lg img {
  max-width: 100%;
  display: block;
  height: auto;
  border: 0;
}
.ad-col-cont-lg {
  position: absolute;
  top: 25%;
  left: 15%;
  z-index: 0;
  padding: 0;
  padding: 1.2em;
  font-size: .5em;
  text-align: right;
  width: 35%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}
.ad-col-cont-lg p {
  font-family: 'Lato';
  font-size: 17px;
  color: #aaaaaa;
  line-height: 22px;
  padding-bottom: 20px;
}
.ad-col-cont-lg h2:before {
  content: '';
  border-top: 1px solid #383a4f;
  position: absolute;
  width: 30px;
  left: 35%;
  top: 15px;
}
.ad-col-cont-lg h2:after {
  content: '';
  border-bottom: 1px solid #383a4f;
  position: absolute;
  width: 30px;
  left: 35%;
  bottom: 15px;
  padding-bottom: 20px;
}
._s-m-r {
  top: 30%;
  left: 65%;
}
._s-m-l {
  top: 30%;
  left: 0%;
}
.adcol-lg-left {
  top: 25%;
  left: 50%;
  text-align: left;
}
.advert_button,
a.advert_button,
input.advert_button[type="submit"],
input.advert_button[type="button"] {
  background-color: rgba(255, 255, 255, 0) !important;
  color: #383a4f;
  border: 1px solid rgba(56, 58, 79, 1.0);
  padding: 5px 10px;
  text-align: center;
  cursor: pointer;
  font-family: 'PT Sans Narrow';
  font-size: 14px;
  display: block;
  margin: 0 auto;
  -webkit-transition: all 200ms ease 0s;
  -moz-transition: all 200ms ease 0s;
  -ms-transition: all 200ms ease 0s;
  -o-transition: all 200ms ease 0s;
  transition: all 200ms ease 0s;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  -khtml-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 2px;
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a.advert_button:hover,
.advert_button:hover,
input.advert_button[type="submit"]:hover,
input.advert_button[type="button"]:hover {
  background-color: rgba(56, 58, 79, 1) !important;
  border-color: #383a4f;
  color: white !important;
  -webkit-transition: all 200ms ease 0s;
  -moz-transition: all 200ms ease 0s;
  -ms-transition: all 200ms ease 0s;
  -o-transition: all 200ms ease 0s;
  transition: all 200ms ease 0s;
}
a.advert_button:active,
.advert_button:active,
input.advert_button[type="submit"]:active,
input.advert_button[type="button"]:active {
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, .0);
}
.ad-col-btn-lft {
  float: left;
  width: 150px;
}
.ad-col-btn-rght {
  float: right;
  width: 150px;
}
<!-- x2880 CONTAINER -->
<a href="/collections/cufflinks/products/edward-gold">
  <div style="clear: both;">
    <div class="ad-col-lg hideme lazyload" style="padding-top:8px; padding-bottom:0px;">
      <img src="//cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-2880.jpg?10785988739878089751" width="2880" srcset="//cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-406.jpg?10785988739878089751 406w x2, //cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-608.jpg?10785988739878089751  608w x2, //cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-800.jpg?10785988739878089751  800w, //cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-1024.jpg?10785988739878089751  1024w, //cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-1050.jpg?10785988739878089751  1050w, //cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-1200.jpg?10785988739878089751  1200w, //cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-1440.jpg?10785988739878089751  1440w, //cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-1920.jpg?10785988739878089751 1920w, //cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-2880.jpg?10785988739878089751 2880w"
      sizes="(max-width: 2880px) 100vw, 2880px" alt="Cufflink Edward Gold" />
      <div class="ad-col-cont-lg adcol-lg-left _ms-lg">
        <h2 class="advertheading" style="font-weight: normal; color: #383a4f;">Edward Gold</h2>
        <p>From our latest collection of luxurious cufflinks, an absolute eye-catcher ready to complement your outfit.</p>
        <div style="clear: both;" />
        <a href="/collections/cufflinks/products/edward-gold" type="disable" class="advert_button  ad-col-btn-lft">SHOP NOW</a>
      </div>
    </div>
  </div>
</a>

\$\endgroup\$
2
  • \$\begingroup\$ Please try to update your title to reflect what it is your code actually does, not what it is you're hoping to get out of the review. \$\endgroup\$
    – forsvarir
    Commented Jul 26, 2016 at 9:17
  • \$\begingroup\$ Simplicity should be key, as well as semantics - for example, a div element is not self-closing (aka <div /> is technically invalid and should be <div></div>) and I personally believe that using clearing divs should not be necessary. Your position also seems very much visually guessed instead of mathematically consistent. And inline-style (as used for general things and not one-offs) are a definite no-no. \$\endgroup\$
    – somethinghere
    Commented Jul 26, 2016 at 10:05

1 Answer 1

Reset to default
1
\$\begingroup\$

I think the missing key is simplicity. I do not know how large your site is and what your needs are, but this individual element could be a lot simpeler. You make use of inline styles, but you seem to use them for the wrong reasons. An inline style is useful if you need to have a one off, but not for repeated element stylings (I would use it if my CSS defines how a background should behave but not how it looks, then an inline style can be used to define the background-image). I have rewritten your code a bit, check the below with annotations on the though process and hopefully it helps you see what kind of things might be good to consider:

.product {
  width: 100%;
  position: relative;
  overflow: hidden;
}
/* We will use the image to scale the box. This is not ideal as
/* we gave it a min-height which means the image will stretch
/* at lower sizes. It is in no way an issue that can't be
/* solved, but for the purpose of simplicity this works. */
.product-image {
  width: 100%;
  max-width: 100%;
  min-height: 350px;
  height: auto;
}
.product-info {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  max-width: 300px;
  padding: 20px;
  box-sizing: border-box;
  /* You could use prefixes here, but again, they clutter
  /* and most browsers will implement them correctly these days. */
  transform: translateY(-50%);
  font-family: Helvetica, Arial, sans-serif;
}
.product-info h2 {
  width: auto;
  display: inline-block;
  font-weight: bold;
  padding: 20px 0;
  margin: 0 0 10px 0;
  /* This is a biggie - without adding any elements I have managed
  /* to create both lines, top and bottom, using only CSS.
  /* I have URL encoded an SVG square pixel that I can
  /* stretch any way I want using background-size.
  /* (URL encoded as in replacing '<' with '%3C' - this makes it 
  /* work in IE versions that support SVG.)
  /* Browsers that don't support multiple backgrounds won't see the 
  /* lines, which is not the end of the world as it does not
  /* break anything outright. This is called graceful degradation. */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' preserveAspectRatio='none' %3E%3Crect fill='%23000000' x='0' y='0' width='1' height='1'/%3E%3C/svg%3E"), url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' preserveAspectRatio='none' %3E%3Crect fill='%23000000' x='0' y='0' width='1' height='1'/%3E%3C/svg%3E");
  background-size: 25% 2px, 25% 2px;
  background-position: 50% 0, 50% 100%;
  background-repeat: no-repeat;
}
/* The after is to make sure any elements clears away from your h2.
/* Again, this is done is only CSS without adding elements to your
/* site's structure. */
.product-info h2:after { content: ''; clear: both; width: 100%; }
/* This will make the positioning of your content change every even
/* numbered child. Older browser that lack support for :nth-child
/* will simply not do this. Again, graceful degradation. */
/* To be honest, it might be better to actually do this with a class
/* as you cannot guarantee the text won't be over the image. */
.product:nth-child(even) .product-info {
  left: auto;
  right: 50%;
  padding: 20px;
  text-align: right;
}
.button {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #000;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}
<!-- The srcset is a good idea, and it would work to keep it, 
but it clutters the code quite a lot. It is important that 
your structure makes sense without the styling, 
as this is how visually impaired people will see (and screenread) 
the page. Do not adjust the structure to layout directly, 
as that way you are locked into the layout structure. -->

<div class="product">
  <img src="//cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-2880.jpg?10785988739878089751" class="product-image" />
  <div class="product-info">
    <h2>Edward Gold</h2>
    <p>From our latest collection of luxurious cufflinks, an absolute eye-catcher ready to complement your outfit.</p>
    <p><a href="/collections/cufflinks/products/edward-gold" class="button">Shop Now</a></p>
  </div>
</div>

<div class="product">
  <img src="//cdn.shopify.com/s/files/1/0786/5107/t/18/assets/mainad2-image-2880.jpg?10785988739878089751" class="product-image" />
  <div class="product-info">
    <h2>Edward Gold</h2>
    <p>From our latest collection of luxurious cufflinks, an absolute eye-catcher ready to complement your outfit.</p>
    <p><a href="/collections/cufflinks/products/edward-gold" class="button">Shop Now</a></p>
  </div>
</div>

So the main takeaway is twofold: simplicity and structure. Structure wise, you should separate things out. Keep your styling very clearly away from your structure, so your page makes sense without styling. Then use styling to enhance your page.

I hope this helps, ping me any questions if something is unclear.

\$\endgroup\$
5
  • \$\begingroup\$ Wow. Thanks for the fast reply and the deep explanation of everything. This is highly appreciated! You sure made it look a lot more simple, and i will look over this a couple of times. As said, i do not really have any education. I've been self-taught, however i would want to learn more and this made me see things a lot differently. Again - Thanks a lot! \$\endgroup\$
    – Robin
    Commented Jul 26, 2016 at 17:42
  • \$\begingroup\$ Glad it helps (: Good luck! \$\endgroup\$
    – somethinghere
    Commented Jul 26, 2016 at 17:43
  • \$\begingroup\$ Hi @somethinghere. You helped me earlier with this fine piece which i'm going put to practice right now. However, when i'm applying my own buttons, the borders get blurry. Have you experienced this yourself? Best regards, Robbin. \$\endgroup\$
    – Robin
    Commented Nov 15, 2016 at 14:12
  • \$\begingroup\$ It happens when the pixels don't align perfectly - this is not a line, like a 1px border, this is a graphic placed somewhere. It happens but you will have to play around in order to control it :) \$\endgroup\$
    – somethinghere
    Commented Nov 15, 2016 at 14:23
  • 1
    \$\begingroup\$ Again, thank you for the support. I went through it all and found ut that it was the translateY who messed it up in both Safari, Chrome & Firefox. Changed it to 50.1 and it looked good. However, as soon as something changes (ie. a line break, the pixel gets transformed again). Guess it has something to do with the browsers rendering? Ah well, i hope browsers some day is one step ahead, lol. Again major thanks. \$\endgroup\$
    – Robin
    Commented Nov 17, 2016 at 17:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.