• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
371 wizyt
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..winkproszę.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

0 głosów
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 laugh

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

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

 

0 głosów
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
komentarz 28 grudnia 2020 przez kapsel5308 Początkujący (360 p.)
Ale chodzi mi o to ze mam h1 na bialym tle na stronie, ale ten element zakrywa w kazdej wersji

chodzi o aktualnosci zmienia pozycje

Podobne pytania

+1 głos
1 odpowiedź 100 wizyt
pytanie zadane 29 grudnia 2020 w HTML i CSS przez kapsel5308 Początkujący (360 p.)
–2 głosów
1 odpowiedź 459 wizyt
0 głosów
2 odpowiedzi 123 wizyt
pytanie zadane 13 sierpnia 2015 w C# przez Voudubu Użytkownik (740 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...