login  Naam:   Wachtwoord: 
Registreer je!
 Forum

gloed om div (Opgelost)

Offline san - 17/12/2010 18:39
Avatar van sanHTML interesse Wie weet hoe je zo'n gloed om je website kunt krijgen zoals bij 3 div's in deze pagina
Gaat dit met een extra div en daarin een afbeelding van de gloed plaatsen? Is deze gloed ook mogelijk bij een rekbare div?

12 antwoorden

Gesponsorde links
Offline icemar - 17/12/2010 18:56
Avatar van icemar Lid Ja dat is mogelijk.
Je kan met css bepalen of de achtergrond mag meegroeien.
Offline san - 17/12/2010 19:05
Avatar van san HTML interesse Maar hoe doe je dat dan? Als ik een achtergrond afbeelding maak van bv 600x800px (de minimale grootte van de div) en plaats deze achter de div met inhoud. Hoe maak ik de achtergrond dan rekbaar als de div met inhoud langer wordt?
Offline Realtec - 17/12/2010 19:23 (laatste wijziging 17/12/2010 19:26)
Avatar van Realtec HTML interesse 3 divs maken in 1 div
bovenkant (plaatje voor bovenste gloed + hoeken)
midenstuk (plaatje voor de zijkanten die laat je meerekken vertikaal)
onderkant (plaatje voor onderste gloed + hoeken)

bovenkant en onderkant geef je een hoogte mee en midden stuk geen hoogte dus die rekt mee met de content...

Edit: en zoals waldio hieronder zegt je kan gewoon de background op x of y laten herhalen
Offline WouterJ - 17/12/2010 19:24
Avatar van WouterJ HTML gevorderde door de repeat functie op backgrounds:
- no-repeat: niks wordt herhaalt
- repeat-y: alles wordt verticaal herhaalt
- repeat-x: alles wordt horizontaal herhaalt
- repeat: alles wordt in alle richting herhaalt <-- Standaard

De code ziet er dan zo uit:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. background: url('image.gif') repeat-x #000;

Met deze methode heb je dus maar een plaatje nodig van 1 breedt/hoog.
Offline san - 20/01/2011 21:00
Avatar van san HTML interesse Ik heb dit nu geprobeerd voor elkaar te krijgen maar wil nog niet helemaal lukken. Het probleem is dat met onderstaande code #container niet de breedte van 800px aanneemt maar die van #container2(900px). Als ik div#container2 gelijk sluit dan neemt #container de breedte van 900px niet aan maar die van 800px zoals bedoeld is maar dan is weer het probleem dat #container2 niet meerekt met de volledige hoogte van de inhoud. Hoe zou ik dit op kunnen lossen?
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #container {
  2.           width: 800px;
  3.           margin: auto;
  4.           min-height: 500px;
  5. }
  6.  
  7. #container2{
  8.           width: 900px;
  9.           margin: auto;
  10.           min-height: 500px;
  11.           background: url('image.png') repeat-y #000;
  12. }

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2.   <div id="container2">
  3.     <div> Hier komt een variabele inhoud </div>
  4.   </div>
  5. </div>
Offline Stijn - 20/01/2011 21:04
Avatar van Stijn PHP expert Of je kan de CSS3 technieken gebruiken...

http://www.css3.info/preview/box-shadow/
Offline san - 20/01/2011 21:09
Avatar van san HTML interesse Mooie oplossing, alleen nadeel dat deze lang niet in alle browsers werkt.
Offline Stijn - 20/01/2011 21:13
Avatar van Stijn PHP expert Het is in ieder geval een betere oplossing dan te moeten sukkelen met die background... Ik vermoed dat IE ze ook ondersteund in de laatste versie. Opera en Firefox en Chrome ondersteunen ze wel.
Offline WouterJ - 20/01/2011 22:28
Avatar van WouterJ HTML gevorderde Safari ondersteund ze ook. Maar goed, het is net wat je ondersteunen noemt. In FF(3.6 en 4), Safari en Chrome is het nog in de proeffase. Daarom moet je nog die voorvoegsels erbij zetten.
Offline san - 22/01/2011 10:57
Avatar van san HTML interesse Dus als ik het goed begrijp is de gloed-achtergrond met CSS niet goed mogelijk met een variabele div maar alleen met CSS3?
Offline Emonk - 22/01/2011 11:04
Avatar van Emonk Lid kijk gewoon eens naar de broncode van die site.
Offline san - 22/01/2011 12:41
Avatar van san HTML interesse Die broncode doet er niet toe omdat het daar om een vast formaat div's gaat. Dat heb ik inmiddels ook voor elkaar maar het gaat mij nu om de code als de div variabel is in lengte.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.197s