Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów › Technologie internetowe - tworzenie stron WWW › Początkujący webmaster v
Problemy z wyświetlaniem,wyśrodkowanie

Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Tryb drzewa
Problemy z wyświetlaniem,wyśrodkowanie
Emkacf Offline
Junior Member
**
Liczba postów: 5
Liczba wątków: 2
Dołączył: 30-03-2009
Reputacja: 0
#1
30-03-2009, 00:42
Witam. Moim problemem jest różna interpretacja wyświetlania poszczególnych obrazków w przeglądarkach...
Główny obrazek tła mam na center, a resztę mam dopasowaną "ręcznie". Czy istnieje prostszy sposób, dzięki któremu każda przeglądarka będzie tak samo interpretowała położenie obrazków.

Kod:
body {
    
    background-color: #7d964b;
    background-image: url(images/tlo.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    width: 734px;
    height: 742px;
    margin: 0;
    padding: 0;
    border: 0px;
    
    }



#logo{
    background: url(images/logo.png) no-repeat;
    background-attachment: absolute;
    background-position: center;
    position: absolute;
    width: 734px;
    height: 207px;
    left: 263px;
    bottom: 575px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 2;
}



#home {
    background-image: url(images/home.png);
    background-repeat: no-repeat;
    width: 75px;
    height: 35px;
    position: fixed;
    left: 270px;
    top: 74px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 4;
}

#home:hover {
    background-image: url(images/homeh.png);
    background-repeat: no-repeat;
    width: 75px;
    height: 35px;
    position: fixed;
    left: 270px;
    top: 74px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 4;
}

#onas {
    background-image: url(images/onas.png);
    background-repeat: no-repeat;
    width: 77px;
    height: 32px;
    position: fixed;
    left: 270px;
    top: 240px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 4;
}

#onas:hover {
    background-image: url(images/onash.png);
    background-repeat: no-repeat;
    width: 77px;
    height: 32px;
    position: fixed;
    left: 270px;
    top: 240px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 4;
}

#oferta {
    background-image: url(images/oferta.png);
    background-repeat: no-repeat;
    width: 106px;
    height: 32px;
    position: fixed;
    left: 445px;
    top: 240px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 4;
}

#oferta:hover {
    background-image: url(images/ofertah.png);
    background-repeat: no-repeat;
    width: 106px;
    height: 32px;
    position: fixed;
    left: 445px;
    top: 240px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 34;
}

#galeria {
    background-image: url(images/galeria.png);
    background-repeat: no-repeat;
    width: 122px;
    height: 28px;
    position: fixed;
    left: 640px;
    top: 240px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 4;
}

#galeria:hover {
    background-image: url(images/galeriah.png);
    background-repeat: no-repeat;
    width: 122px;
    height: 28px;
    position: fixed;
    left: 640px;
    top: 242px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 4;
}

#kontakt {
    background-image: url(images/kontakt.png);
    background-repeat: no-repeat;
    width: 133px;
    height: 35px;
    position: fixed;
    left: 855px;
    top: 236px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 4;
}

#kontakt:hover {
    background-image: url(images/kontakth.png);
    background-repeat: no-repeat;
    width: 133px;
    height: 35px;
    position: fixed;
    left: 855px;
    top: 236px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 4;
}

I HTML:
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//PL">
<html lang="pl">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2"/>
   <title>Hellerówka - piękne ogrody w Bydgoszczy zapraszaj±</title>
    <meta name="Description" content="Piękne ogrody w Bydgoszczy, które zachwycą cie swoim pięknem.Projektujemy i doradzamy." />
    <meta name="Keywords" content="ogrody projektowanie,ogrody Bydgoszcz,projektowanie ogrodów,projektowanie ogrodu,Bożena Heller,Krzysztof Heller,ogrodnictwo,piękne ogrody,byliny,zioła,krzewy" />
    <meta name="Author" content="Emilia Heller"/>
    <link rel="shortcut icon" href="http://www.hellerowka.pl/images/favicon.ico" />
    <link rel="stylesheet" href="style.css" type="text/css" />




</head>
<body>


    <div id="logo">
    </div>


    <div id="home">
    </div>

    <div id="onas">
    </div>

    <div id="oferta">
    </div>

    <div id="galeria">
    </div>

    <div id="kontakt">
    </div>


</body>
</html>
Szukaj
Odpowiedz
Gruby767 Offline
webmaster
***
Liczba postów: 54
Liczba wątków: 1
Dołączył: 28-02-2009
Reputacja: 0
#2
30-03-2009, 03:16
są takie sposoby owszem, ale zapewne inaczej wyświetla tylko internet explorer albo na odwrót ie wyświetla dobrze a inne źle. Pozycjonuj pod przeglądarki takie jak firefox opera itd.
A co do tematu sprubój temu co wypozycjonowałeś center dać
position:relative;
Pozdrawiam.
Szukaj
Odpowiedz
Emkacf Offline
Junior Member
**
Liczba postów: 5
Liczba wątków: 2
Dołączył: 30-03-2009
Reputacja: 0
#3
30-03-2009, 14:03
Wtedy w ogóle nie widać loga...
Właśnie w tym rzecz, że ta strona jest dla ogrodnictwa mojej babci i po prostu ona powinna chodzić dobrze w każdej przeglądarce ale zawsze jak próbuję wyśrodkowywać to one różnie interpretują.
Szukaj
Odpowiedz
Labsta.com Offline
Super Moderator
******
Liczba postów: 682
Liczba wątków: 9
Dołączył: 03-03-2009
Reputacja: 18
#4
30-03-2009, 19:40
Spróbuj:
Kod:
background-position: 0% 50%;
albo odwrotnie nie pamiętam teraz.

Dodatkowo w części head dodaj:
Kod:
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Ten skrypt niweluje część probelemów z IdiotExplorerem Wink

A na przyszłość przygotuj się na to, że IE jest przeglądarką specjalnej troski i nie ma jednego prostego sposobu na "unormalnienie" wyświetlania. Pozostają testy, testy i jeszcze raz testy i poprawki.

Pozdrawiam
p.s. Dodatkowo jak Twoje png są bez tła to masz kolejny problem.
Strona WWW Szukaj
Odpowiedz
Emkacf Offline
Junior Member
**
Liczba postów: 5
Liczba wątków: 2
Dołączył: 30-03-2009
Reputacja: 0
#5
30-03-2009, 21:51
No więc w IE wygląda ładnie a w FF jest jeszcze gorzej niż było Sad
Kod:
body {
    
    background-color: #7d964b;
    background-image: url(images/tlo.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 734px;
    height: 742px;
    margin: 0;
    padding: 0;
    border: 0px;
    
    }



#logo{
    background: url(images/logo.png) no-repeat;
    background-position: 0% 50%;
    position: fixed;
    width: 734px;
    height: 207px;
    left: 263px;
    bottom: 575px;
    margin: 0;
    padding: 0;
    border: 0px;
    z-index: 2;
}

jak daję przy #logo position: relative; to w ogóle się nie wyświetla
Szukaj
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
Toungue Pomagamy rozwiązywać problemy. Kamis086 0 1,432 30-12-2018, 23:28
Ostatni post: Kamis086
  Problemy z rotatorem banerów marian65 1 1,870 24-10-2018, 20:05
Ostatni post: Marcin
  [html][css]wyśrodkowanie elementu i rozciągniecie tła (bloku) baz 1 2,484 07-12-2012, 03:11
Ostatni post: andrzejhi
  Wyśrodkowanie poziome i pionowe camilost 4 3,171 07-10-2012, 05:55
Ostatni post: camilost
  mój pierwszy blog - problemy gumis375 1 2,403 06-09-2012, 04:42
Ostatni post: Kartofelek

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele
SeoHost.pl