+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Problemy z wyświetlaniem,wyśrodkowanie (/thread-problemy-z-wy%C5%9Bwietlaniem-wy%C5%9Brodkowanie)
Problemy z wyświetlaniem,wyśrodkowanie - Emkacf - 30-03-2009
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>RE: Problemy z wyświetlaniem,wyśrodkowanie - Gruby767 - 30-03-2009
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.
RE: Problemy z wyświetlaniem,wyśrodkowanie - Emkacf - 30-03-2009
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ą.
RE: Problemy z wyświetlaniem,wyśrodkowanie - Labsta.com - 30-03-2009
Spróbuj:
Kod:
background-position: 0% 50%;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
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.
RE: Problemy z wyświetlaniem,wyśrodkowanie - Emkacf - 30-03-2009
No więc w IE wygląda ładnie a w FF jest jeszcze gorzej niż było
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