-
Problem z tłem - CSS
Witam,
Mam stronkę w html+css.
Na komputerze wszystko działa jak należy, lecz po wgraniu na serwer - nie wyświetla tła oraz logo :/
http://klipsport.pl/test/www/
Zamieszczam kod CSS:
Kod:
body {
margin: 0px;
padding: 0px;
font-family: Tahoma, Geneva, sans-serif;
background-image: url(../images/tlo3.JPG);
background-repeat: no-repeat;
background-position: center;
}
body {background-attachment:fixed;}
#tresc {
margin: auto;
margin-top: 0px;
margin-bottom:0px;
padding: 0px;
width: 950px;
height: 450px;
position: top center;
background-repeat: no-repeat;
}
#gora {
margin: auto;
margin-top: 0px;
margin-bottom:0px;
padding: 0px;
width: 950px;
height: 150px;
position: top center;
background-repeat: no-repeat;
}
#stopka {
margin: auto;
margin-top: 30px;
margin-bottom:0px;
padding: 0px;
width: 900px;
height: 50px;
position: top center;
background-color: #333333;
background-repeat: no-repeat;
border-radius:20px;
opacity:0.6;
filter:alpha(opacity=60);
}
#logo {
margin: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
width: 350px;
height: 150px;
background-image: url(../images/logo.png);
position: relative;
left: 0px;
}
#logonapis {
margin: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
width: 350px;
height: 150px;
position: relative;
left: 0px;
background-image: url(../images/napis.png);
background-repeat:no-repeat;
color: white;
}
#menu {
margin: auto;
margin-top: 5px;
margin-bottom:0px;
padding: 0px;
width: 900px;
height: 40px;
position: top center;
background-color: #696969;
background-repeat: no-repeat;
border-radius: 15px;
position:right;
}
.gora {
color:white;
}
#tresc2 {
margin: auto;
margin-top: 15px;
margin-bottom:0px;
padding: 0px;
width: 900px;
height: 1000px;
position: top center;
background-color: grey;
background-repeat: no-repeat;
border-radius: 20px;
opacity:0.6;
filter:alpha(opacity=60);
}
.p {
padding: 15px;
color: white;
}
Ścieżki do plików są dobre?
http://klipsport.pl/test/www/images/logo.png
http://klipsport.pl/test/www/images/tlo3.JPG
-
Nie są. Ścieżki do obrazków są relatywne wobec pliku stylu. Np. jeżeli masz index.html, a style trzymasz w katalogu css/, obrazki w katalogu images/, to ścieżka do obrazka to ../images/<obrazek>. Ty masz style w głównym katalogu, a obrazki w katalogu images/. Stąd też ścieżki to images/<obrazek>.
Pozdrawiam
Killavus
-
@up
Fakt - cały czas robiłem względem tego, bo w folderze /css/ mam też te style - a zapomniałem ściezki do styli zmienic w index.html :D
JUŻ DZIAŁA:
http://klipsport.pl/test/www/
@edit
Pojawił się kolejny problem:
http://klipsport.pl/test/www/index.php?id=7
stopka pojawia się nie w tym miejscu co powinna ;/
-
Zamiast dawać dla całego kontenera opacity: 0.6; polecam używać stylu CSS3 a mianowicie: background-color:rgba(200,200,200,0.3);
Opacity zmienia krycie calego kontenera więc i treści - czcionki, obrazki wszystko bedzie przezroczyste. Z kolei background-color:rgba() zmienia tylko tło, więc teksty i obrazki i wszystko wewnatrz bedzie normalnej jakosci.
Problem jest tylko ze starszymi przegladarkami ktore nie obsluguja Css3, ale srać na to, trzeba isc z duchem czasu i dostosowywac strony do nowych standardow.
Dodatkowo od razu zacznij pisać w html5. Zauwazylem ze korzystasz z tagu center, ktory jest juz bardzo stary i nie powinien byc uzywany. Zeby cos wysrodkowac w poziomie stosuj cos takiego <div class="wrapper">Tutaj wszystko w srodku</div> i stylu .wrapper {width:960px;margin-left:auto;margin-right:auto;}
Zamiast wrapper oczywiscie twoja klasa, ale wrapper to taki ogolny standard jako cos co trzyma strone w kupie. Zamiast margin-left i margin-right można użyc skroconej wersji margin:0 auto; lub margin:20px auto; wtedy beda wysrodkowane w poziomie i miec marginesy gorne i dolne na 0 albo 20px;
Jak masz jakies pytania co do html/css wal na PW.