login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Image plaatsen (Opgelost)

Offline radiofreak - 26/04/2010 17:28
Avatar van radiofreakNieuw lid Hey sitemasters!

Nog eens een vraagje, in mijn header wil ik een afbeelding op een bepaalde plaats hebben. Hij zou op elke computer met elke browser op een exacte plaats moeten komen. Ook moet de afbeelding een link krijgen. Momenteel heb ik deze code gebruikt.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#afbeelding {
  2. position : static;
  3. margin-top : 15px;
  4. margin-left : 350px;

Hier op mijn computer ziet de website eruit zoals het moet, maar op een andere computer verschijnt de afbeelding volledig ergens anders.

Iemand een idee?

Alvast bedankt!  

24 antwoorden

Gesponsorde links
Offline WouterJ - 26/04/2010 17:51
Avatar van WouterJ HTML gevorderde Probeer het eens met position: absolute;. In jouw geval wordt het dan dit:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #afbeelding {
  2. position: absolute;
  3. left: 350 px;
  4. top: 15px;
  5. }
Offline TotempaaltJ - 26/04/2010 19:16
Avatar van TotempaaltJ PHP interesse @Waldio: zet wel px direct achter 350.
Offline Martijn - 26/04/2010 19:18
Avatar van Martijn Crew PHP verder is div#afbeelding slechter dan #afbeelding. Bij #afbeelding zoekt ie naar een id met die waarde, als je er div voorzet gaat ie ook extra kijken of het element met dat id ook echt een div is.
Offline radiofreak - 26/04/2010 19:21
Avatar van radiofreak Nieuw lid het de CSS-code toegpast maar nogaltijd hetzelfde probleem.
Offline WouterJ - 26/04/2010 19:24
Avatar van WouterJ HTML gevorderde
Martijn schreef:
verder is div#afbeelding slechter dan #afbeelding. Bij #afbeelding zoekt ie naar een id met die waarde, als je er div voorzet gaat ie ook extra kijken of het element met dat id ook echt een div is.
Hier heb ik nog nooit van gehoord 
TotempaaltJ schreef:
@Waldio: zet wel px direct achter 350.

Oeps! Foutje 
radiofreak schreef:
het de CSS-code toegpast maar nogaltijd hetzelfde probleem.

Laat eens een online voorbeeld zien. Dan kan ik zien wat er fout gaat. En in welk browser gaat het fout? Geeft eens wat meer informatie.
Offline radiofreak - 26/04/2010 19:41 (laatste wijziging 26/04/2010 19:42)
Avatar van radiofreak Nieuw lid Ik heb alles getest op mijn computer zowel met Safari als Internet Explorer en hier ziet er alles goed uit. Maar dan heb ik de site eens geopend op een andere computer hier in huis en die geeft alles anders aan.

Computer 1 (juist): Internet Explorer 8, resolutie: 1680 x 1050
Computer 2 (fout): Internet Explorer 8, resolutie: 1368 x 768

Website:
http://www.apropeau.net/muzzic/index.html
Offline WouterJ - 26/04/2010 20:06 (laatste wijziging 26/04/2010 20:08)
Avatar van WouterJ HTML gevorderde
radiofreak schreef:
Computer 1 (juist): Internet Explorer 8, resolutie: 1680 x 1050
Computer 2 (fout): Internet Explorer 8, resolutie: 1368 x 768

Dat maak alles een stuk duidelijker! Op de manier hoe jij het nu doet geef je een breedte in px weer vanaf de zijkant en bovenkant. En als de schermresolutie dan anders is worden de coördinaten van het plaatje authomatisch anders.

Welk plaatje wil je eigenlijk beter positioneren?
Offline TotempaaltJ - 26/04/2010 20:09
Avatar van TotempaaltJ PHP interesse
Martijn schreef:
verder is div#afbeelding slechter dan #afbeelding. Bij #afbeelding zoekt ie naar een id met die waarde, als je er div voorzet gaat ie ook extra kijken of het element met dat id ook echt een div is.
Ja. Inderdaad. En dus? Het maakt echt niks uit?
Offline Martijn - 26/04/2010 20:13
Avatar van Martijn Crew PHP Nee ik vond het gewoon leuk om onzin neer te zetten?

@radiofreak, ik heb je source niet echt bekeken, maar als je er een zogenaamde container div omheen zet, en die margin: 0 auto; geeft, staat alles gecentreerd. Vervolgens word alles bekeken vanaf die div ipv de breedte van het scherm 
Offline radiofreak - 27/04/2010 08:47 (laatste wijziging 27/04/2010 17:06)
Avatar van radiofreak Nieuw lid De afbeelding "Tune In" zou beter gepositioneerd moeten worden en ook die iframe onder "Now Playing". Kan iemand mij een juiste versie bezorgen of dingen die ik moet aanpassen?

Thx! 
Offline WouterJ - 27/04/2010 17:14
Avatar van WouterJ HTML gevorderde Waar moeten die dan komen te staan. Ik wil je best helpen. Geef een screenprint en ik maak deze code wel goed voor elk browser en scherm. 
Offline radiofreak - 27/04/2010 17:27
Avatar van radiofreak Nieuw lid Alvast bedankt voor de hulp.
Hier is een screenshot van de Tune In afbeelding en de iframe onder Now Playing.

http://www.apropeau.net/muzzic/header.jpg
Offline WouterJ - 27/04/2010 18:25
Avatar van WouterJ HTML gevorderde Ik heb er nu geen tijd voor, maar ik ga vanavond/morgen wel wat proberen.
Offline radiofreak - 27/04/2010 19:32
Avatar van radiofreak Nieuw lid Geen probleem, zal ook pas kunnen kijken binnen 2 dagen...
Offline WouterJ - 30/04/2010 09:00
Avatar van WouterJ HTML gevorderde Het is me gelukt.

Ik heb gewoon wat gespeeld met de margin, bij tune-in een negatieve. Bij nowplaying een positieve:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #nowplaying {
  2. margin-left: 600px;
  3. margin-top: 50px;
  4. }
  5. .tunein {
  6. background: url('../images/tunein.png') no-repeat;
  7. width: 187px;
  8. height: 80px;
  9. margin-left: -200px;
  10. }
Offline radiofreak - 30/04/2010 20:35
Avatar van radiofreak Nieuw lid Heb de code aangepast... Kijk maar eens in de bron en CSS..
In elk geval al bedankt voor de moeite!
Offline WouterJ - 30/04/2010 22:44
Avatar van WouterJ HTML gevorderde En hij klopt nu toch? Dan kan je dit topic opgelost maken.
Offline radiofreak - 01/05/2010 08:35
Avatar van radiofreak Nieuw lid Nee, op de 3 computers hier werkt het nog altijd niet.
Screenshot:
http://apropeau.net/muzzic/screenshot.jpg
Offline WouterJ - 01/05/2010 09:36
Avatar van WouterJ HTML gevorderde Welk browser is dat?
Offline kiwi - 01/05/2010 12:00 (laatste wijziging 01/05/2010 12:01)
Avatar van kiwi Nieuw lid euhm ik heb effe gekenen naar dit onderwerp,
en zelf effe iets geprobeerd:

is dit wat je wilt? Muzzic

heb gewoon het header gedeelte overgenomen, de rest niet ;D
Offline WouterJ - 01/05/2010 12:10
Avatar van WouterJ HTML gevorderde @kiwi, dat had ik ook al gedaan. Maar dat werkt niet op zijn computers.  
Offline kiwi - 01/05/2010 12:16
Avatar van kiwi Nieuw lid
Waldio schreef:
@kiwi, dat had ik ook al gedaan. Maar dat werkt niet op zijn computers.  


ik heb hier 4 browsers op 2 pc's met 3 verschillende schermen in totaal, en geen enkel heeft een probleem. Dus ik zou het enorm raar vinden.

mocht het aan toch raar doen, zou het dan mss aan de server liggen? dat niet alle functies goed geinstalleerd zijn?
Offline radiofreak - 01/05/2010 13:25 (laatste wijziging 01/05/2010 15:51)
Avatar van radiofreak Nieuw lid Als ik nu http://apropeau.net/muzzic/index.html bekijk, dan zie ik dat "Tune In" te veel naar links staat.

Zo is het nu:

http://www.apropeau.net/muzzic/screenshot.jpg

En zo moet het komen:

http://www.apropeau.net/muzzic/header.jpg

@Kiwi : Jouw versie is volledig inorde op alle schermen. Kan je de verbeterde index.html (met alle inhoud) en css doorsturen? Heb het zelf al geprobeerd maar het lukt niet..
Offline kiwi - 01/05/2010 18:33
Avatar van kiwi Nieuw lid de index.php:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="box">
  2. 	<div id="header">
  3. 		<img id="tune-in" src="http://www.apropeau.net/muzzic/images/tunein.png" />
  4. 	</div>	
  5. 	<div id="menu">
  6. 		<div class="menulist">
  7. 			<ul>
  8. 				<li class="home"><a href="index.html"><span>Home</span></a></li>
  9. 				<li class="tussenstuk"></li>
  10. 				<li class="nieuws"><a href="nieuws.html"><span>Nieuws</span></a></li>
  11. 				<li class="tussenstuk"></li>
  12. 				<li class="programma"><a href="programma.html"><span>Programma</span></a></li>
  13. 				<li class="tussenstuk"></li>
  14. 				<li class="interactief"><a href="interactief.html"><span>Interactief</span></a></li>
  15. 				<li class="tussenstuk"></li>
  16. 				<li class="contact"><a href="contact.html"><span>Contact</span></a></li>
  17. 			</ul>
  18. 		</div>
  19. 	</div>	
  20. </div>


css:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. @CHARSET "ISO-8859-1";
  2. html {
  3. 	padding: 0px;
  4. 	margin: 0px;
  5. }
  6. body {
  7. 	background-color: #e1ddd9;
  8. 	font-size: 13px;
  9. 	color: #564b47;
  10. 	text-align: center;
  11. 	margin: 0px;
  12. 	padding: 0px;
  13. 	background-image : url('http://www.apropeau.net/muzzic/backgroundspeaker.jpg');
  14. }
  15. #box {
  16. 	width: 1000px;
  17. 	margin: 0px auto;
  18. 	padding: 0px;
  19. 	text-align: left;
  20. }
  21. #header {
  22. 	height: 117px;
  23. 	width: 1024px;
  24. 	padding: 0px;
  25. 	float: left;
  26. 	background-image : url('http://www.apropeau.net/muzzic/images/header.png');
  27. }
  28. #tune-in { 
  29. 	margin-left: 375px;
  30. 	margin-top: 15px;
  31. }
  32. ul {
  33. 	margin : 0px;
  34. }
  35. li {
  36. 	float: left;
  37. 	width: 90px;
  38. 	list-style: none;
  39. }
  40. li a{
  41. 	display: block;
  42. 	width: 100px;
  43. 	height: 50px;
  44. }
  45. span{
  46. 	display: none;
  47. }
  48. #menu {
  49. 	background-image : url('http://www.apropeau.net/muzzic/images/menu.png');
  50. 	width : 1024px;
  51. 	height : 50px;
  52. 	float : left;
  53. 	vertical-align : top;
  54. 	text-align : center;
  55. }
  56. .menulist {
  57. 	width:900px;
  58. 	margin-left:auto;
  59. 	margin-right:auto;
  60. }
  61. .home {
  62. 	background: url('http://www.apropeau.net/muzzic/images/home.png') no-repeat;
  63. 	width: 66px;
  64. 	height: 49px;
  65. }
  66. .nieuws {
  67. 	background: url('http://www.apropeau.net/muzzic/images/nieuws.png') no-repeat;
  68. 	width: 80px;
  69. 	height: 49px;
  70. }
  71. .programma {
  72. 	background: url('http://www.apropeau.net/muzzic/images/programma.png') no-repeat;
  73. 	width: 122px;
  74. 	height: 49px;
  75. }
  76.  
  77. .interactief {
  78. 	background: url('http://www.apropeau.net/muzzic/images/interactief.png') no-repeat;
  79. 	width: 123px;
  80. 	height: 49px;
  81. }
  82. .contact {
  83. 	background: url('http://www.apropeau.net/muzzic/images/contact.png') no-repeat;
  84. 	width: 89px;
  85. 	height: 49px;
  86. }
  87. .home:hover {
  88. 	background: url('http://www.apropeau.net/muzzic/images/home_over.png') no-repeat;
  89. 	width: 66px;
  90. 	height: 49px;
  91. }
  92. .nieuws:hover {
  93. 	background: url('http://www.apropeau.net/muzzic/images/nieuws_over.png') no-repeat;
  94. 	width: 80px;
  95. 	height: 49px;
  96. }
  97. .programma:hover {
  98. 	background: url('http://www.apropeau.net/muzzic/images/programma_over.png') no-repeat;
  99. 	width: 122px;
  100. 	height: 49px;
  101. }
  102. .interactief:hover {
  103. 	background: url('http://www.apropeau.net/muzzic/images/interactief_over.png') no-repeat;
  104. 	width: 123px;
  105. 	height: 49px;
  106. }
  107. .contact:hover {
  108. 	background: url('http://www.apropeau.net/muzzic/images/contact_over.png') no-repeat;
  109. 	width: 89px;
  110. 	height: 49px;
  111. }
  112.  
  113. .tussenstuk {
  114. 	background: url('http://www.apropeau.net/muzzic/images/tussenstuk.png') no-repeat;
  115. 	width: 89px;
  116. 	height: 49px;
  117. }
Bedankt door: radiofreak
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.207s