login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS] Problemen met 'doosjes'

Offline Godlord - 25/01/2007 19:34 (laatste wijziging 25/01/2007 19:39)
Avatar van GodlordPHP gevorderde Hoi iedereen.

Ik heb problemen met 'doosjes' met dit bedoel ik zo'n vierkanten met text erin en met een omkadering enzo .

Nouja hier heb ik een voorbeeld: http://godlord.teamfox.us/boxes.html
(De broncode is compleet )

Wat wil ik dus:
Doosjes met een balkje erboven waar je makkelijk tekst in kan plaatsen en als er dus een doosje onder een doosje moet tot dat doosje mooi er onder staat en een spatie tussen elk doosje. Misschien vraag ik iets wat veel maar ik kan dus niet zo een tutorial vinden onder CSS.

Zou iemand mij hiermee kunnen helpen en me een beetje CSS bijleren.

Alvast Bedankt.

8 antwoorden

Gesponsorde links
Offline slabbetje - 25/01/2007 19:40 (laatste wijziging 25/01/2007 19:41)
Avatar van slabbetje Nieuw lid WTF!! snap niet wat je bedoelt hor   anders zou ik best kunnen helpen

vind eigelijk wel dat je die css een beetje kut hebt gemaakt maar dat is mijn mening
Offline Godlord - 25/01/2007 19:44
Avatar van Godlord PHP gevorderde Sorry zal 't proberen te herschrijven.

Dus wat ik wil:
- Een bar boven elk doosje in het iets lichter blauw maarja in een kleur mag ook ik kan die #.... toch wel vinden.
- Een spatie tussen een doosje en een doosje dus bv zo [] []
- Doosje mooi onder elkaar(maarja dat is me al gelukt)

Zou iemand me hier kunnen bij helpen?  
Offline slabbetje - 25/01/2007 19:46 (laatste wijziging 25/01/2007 20:04)
Avatar van slabbetje Nieuw lid zal ff kijken wat ik kan doen

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <body>
  2. <title>TEST</title><style type="text/css">
  3. body, td, th {
  4. 	font-family: Rockwell;
  5. 	font-size: 12px;
  6. 	color: #0000FF;
  7. }
  8. a {
  9. 	font-size: 12px;
  10. 	color: #FF0000;
  11. }
  12. a:link {
  13. 	text-decoration: none;
  14. }
  15. a:visited {
  16. 	text-decoration: none;
  17. 	color: #990000;
  18. }
  19. a:hover {
  20. 	text-decoration: none;
  21. 	color: #6600CC;
  22. }
  23. a:active {
  24. 	text-decoration: none;
  25. 	color: #FF0000;
  26. }
  27. .style1 {font-size: 36px}
  28. #titlebox {
  29. 	color: #0000FF;
  30. 	width: 100;
  31. 	border: 1px solid #0000FF;
  32. 	border-bottom: 0px;
  33. 	text-align: center;
  34. 	display: block;
  35. 	background-color: #CCCCCC;
  36. 	float: left;
  37. 	padding-right: 4px;
  38. 	padding-top: 2px;
  39. 	padding-left: 4px;
  40. 	padding-bottom: 2px;
  41. }
  42. #box {
  43. 	margin-left: -100px;
  44. 	margin-top: 5px;
  45. 	color: #0000FF;
  46. 	width: 100;
  47. 	border: 1px solid #0000FF;
  48. 	text-align: center;
  49. 	display: block;
  50. 	background-color: #CCCCCC;
  51. 	float: left;
  52. 	padding-right: 4px;
  53. 	padding-top: 2px;
  54. 	padding-left: 4px;
  55. 	padding-bottom: 2px;
  56. }
  57. </style>
  58. <div id="titlebox">BoxTITLE</div><br>
  59. <div id="box">BOX</div><br>
  60. </body>


je moet alleen dan ff de margin left aanpassen want die gaat verschuiven wanneer het vak groter word volgensmij
gewoon de zelfde grote als het vak

p.s. borders hebben een vage reactie op FF en IE als je ze met elkaar vergelijkt dus gebruik liever plaatjes ofzo
Offline Dark_Paul - 25/01/2007 20:03 (laatste wijziging 25/01/2007 20:05)
Avatar van Dark_Paul PHP ver gevorderde Je doosjes staan totaal NIET netjes onder mekaar in Firefox 

@Slabbetje: wat heb jij tegen die CSS? Zoals 't nu is vind ik 't prima, zo doe ik 't ook altijd (hoe je 't neerzet is natuurlijk ook altijd eigen smaak). Hooguit een hele groot tab-inspring, maar dat ligt aan de browser. Die tabs zijn in de browserbron altijd 3x groter dan in een editor.

Citaat:
p.s. borders hebben een vage reactie op FF en IE als je ze met elkaar vergelijkt dus gebruik liever plaatjes ofzo

Dit heeft de reden dat Firefox borders plaatst zoals het hoort, hij zet ze buiten de div/tabel/net wat. Een div (voor het gemak neem ik een div) met bijvoorbeeld breedte 20px; en een border van 1px; rondom, zal dus een totale breedte van 20px + 1px (border links) + 1px (border rechts) = 22px hebben.
IE trekt die 2px van de border (links + rechts) van de breedte van de div af. Dus dan houd je als 'bruikbare' ruimte maar 18px van de div over.
Idem met paddings.
Offline slabbetje - 25/01/2007 20:10
Avatar van slabbetje Nieuw lid weet ik maar sommige andere weten dat niet  
Offline Godlord - 25/01/2007 20:15
Avatar van Godlord PHP gevorderde Ok bedankt, weet iemand dan nog misschien een manier om die doosjes zo te krijgen:

[] []
<- Niet zoveel ruimte ertussen iets minder dan dat .
[] []

en over firefox interesseert mij niet echt zoveel en in Dreamweaver zet ie een van de divs ook buiten de pagina... .
Offline slabbetje - 25/01/2007 20:41
Avatar van slabbetje Nieuw lid kj np, was ook maar een van de simpelste oplossingen die ik zosnel kon bedenken hor (A)
Offline Godlord - 25/01/2007 20:57 (laatste wijziging 25/01/2007 22:17)
Avatar van Godlord PHP gevorderde :p ok misschien zou ik toch maar beter een weg zoeken om het in firefox te fixen .

Hmmm:
Open in IE en FF dat gaat dus ook niet lukken 
http://godlord.teamfox.us/box/
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.19s