login  Naam:   Wachtwoord: 
Registreer je!
 Forum

DIV meerekken (Opgelost)

Offline Makke0007 - 18/03/2009 07:48 (laatste wijziging 18/03/2009 07:49)
Avatar van Makke0007Nieuw lid Hallo

Ik ben aan het oefenen met een simpel kadertje. Ik wil dus mijn div laten meerekken als ik meer tekst doe. Hoe begin ik hieraan?

http://www.upload-hier.nl/uploads/286810kader.png Dit is de kader.

Ik heb nog geen stylesheet ofzo. Hoe moet ik deze kader slicen of in stukken delen? 

Alvast bedankt.

Gr. Matthias

6 antwoorden

Gesponsorde links
Offline WouterPSV - 18/03/2009 08:57
Avatar van WouterPSV Lid Voor de titel zou ik een div doen en voor het tekst vak ook één
Offline jvs - 18/03/2009 11:39 (laatste wijziging 18/03/2009 11:48)
Avatar van jvs HTML beginner laten we er ff vanuit gaan dat je die "header" als afbeelding wilt behouden (dit zou in principe niet hoeven omdat je dit ook gewoon met tekst kan maken). Je moet gewoon het volgende doen:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="box">hier komt je text</div>


en als css neem je dit

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #box{
  2. width: "zoveel als de afbeelding breed is";
  3. background: url('afb.jpg') top center  no-repeat;
  4. padding: zo hoog als de afb hoog is 0 0 0;
  5. min-height: 200px;
  6. }
Offline ArieMedia - 18/03/2009 12:43
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde		 "Ik ben aan het oefenen met een simpel kadertje. Ik wil dus mijn div laten meerekken als ik meer tekst doe. Hoe begin ik hieraan?"

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="box">
  2.     <div class="boxtitel">De titel</div>
  3.     <div class="boxcontent">Hier komt de tekst</div>
  4. </div>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. .box {
  2. min-width: 200px; /* de minimale lengte */
  3. width: auto; /*als de lengte groter is dan de min-width */
  4. background-image: url('afb.jpg');
  5. height: auto;
  6.  
  7. .boxtitel {
  8. /* Pimp hier het titel gebied */
  9. }
  10.  
  11. .boxcontent {
  12. /* Pimp hier het content gebied */
  13. }


Ik zou zelf "<div class="">" gebruiken in tegenstelling tot "<div id="">" aangezien je de box dan vaker kan aanroepen (mocht je meerder items hebben)
Offline Makke0007 - 18/03/2009 13:02
Avatar van Makke0007 Nieuw lid Hallo, dit lukt wel, hij rekt mee, maar als ik veel tekst doe dan krijg ik de box opnieuw en de lijnen moeten gewon mee verder gaan en op het einde stoppen. Weten jullie hier iets voor
Offline ArieMedia - 18/03/2009 13:29 (laatste wijziging 18/03/2009 13:29)
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde		 Als ik de opmaak van je bijgeleverde afbeelding zou moeten maken, dan zou ik geen afbeelding gebruiken..
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="box">
  2.     <div class="boxtitel">De titel</div>
  3.     <div class="boxcontent">Hier komt de tekst</div>
  4. </div>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. .box {
  2. 	min-width: 200px; /* de minimale lengte */
  3. 	width: auto; /*als de lengte groter is dan de min-width */
  4. 	height: auto;
  5. 	border: 3px solid #000099;
  6. }
  7.  
  8. .boxtitel {
  9. 	background-color: #000099;
  10. 	font-weight: bold;
  11. 	color: #fff;
  12. }
  13.  
  14. .boxcontent {
  15. /* Pimp hier het content gebied */
  16. }


Als je iets anders bedoeld moet je even een link doen en een omschrijving van wat je precies wil.
Offline Makke0007 - 18/03/2009 13:43
Avatar van Makke0007 Nieuw lid Inderdaad dit bedoelde ik, bedankt voor jou hulp!
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.389s