Jump to content

Edit History

KamikStudio

KamikStudio


edycja html

Witajcie!

Poniżej widok obecnego konta klienta

image.thumb.png.168a0fc1beeceb05c120e6aef211be79.png

Chciałbym teraz uzyskać widok, który będzie podzielony na zasadzie

<style>
    /* domyślnie */
    
    body {
        background: white;
        color: black;
    }
    
    h2 {
        font-size: 18px;
        line-height: 16px;
    }
    #kontener {
        margin-top: 200px;
        padding: 100px;
    }
    /* dot. widoku twoje konto */
    
    #twoje_konto {
        display: flex;
        flex-flow: row wrap;
        border: 1px solid grey;
        list-style: none;
        width: 100%
    }
    
    .lista {
        padding: 10px 15px 10px; 
    }
    
    .podzial {
        border-right: 1px solid grey;
    }
    
    .lista,
    .podzial ul {
        list-style: none;
        margin: 0;
        padding: 10px;
        line-height: 20px;
    }

    .lista li:hover {
        color:rgb(0, 104, 165);
    }

    .aktywny {
        color:rgb(0, 86, 136);
        font-weight: 600;
    }
</style>

<body>
    <div id="kontener">
        <div id="twoje_konto">
            <div class="lista podzial">
                <h2>Dzień dobry, Patryku</h2>
                <ul>
                    <li class="aktywny">Informacje konta</li>
                    <li>Adresy do faktur i wysyłek</li>
                    <li>Historia i szczegóły zamówień</li>
                    <li>Moje rozrachunki</li>
                    <li>Pokwitowania, korekty płatności</li>
                    <li>Kupony, kody rabatowe</li>
                    <li>Lista zakupów (ulubione)</li>
                    <li>Moje opinie</li>
                    <li>Moje powiadomienia</li>
                    <li>Moje negocjacje i ceny</li>
                </ul>
            </div>
            <div class="lista">
                <h2>Informacje konta:</h2>
                <p>Tekst wyświetla się po wyborze elementu z listy, zgodnie z jego przeznaczeniem</p>
            </div>
        </div>
</body>
<!-- by KamikStudio -->

Czyli elementy listy z lewej a z prawej zawartość po jego kliknięciu zgodnie z przeznaczeniem.

I teraz pytanie jak osiągnąć taki efekt, ile plików za to odpowiada bo na pewno nie edytuje tu jednego tpl'a.

 

KamikStudio

KamikStudio

Witajcie!

Poniżej widok obecnego konta klienta

image.thumb.png.168a0fc1beeceb05c120e6aef211be79.png

Chciałbym teraz uzyskać widok, który będzie podzielony na zasadzie

<style>
    /* domyślnie */
    
    body {
        background: white;
        color: black;
    }
    
    h2 {
        font-size: 18px;
        line-height: 16px;
    }
    #kontener {
        margin-top: 200px;
        padding: 100px;
    }
    /* dot. widoku twoje konto */
    
    #twoje_konto {
        display: flex;
        flex-flow: row wrap;
        border: 1px solid grey;
        list-style: none;
        width: 100%
    }
    
    .lista {
        padding: 10px 15px 10px; 
    }
    
    .podzial {
        border-right: 1px solid grey;
    }
    
    .lista,
    .podzial ul {
        list-style: none;
    }
</style>

<body>
    <div id="kontener">
        <div id="twoje_konto">
            <div class="lista podzial">
                <h2>Dzień dobry, Patryku</h2>
                <li>Informacje konta</li>
                <li>Adresy do faktur i wysyłek</li>
                <li>Historia i szczegóły zamówień</li>
                <li>Moje rozrachunki</li>
                <li>Pokwitowania, korekty płatności</li>
                <li>Kupony, kody rabatowe</li>
                <li>Lista zakupów (ulubione)</li>
                <li>Moje opinie</li>
                <li>Moje powiadomienia</li>
                <li>Moje negocjacje i ceny</li>
            </div>
            <div class="lista">
                <p>Tekst wyświetla się po wyborze elementu z listy, zgodnie z jego przeznaczeniem</p>
            </div>
        </div>
</body>
<!-- by KamikStudio -->

Czyli elementy listy z lewej a z prawej zawartość po jego kliknięciu zgodnie z przeznaczeniem.

I teraz pytanie jak osiągnąć taki efekt, ile plików za to odpowiada bo na pewno nie edytuje tu jednego tpl'a.

 

KamikStudio

KamikStudio

Witajcie!

Poniżej widok obecnego konta klienta

image.thumb.png.168a0fc1beeceb05c120e6aef211be79.png

Chciałbym teraz uzyskać widok, który będzie podzielony na zasadzie

<style>
    /* domyślnie */
    
    body {
        background: white;
        color: black;
    }
    
    #kontener {
        margin-top: 200px;
        padding: 100px;
    }
    /* dot. widoku twoje konto */
    
    #twoje_konto {
        display: flex;
        flex-flow: row wrap;
        padding: 10px;
        border: 1px solid grey;
        list-style: none;
        width: 100%
    }
    
    .lista {
        padding: 10px;
        margin-top: 5px;
    }
    
    .podzial {
        border-right: 1px solid grey;
    }
    
    .lista,
    .podzial ul {
        list-style: none;
    }
</style>

<body>
    <div id="kontener">
        <div id="twoje_konto">
            <div class="lista podzial">
                <li>Informacje konta</li>
                <li>Adresy do faktur i wysyłek</li>
                <li>Historia i szczegóły zamówień</li>
                <li>Moje rozrachunki</li>
                <li>Pokwitowania, korekty płatności</li>
                <li>Kupony, kody rabatowe</li>
                <li>Lista zakupów (ulubione)</li>
                <li>Moje opinie</li>
                <li>Moje powiadomienia</li>
                <li>Moje negocjacje i ceny</li>
            </div>
            <div class="lista">
                <p>Tekst wyświetla się po wyborze elementu z listy, zgodnie z jego przeznaczeniem</p>
            </div>
        </div>
</body>
<!-- by KamikStudio -->

Czyli elementy listy z lewej a z prawej zawartość po jego kliknięciu zgodnie z przeznaczeniem.

I teraz pytanie jak osiągnąć taki efekt, ile plików za to odpowiada bo na pewno nie edytuje tu jednego tpl'a.

 

×
×
  • Create New...