Zaloguj się

rafalew · (Ten post był ostatnio modyfikowany: 29-09-2010, 17:16 przez rafalew.)

Witam,
Mam problem. Chciałem stworzyć stronę tak, by logo i menu znajdujące się bezpośrednio pod nim umieścić na obrazku, który będzie jakby tworzył ramkę. Nie wiem jak to ładnie opisać, więc wrzuciłem na stronkę: http://rafalew.cba.pl (niebieskie jasne tło na nim logo i menu)
Niestety wiąże się z tym parę problemów. Po pierwsze jeśli pojawią się reklamy to logo z menu mi się podwyższa w stosunku do tła.
Drugi problem i dla mnie ważniejszy to fakt, że na niektórych przeglądarkach (czasem nawet IE8 - nie wiem od czego to zależy) strona się rozjeżdża. Zrobiłem print-screen'a i wrzuciłem pod linkiem "coś" na stronie (pod każdym adresem).
Zamieszczam kod index.html

Kod PHP:
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<title></title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<link rel='stylesheet' type='text/css' href='menu_style.css' />
</head>
<body>      <img src="images/tlogora.PNG" alt="" /><div id="top"> 
        <div id="BODY"><img src="images/a.PNG" alt="" />
        <div id="LOGO"><!--LOGO--><img src="images/logo.JPG" alt="" /><!--/LOGO-->
                <!--LINKI-->
                <ul class="menu blue">
                <li><a href="index.html" title="">Strona główna</a></li>
                <li><a href="oferta.html" title="">Coś</a></li>
                <li><a href="onas.html" title="" >O nas</a></li>
                <li><a href="dojazd.html" title="">Jak dojechać</a></li>
                <li><a href="kontakt.php" title="">Kontakt</a></li>
 
            </ul></div>
        <!--/LINKI-->
        <div id="TRE">
        <div id="TRESC">
        <div class="ZAWARTOSC">
        
<p>Witamy na stronie naszej Poradni</p> 
<p>To jest przykładowa treść strony...</p>
<p>To jest przykładowa treść strony...</p>
<p>To jest przykładowa treść strony...</p> 
<p>To jest przykładowa treść strony...</p> 
<p>To jest przykładowa treść strony...</p> 
<p>To jest przykładowa treść strony...</p> 
<p>To jest przykładowa treść strony...</p> 
<p>To jest przykładowa treść strony...</p> 
<p>To jest przykładowa treść strony...</p> 
<p>To jest przykładowa treść strony...</p> 
<p>To jest przykładowa treść strony...</p> 
<p>To jest przykładowa treść strony...</p> 
<p>To jest przykładowa treść strony...</p> 
<p>To jest przykładowa treść strony...</p> 
 
        </div>
        </div>
        </div>
                
        <div id="INFO">
            <!--INFO-->
                <div class="ZAWARTOSC">
                <p>tu cos bedzie</p>
 
                <!--ZAWARTOSC INFO-->
                    
                <!--/ZAWARTOSC INFO-->
                </div>
            
            <!--/INFO-->
        </div>
 
        <div id="STOPKA"><!--STOPKA-->STOPKA<!--/STOPKA--></div>
    </div>
</div>
</body>
</html> 

a także style.css

Kod PHP:
/*STRONA*/
body {
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background: #eef1f6 url repeat-x;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    
    

}
a img {
    border: 0;
}
/*/STRONA*/

/*RAMKA*/
#top {
                border-width: 1px;
                border-color: #C0C0C0;
                border-style: none dotted dotted dotted;
                background: white;
                font-size: 30px;
                font-family: Helvetica, Verdana, Arial, sans-serif;
                color: #000000;
                margin: 0 auto;
                width: 970px;
                padding-top: 0px;
                padding-bottom: 0px;
                                }
/*/RAMKA*/

/*WNETRZE*/
#BODY {
    background-color: white;
    text-align: left;
    margin-left: 15px;
    margin-right: 0px;
    width: 940px;
    z-index: 1;
}
/*/WNETRZE*/

/*LOGO*/
#LOGO {
    margin-left: 35px;
    margin-right: 10px;
    position: absolute;
    top: 133px;
    z-index: 2;
    
}
/*/LOGO*/

/*/TRESC*/
#TRE {
    width: 640px;
    overflow: hidden;
    float: left;
    margin-left: 18px;
    margin-top: 20px;
    

}

#TRESC {
    width: 640px;
    overflow: hidden;
    float: left;
    

}
#TRESC .ZAWARTOSC {
    font-size: small;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    color: #000000;
    background: white url;
    padding-top: 5px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    line-height: 180%; 
}
#TRESC .ZAWARTOSC a:link {
    color: #0000FF;
    text-decoration: underline;
    font-weight: normal;
    font-style: normal;
}
#TRESC .ZAWARTOSC a:visited {
    color: #800080;
    text-decoration: underline;
    font-weight: normal;
    font-style: normal;
}
#TRESC .ZAWARTOSC a:hover {
    color: #FF0000;
    text-decoration: underline;
    font-weight: normal;
    font-style: normal;
}
/*/TRESC*/

/*STOPKA*/
#STOPKA {
    font-size: 11px;
    font-family: Helvetica, Verdana, Arial,  sans-serif;
    color: #000000;
    background-color: white;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 404px;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    text-align: left;
    clear: both;
    }
#STOPKA a:visited {
    color: #000000;
    text-decoration: underline;
}
#STOPKA a:link {
    color: #000000;
    text-decoration: underline;
}
#STOPKA a:hover {
    color: #000000;
    text-decoration: none;
}
/*/STOPKA*/ 

Proszę o pomoc

beny · 28-09-2010, 13:31

z tego co widzę, to wszystko rozbija się o pozycjonowanie absolutne #logo

na Twoim miejscu zrobiłbym to tak:

1. wywaliłbym z kodu html linijkę

Kod:
<img alt="" src="images/a.PNG">

2. w style.css dał dla #logo (wiersz 46):

Kod:
background: url("../images/a.PNG") no-repeat top left;

height: 176px;

padding-top: 34px;

text-align: center;

zamiast istniejących

Kod:
margin-left:35px;

margin-right:10px;

position:absolute;

top:133px;

3. w menu_style.css dla ul.menu (wiersz 1) dał:

Kod:
margin: 0 auto;

width: 870px;

zamiast:

Kod:
margin: 0;

width: auto;

mam nadzieję, że o niczym nie zapomniałem - sprawdź jak działa i jak coś, to pisz

rafalew · 28-09-2010, 18:36

(28-09-2010, 13:31)beny napisał(a): z tego co widzę, to wszystko rozbija się o pozycjonowanie absolutne #logo

na Twoim miejscu zrobiłbym to tak:

1. wywaliłbym z kodu html linijkę

Kod:
<img alt="" src="images/a.PNG">
2. w style.css dał dla #logo (wiersz 46):

Kod:
background: url("../images/a.PNG") no-repeat top left; height: 176px; padding-top: 34px; text-align: center;
zamiast istniejących

Kod:
margin-left:35px; margin-right:10px; position:absolute; top:133px;
3. w menu_style.css dla ul.menu (wiersz 1) dał:

Kod:
margin: 0 auto; width: 870px;
zamiast:

Kod:
margin: 0; width: auto;

mam nadzieję, że o niczym nie zapomniałem - sprawdź jak działa i jak coś, to pisz

Dzięki wielkie. Generalnie dorzucę zatem jeszcze menu_style.css już po poprawkach:

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?

beny · 29-09-2010, 15:20

(28-09-2010, 18:36)rafalew napisał(a): 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ć

oglądałem stronę pod ie6 - teoretycznie żywą skamieliną i nie uzyskałem tego... naprawiłeś to, czy masz jeszcze bardziej historyczne przeglądarki?

(28-09-2010, 18:36)rafalew napisał(a): 2. 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?

mój błąd, dobrze poprawiłeś

(28-09-2010, 18:36)rafalew napisał(a): 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?

dobrze

chociaż na przyszłość spróbuj tło obrazkowe wstawiać właśnie jako tło (przez style css - background: url('sciezka/do/obrazka.xxx') no-repeat; ) - mniej z tym problemów Wink

rafalew · 29-09-2010, 17:19

W zasadzie już mi się udało. W menu_style.css w ul.menu zmieniłem margin z wartości 0 auto na -7px auto i pomogło. Ale na rafalew.cba.pl nadal stronka przed poprawką wisi. Dzięki za pomoc.

beny · 29-09-2010, 17:36

(29-09-2010, 17:19)rafalew napisał(a): W zasadzie już mi się udało. W menu_style.css w ul.menu zmieniłem margin z wartości 0 auto na -7px auto i pomogło. Ale na rafalew.cba.pl nadal stronka przed poprawką wisi. Dzięki za pomoc.

aaaaaa

nie lubię takich rozwiązań, no ale jak Ci nie przeszkadza, to niechaj tak będzie, tylko zamiast -7px auto daj -7px auto 0, bo coś Ci może wjechać od dołu na menu kiedyś i będziesz miał zagwozdkę Smile

rafalew · 29-09-2010, 17:39

(29-09-2010, 17:36)beny napisał(a):
(29-09-2010, 17:19)rafalew napisał(a): W zasadzie już mi się udało. W menu_style.css w ul.menu zmieniłem margin z wartości 0 auto na -7px auto i pomogło. Ale na rafalew.cba.pl nadal stronka przed poprawką wisi. Dzięki za pomoc.

aaaaaa nie lubię takich rozwiązań, no ale jak Ci nie przeszkadza, to niechaj tak będzie, tylko zamiast -7px auto daj -7px auto 0, bo coś Ci może wjechać od dołu na menu kiedyś i będziesz miał zagwozdkę

Rozwiązanie mi przeszkadza, ale nic lepszego nie wymyśliłem. Na rafalew.cba.pl masz widok jak to wyglądało, a jakby nie było widać badziewnego efektu to pod linkiem "coś" printscreen. Jakbyś znalazł jakieś dobre rozwiązanie chętnie je zastosuję Smile

beny · 29-09-2010, 17:51

trochę dużo już będzie tych divów, ale co tam...
w kodzie html "opakuj" całego <ul class="menu blue"> w

Kod PHP:
<div class="menuBckg">
   <ul class="menu blue"> ... </ul>
</div><!-- class="menuBckg" --> 

a w pliku css dodaj:

Kod:
.menuBckg {

   background: url('../images/logo.JPG') no-repeat top center;

   padding-top: 112px;

}

myślę, że powinno zatrybić...

rafalew · 30-09-2010, 16:58

No zatrybiło Smile

dzięki. A powiedz mi jeszcze, czy taka duża ilość divów źle wpływa na stronę? Na szybkość wczytywania albo może mieć coś wspólnego z pozycjonowaniem, że będzie trudniejsza do przeszukiwania, itp...?

beny · 30-09-2010, 17:09

co do pozycjonowania, to się nie wypowiadam, gdyż jest to dla mnie czarną magią, ale myślę, że nie powinno mieć to chyba jakiegoś wielkiego znaczenia Wink

tylko często na początku dostawałem zjebkę od programistów za "div w divie, w innych 5-ciu divach" i teraz staram się ograniczyć do minimum zagnieżdżanie kolejnych elementów w sobie... prawdopodobnie chodzi tu bardziej o późniejsze poruszanie się po kodzie i ewentualny kosmos 8 kiedy wyjdą jakieś odstępy albo paddingi nie wiadomo skąd ale najlepiej jakby się wypowiedział jakiś specjalista w tej dziedzinie, a wiem że są na tym forum tacy

co do szybkości wczytywania... nie wiem ile by trzeba było naklepać tych divów w kodzie, żeby dorównać skromnemu obrazkowi png 20 x 20px, także to chyba nie problem

cieszę się, że pomogłem, pozdrawiam Smile

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie