login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div rekt niet goed mee

Offline Metalhead - 23/01/2007 20:31
Avatar van MetalheadHTML gevorderde He, ik ben nu al een poosje bezig om een container-divje goed mee te laten rekken met de content maar dit gaat niet helemaal goed...

Ik heb zo'n structuur (dit is even een voorbeeldje);
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="background-color: rgb(160,170,170)">
  2. 	<img src="..." width="20" height="20" style="float:left" />
  3. 	Tekst, blabla...<br>
  4. 	blabla
  5. 	<img src="..." width="40" height="60" style="float:right" />
  6. </div>


Ik wil zoiets;
php code - Bekijk de code zonder highlighting - Klap code in 
  1. __________
  2. |## blabla |
  3. |## bla bla|
  4. |bla bla ##|
  5. |_bla____##|


Ik krijg zoiets;
php code - Bekijk de code zonder highlighting - Klap code in 
  1. __________
  2. |## blabla |
  3. |## bla bla|
  4. |bla bla   |
  5. |_bla______|
  6.          ##
  7.          ##

8 antwoorden

Gesponsorde links
Offline delta_004 - 23/01/2007 20:45
Avatar van delta_004 Onbekend Lol ik begrijp er niks van. Wat wil je geen voorbeeldjes. Ik maak zelf ook veel structuurs van layouts enz. Maar die zijn anders dan dit.
Offline Ultimatum - 23/01/2007 20:45
Avatar van Ultimatum PHP expert probeer eens <div style='clear: both'></div> er neer te zetten..
Offline MindPrison - 23/01/2007 20:53
Avatar van MindPrison PHP gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="background-color: rgb(160,170,170)">
  2.   <img src="..." width="20" height="20" style="float:left" />
  3.   Tekst, blabla...<br>
  4.   <img src="..." width="40" height="60" style="float:right" />
  5.   blabla
  6. </div>


float moet bij mijn weten altijd boven de tekst die je er naast wilt hebben. Snappie? 
Offline Vakama - 23/01/2007 20:54
Avatar van Vakama HTML beginner Misschienj je height op auto zetten? 
Offline Metalhead - 23/01/2007 20:54 (laatste wijziging 23/01/2007 20:55)
Avatar van Metalhead HTML gevorderde @delta; Mijn voorbeeldjes zijn toch hartstikke duidelijk ? 

Ik wil 2 plaatjes binnen 1 container; 1 linksboven, en 1 rechtsonder.
En ik wil dat de tekst daar gewoon een beetje omheen gaat...

@ultimatum; weet niet precies wat/waar je bedoelt, maar volgens mij werkt dat niet voor wat ik wil...

@MindPrison; Maar als je plaatje groter is dan de tekst, steekt hij alsnog buiten de div uit...
Offline MindPrison - 23/01/2007 20:56
Avatar van MindPrison PHP gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="background-color: rgb(160,170,170); display: block;">
  2.   <img src="..." width="20" height="20" style="float:left;" />
  3.   Tekst, blabla...<br>
  4.   <img src="..." width="40" height="60" style="float:right;" />
  5.   blabla
  6. </div>
Offline Metalhead - 23/01/2007 21:25 (laatste wijziging 23/01/2007 21:28)
Avatar van Metalhead HTML gevorderde Ik zal proberen nog iets duidelijker te zijn.

Dit is de site waar ik mee bezig ben;
http://www.rocksucker.nl/OsX/

En er werkt nog van alles niet aan, maar ik ben nu bezig met het bandleden-gedeelte (2e icoontje en dan iemand aanklikken)...

De code is vrij ingewikkeld (omdat het een rare constructie tussen JavaScript en PHP is), dus ik heb het stuk waar het om gaat gefilterd tot dit:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. 	<title>SiteMaster Test</title>
  3. <style>
  4. div#content {
  5. 	position: relative;
  6. 	margin-bottom: 0;
  7. 	margin-left: 10%;
  8. 	margin-right: 10%;
  9. 	border-style: solid;
  10. 	border-width: 0;
  11. 	border-top-color: rgb(255, 255, 255);
  12. 	border-left-color: rgb(255, 255, 255);
  13. 	border-right-color: rgb(0, 0, 0);
  14. 	border-bottom-color: rgb(0, 0, 0);
  15. 	overflow: auto;
  16. }
  17. div#contentbody {
  18. 	background-color: rgb(235, 235, 235);
  19. 	background-image: url(img/cntnback.gif);
  20. 	background-repeat: repeat;
  21. 	position: relative;
  22. 	border-style: solid;
  23. 	border-width: 1px;
  24. 	border-top-width: 0;
  25. 	border-color: rgb(200, 200, 200);
  26. 	filter:alpha(opacity=9);
  27. 	-moz-opacity: 0.9;
  28. 	opacity: 0.9;
  29. 	font-size: 11pt;
  30. 	padding-left: 5px;
  31. 	padding-right: 5px;
  32. 	padding-top: 10px;
  33. 	padding-bottom: 3px;
  34. 	margin-bottom: 0;
  35. }
  36.  
  37. div#contentheader {
  38. 	background-image: url(img/contentheader.jpg);
  39. 	background-repeat: repeat-x;
  40. 	position: relative;
  41. 	margin: 0;
  42. 	padding: 0;
  43. 	width: 100%;
  44. 	height: 20px;
  45. 	text-align: center;
  46. 	background-color: rgb(200, 200, 200);
  47. 	border-width: 0;
  48. 	border-style: solid;
  49. 	border-bottom-width: 1px;
  50. 	border-color: rgb(60, 50, 40);
  51. 	color: rgb(60, 50, 40);
  52. 	font-weight: 600;
  53. 	font-size: 10pt;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div id="content">
  59. 	<div id="contentheader">blabla</div>
  60. 	<div id="contentbody">
  61. 		<img src="img/dennis-bio1.jpg" width="150" height="150" alt="dennis" style="float:left;margin-right:10px" />
  62. 		Dennis formed, together with Jan, the band back in the early days. He is Rocksucker's
  63. 		main-singer, but also plays guitar. Most songs are written by him, and also most of the
  64. 		recordmixing is done by him. He lives in Kampen and has a girlfriend.<br>
  65. 		<img src="img/dennis-bio2.jpg" width="150" height="150" alt="dennis" style="float:right;margin-left:10px" />	
  66. 		He uses a Epiphone Goth guitar and a Marshall VS amplifier.<br>
  67. 		Dennis is also the maker of this site, so comments/complaints can be directed to him :)
  68. 	</div>
  69. </div>
  70. </body>
  71. </html>


Hier is het voorbeeld te zien;
http://www.rocksucker.nl/OsX/biodennis2.htm
Offline MindPrison - 23/01/2007 22:21
Avatar van MindPrison PHP gevorderde Probeer dit eens, maar ik ben niet zeker...
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="content">
  2.   <div id="contentheader">blabla</div>
  3.   <div id="contentbody" style="display: block;">
  4.     <img src="img/dennis-bio1.jpg" width="150" height="150" alt="dennis" style="float:left;margin-right:10px; clear: left;" />
  5.     Dennis formed, together with Jan, the band back in the early days. He is Rocksucker's
  6.     main-singer, but also plays guitar. Most songs are written by him, and also most of the
  7.     recordmixing is done by him. He lives in Kampen and has a girlfriend.<br>
  8.     <img src="img/dennis-bio2.jpg" width="150" height="150" alt="dennis" style="float:right; margin-left:10px; clear: right;" />  
  9.     He uses a Epiphone Goth guitar and a Marshall VS amplifier.<br>
  10.     Dennis is also the maker of this site, so comments/complaints can be directed to him :)
  11.   </div>
  12. </div>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.452s