Skocz do zawartości
"Idzie nowe..." - o zmianach i nie tylko ×
Przeniesienie zakupów z IPS Marketplace / Moving bought items from IPS Marketplace ×

Dosunięcie elementów header'a do lewej/prawej


Rekomendowane odpowiedzi

Opublikowano

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.

141sb5l.jpg

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?

  • 4 tygodnie później...

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę.