28-09-2010, 18:36
(28-09-2010, 13:31)beny napisał(a): z tego co widzę, to wszystko rozbija się o pozycjonowanie absolutne #logoDzięki wielkie. Generalnie dorzucę zatem jeszcze menu_style.css już po poprawkach:
na Twoim miejscu zrobiłbym to tak:
1. wywaliłbym z kodu html linijkę
2. w style.css dał dla #logo (wiersz 46):Kod:<img alt="" src="images/a.PNG">
zamiast istniejącychKod:background: url("../images/a.PNG") no-repeat top left;
height: 176px;
padding-top: 34px;
text-align: center;
3. w menu_style.css dla ul.menu (wiersz 1) dał:Kod:margin-left:35px;
margin-right:10px;
position:absolute;
top:133px;
zamiast:Kod:margin: 0 auto;
width: 870px;
Kod:margin: 0;
width: auto;
mam nadzieję, że o niczym nie zapomniałem - sprawdź jak działa i jak coś, to pisz
Kod:
ul.menu {
list-style-type:none;
position:relative;
display:block;
height:32px;
font-size:.4em;
background:url(images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:0px solid #000;
padding-bottom: 0px;
text-align: center;
margin: 0 auto;
width: 830px;
padding: 0px 20px 0px 20px;
}
ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}
ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:7px 49px 0;
font-weight:normal;
}
ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
text-decoration:none;
}
ul.menu .current a {
color:#fff;
font-weight:700;
}
/*BLUE*/
ul.menu.blue{
background-color:#3F8FD2;
}
ul.menu.blue li a:hover, .menu.blue li.current {
background-color: #A3BAE6;
/*background-color: #78B8F1;*/
/*#A3BAE6;*/
}
Zastosowałem się do wszystkiego. Generalnie pomogło i jest dużo lepiej. Logo i menu wskoczyły na swoje miejsca. Ale zostały jeszcze 3 problemy, z których dwa udało się rozwiązać, nie wiem czy dobrze więc proszę o opinię.
1. W starych przeglądarkach nadal występuje taki odstęp między logo a menu na dwa milimetry, jak na tym zdjęciu gdzie dałem rozjechaną stronę. Nie umiem tego zrobić
2.
(28-09-2010, 13:31)beny napisał(a):Kod:margin: 0 auto;
width: 870px;
Gdy tak zrobię, to pod starszymi przeglądarkami jest ok, ale pod nowszymi przeglądarkami menu jest szersze od obrazka. Muszę więc zrobić width: 830px do nowych przeglądarek i w starych mam za krótkie to menu. Udało mi się to jednak rozwiązać dodając w menu_style.css w ul.menu linię: padding: 0px 20px 0px 20px to mi rozciągnęło menu w starych przeglądarkach i w nowych nic nie zepsuło, więc chyba jest dobrze?
3. Nie zauważyłem tego wcześniej tylko dopiero teraz. DIV w którym jest napis "Witamy na stronie...." w nowych przeglądarkach mam wyrównany do tego niebieskiego tła, co widzę jak wrzucę background-image a w starszych przeglądarkach jest wyrównany do loga - zatem przesunięty w prawo. Udalo mi się to poprawić wyrzucając w #TRE margin-left i zamiast tego dałem padding-left. Zadziałało i jest chyba dobrze. Czy to poprawnie będzie?