login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Afgeronde hoeken - bg image (Opgelost)

Offline mathiasB - 10/01/2008 17:23
Avatar van mathiasBHTML interesse Hey sima's, long time no see...

Ik had een vraagje, toen ik met men mootools bezig was en de tooltips bekeek waren deze met afgeronde hoeken, ik dacht "even kijken hoe zij dat doen" en ik kwam op er op uit dat ze voor alle tips (om het even hoe groot die was) deze afbeelding gebruiken. Hoe doe je zoiets?

Dit is de pagina met de tips op.

2 antwoorden

Gesponsorde links
Offline WumTol - 10/01/2008 17:34
Avatar van WumTol PHP beginner Rechtboven kan je de "css code" aanklikken, daar staat alles precies in.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .tool-title {
  2. 	background: url(bubble.png) top left;
  3. }
  4.  
  5. .tool-text {
  6. 	background: url(bubble.png) bottom right;
  7. }
Offline mathiasB - 10/01/2008 17:57 (laatste wijziging 12/01/2008 17:48)
Avatar van mathiasB HTML interesse Dus de afbeelding wordt er twee keer in geplaatst zeg maar? Om zo de 4 hoeken te bekomen, dus maakt het niet uit hoe hoog die ook is, slim gezien eigenlijk nu nog zien of het werkt.

Edit: werkt niet, dan krijg ik een vierkant. (omdat beide afbeeldingen gewoon over elkaar heen lopen)

Moet die misschien met een javascript oplossing ofzo?

Nu, ik probeerde het ook gewoon met 3 divjes zo:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .DIV_RoundedTop {
  2. 	background-image:url(../Img/Rounded_top.png);
  3. 	background-position:top left;
  4. 	width:657px;
  5. 	height:7px;	
  6. }
  7.  
  8. .DIV_RoundedBot {
  9. 	background-image:url(../Img/Rounded_bot.png);
  10. 	width:657px;
  11. 	height:7px;	
  12. }	
  13.  
  14.  
  15. .DIV_RoundedMain {
  16. 	background-color:#4B3C30;
  17. 	padding:3px;
  18. 	width:651px; /* 657px - 2x de padding */
  19. }


En dan als html dit:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="DIV_RoundedTop" />
  2. 			<div class="DIV_RoundedMain"> 	
  3. 			Dit is een test DIV met daarin een <br />
  4. 			break tag.
  5. 			</div>
  6. 			<div class="DIV_RoundedBot" />

Maar dan zie ik enkel de onderste hoeken.

Oplossing: Ik sluit mijn divs (blijkbaar) verkeerd af. Heb ze nu afgesloten met </div> en het werkt.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.171s