Skocz do zawartości
jensej

różne przeglądarki - różne położenie.

Przez jensej, w xHTML / CSS / Javascript

Polecane posty

jensej    2

jensej
Napisano

Witam,

Aktualnie bawie się kodowaniem stron pod html5 css3. Mój problem polega na tym że jeśli zakoduję stronę pod swoją przeglądarkę (chyba, że chodzi o wielkość ekranu), to wszystko wygląda cacy, jednak sprawa się komplikuje, jeśli ktoś inny odwiedzi stronę. Elementy przesuwają się o pixele w lewo czy prawo, cała strona traci jakikolwiek wygląd.

Może zna ktoś odpowiednie rozwiązanie aby się z tym uporać?

Pozdrawiam i liczę na wskazówki.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gość mpm1122   

Gość mpm1122
Napisano

Niestety, ale skończyły mi się impulsy w mojej kuli :/ Proponuję użyć Diva, a najlepiej jak dasz kod, wtedy będzie łatwiej :)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

jensej    2

jensej
Napisano (edytowany)

kto jest tylko do nauki.

/*
CSS file created with:Instantblueprint - Create a web project framework in seconds.
http://instantblueprint.com
Project: aint got no style
File: css/style.css
Last edited: August 5, 2013, 2:42 pm
*/
@font-face {
    font-family: 'square721exeubold';
    src: url('../czcionki/square721exeu_bold-webfont.eot');
    src: url('../czcionki/square721exeu_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../czcionki/square721exeu_bold-webfont.woff') format('woff'),
         url('../czcionki/square721exeu_bold-webfont.ttf') format('truetype'),
         url('../czcionki/square721exeu_bold-webfont.svg#square721exeubold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'arialbold';
    src: url('../czcionki/arial_bold-webfont.eot');
    src: url('../czcionki/arial_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../czcionki/arial_bold-webfont.woff') format('woff'),
         url('../czcionki/arial_bold-webfont.ttf') format('truetype'),
         url('../czcionki/arial_bold-webfont.svg#arialbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*  Main  */
body {
 background:black url('../images/tlo.png') no-repeat;
 height: 1800px;
 color: white;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
.clear {
 clear: both;
}

#strona {
 width: 960px;
 margin: 0 auto;
}
/* =logo
----------------------------------- */
#logo {
 background: url('../images/logo.png') center no-repeat;
 width: 400px;
 height: 66px;
 display: block;
 outline: none;
 margin-top: 40px;
}

#logo:hover {
 opacity: 0.7;
 filter: alpha(opacity=80); /* dotyczy tylko IE8 i wcześniej tj. IE 7 */
}
/* =menu
----------------------------------- */
#menu {
 width: 1100px;
 height: 40px;
 color:white;
 margin-top: 47px;
 float: left;
}

#menu ul {
 list-style: none;
 text-shadow: 3px 3px 3px black;
 

}
#menu ul li{
 margin-left: 40px;
 float: left;
}
#menu ul li.ss{
 margin-left: 45px;
}
#menu ul li.kontakt{
 margin-left: 40px;
}
#menu ul li.promocje{
 margin-left: 55px;
}
#menu ul li.zamow{
 margin-left: 55px;
}
#menu ul li.cennik{
 margin-left: 45px;
}

#menu ul li.strona:hover{
 opacity: 0.7;
}
#menu ul li.ss:hover{
 opacity: 0.7;
}
#menu ul li.kontakt:hover{
 opacity: 0.7;
}
#menu ul li.promocje:hover{
 opacity: 0.7;
}
#menu ul li.zamow:hover{
 opacity: 0.7;
}
#menu ul li.cennik:hover{
 opacity: 0.7;
}

#menu ul li a{
 text-decoration: none;
 color: white;
}
#menu ul li a:hover{
 
 color: yellow;
}
/* =gwarancja 
----------------------------------- */

#jakosc {
 width: 420px;
 height: 90px;
 margin: 90px 400px;
 font-size: 16px;
}
#header{
 font-family: 'square721exeubold';
 font-size: 20px;
 color: white;
 margin-bottom: 20px;
}
#button{
 background: url('../images/wiecej.png') no-repeat;
 width: 121px;
 height: 48px;
 margin-left: 250px;
}

#button:hover {
 opacity: 0.7;
 filter: alpha(opacity=80); /* dotyczy tylko IE8 i wcześniej tj. IE 7 */
}
/* =newsy
----------------------------------- */
#news{

 width: 680px;
 height: 248px;
 margin-top: 220px;
 float: left;
}

#news-head {
 font-family: 'arialbold';
 font-size: 16px;
 color: white;
 margin-bottom: 10px;
}
#news-tekst {
 margin-bottom: 20px;

}
/* =logowanie
----------------------------------- */
#logowanie {
 width: 226px;
 height: 120px;
 float: left;
 margin-top: 160px;
 margin-left: 39px;
}
#rejestracja {
 background: url('../images/rej.png') no-repeat;
 width: 226px;
 height: 56px;
 display: block;
}
#log {
 background: url('../images/log.png') no-repeat;
 width: 226px;
 height: 57px;
 margin-top: 2px;
 display: block;
}
#rejestracja:hover {
 opacity: 0.7;
}
#log:hover {
  opacity: 0.7;
}
/* =platnosci
----------------------------------- */
#platnosci {
 width: 650px;
 height: 110px;
 margin-top: 165px;
 
}

#pp {
 background: url('../images/pp.png') no-repeat;
 width: 244px;
 height: 112px;
  float: left;
}
#dot {
 background: url('../images/dot.png') no-repeat;
 width: 239px;
 height: 112px;
 float: left;
 margin-top: 6px;
}
#sms {
 background: url('../images/sms.png') no-repeat;
 width: 145px;
 height: 112px;
 float: left;
}
#pp:hover {
opacity: 0.7;
}
#dot:hover  {
opacity: 0.7;
}
#sms:hover  {
opacity: 0.7;
}
/* =statystyki
----------------------------------- */

#statystyki-lewa {
 width: 245px;
 height: 80px;
 margin-top: 45px;
 margin-left: 60px;
 float: left;
}
#statystyki-prawa {
 width: 245px;
 height: 80px;
 margin-top: 45px;
 margin-left: 130px;
 float: left;
 
}
#gracze-online{
padding-left: 120px;
padding-top: 2px;
}
#serwery-online{
padding-left: 150px;
padding-top: 8px;
}
#users-online{
padding-left: 180px;
padding-top: 8px;
}
#zarej{
padding-left: 165px;
padding-top: 8px;
}

#goscie{
padding-left: 70px;
padding-top: 2px;
}
#serwerow{
padding-left: 10px;
padding-top: 7px;
}
#istnienie{
padding-left: 40px;
padding-top: 8px;
}
#sponsor{
padding-left: 45px;
padding-top: 8px;
}
/* =sponsorki
----------------------------------- */

#banerki{
width: 750px;
height: 60px;
margin-top: 120px;

}
#pro{
background: url('../images/sponsor.png') no-repeat;
width: 296px;
height: 60px;
float: left;
}








<!DOCTYPE HTML>
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
  <title>lay</title>

  <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen">
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
	<div id="strona">
			<a href="#"><div id="logo"></div>
		
		<div id="menu">
			<ul>
				<li class="strona"><a href="#">STRONA GŁÓWNA</a></li>
				<li class="zamow"><a href="#">ZAMÓW SERWER</a></li>
				<li class="cennik"><a href="#">CENNIK GIER</a></li>
				<li class="promocje"><a href="#">PROMOCJE</a></li>
				<li class="ss"><a href="#">SERWERY SPONSOROWANE</a></li>
				<li class="kontakt"><a href="#">KONTAKT</a></li>
			</ul>
		
		</div>
			<div class="clear"></div>
		<div id="jakosc">
			<div id="header">GWARANCJA </br>Jakosci</div>
		Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker	<a href="#"><div id="button"></div></a>
		</div>
		<div id="news">
			<div id="news-head">
			Drobny problem naprawiony!
			</div>
			<div id="news-tekst">
			Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</div>
			<div id="news-head">
			Drobny problem naprawiony!
			</div>
			<div id="news-tekst">
			Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker.
			</div>	
				<div class="clear"></div>
		</div>
		
		<div id="logowanie">
			<div id="rejestracja">
					<a href="#" id="rejestracja"></a>
			</div>
			<div id="log">
					<a href="#" id="log"></a>
			</div>
		</div>
			<div class="clear"></div>
		<div id="platnosci">
			<div id="pp">	<a href="#" id="pp"></a>	</div>
						<a href="#"><div id="dot"></div>	</a>	
			<div id="sms">	<a href="#" id="sms"></a>	</div>
		
		</div>
			<div class="clear"></div>
		<div id="statystyki-lewa">
			<div id="gracze-online">123</div>
			<div id="serwery-online">123</div>
			<div id="users-online">123</div>
			<div id="zarej">123</div>
			
		</div>
		<div id="statystyki-prawa">
			<div id="goscie">123</div>
			<div id="serwerow">123</div>
			<div id="istnienie">123</div>
			<div id="sponsor">123</div>
			
		</div>
		<div class="clear"></div>
		<div id="banerki">
			<div id="pro"></div><div id="pro"></div>
		</div>
	</div>
</body>
</html>
Edytowano przez jensej (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

robson345    53

robson345
Napisano (edytowany)

 

#menu {

width: 1100px;

 

Zobacz jak zachowa się jak dasz width: 100% lub width: auto.

 

A tak w ogóle to na co tyle tych diw-ów nawstawiałes w html? :blink: Wystarczy wszystko zapakować w jeden div z klasą i reszte na tej podstawie opisać w css. Zresztą w twoim przypadku obejdzie się bez żadengo diva wystarczy jak dla <ul> przypiszesz id i klase.

Edytowano przez robson345 (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

jensej    2

jensej
Napisano 
#strona {
width: 960px;
margin: 0 auto;
}

Czy to możliwe że takie rozwiązanie tj. 0 auto; może powodować ten błąd?

 

 

 

 

Pytanie 2//.

Czy używanie <a href="#"><div id="blabla"> </div></a>

jest poprawne?

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

PapaSmerf    497

PapaSmerf
Napisano

2. Nie.

Właśnie, że tak (HTML5):

Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain flow content.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

jensej    2

jensej
Napisano

Może mi ktoś jeszcze coś doradzić odnośnie IE?

Bo na większości przeglądarek wszystko działa dobrze, ale na IE jest kilkunasto px przesunięcie.

Pozdrawiam

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

cyberek    6

cyberek
Napisano

IE od wersji 10 dopiero jako/tako radzi sobie z html5/css3, nic nie poradzisz - trzba pisać bardziej prosty kod i tyle :(

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Przejdź do listy tematów xHTML / CSS / Javascript
×