Блог

Это моя первая попытка создания веб-страницы.

Я пытаюсь сделать свой текст отзывчивым вместе с изображениями, чтобы они не перекрывались ненадлежащим образом и / или чтобы текст оставался на месте поверх определенных изображений.

Я начал с применения относительных позиций к контейнерам и абсолютных позиций к соответствующим дочерним элементам.

Я использовал px, em, vh / vw, %, попробовал calc() и попробовал немного изменить свой css.

Хотя мне немного повезло, я чувствую, что чего-то не хватает — потому что, когда я увеличиваю ширину даже на 10-20 пикселей, все становится довольно запутанным.

Теперь я знаю, что могу использовать множество медиа-запросов. Но размещение медиа-запроса каждые 5 пикселей кажется не только неэлегантным … но и совершенно неправильным.

Некоторые изображения включены ниже:

      https://ibb.co/DYvJq3L
     https://ibb.co/GJ3Rz1j
     https://ibb.co/mtd66XF
     https://ibb.co/kXDkb6f
     https://ibb.co/nr41vDk
  

Спасибо за любую помощь и извините, что я многословен!

Всего наилучшего, Малик

Редактировать:

     <header>
        <div class="container">
            <h1 id="title">Frank Lloyd Wright</h1>
            <p class="sub-title">american organic architect</p>

            <div class="intro-block">
                <img src="images/flw-fallingwater-exterior-blkovr-90-700-459.png" alt="fallingwater house" class="mobile-falling-water">
                <img src="images/flw-fallingwater-exterior-blkovr-90-450-295.png" alt="fallingwater house" class="tablet-falling-water">
                <img src="images/flw-fallingwater-exterior-blkovr-90-700-459.png" alt="fallingwater house" class="desktop-falling-water">
            </div>
            <div class="quote">
                <div>
                <p class="quote-art-craft">“As we work along our various ways, there takes shape within us, in some sort, an ideal — something we are to become — some work to be done. This, I think, is denied to very few, and we begin really to live only when the thrill of this ideality moves us in what we will to accomplish.”</p>
                </div>
                <div>
                <p class="credit-art-craft">The Art and Craft of the Machine<br>by Frank Lloyd Wright</p>
                </div>
                <div>
                <p class="rights-art-craft">Copyright 1901 | Chicago Architectural Club</p>
                </div>
                <div>
                <cite class="cite-art-craft">https://www.jstor.org/stable/pdf/25505640.pdf</cite>
                </div>
            </div>
        </div>
    </header>

    <main>
        <figure id="img-div">
            <img src="images/flw-black-and-white-1200-1521.png" alt="frank lloyd wright" id="image">

                <figcaption id="img-caption">
                    Birth:<br>
                    June 8, 1867 in Richland Center,<br>
                    Wisconsin, U.S.<br><br>
                    Death:<br>
                    April 9, 1959 in Phoenix,<br>
                    Arizona, U.S.
                </figcaption>
        </figure>

        <div id="tribute-info">
            <div class="tribute-img">
                <div class="mobile-tribute-img">
                    <img src="images/flw-taliesin-interior-blkovr-90-375-563-hf1.png" alt="taliesin interior first half" class="taliesin-first-half">
                    <img src="images/flw-taliesin-interior-blkovr-90-375-563-hf2.png" alt="taliesin interior second half" class="taliesin-second-half">
                </div>
                <img src="images/flw-taliesin-interior-blkovr-90-728-546.png" alt="taliesin interior" class="tablet-taliesin-interior">

                <img src="images/flw-taliesin-interior-blkovr-90-2242-1682.png" alt="taliesin interior" class="desktop-taliesin-interior">
            </div>
            <section class="section-info">
                <ul class="info-one">
                    <li>1885 to 1886 - Attended the University of Wisconsin at Madison and took engineering courses, as there was no architectural instruction available.</li>
                    <li>1887 - Moved to Chicago and began architectural detailing with J.L. Silsbee. Later, he worked in Dankmar Adler and Louis Sullivan, an important architectural firm; and in a short time, became chief assistant to Sullivan.</li>
                    <li>1889 - In June, Catherine Tobin and he were married.</li>
                    <li>1893 - Left Sullivan to open his own architectural practice. He would then have six children and his firm would grow by 10 assistants.</li>
                    <li>1900 - Wright was the chief practitioner of the now mature Prairie architectural style. He was 33 years old and mostly self-taught. He alone built around 50 Prairie houses from 1900 to 1910.</li>
                    <li>1901 - The Art and Craft of the Machine was first printed. As Wright continuously lectured, he would produce this — his most famous speech.</li>
                    <li>1894 to 1902 - During these years, his works would be featured in local exhibitions. His most impactful works were for business and church.</li>
                    <li>1902 - Wright produced the first masterwork of the Prairie school — the W.W. Willitses House in Highland Park, Illinois, U.S.</li>
                    <li>1904 - The Larkin Company’s administrative block was erected. It was then demolished in 1950.</li>
                    <li>1905 - He traveled to Japan.</li>
                </ul>

                <ul class="info-two">
                    <li>1908 - The Unitarian Church of Oak Park, Illinois was finished. It was dedicated on September 26, 1909. In 1971, it was registered as a national historic landmark.</li>
                    <li>1909 - Wright began work on Taliesin (Welsh for ’Shining Brow’) — his own house and studio near Spring Green, Wisconsin, U.S.</li>
                    <li>1912 - He designed his first skyscraper. It was a slender concrete slab. While prophetic it was ultimately unbuilt.</li>
                    <li>1915 to 1922 - One of Wright’s most significant works — The Imperial Hotel — boasted unprecedented construction, lavish comforts and remarkable spaces. It was dismantled in 1967.</li>
                    <li>1922 - Catherine and Wright divorced.</li>
                    <li>1928 - Wright married Olgivanna Hinzenberg. Also around this time, the Taliesin was seized by the bank.</li>
                    <li>1929 - The stock market crash halted all activity in architecture. Wright spent these years lecturing at Chicago, New York City and Princeton, New Jersey.</li>
                    <li>1935 to 1937 - Fallingwater was designed and completed. Built near Mill Run, Pennsylvania, it is possibly Wright’s most admired work.</li>
                    <li>1956 to 1959 - The Guggenheim was built to house a permanent collection of abstract art.</li>
                    <li>1960 to 1962 - After Wright’s death, the Marin County Civic Center would rise under the watch of his protégé — Aaron Green.</li>
                </ul>
            </section>
        </div>
    </main>

    <div class="link-div">
        <a href="https://franklloydwright.org" target="_blank" id="tribute-link">Learn More</a>
    </div>

    <div class="supporting-text">
        <p class="work-info">
            Wright designed near 800 buildings.<br>
            380 were actually built.<br>
            A number of them still stand today.</p>
        <p class="img-info">
            Images: Top | Fallingwater House (Exterior),<br>
            Right | Frank Lloyd Wright, Bottom | Taliesin House (Interior)<br>
        </p>
        <div class="credits">
            <p class="info-cite-kaufmann">Info: Edgar Kaufmann/Encyclopaedia Brittanica/Contributors</p>
            <cite class="cite-kaufman">(https://www.britannica.com/biography/Frank-Lloyd-Wright)</cite>
            <p class="info-cite-flw-foundation">amp; Frank Lloyd Wright Foundation</p>
            <cite class="cite-flworg">(https://franklloydwright.org)</cite>
        </div>
    </div>
</body>
</html>```


    body {
        position: relative;
        margin: 0;
    }

    p, li, cite, figcaption {
        font-family: 'Spectral';
    }

    li {
        margin-bottom: 1em;
    }

    header {
        position: relative;
    }

    .container {
        position: relative;
        margin-bottom: 50px;
    }

    .intro-block {
        position: relative;
        top: 0vw;
        z-index: -1;
    }

    .mobile-falling-water {
        position: relative;
        top: 0vh;
        max-width: 100%;
        width: 100%;
        height: auto;
        z-index: 5;
    }

    h1 {
        font-family: 'Montserrat', sans-serif;
        font-size: 5vw;
        font-weight: 700;
        color: #fff;
        position: absolute;
        top: 0vh;
        left: 6.8vw;
        z-index: 1;
    }

    .sub-title {
        font-family: 'Montserrat', sans-serif;
        font-size: 3vw;
        font-weight: 100;
        font-style: italic;
        color: #fff;
        position: absolute;
        top: 4vh;
        left: 6.8vw;
        z-index: 1;
    }

    .quote {
        color: #fff;
        position: absolute;
        top: 14vh;
        left: 6.8vw;
        right: 6.8vw;
        display: flex;
        flex-direction: column;
        z-index: 1;
    }

    .quote-art-craft {
        font-size: calc(1.3vh   1vmin);
        line-height: 2.3vh;
        font-weight: lighter;
        margin-bottom: .5vh;
    }

    .credit-art-craft {
        font-size: 2.5vw;
        line-height: 1.7vh;
        font-weight: lighter;
        margin: .5vh auto .5vh;
    }

    .rights-art-craft {
        font-size: 2.5vw;
        line-height: 1.7vh;
        font-weight: lighter;
        margin: .5vh auto -.5vh;
    }

    .cite-art-craft {
        font-size: 2.5vw;
        line-height: 1.7vh;
        font-weight: lighter;
        margin: -.5vh auto .5vh;
    }

    #img-div {
        position: relative;
        margin-left: 0;
        margin-right: 0;
    }

    #image {
        position: absolute; 
        max-width: 100%;
        height: auto;
    }

    #img-caption {
        text-align: center;
        line-height: 1.3;
        font-size: 2.5vh;
        position: absolute;
        top: 75.5vh;
        margin: 1em 4em 1.75em 4.5em;
    }

    .tribute-info {
        position: relative;
    }

    .taliesin-first-half {
        position: absolute;
        top: 154vh;
        max-width: 100%;
        max-height: auto;
    }

    .taliesin-second-half {
        position: absolute;
        top: 239.3vh;
        max-width: 100%;
        max-height: auto;
    }

    .info-one {
        color: #fff;
        line-height: 1.3;
        font-size: .7em;
        position: absolute;
        top: 152.5vh;
        width: 75vw;
        height: auto;
        margin: 3em 1em 3em auto;
        overflow: hidden;
    }

    .info-two {
        color: #fff;
        line-height: 1.3;
        font-size: .7em;
        position: absolute;
        top: 240vh;
        width: 75vw;
        height: auto;
        margin: 3em 1em 3em auto;
        overflow: hidden;
    }

    #tribute-link {
        background-color: #BF2B4D;
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-family: 'Montserrat';
        font-size: 1.1em;
        border-radius: 10px;
        display: block;
        width: calc(100% - 65vw);
        position: absolute;
        top: 340vh;
        padding: .5em;
        margin-left: 7em;
        margin-right: 7em;
    }

    .supporting-text {
        background-color: #242424;
        color: #fff;
        text-align: center;
        font-size: .6em;
        position: absolute;
        top: 2290px;
        max-width: 100%;
        min-width: 375px;
        height: auto; 
    }
  

Удалено: ненужное позиционирование из css, чтобы элементы могли правильно перемещаться.

Добавлено: свойство background, благодаря которому списки соответствующим образом совпадают с изображениями нижнего слоя.

     <section id="tribute-info">
            <ul class="info-one">
                <li>1885 to 1886 - Attended the University of Wisconsin at Madison and took engineering courses, as there was no architectural instruction available.</li>
                <li>1887 - Moved to Chicago and began architectural detailing with J.L. Silsbee. Later, he worked in Dankmar Adler and Louis Sullivan, an important architectural firm; and in a short time, became chief assistant to Sullivan.</li>
                <li>1889 - In June, Catherine Tobin and he were married.</li>
                <li>1893 - Left Sullivan to open his own architectural practice. He would then have six children and his firm would grow by 10 assistants.</li>
                <li>1900 - Wright was the chief practitioner of the now mature Prairie architectural style. He was 33 years old and mostly self-taught. He alone built around 50 Prairie houses from 1900 to 1910.</li>
                <li>1901 - The Art and Craft of the Machine was first printed. As Wright continuously lectured, he would produce this — his most famous speech.</li>
                <li>1894 to 1902 - During these years, his works would be featured in local exhibitions. His most impactful works were for business and church.</li>
                <li>1902 - Wright produced the first masterwork of the Prairie school — the W.W. Willitses House in Highland Park, Illinois, U.S.</li>
                <li>1904 - The Larkin Company’s administrative block was erected. It was then demolished in 1950.</li>
                <li>1905 - He traveled to Japan.</li>
            </ul>

            <ul class="info-two">
                <li>1908 - The Unitarian Church of Oak Park, Illinois was finished. It was dedicated on September 26, 1909. In 1971, it was registered as a national historic landmark.</li>
                <li>1909 - Wright began work on Taliesin (Welsh for ’Shining Brow’) — his own house and studio near Spring Green, Wisconsin, U.S.</li>
                <li>1912 - He designed his first skyscraper. It was a slender concrete slab. While prophetic it was ultimately unbuilt.</li>
                <li>1915 to 1922 - One of Wright’s most significant works — The Imperial Hotel — boasted unprecedented construction, lavish comforts and remarkable spaces. It was dismantled in 1967.</li>
                <li>1922 - Catherine and Wright divorced.</li>
                <li>1928 - Wright married Olgivanna Hinzenberg. Also around this time, the Taliesin was seized by the bank.</li>
                <li>1929 - The stock market crash halted all activity in architecture. Wright spent these years lecturing at Chicago, New York City and Princeton, New Jersey.</li>
                <li>1935 to 1937 - Fallingwater was designed and completed. Built near Mill Run, Pennsylvania, it is possibly Wright’s most admired work.</li>
                <li>1956 to 1959 - The Guggenheim was built to house a permanent collection of abstract art.</li>
                <li>1960 to 1962 - After Wright’s death, the Marin County Civic Center would rise under the watch of his protégé — Aaron Green.</li>
            </ul>
    </section>


    .info-one {
        background-size: contain;
        background: url(images/flw-taliesin-interior-blkovr-94-800-1200-hf1.png);
        background-repeat: no-repeat;
        background-position: center;
        color: #fff;
        line-height: 1.3;
        font-size: .7em;
        max-width: 100%;
        height: auto;
        margin: 3em 0em 3em auto;
        padding-top: 2em;
        padding-right: 2em;
        padding-bottom: 2em;
        overflow: hidden;
    }

    .info-two {
        background-size: contain;
        background: url(images/flw-taliesin-interior-blkovr-94-800-1200-hf2.png);
        background-repeat: no-repeat;
        background-position: center;
        color: #fff;
        line-height: 1.3;
        font-size: .7em;
        max-width: 100%;
        height: auto;
        margin: 3em 0em 3em auto;
        padding-top: 2em;
        padding-right: 2em;
        padding-bottom: 2em;
        overflow: hidden;
    }