login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div rekt uit?

Offline DjNoiz - 23/08/2005 21:57 (laatste wijziging 23/08/2005 21:58)
Avatar van DjNoizNieuw lid Hallo Sitemasters,

Ik heb een raar probleem in firefox met een div die zomaar uitrekt ...
In Internet Explorer heb ik hier geen last van.
Screenshots: http://test.djnoiz.be/raadsel.jpg
Code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="suggestiebord" style="position:absolute; left:5px; top:175px; width:332px; height:217px; z-index:2; background-image:url(/images/suggestiebord.jpg); color: #FFFFFF; font-family: cursive; font-size: 13px; padding-right:20px; padding-left:25px">
  2. <br>Visbord met zeevruchten en puree<br><div align="center" style="padding-top:2px; padding-bottom:2px"><img src="/images/suggestiebord_splitter.gif"></div>
  3. Kippeblokjes met champions en kruidige roomsaus (fritten of puree)<br><div align="center" style="padding-top:2px; padding-bottom:2px"><img src="/images/suggestiebord_splitter.gif"></div>
  4. Varkensfilet met gandaham-chips en garnituur (kroketten, fritten of gratin)<br><div align="center" style="padding-top:2px; padding-bottom:2px"><img src="/images/suggestiebord_splitter.gif"></div>
  5. Lamskoteletjes met garnituur (kroketten, fritten of gratin)<br><div align="center" style="padding-top:2px; padding-bottom:2px"><img src="/images/suggestiebord_splitter.gif"></div>
  6. </div>

11 antwoorden

Gesponsorde links
Offline Geerios - 23/08/2005 22:14
Avatar van Geerios Onbekend Volgens mij komt het doordat je posities aangeeft waar ie moet staan, kan je niet beter een tabel gebruiken?
Offline Pieter - 24/08/2005 09:22 (laatste wijziging 24/08/2005 09:29)
Avatar van Pieter Gouden medaille

SEO guru		 Heel overzichtelijk vind ik je code niet echt. Haal mss je csscode er eens uit.
Het kan mss al wat helpen van je suggestiebord background image op no repeat te zetten...
Met tabellen gaan werken moet je in geen geval gaan doen. Dat is hopeloos verouderd (als je nu nog een nieuwe site maakt tenminste, heel wat sites staan nog in tabelvorm, jammergenoeg. Kijk ook eens naar www.stylesheets.nl)

Pieter
Offline DjNoiz - 24/08/2005 22:15
Avatar van DjNoiz Nieuw lid Bedankt pieterc, de background-repeat hielp al grafisch, maar de tekst loopt nog altijd door de kader zoals je op de screenshot te zien is.
Nieuwe code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="suggestiebord" style="position:absolute; left:5px; top:175px; width:332px; height:217px; z-index:2; background-image:url(/images/suggestiebord.jpg); color: #FFFFFF; font-family: cursive; font-size: 13px; padding-right:20px; padding-left:25px">
  2.    Visbord met zeevruchten en puree<br>
  3.    Kippeblokjes met champions en kruidige roomsaus (fritten of puree)<br>
  4.    Varkensfilet met gandaham-chips en garnituur (kroketten, fritten of gratin)<br>
  5.    Lamskoteletjes met garnituur (kroketten, fritten of gratin)<br>
  6. </div>
Offline Simon - 24/08/2005 22:31
Avatar van Simon PHP expert zet dan eens gewoon een <br> na kroketten

php code - Bekijk de code zonder highlighting - Klap code in 
  1. met garnituur (kroketten,<br> fritten of gratin)
Offline DjNoiz - 24/08/2005 23:12 (laatste wijziging 27/08/2005 10:30)
Avatar van DjNoiz Nieuw lid Ik had er niet meteen aan gedacht (omdat de tekst uit een database wordt gehaald), maar ik zal er een stukje voor schrijven zodat na zoveel tekens, de tekst wordt gesplitst) ...
Ik sta wel nog open voor andere oplossingen (vindt deze niet ideaal)
Alvast bedankt!:)

Niemand een idee?
Offline Stijn1 - 27/08/2005 11:30
Avatar van Stijn1 Gouden medaille

PHP ver gevorderde		 Mss pading goed instellen? of loopt het helemaal door en niet alleen door de rand?
Offline DjNoiz - 27/08/2005 18:04
Avatar van DjNoiz Nieuw lid Afbeelding ge-update van huidige toestand: http://test.djnoiz.be/raadsel.jpg (code is zelfde, tekst is anders).
Wat doet firefox dan fout met de padding?
Alvast bedankt!
Offline Ontani - 27/08/2005 18:13
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 kan je de afbeeldingen die je gebruikt effe online zetten, dan zal ik het eens proberen.
Offline DjNoiz - 27/08/2005 19:14
Avatar van DjNoiz Nieuw lid Alvast erg bedankt Ontani!
Afbeeldingen:

http://test.djnoiz.be/suggestiebord.jpg
http://test.djnoiz.be/suggestiebord_splitter.gif
Offline Ontani - 28/08/2005 14:56 (laatste wijziging 28/08/2005 14:59)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 zozo, het was simpeler als ik dacht:

uitleg: Firefox telt de paddings op met de width in dezelfde div:
dus width: 332, padding-left: 25, padding-right: 20.
totale breedte van de div is dan 377 px, dan wordt ook meteen de achtergrond herhaald

oplossing - apparte div in de andere maken met daar de padding instellingen:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="suggestiebord" style="position:absolute; left:5px; top:175px; width:332px; height:217px; z-index:2; background-image:url(/images/suggestiebord.jpg); color: #FFFFFF; font-family: cursive; font-size: 13px;">
  2.  <div style="padding-right:20px; padding-left:25px">
  3.   <br/>
  4.   Visbord met zeevruchten en puree<br/>
  5.   <div align="center" style="padding-top:2px; padding-bottom:2px"><img src="/images/suggestiebord_splitter.gif"></div>
  6.   Kippeblokjes met champions en kruidige roomsaus (fritten of puree)<br/>
  7.   <div align="center" style="padding-top:2px; padding-bottom:2px"><img src="/images/suggestiebord_splitter.gif"></div>
  8.   Varkensfilet met gandaham-chips en garnituur (kroketten, fritten of gratin)<br/>
  9.   <div align="center" style="padding-top:2px; padding-bottom:2px"><img src="/images/suggestiebord_splitter.gif"></div>
  10.   Lamskoteletjes met garnituur (kroketten, fritten of gratin)<br/>
  11.   <div align="center" style="padding-top:2px; padding-bottom:2px"><img src="/images/suggestiebord_splitter.gif"></div>
  12.  </div>
  13. </div>
Offline DjNoiz - 29/08/2005 21:43
Avatar van DjNoiz Nieuw lid Het werkt!
ONGELOOFELIJK hard bedankt ontani!
Respect 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.213s