login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Twee iframes naast elkaar

Offline ThomasK1201 - 30/08/2016 23:09
Avatar van ThomasK1201Lid Hoi allemaal!

Ik maak een website met een paar profielen van mij en wat vrienden met daarop wat info over onze statistieken in matches van DotA 2. Nu heb ik dus twee iframes, eentje met de laatst gespeelde matches en eentje met de meest gespeelde heroes en die iframes wil ik naast elkaar hebben.
Echter, ze verschijnen onder elkaar. Ik heb de breedte van alles gedoublechecked en het zou gewoon moeten kunnen. Maar toch werkt het niet. Wat doe ik fout of waar heb ik geen erg in?

Dit is mijn code:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id = "Site">
  2. 	<div id = "Fotohouder">
  3. 	<img src = "Afbeeldingen/Logo.jpg" float: right;/>
  4. 	</div>
  5.  
  6. 	<font color = "#FFFFFF">
  7. 	<table bordercolor = "#660000" id = "table" style = "color: white; font-size: 20px;">
  8. 		<tr>
  9. 			<td>Name:</td>
  10. 			<td>Thomas Kuijpers</td>
  11. 		</tr>
  12. 		<tr>
  13. 			<td>DotA 2 name:</td>
  14. 			<td>Jannetje</td>
  15. 		</tr>
  16. 		<tr>
  17. 			<td>Favorite positions:</td>
  18. 			<td>Safelane, mid</td>
  19. 		</tr>
  20. 		<tr>
  21. 			<td>Best heroes:</td>
  22. 			<td>Bloodseeker, Pudge, Techies</td>
  23. 		</tr>
  24. 	</table>
  25. 	</font>
  26. 	<br>
  27. 	<div id = "DivForIframeMatches">
  28. 		<iframe src = "https://yasp.co/players/213276981" id = "IframeMatches" scrolling = "no" style = "margin-top: 25px;"></iframe>
  29. 	</div>
  30.  
  31. 	<div id = "DivForIframeHeroes">
  32. 		<iframe src = "https://yasp.co/players/213276981" id = "IframeMatchesHeroes" scrolling = "no" style = "margin-top: 25px;"></iframe>
  33. 	</div>
  34. 	</div>


En dit is mijn CSS:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #Menu {
  2. 	width: 20%;
  3. 	height: 80%;
  4. 	float: left;
  5. }
  6.  
  7. #Site {
  8. 	width: 80%;
  9. 	height: 80%;
  10. 	float: right;
  11. 	color: white;
  12. }
  13.  
  14. #Fotohouder {
  15. 	Float: right;
  16. 	Margin-right: 100px;	
  17. }
  18.  
  19. #DivForIframeMatches {
  20. 	width: 810px;
  21. 	height: 1145px;
  22. 	overflow: hidden;
  23. 	position: relative;
  24. }
  25.  
  26. #IframeMatches {
  27. 	position: absolute;
  28. 	top: -390px;
  29. 	left: -100px;
  30. 	width: 1400px;
  31. 	height: 1145px;
  32. }
  33.  
  34. #DivForIframeHeroes {
  35. 	width: 200px;
  36. 	height: 800px;
  37. 	overflow: hidden;
  38. 	position: relative;
  39. 	float: right;
  40. } 
  41.  
  42. #IframeHeroes {
  43. 	position: absolute;
  44. 	top: -390px;
  45. 	left: -1000px;
  46. 	width: 200px;
  47. 	height: 1145px;
  48. 	float: right;
  49. }


Thomas.

3 antwoorden

Gesponsorde links
Offline Jointjeff - 30/08/2016 23:25
Avatar van Jointjeff HTML interesse Misschien omdat je table geen float waarde heeft? Je zou zowel de table als de iframe een float left kunnen geven.
Vervolgens moet je zorgen dat de breedte van die elementen past binnen de parent div die je op 80% breed hebt ingesteld.

Simpel voorbeeld:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.   <head>
  3.     <title>Voorbeeld</title>
  5.     body { margin: 0; padding: 0; }
  6.     .wrapper {
  7.       width: 600px;
  8.       margin: 0 auto;
  9.       border: 1px solid green;
  10.     }
  11.     table {
  12.       width: 300px;
  13.       float: left;
  14.     }
  15.     iframe {
  16.       width: 300px;
  17.       float: left;
  18.       border: none;
  19.     }
  20.     </style>
  21.   </head>
  22.  
  23.   <body>
  24.  
  25.     <div class="wrapper">
  27.         <tr>
  28.           <td>test 1</td>
  29.           <td>test 2</td>
  30.           <td>test 3</td>
  31.         </tr>
  32.       </table>
  33.       <iframe src="http://www.sitemasters.be"></iframe>
  34.       <div style="clear:both;"></div>
  35.     </div>
  36.  
  37.   </body>
  38.  
  39. </html>
Offline ThomasK1201 - 03/09/2016 21:17
Avatar van ThomasK1201 Lid Ik heb 'm nu inderdaad er naast, maar het doet nog niet precies wat ik wil. Zo krijg ik bijvoorbeeld de hoogte van het iframe van de Heroes niet veranderd en ik heb werkelijk geen idee waarom niet.
Hier even een update van de code:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <DOCTYPE! html>
  3. 	<title>Anonymous - Jannetje</title>
  5. 	<link rel="stylesheet" type="text/css" href="opmaak.css">
  7. 	body {background-color: #111;}
  9. </head>
  11. 	<div id = "Bovenruimte"></div>
  12. 	<div id = "Menu">
  13. 	<ul>
  14. 		<li><a href="index.html">Home</a></li>
  15. 		<li><a href="Players.html">Players</a></li>
  16. 		<li><a href="#">#</a></li>
  17. 		<li><a href="#">#</a></li>
  18. 	</ul>
  19. 	</div>
  20.  
  21. 	<div id = "Site">
  22. 	<div id = "Fotohouder">
  23. 	<img src = "Afbeeldingen/Logo.jpg" float: right;/>
  24. 	</div>
  25.  
  26. 	<font color = "#FFFFFF">
  27. 	<table bordercolor = "#660000" id = "table" style = "color: white; font-size: 20px;">
  28. 		<tr>
  29. 			<td>Name:</td>
  30. 			<td>Thomas Kuijpers</td>
  31. 		</tr>
  32. 		<tr>
  33. 			<td>DotA 2 name:</td>
  34. 			<td>Jannetje</td>
  35. 		</tr>
  36. 		<tr>
  37. 			<td>Favorite positions:</td>
  38. 			<td>Safelane, mid</td>
  39. 		</tr>
  40. 		<tr>
  41. 			<td>Best heroes:</td>
  42. 			<td>Bloodseeker, Pudge, Techies</td>
  43. 		</tr>
  44. 	</table>
  45. 	</font>
  46. 	<br>
  47. 	<div id = "DivForIframeMatches">
  48. 		<iframe src = "https://yasp.co/players/213276981" id = "IframeMatches" scrolling = "no" style = "margin-top: 25px;"></iframe>
  49. 	</div>
  50.  
  51. 	<div id = "DivForIframeHeroes">
  52. 		<iframe src = "https://yasp.co/players/213276981" id = "IframeMatchesHeroes" style = "margin-top: 25px;"></iframe>
  53. 	</div>
  54. 	</div>
  55. </body>
  56. </html>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. #Menu {
  2. 	width: 20%;
  3. 	height: 80%;
  4. 	float: left;
  5. }
  6.  
  7. #Site {
  8. 	width: 80%;
  9. 	height: 80%;
  10. 	float: right;
  11. 	color: white;
  12. }
  13.  
  14. #Bovenruimte {
  15. 	width: 100%;
  16. 	height: 5%;
  17. }
  18.  
  19. #Fotohouder {
  20. 	Float: right;
  21. 	Margin-right: 100px;	
  22. }
  23.  
  24. #DivForIframeMatches {
  25. 	width: 810px;
  26. 	height: 1100px;
  27. 	overflow: hidden;
  28. 	position: relative;
  29. 	float: left;
  30. }
  31.  
  32. #IframeMatches {
  33. 	position: absolute;
  34. 	top: -390px;
  35. 	left: -100px;
  36. 	width: 1400px;
  37. 	height: 1100px;
  38. 	float: left;
  39. }
  40.  
  41. #DivForIframeHeroes {
  42. 	width: 255px;
  43. 	height: 1500px;
  44. 	overflow: hidden;
  45. 	position: relative;
  46. 	float: right;
  47. 	margin-right: 100px;
  48. } 
  49.  
  50. #IframeHeroes {
  51. 	position: absolute;
  52. 	top: -390px;
  53. 	left: -1000px;
  54. 	width: 255px;
  55. 	height: 1500px;
  56. 	float: right;
Offline Jointjeff - 07/09/2016 09:20
Avatar van Jointjeff HTML interesse Ik zie geen height gespecificeerd voor ID IframeMatchesHeroes.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.204s