Elektroda.pl
Elektroda.pl
X
Proszę, dodaj wyjątek dla www.elektroda.pl do Adblock.
Dzięki temu, że oglądasz reklamy, wspierasz portal i użytkowników.

Html/css 3 divy horyzontalnie

14 Sie 2013 21:43 1446 4
  • Poziom 6  
    Chce aby te 3 divy były odpowiednio, pierwszy do lewej, drugi wyśrodkowany a trzeci do prawej, wszystkie trzy mają być w jednym osobnym divie typu container. Prawie mi się udało, tylko ten środkowy nie działa, wyświetla się taki malutki, co robię źlę?

    <!DOCTYPE html>
    <html>

    <head>
    <STYLE type="text/css">

    #header {
    background-color: #3D5C5C;
    width: 110%;
    height: 100px;
    margin-left: -8px;
    margin-right: auto;
    margin-top: -8px;
    }

    #main{
    margin-left: auto ;
    margin-right: auto ;
    margin-top: 10px;
    width: 1100px;
    height: 800px;
    background-color: grey;
    }


    #main div{
    padding: 5px;
    margin: 10px;

    }

    .tab1 {
    width: 300px;
    height: 500px;
    float: left;
    background-color: #663A3A;
    }
    .tab2 {
    width: 300px;
    height: 500px;
    display: inline;
    background-color: #3B663A;
    }
    .tab3 {
    width: 300px;
    height: 500px;
    float: right;
    background-color: #3B3A66;
    }



    </style>
    <title></title>

    </head>

    <body>
    <div id="header">
    </div>

    <div id="main">

    <div class="tab1"></div>

    <div class="tab2"></div>

    <div class="tab3"></div>

    </div>

    </body>

    </html>

    Html/css 3 divy horyzontalnie [/img]


    Proszę pamiętać o używaniu znaczników syntax. Opcja Listing kodu. Proszę to poprawić! - arnoldziq
  • Pomocny post
    Poziom 25  
    Skoro wszystkie trzy div-y mają mieć stałą szerokość to mogą być
    Kod: css
    Zaloguj się, aby zobaczyć kod


    NIE MOŻE też być:
    Kod: css
    Zaloguj się, aby zobaczyć kod
    to jest dziwne. I jeszcze zwracam uwagę na
    Kod: css
    Zaloguj się, aby zobaczyć kod
    to też jest dziwne.

    Ogólne rozwiązanie jakie Ci proponuję to
    Kod: html4strict
    Zaloguj się, aby zobaczyć kod


    I z tego co widzisz wszystkie są float:left i display: block.

    I w stylach można używać przecinków jeśli chcemy nadać kilku elementom wspólne cechy.
    Zostało Ci dobranie szerokości tych trzech elementów i polecam jakiś kurs CSS żeby pootrenować. Pozdr.
  • Pomocny post
    Poziom 24  
    Trochę się muszę nie zgodzić z przedmówcą ponieważ width:110%; oraz margin-left:-8px; nie są wcale dziwnymi definicjami styli, chodź nie są wykorzystywane powszechnie i tutaj konkretnie myślę, że nie są potrzebne to w pewnych sytuacjach są nie zastąpione :D Z tego co zrozumiałem założyciel tematu chce aby DIV.tab2 był wyśrodkowany, więc nie może być pływający(float). Dlatego proponuje takie rozwiązanie, tu link do podglądu Link, a tu kod:
    Kod: html4strict
    Zaloguj się, aby zobaczyć kod

    Jeżeli chodzi o to co pisał mój przedmówca przemyślane tworzenie reguł jest jak najbardziej dobrym rozwiązanie. Zmniejsza objętość kodu i ułatwia wprowadzanie zmian :D
  • Poziom 6  
    Wielkie dzięki za pomoc, o to chodziło, dzięki za radę (
    Cytat:
    w stylach można używać przecinków
    ) przyda się, a to z minusowymi wartościami wyczytałam gdzieś i postanowiłam wykorzystać , jako że nie wiedziałam jak inaczej zrobić taki jakby nagłówek, który by nie miał żadnych marginesów. Dzięki raz jeszcze.