For smart Primates & ROBOTS (oh and ALIENS ).

Blogroll

Tuesday, December 03, 2024

How to make center align child div

 How to make center align child div?

 

Suppose you have 2 Div tag. And want the make inner tag center

<div id="d1">

    <div id="d2">

 

     </div>

  </div>

 

Then you will use below 1 line css code as below:

style="margin: 0 auto;" 


<div id="d1">

    <div id="d2" style="margin: 0 auto;" >

 

     </div>

  </div>

Share:

Change section tag's background image at runtime

Change section tag's background image at runtime

 

Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link. </title>
</head>
<body>
Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link.
<section id="sec" class="image_main-banner-class module-container image-full-width-img text-text good-style    fullimg-width-background    "
back-img-url="IMAGE-URL">
Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>
</section>
<script>
try {
    let sec = document.getElementsByClassName("image_main-banner-class module-container image-full-width-img text-text good-style    fullimg-width-background    ");
    let img=sec[0].getAttribute("back-img-url");
    sec[0].style.backgroundImage = "url('"+img+"')";
} catch (err) { console.log(err); }   

let tttt=0
if (window.screen.width < 500) {
tttt=5000;
} else {
tttt=2500;
}
</script>
</body>
</html>

 

 

 

 

Share:

content visibility example

Content Visibility Example

 

 

 <!doctype html>
<html lang="en-au">
<head>
    <meta charset="utf-8">
    <title>Homepage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.story {  content-visibility: auto;  contain-intrinsic-size: auto 1300px;}
body {  font-size: 18px;  background: #fdfbfb;  padding: 0 2rem;  font-family: sans-serif;  box-sizing: border-box;  line-height: 1.4;}
article {  margin: 0 auto;  max-width: 960px;}
article p:first-of-type {  font-size: 1.2rem;}
blockquote {  padding: 2rem;  border: 3px dashed rebeccapurple;}
h1 {  text-align: center;  font-size: 2.75rem;}
a {  color: inherit;  font-weight: bolder;}
ul {  list-style: none;}
nav {  display: flex;  justify-content: space-between;  align-items: center;}
nav ul {  list-style: none;}
figure {  width: 100%;  margin: 0;}
img {  width: 100%;  max-width: 100%;}
ul {  list-style: circle;}
.grid-2 {  display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 1rem;  margin-top: 1rem;  margin-bottom: 1rem;}
figcaption {  font-size: 80%;  background: rebeccapurple;  color: white;  text-align: center;  padding: 1rem;  margin: -1rem auto 1rem;  z-index: 1;  position: relative;  width: 80%;  max-width: 400px;}
</style>
</head>
<body>
<article>
  <h1>The Art of Bug Debugging</h1>

  <figure>
    <img src="https://picsum.photos/960/550" alt="" />
  </figure>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quo
    accusantium corrupti magnam, rem non ad dignissimos alias! Voluptas
    molestias expedita pariatur temporibus adipisci ab quaerat fugiat
    quisquam aliquid ad!
  </p>

  <blockquote>
    Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
    voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
  </blockquote>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius
    consequuntur nulla adipisci ratione velit perspiciatis repellat ipsa
    tempore earum hic corporis, provident reprehenderit maiores commodi qui
    rerum nisi animi quaerat! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Obcaecati voluptatem officia qui blanditiis et
    laudantium, corrupti fuga fugit? Saepe eius sit totam ipsam nesciunt
    debitis amet at quos doloribus porro.
  </p>

  <figure>
    <img src="https://picsum.photos/960/550?random=2" alt="" />
    <figcaption>
      <a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing
      elit. Doloremque, praesentium.
    </figcaption>
  </figure>

  <h2>How to inspect the issue</h2>
  <div class="story">
    <blockquote>
      Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
      voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
    </blockquote>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
      officiis omnis, maiores corporis, commodi temporibus necessitatibus
      minus quae et eum repudiandae sequi voluptates magnam consequuntur
    </p>

    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=1" alt="" />
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=2" alt="" />
      </figure>
    </div>

    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, vitae,
      odit pariatur mollitia facere quo debitis libero optio obcaecati
      exercitationem voluptas, beatae fugiat! Optio voluptates at harum eum
      ad molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Blanditiis, accusamus nulla? Delectus atque rerum vitae nostrum.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
      odio eos dolorum molestias expedita optio cum fugiat illo sequi
      veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
    </p>

    <ul>
      <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
      <li>
        Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
        quae saepe harum, incidunt consequatur libero?
      </li>
      <li>Nemo saepe doloremque enim praesentium provident officiis!</li>
    </ul>

    <p>
      Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
      sunt cupiditate voluptatum dolorem, asperiores provident porro
      excepturi temporibus repellendus iure laboriosam vero
    </p>

    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=4" alt="" />
        <figcaption>
          Ipsum veniam saepe atque maxime incidunt hic reprehenderit
          consectetur vero.
        </figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=5" alt="" />
        <figcaption>
          Facilis nesciunt perferendis porro asperiores provident.
        </figcaption>
      </figure>
    </div>

    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
      aliquid natus numquam rerum omnis obcaecati, explicabo quibusdam
      assumenda dolorem ut iure modi quod voluptates cum eveniet consectetur
      aperiam distinctio nisi.
    </p>
  </div>

  <h2>Don't ask your colleagues for help</h2>
  <div class="story">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
      officiis omnis, maiores corporis, commodi temporibus necessitatibus
      minus quae et eum repudiandae sequi voluptates magnam consequuntur
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, debitis
      consequatur beatae veritatis distinctio molestiae nemo! Velit labore
      et officiis distinctio. Molestiae minima perspiciatis magni mollitia
      dolore. Rem, in consectetur.
    </p>

    <blockquote>
      Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
      voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
    </blockquote>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
      odio eos dolorum molestias expedita optio cum fugiat illo sequi
      veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
    </p>

    <ul>
      <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
      <li>
        Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
        quae saepe harum, incidunt consequatur libero?
      </li>
      <li>Nemo saepe doloremque enim praesentium provident officiis!</li>
    </ul>

    <p>
      Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
      sunt cupiditate voluptatum dolorem, asperiores provident porro
      excepturi temporibus repellendus iure laboriosam vero
    </p>

    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=6" alt="" />
        <figcaption>
          Ipsum veniam saepe atque maxime incidunt hic reprehenderit
          consectetur vero.
        </figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=7" alt="" />
        <figcaption>
          Facilis nesciunt perferendis porro asperiores provident.
        </figcaption>
      </figure>
    </div>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ipsam
      voluptas explicabo optio ullam molestias eaque dicta reiciendis
      similique commodi possimus nostrum fugit id illo et, consequatur omnis
      labore quasi!
    </p>
  </div>

  <h2>Improve your performance by making som coffee</h2>
  <div class="story">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
      officiis omnis, maiores corporis, commodi temporibus necessitatibus
      minus quae et eum repudiandae sequi voluptates magnam consequuntur
    </p>

    <ul>
      <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
      <li>
        Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
        quae saepe harum, incidunt consequatur libero?
      </li>
      <li>Nemo saepe doloremque enim praesentium provident officiis!</li>
    </ul>

    <blockquote>
      Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
      voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
    </blockquote>

    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, vitae,
      odit pariatur mollitia facere quo debitis libero optio obcaecati
      exercitationem voluptas, beatae fugiat! Optio voluptates at harum eum
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
      odio eos dolorum molestias expedita optio cum fugiat illo sequi
      veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
    </p>

    <p>
      Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
      sunt cupiditate voluptatum dolorem, asperiores provident porro
      excepturi temporibus repellendus iure laboriosam vero
    </p>

    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=8" alt="" />
        <figcaption>
          Ipsum veniam saepe atque maxime incidunt hic reprehenderit
          consectetur vero.
        </figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=9" alt="" />
        <figcaption>
          Facilis nesciunt perferendis porro asperiores provident.
        </figcaption>
      </figure>
    </div>

    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
      aliquid natus numquam rerum omnis obcaecati, explicabo quibusdam
      assumenda dolorem ut iure modi quod voluptates cum eveniet consectetur
      aperiam distinctio nisi.
    </p>
  </div>

  <h2>Don't forget to deploy to production on Friday!</h2>
  <div class="story">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
      officiis omnis, maiores corporis, commodi temporibus necessitatibus
      minus quae et eum repudiandae sequi voluptates magnam consequuntur
    </p>
    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=2" alt="" />
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=3" alt="" />
      </figure>
    </div>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
      odio eos dolorum molestias expedita optio cum fugiat illo sequi
      veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!

    </p>

    <blockquote>
      Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
      voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
    </blockquote>

    <p>
      Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
      sunt cupiditate voluptatum dolorem, asperiores provident porro
      excepturi temporibus repellendus iure laboriosam vero
    </p>

    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=4" alt="" />
        <figcaption>
          Ipsum veniam saepe atque maxime incidunt hic reprehenderit
          consectetur vero.
        </figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=5" alt="" />
        <figcaption>
          Facilis nesciunt perferendis porro asperiores provident.
        </figcaption>
      </figure>
    </div>

    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
    </p>
  </div>

</article>
</body>
</html>

 

 

 

 

 

 

Share:

How to make center align child div

 How to make center align child div?   Suppose you have 2 Div tag. And want the make inner tag center <div id="d1">      ...

Ads Inside Post

Powered by Blogger.

Arsip