Jump to content
  • 0

Zmiana widoku "Moje konto" z trybu siatki na tryb listy z wyświetleniem zawartości

KamikStudio

Asked by KamikStudio,

 Share

Question

KamikStudio Rookie

KamikStudio

Posted
Posted (edited)

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.

 

Edited by KamikStudio
edycja html (see edit history)
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to question listing
×
×
  • Create New...