Witam
Robię stronę o bohaterach universum WoW-a. Moim założeniem było aby górne 150px było nawigacją pomiędzy bohaterami dwóch frakcji. Planowałem również aby po obu stronach bordera były loga tych frakcji. Otóż mimo usilnych prób nie potrafię takowego efektu osiągnąć.
oto kod:
HTML
<div class="navi">
<div class="alliance">
<h1>Bochaterowie Przymierza</h1>
<img src="img/150px/alliance.png" id="minilogoA">
<div style="clear:both"></div>
</div>
<img src="img/border.png" id="border">
<div class="horde">
<img src="img/150px/horde.png" id="minilogoH">
</div>
<div style="clear:both"></div>
</div>
CSS
.navi
{
height: 150px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0;
margin-left: 0;
}
.alliance
{
width: 49.95%;
height: 150px;
float: left;
background-color: black;
}
#border
{
float: left;
width: 0.1%;
height: 150px;
}
.horde
{
width: 49.95%;
height: 150px;
float: left;
background-color: black;
}
#minilogoA
{
float: left;
margin-left:105px;
}
Zaznaczam że nie liczę na gotową odpowiedź. Chciałbym się dowiedzieć jakimi drogami można osiągnąć zamierzony cel.
EDIT1:
Zdjęcia mają wymiary 150px X 150px