Div dopasowujący się do reszty

Odpowiedz Nowy wątek
2015-02-07 10:40
Mały Terrorysta
0

Witam. Mam banalny program, ponad rok nie robiłem niczego w html i trochę pozapominałem. Mianowicie chcę zrobić menu. Mam stworzonego diva, kontenera (header) a w mogą być (w zależności od strony którą się obecnie przegląda itp.) jeden duży przycisk który ma zajmować tyle miejsca ile może, maksymalnie tyle ile ma header oraz mały który zajmuje 20% tego co ma header. Tzn. jeśli mam dwa małe przyciski (40%) to ten duży będzie miał 60%, jeżeli nie będzie małego to 100% itd. Niestety nie pamiętam jak się to robiło. Na razie napisałem coś takiego niestety nie działa. Oto efekt który otrzymałem:
http://scr.hu/3dxp/t9qf3
A to gdy usunę float:left z dużego diva:
http://scr.hu/3dxp/cei6l

<body>
<div class="header">
    <div class="header_big">Duży</div>
    <div class="header_small">Mały</div>
</div>
</body>
body {
    margin: 0;
    padding: 0;
    background-color: #333535;
        background-image: url("background.png");
    background-repeat: repeat;
    background-position: 50% 0;
}
.header {
    margin: 0;
    padding: 0;
    background-color: #fff;
    height: 100px;
    width: 1586px;
}
.header_big {
    float: left;
        width: auto;
        height: 100%;
    background-color: #e04547;
        background-image: url("background.png");
    box-shadow: inset rgba(0,0,0,0.25) 0px 0px 0px 1px;
    background-position: 50% 0% !important;
    background-attachment: fixed !important;
    background-repeat: repeat !important
}
.header_small {
    width: 150px;
    height: 100%;
    float: right;
    background-color: #ccc;
    background-color: #e04547;
        background-image: url("background.png");
    box-shadow: inset rgba(0,0,0,0.25) 0px 0px 0px 1px;
    background-position: 50% 0% !important;
    background-attachment: fixed !important;
    background-repeat: repeat !important;
}

Pozostało 580 znaków

2015-02-07 12:35
0

Mam nadzieje, ze to efekt jaki chciales uzyskac: JSFiddle.

Pozdrawiam

Pozostało 580 znaków

2015-02-07 13:11
Mały Terrorysta
0

Niestety ale to nic nie zmienia :/
http://scr.hu/3dxp/98u5y

Pozostało 580 znaków

2015-02-07 15:45
0

Alez oczywiscie, ze zmienia wystarczy umiec przepisac ;) .
Jesli musze to prosze, podaje twoj kod tak jak ma byc:

<div class="header" >
    <div class="header_small">Mały</div>
    <div class="header_big">Duży</div>
</div>
body {
    margin: 0;
    padding: 0;
    background-color: #333535;
        background-image: url("background.png");
    background-repeat: repeat;
    background-position: 50% 0;
}
.header {
    margin: 0;
    padding: 0;
    background-color: #fff;
    height: 100px;
    width: 1586px;
}
.header_big {
        height: 100%;
    background-color: #e04547;
        background-image: url("background.png");
    box-shadow: inset rgba(0,0,0,0.25) 0px 0px 0px 1px;
    background-position: 50% 0% !important;
    background-attachment: fixed !important;
    background-repeat: repeat !important
}
.header_small {
    width: 20%;
    height: 100%;
    float: right;
    background-color: #ccc;
    background-color: #e04547;
        background-image: url("background.png");
    box-shadow: inset rgba(0,0,0,0.25) 0px 0px 0px 1px;
    background-position: 50% 0% !important;
    background-attachment: fixed !important;
    background-repeat: repeat !important;
}

Najprawdopodobniej nie zwrociles uwagi na HTML.

Pozdrawiam

Pozostało 580 znaków

2015-02-07 16:00
Mały Terrorysta
0

Thx, nie zauważyłem tego :D

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0