Chciałem nieco zmienić oryginalny header IPB, umieścić go na środku.
W ipb_styles.css
Dodałem dla elementów header'a atrybuty: width: 90%; margin: 0 auto;
W ten sposób udało mi się dopasować jego szerokość do szerokości reszty forum.
/* HEADER */
#header_bar {
background: #313131;
width: 90%;
margin: 0 auto;
padding: 0 10px;
text-align: right;
}
#branding {
background: #0f3854 url({style_images_url}/branding_bg.png) repeat-x;
width: 90%;
margin: 0 auto;
padding: 0 10px;
border-bottom: 1px solid #1b3759;
min-height: 100px;
}
#primary_nav {
background: #204066;
width: 90%;
margin: 0 auto;
padding: 0;
font-size: 13px;
}
Mam problem z dosunięciem elementów umieszczonych w headerze (logo, wyszukiwarka, górne menu, itd.) do prawej/lewej krawędzi header'a.
Sprawdziłem okolice przy pomocy Firebug'a, wskazywał na to, że są to elementy klasy: ipsList_inline left i ipsList_inline right
<div id="header_bar" class="clearfix">
<div class="main_width">
<ul id="admin_bar" class="ipsList_inline left">
<div id="user_navigation" class="logged_in">
<ul class="ipsList_inline right">
</div>
<div id="user_link_menucontent" class="ipsHeaderMenu clearfix boxShadow" style="display: none; position: absolute; z-index: 9999;">
</div>
</div>
<div id="branding">
<div id="primary_nav" class="clearfix">
<div id="content" class="clearfix">
<div id="footer_utilities" class="main_width clearfix clear">
<div>
<script type="text/javascript">
</div>
Css dla nich wygląda tak:
.ipsList_inline > li {
display: inline-block;
margin: 0 3px;
}
.ipsList_inline > li:first-child { margin-left: 0; }
.ipsList_inline > li:last-child { margin-right: 0; }
.ipsList_inline.ipsList_reset > li:first-child { margin-left: 3px; }
.ipsList_inline.ipsList_reset > li:last-child { margin-right: 3px; }
.ipsList_inline.ipsList_nowrap { white-space: nowrap; }
.ipsList_withminiphoto > li { margin-bottom: 8px; }
.ipsList_withmediumphoto > li .list_content { margin-left: 60px; }
.ipsList_withminiphoto > li .list_content { margin-left: 40px; }
.ipsList_withtinyphoto > li .list_content { margin-left: 30px; }
.list_content { word-wrap: break-word; }
.ipsList_data li { margin-bottom: 6px; line-height: 1.3; }
.ipsList_data .row_data { display: inline-block; word-wrap: break-word; max-width: 100%; }
.ipsList_data .row_title, .ipsList_data .ft {
display: inline-block;
float: left;
width: 120px;
font-weight: bold;
text-align: right;
padding-right: 10px;
}
.ipsList_data.ipsList_data_thin .row_title, .ipsList_data.ipsList_data_thin .ft {
width: 80px;
}
Próbowałem modyfikacji/usuwania marginesów, ale to chyba nie tutaj...
Gdzie jeszcze szukać? Jak poprzesuwać te elementy?