Mam problem z elementem z html w wersji komputera i wersji laptopa

pytanie zadane 28 grudnia 2020 w HTML i CSS przez kapsel5308 Początkujący (360 p.)
edycja 31 grudnia 2020 przez kapsel5308

To jest wersja komputera jak sie wejdzie

A tu jest widok z laptopa co mogło pójsc nie tak, jak widac na zdjeciu to slowo aktualnosci się ukryło za tym blokiem.

komentarz 28 grudnia 2020 przez niezalogowany
przeniesione 28 grudnia 2020 przez ScriptyChris

Podrzuć kod..proszę.Będzie łatwiej!

komentarz 28 grudnia 2020 przez kapsel5308 Początkujący (360 p.)
edycja 28 grudnia 2020 przez kapsel5308

.CSS

tag h1{
    color: black;
    font-family: Tahoma;
    position: static;
    top: 20%;
    left: 25%;
    z-index: 1;
}
.info1{
    background: #ffb000;
    width: 1000px;
    height: 200px;
    border-radius: 15px;
    box-shadow: 1px 1px 5px;
    margin: 0;
    position: static;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
    
}
.info1 h1{
    font-family: Tahoma;
    position: absolute;
    left: 250px;
    top: -5px;
}
.info1 img{
    border-radius: 15px;
}
.info1 p{
    font-family: Tahoma;
    position: absolute;
    left: 250px;
    top: 50px;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>ZKP OWCZARY - Aktualności</title>
        <link rel="stylesheet" type="text/css" href="aktualnosci.css">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="container">
        <img src="logozkp.png" width="100" height="100"/></div>
        <div class="prostokat"></div>
        <div class="block"></div>
        <ul>
        <li><a href="index.html">Aktualności</a></li>
        <li><a href="informacje.html">Informacje</a></li>  
        <li><a href="rekrutacje.html">Rekrutacje</a></li>
        <li><a href="rozklad.html">Rozkład jazdy</a></li>
        <li><a href="#">Panel Kierowcy (soon)</a></li>
        </ul>
        <div class="tag">
        <h1>Aktualności</h1>
        </div>
        <div class="info1">
            <h1>Trwają testy</h1>
            <img src="test.png" width=200 height=200/>
            <p>Aktualnie trwają testy strony internetowej.Prosimy o cierpliwość.</p>
        </div>
        <div class="copyright">
        <p>ZKP OWCZARY &copy; 2021 Kacper P.<p>
        </div>
    </body>
</html>

komentarz 28 grudnia 2020 przez niezalogowany

Wrzuć sobie ten kod który dołączyłeś do mojej prośby w narzędzie Codepen.

komentarz 28 grudnia 2020 przez kapsel5308 Początkujący (360 p.)

.CSS

tag h1{
    color: black;
    font-family: Tahoma;
    position: static;
    top: 20%;
    left: 25%;
    z-index: 1;
}
.info1{
    background: #ffb000;
    width: 1000px;
    height: 200px;
    border-radius: 15px;
    box-shadow: 1px 1px 5px;
    margin: 0;
    position: static;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
    
}
.info1 h1{
    font-family: Tahoma;
    position: absolute;
    left: 250px;
    top: -5px;
}
.info1 img{
    border-radius: 15px;
}
.info1 p{
    font-family: Tahoma;
    position: absolute;
    left: 250px;
    top: 50px;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>ZKP OWCZARY - Aktualności</title>
        <link rel="stylesheet" type="text/css" href="aktualnosci.css">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="container">
        <img src="logozkp.png" width="100" height="100"/></div>
        <div class="prostokat"></div>
        <div class="block"></div>
        <ul>
        <li><a href="index.html">Aktualności</a></li>
        <li><a href="informacje.html">Informacje</a></li>  
        <li><a href="rekrutacje.html">Rekrutacje</a></li>
        <li><a href="rozklad.html">Rozkład jazdy</a></li>
        <li><a href="#">Panel Kierowcy (soon)</a></li>
        </ul>
        <div class="tag">
        <h1>Aktualności</h1>
        </div>
        <div class="info1">
            <h1>Trwają testy</h1>
            <img src="test.png" width=200 height=200/>
            <p>Aktualnie trwają testy strony internetowej.Prosimy o cierpliwość.</p>
        </div>
        <div class="copyright">
        <p>ZKP OWCZARY &copy; 2021 Kacper P.<p>
        </div>
    </body>
</html>

2 odpowiedzi

odpowiedź 28 grudnia 2020 przez AgentTecza Obywatel (1,810 p.)

Wydaje mi się że po prostu różnica jest rozdzielczości. Jak byś wszedł na telefonie wyglądało by to jeszcze inaczej musisz dostosować swoją stronę do różnych rozdzielczości różnych ekranów tak żeby ona była responsywna.

komentarz 28 grudnia 2020 przez kapsel5308 Początkujący (360 p.)

To jak to trzeba zrobić bo nie wiem

komentarz 28 grudnia 2020 przez AgentTecza Obywatel (1,810 p.)

Wrzuć swój kod na https://codepen.io/ i daj do niego linka spróbuję ci wtedy pomóc

komentarz 28 grudnia 2020 przez niezalogowany

Tylko zrób to poprawnie ! Tym razem

komentarz 28 grudnia 2020 przez kapsel5308 Początkujący (360 p.)

@AgentTecza, tutaj masz link https://codepen.io/kapsel5308/pen/zYKpEKP

odpowiedź 28 grudnia 2020 przez NoOgar95 Dyskutant (9,310 p.)

Cześć,

Zacząłem ten kod poprawiać, ale to jest straszna rzeźnia. Dużo problemów powoduje ustawienie przez Ciebie na position static i nadawanie wartości left/right/top/bottom w %, co w innych rozdzielczościach źle wygląda i się struktura rozpada.

Przepisałem to na wykorzystując float`a, do ustawienia elementów. Działa do 1000px szerokości, poniżej tej wartości nie będzie się poprawnie skalowało.

Przeanalizuj codepena co wrzucam poniżej i przepis pod siebie.

https://codepen.io/NoOgar/pen/YzGYrjb