Warstwy-error (Umiejscowienie obrazka, tekstu w przestrzeni)

pytanie zadane 16 stycznia 2018 w HTML i CSS przez Dziobi Początkujący (490 p.)

Witam bardzo serdecznie,

/*Zbędne*\ Robię pracę domową, mam do zrobienia stronę internetową na podstawię prezentacji co dostaliśmy.

Problem jest taki że nadawanie warstw coś mi nie działa.

Pytania mam trzy:

1) W jaki sposób mogę zmienić centrum zdjęcia? (Startujemy od lewego-górnego rogu a chcę zaczynać od prawego-dolnego rogu)

2) Co zrobić aby obrazek nie zasłaniał tekstu?

3) Jak można w prosty sposób upiększyć stronę internetową?

Cele:

1) Przyklejenie obrazka do prawej strony.

2) Tekst widoczny w pełni.

Mam tyle:

1 odpowiedź

odpowiedź 16 stycznia 2018 przez radek024 Szeryf (77,160 p.)

Fajnie by było gdybyś podał kod. Zachęcam Cię do poznania się z artykułem: https://radek024.github.io/blog/bykiwkodzie/html/css/strony-www/2017/06/02/zaloz_codepena/

komentarz 16 stycznia 2018 przez Dziobi Początkujący (490 p.)

index/html

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <title>Grafika</title>
    <meta name="description" content="O grafice" />
    <meta name="keywords" content="Grafika" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />

    <link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>

    <div id="main">
        <div id="menu">
            <div class="link"><a href="../index.html">Strona główna</a></div>
            <div class="link"><a href="biia.html">Barwy i ich atrybuty</a></div>
            <div class="link"><a href="mbr.html">Modele barw - RGB</a></div>
            <div class="link"><a href="pgr.html">Prezentacja graficzna RGB</a></div>
            <div class="link"><a href="mcic.html">Modele barw -CMY i CMYK</a></div>
            <div class="link"><a href="pgc.html">Prezentacja graficzna CMY</a></div>
            <div class="link"><a href="mbh.html">Modele barw -HSV</a></div>
            <div class="link"><a href="pgh.html">Prezentacja graficzna HSV</a></div>
            <div class="link"><a href="kwi.html">Kolory w internecie</a></div>
        </div>

        <div id="cls"></div>

        <div id="tresc">
            <div id="tytol">
                BARWY I ICH ATRYBUTY
            </div>
            <div id="wsad">
                <pre>
            -Barwa jest to wrażenie psychofizjologiczne wywołane w mózgu, gdy oko ludzkie odbiera fale
            elektromagnetyczne z zakresu światła widzialnego (długość 400 – 760 nm) <br>

            -Atrybuty barwy - umożliwiają identyfikację
                ·Odcień H (hue) – chromatyczność – wrażenia związane z określoną długością fali <br>
                ·Nasycenie S (saturation) - umiejscowienie barwy między czystą barwą monochromatyczną
                (nasycenie 100%) a barwą białą (nasycenie 0%) <br>
                ·Jasność L (lightness) – intensywność światła o danej barwie pozwalająca odróżnić barwę jasną odciemnej <br>
                </pre>
                    <div id="obrazek">
                        <img src="../img/rozczep.jpg"/>
                    </div>
            </div>
        </div>

        <div id="stopa">
            stopa
        </div>
    </div>

</body>
</html>

style/css

body{
margin: auto;
}
    #main{

        width: 100vw;
        height: 100vh;


    }

        #menu{
        background-color: #272727;
        width: 100vw;
        height: 10vh;

        border-bottom: 0.25vh solid #444444;
        }

            .link{
            background-color: #999999;
            width: 10vw;
            height: 7.5vh;

            text-align: center;
            padding-top: 2.5vh;
            font-weight: 600;

            border-right: 0.25vh solid #444444;

            float: left;
            }

                a{
                color: #cccccc;
                text-decoration: none;
                }

        #cls{
            clear:both;
        }

        #tresc{

        width: 100vw;
        height: 80vh;

        background: url('../img/tuo.png');
        background-size: cover;
        }

            #tytol{
                font-size: 60px;
                font-weight: 600;
                padding-top: 10vh;
                padding-bottom: 5vh;
                padding-left: 15vw;
                color: white;
            }

            .link_h{
            font-size: 30px;
            padding-left: 50vw;
            }

            #wsad{
                font-size: 15px;
                padding-left: 5vw;
                color:white;

                position: absolute;

            }

            #obrazek{

                position: absolute;
                bottom:0;
                right:0;
            }

        #stopa{
        background-color: #dddddd;
        width: 100vw;
        height: 7vh;


        padding-top: 2.5vh;

        border-top: 0.25vh solid #444444;
        }

komentarz 16 stycznia 2018 przez Dziobi Początkujący (490 p.)

Z tego linku dowiedziałem się że ludziki nie lubią wklejania kodu i lubią jak jest na jakiś stronach bo wtedy od razu mają wgląd na wygląd strony ale pacząc po tych portalach konta są płatne a Ja nie mam piniądzów na to :/

komentarz 16 stycznia 2018 przez radek024 Szeryf (77,160 p.)

O kruci :v

Przedewszystkim podziel logicznie kod. Nie widzisz tutaj następującego układu?

body>nav>ul>li>a^^^div.wrapper>h1+div.opis>p{treść}^div.obrazek>img

Całość zapisałem za pomocą emmeta. Myślę że powinieneś sobie poradzić z takim zapisem.

Dalej; nie wpychaj position: absolute tam gdzie nie trzeba. Kiedyś kodu.je zrobiło o tym materiał: https://www.youtube.com/watch?v=bOEmA3B1OBE

Jeżeli zastosujesz się do kodu który podałem to umieszczenie całości nie będzie takie trudne. Z pewnością dasz sobie radę dalej jeżeli obejrzysz ponadto kurs na YT Pasja Informatyki. Co do pytań:

Przyklejenie obrazka do prawej strony.

To będziesz w stanie wykonać po obejrzeniu materiału który podałem(od kodu.je).

Tekst widoczny w pełni.

Nie będziesz się musiał męczyć z tą kwestią jeżeli zastosujesz ww. schemat kodu.

I kolejnym razem czytaj jeżeli ktoś coś podrzuca! :D

komentarz 16 stycznia 2018 przez radek024 Szeryf (77,160 p.)

Z tego linku dowiedziałem się że ludziki nie lubią wklejania kodu i lubią jak jest na jakiś stronach bo wtedy od razu mają wgląd na wygląd strony ale pacząc po tych portalach konta są płatne a Ja nie mam piniądzów na to :/

Konto premium jest tylko i wyłącznie udogodnieniem(dodają różne możliwości), portale są darmowe.

komentarz 16 stycznia 2018 przez Dziobi Początkujący (490 p.)

Czytam zawsze! Może nie od razu bo potrzeba na to chwili :p

Nie rozumiem logicznego dzielenia W szkole uczą robić a nie rozumieć jak coś zrobić :/

body>nav>ul>li>a^^^div.wrapper>h1+div.opis>p{treść}^div.obrazek>img wtf xD

emmeta -yyy co to? Wpisałem w wujka googla i mówi mi że to jakiś program :/

Idę oglądać tego yt

komentarz 16 stycznia 2018 przez radek024 Szeryf (77,160 p.)

Każda strzałka to kolejna instacja kodu. Wiesz, coś na styl

<body>
  <p class="text">Lorem ispum dolor sit.</p>
</body>

Zapiszemy jako body>p.text{Lorem ipsum dolor sit.} Strzałki w górę przenoszą kod o instancję wyżej. Klasy nadajemy po kropkach, a id - po hashu(#). Znak plusa umożliwia tworzenie kodu na tym samym "poziomie". Ot tyle do tłumaczenia :P

komentarz 16 stycznia 2018 przez Dziobi Początkujący (490 p.)

Chodzi o to że "#" i "." działają jak enter (od nowego wersu) a + jako ciąg dalszy?

Mózg już mi po woli siada :/

Panie Radosławie mam rozumieć że struktura klęka czy o co się rozchodzi?

komentarz 16 stycznia 2018 przez radek024 Szeryf (77,160 p.)

Kod jest bardzo nieczytelny, a to z reguły najgorsze z czym można się zmierzyć. Warto czasami napisać coś od nowa ;)

# oznacz nadanie id danemu elementowi, a . - klasę.