Positionering gaat compleet fout.

Status
Niet open voor verdere reacties.
G

grumbkow

Gebruiker
Lid geworden
20 aug 2007
Berichten
924
Beste mensen.

Ik ben bezig met een HTML pagina en IE/Chrome/Safari etc verpesten mn hele layout!
Nog nooit heb ik dit zo erg meegemaakt en heb dus ook geen idee wat ik er aan moet doen.


Het gaat om de volgende pagina: http://klanten.jeffrey-online.net/elektrischeskateboards/

Ik hoop echt dat hier iemand is die me spoedig kan helpen.

Ik denk trouwens dat het komt door het gebruik van sIFR. aangezien de lettertypes in elke browser een andere grootte hebben.


Met vriendelijke groet,

Jeffrey von Grumbkow
 
Probeer dit eens
Alleen de css veranderd van style css, daarom geef ik alleen deze code mee + de html.
Het had alleen te maken met positionering van je elementen op je vaste achtergrond.

De html
HTML: 
<!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">
	
<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>Elektrische Skateboards - De allernieuwste rage!</title>
	
		<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print" />
		<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
		<script src="sifr.js" type="text/javascript"></script>

		<script type="text/javascript">
			var bumpyroad = {
				src: 'bumpyroad.swf'
			};
			
			sIFR.activate(bumpyroad);
			
			sIFR.replace(bumpyroad, {
				selector: '.sifr_inleiding',
				wmode: 'transparent'
			});
			
			sIFR.replace(bumpyroad, {
				selector: '.sifr_boards',
				wmode: 'transparent'
			});
			
			sIFR.replace(bumpyroad, {
				selector: '.sifr36',
				wmode: 'transparent'
			});
			
			sIFR.replace(bumpyroad, {
				selector: '.sifr_bedrag',
				wmode: 'transparent'
			});
			
			sIFR.replace(bumpyroad, {
				selector: '.sifr_ab',
				wmode: 'transparent'
			});
			
			sIFR.replace(bumpyroad, {
				selector: '.sifr_gereedschap',
				wmode: 'transparent'
			});
	  
		</script>
	</head>
	
	<body>
		<div id="container">
			
		  <div id="inleiding">
			<p class="sifr36">
					Wat zijn elektrische skateboards?
			</p>
		<p class="sifr_inleiding">

					Skateboards met een bijna onzichtbare elektrische motor, dat is de<br />
					nieuwe rage die Nederland in rap tempo verovert.<br />
					De Elektrische Skateboards zijn te bestellen via deze website!
			</p>			
			</div>
            <div id="board_250">
					<p class="sifr_boards">

						250 Watt
                        <br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						- Geschikt voor<br />
						personen tot 70kg<br />

						<br />
						- Eigen gewicht: 35kg<br />
						- Lengte deck: 90cm<br />
					</p>
					<p class="sifr_bedrag">
						225,00
					</p>
				</div>
			<div id="board_600">
				  <p class="sifr_boards">
						600 Watt<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						- Geschikt voor<br />
						personen tot 110kg<br />
						<br />
						- Eigen gewicht: 35kg<br />
						- Lengte deck: 120cm<br />

					</p>
					<p class="sifr_bedrag">
						275,00
					</p>
				</div>
          <div id="board_900">
				  <p class="sifr_boards">
						900 Watt<br />
						<br />
						<br />
						<br />

						<br />
						<br />
						<br />
						- Geschikt voor<br />
						personen tot 110kg<br />
						<br />
						- Eigen gewicht: 35kg<br />

						- Lengte deck: 120cm<br />
			</p>
					<p class="sifr_bedrag">
						325,00
					</p>
				</div>
                <div id="ab">

				<p class="sifr_ab">
					Bij elk model zit een draadloze<br />
					afstandsbediening waarmee je gas<br />
					kunt geven en af kunt remmen.<br />
				</p>
                <p class="sifr_gereedschap"> Bij elk model ontvangt u ook<br />
                  gratis een gereedschapssetje </p>
            </div>
                
			<div id="youtube">
			<object type="application/x-shockwave-flash" style="width:374px; height:306px;" data="http://www.youtube.com/v/67OWA6JYTbA?fs=1&amp;hl=nl_NL&amp;rel=0"><param name="movie" value="http://www.youtube.com/v/67OWA6JYTbA" /></object> 
				
			</div>
                
                
	</div>		
</body>

</html>
De css van de style.css
Code: 
@charset "utf-8";
/* CSS Document */
@media screen 
{
	.sifr_inleiding { font-size: 20px; font-family: Arial; }
	.sifr_boards { font-size: 20px; font-family: Arial; }
	.sifr36 {
	font-size: 36px;
	font-family: Arial;
	text-align: center;
	margin-bottom: 50px;
}
	.sifr_bedrag { font-size: 44px;	font-family: Arial; }
	.sifr_ab { font-size: 16px;	font-family: Arial; }
	.sIFR-active .sifr { visibility: hidden; font-family: Verdana; line-height: 1em; }
}

body, html {
	margin: 0;
	padding: 0;
	background-color: #423d2c;
}

	#container {
	position: relative;
	width: 954px;
	height: 2100px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/background.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
		#inleiding {
	margin-top: 337px;
	margin-left: 94px;
	position: absolute;
	left: 38px;
	top: -20px;
	height: 223px;
	width: 764px;
}
			.sifr_inleiding { margin-top: -34px; margin-left: 68px; }
			#inleiding span {
}
			
		#board_250 {
	position: absolute;
	top: 625px;
	left: 65px;
	height: 400px;
	width: 220px;
}
		#board_600 {
	position: absolute;
	height: 400px;
	width: 220px;
	top: 625px;
	left: 365px;
}
		#board_900 {
	position: absolute;
	width: 220px;
	left: 660px;
	top: 625px;
}
#ab {
	position: absolute;
	left: 85px;
	top: 1209px;
	width: 338px;
	height: 227px;
}

			.sifr_bedrag {
}
			
		.sifr_ab {
	top: 10px;
	float: right;
	width: 250px;
	left: 76px;
	position: absolute;
}
		.sifr_gereedschap {
	position: absolute;
	height: 60px;
	width: 200px;
	left: 0px;
	top: 155px;
}
		
		#youtube {
	position: absolute;
	left: 522px;
	top: 1184px;
}
Je kan ook een voorbeeld zien op http://www.defietser.net/jeffrey/
 
De positionering gaat nu inderdaad een stuk beter, alleen nog steeds in FF, IE en Chrome/safari zijn de groottes van de sIFR teksten heel anders. Enig idee hoe dit is op te lossen?

Tot dusver bedankt.
 
alleen nog steeds in FF, IE en Chrome/safari zijn de groottes van de sIFR teksten heel anders.
Klik om te vergroten...

In welke browser zijn wel goed?
En wat bedoel je met sIFR (scalable Inman Flash Replacement (sIFR)) teksten dat snap ik nu even niet. Wat heeft dat nu te maken met die teksten.
En wat wil je daar mee doen. al de css die ik zie met .sifr zijn gewoon classes
Code: 
.sifr_inleiding { font-size: 20px; font-family: Arial; }
	.sifr_boards { font-size: 20px; font-family: Arial; }
	.sifr36 {
	font-size: 36px;
	font-family: Arial;
	text-align: center;
	margin-bottom: 50px;
}
	.sifr_bedrag { font-size: 44px;	font-family: Arial; }
	.sifr_ab { font-size: 16px;	font-family: Arial; }
	.sIFR-active .sifr { visibility: hidden; font-family: Verdana; line-height: 1em; }
}
waar uw fonts mee worden gestyld.
Als je die aanpast wordt de tekst ook aangepast.
 
defietser zei:
In welke browser zijn wel goed?
En wat bedoel je met sIFR (scalable Inman Flash Replacement (sIFR)) teksten dat snap ik nu even niet. Wat heeft dat nu te maken met die teksten.
En wat wil je daar mee doen. al de css die ik zie met .sifr zijn gewoon classes
Code: 
.sifr_inleiding { font-size: 20px; font-family: Arial; }
	.sifr_boards { font-size: 20px; font-family: Arial; }
	.sifr36 {
	font-size: 36px;
	font-family: Arial;
	text-align: center;
	margin-bottom: 50px;
}
	.sifr_bedrag { font-size: 44px;	font-family: Arial; }
	.sifr_ab { font-size: 16px;	font-family: Arial; }
	.sIFR-active .sifr { visibility: hidden; font-family: Verdana; line-height: 1em; }
}
waar uw fonts mee worden gestyld.
Als je die aanpast wordt de tekst ook aangepast.
Klik om te vergroten...


Uhm, al die teksten zijn ge-sIFR'd om het maar zo te noemen.
Ze hebben die classes zodat het wat makkelijker werkt voor mij zodat ik weet welke css voor sIFR is en wat niet.
Firefox laat alles correct zien Internet explorer maakt de tekst groter en Chrome maakt t VEEL kleiner.

Het ligt naar mijn mening aan sIFR omdat de lettergrootte met sIFR altijd lastig is correct te laten werken en ik dit nog nooit heb gehad alleen nu ik eens met sIFR werk
 
Ik heb dat bekeken in verschillende browsers:
IE8
Firefox
Sea Monkey
Chrome
Maxthon2
Opera
en nog enkele
maar nergens zie ik een verschil in lettergrote die zien er in elke browser hetzelfde uit bij mij.
 
Ha, X-post!
Was ook bezig met screenshots. :d
Dit zijn mijn resultaten onder WinXP op 1024x768px resolutie:
Browsers: Firefox3.5.1, IE7 en Chrome getest.
Maar om goed in de gaten te houden: per browser zijn er 4 (!) versies mogelijk: de Jeffrey-pagina (http://klanten.jeffrey-online.net/elektrischeskateboards/) in de varianten met en zonder javascript, en de Fietser-pagina (http://www.defietser.net/jeffrey/), ook in de varianten javascript aan/uit.

Even vergeleken: de door Jeffrey ingeleverde screenshots zijn hiermee in overeenstemming: iedereen doet het anders... :shocked:

En het blijkt ook dat in de versie van de Fietser nooit de sIFR tevoorschijn komt! (en dan blijven de Arial-lettergroottes uiteraard altijd gelijk)

Rara, waar gaat het mis, en waarom? Ik ben er nog niet achter. ;)

[edit]Voor de goede orde: de letters in de kop zijn géén sIFR, maar zitten in een hardcopy image. Daarom is de kop bij de Fietser wel in het sIFR-lettertype te zien; de rest niet.[/edit]
 
Laatst bewerkt:
Hoi grumbkow,
Uit m'n favorietenbak heb onder de rommel nog deze pagina met fraaie alternatieven voor sIFR vandaan gevist:
Ik ben er zelf nooit aan toe gekomen om ze allemaal uit te proberen, maar het schijnt dat bv. Cufon ook best aardig werkt.
Dus als je er met sIFR niet uit kunt komen, dan ligt er nog een hele wereld aan testen voor je open. ;)

Met vriendelijke groet,
CSShunter

PS
Nog een heel andere: ik zie dat je achtergrondfiguur ... 1493 KB groot is. Ik dacht eerst dat (ook bij snelle verbinding) de pagina zo langzaam verscheen vanwege de sIFR; maar het is gewoon die enorme plaat! Wow, 1,5MB!
Als je voor het grote werk een zich herhalend achtergrondpatroontje gebruikt, en de andere dingen er los over heen zet, kom je waarschijnlijk een heel stuk lager uit.
Als een beginnetje met 1 achtergrond-figuur en 1 bg voor de kop kom ik uit op 80kB (wat toch al erg aan de grote kant is voor een webpagina). Maar het is 5% van de 1,5MB, en dat is toch 95% winst.
 
csshunter zei:
Ha, X-post!
Was ook bezig met screenshots. :d
Dit zijn mijn resultaten onder WinXP op 1024x768px resolutie:
Browsers: Firefox3.5.1, IE7 en Chrome getest.
Maar om goed in de gaten te houden: per browser zijn er 4 (!) versies mogelijk: de Jeffrey-pagina (http://klanten.jeffrey-online.net/elektrischeskateboards/) in de varianten met en zonder javascript, en de Fietser-pagina (http://www.defietser.net/jeffrey/), ook in de varianten javascript aan/uit.

Even vergeleken: de door Jeffrey ingeleverde screenshots zijn hiermee in overeenstemming: iedereen doet het anders... :shocked:

En het blijkt ook dat in de versie van de Fietser nooit de sIFR tevoorschijn komt! (en dan blijven de Arial-lettergroottes uiteraard altijd gelijk)

Rara, waar gaat het mis, en waarom? Ik ben er nog niet achter. ;)

[edit]Voor de goede orde: de letters in de kop zijn géén sIFR, maar zitten in een hardcopy image. Daarom is de kop bij de Fietser wel in het sIFR-lettertype te zien; de rest niet.[/edit]
Klik om te vergroten...


Dat hij bij mij met arial ook verkeerde posities geeft komt alsnog door sIFR ik kan t niet uitleggen want daarvoor snap ik te weinig van sifr maar ik weet wel dat hij alsnog de positionering etc van sifr gebruikt ookal is de javascript uitgeschakeld rot systeem. Maargoed Cufon etc zijn ook niet logisch want dan kan ik net zo goed de hele website als afbeelding online zetten.

Zucht ik moet meer gaan bijleren.
 
csshunter zei:
Hoi grumbkow,
Uit m'n favorietenbak heb onder de rommel nog deze pagina met fraaie alternatieven voor sIFR vandaan gevist:
Ik ben er zelf nooit aan toe gekomen om ze allemaal uit te proberen, maar het schijnt dat bv. Cufon ook best aardig werkt.
Dus als je er met sIFR niet uit kunt komen, dan ligt er nog een hele wereld aan testen voor je open. ;)

Met vriendelijke groet,
CSShunter

PS
Nog een heel andere: ik zie dat je achtergrondfiguur ... 1493 KB groot is. Ik dacht eerst dat (ook bij snelle verbinding) de pagina zo langzaam verscheen vanwege de sIFR; maar het is gewoon die enorme plaat! Wow, 1,5MB!
Als je voor het grote werk een zich herhalend achtergrondpatroontje gebruikt, en de andere dingen er los over heen zet, kom je waarschijnlijk een heel stuk lager uit.
Als een beginnetje met 1 achtergrond-figuur en 1 bg voor de kop kom ik uit op 80kB (wat toch al erg aan de grote kant is voor een webpagina). Maar het is 5% van de 1,5MB, en dat is toch 95% winst.
Klik om te vergroten...

Weet ik allemaal, ging ook nog allemaal veranderd worden die kennis is geen probleem. Alleen het is sIFR wat me nu de das om doet en tot dat opgelost is ga ik verder niets aanpassen.

Denk sowieso dat ik het maar gewoon links laat liggen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan