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;
}