login  Naam:   Wachtwoord: 
Registreer je!
 Forum

css-probleem (Opgelost)

Offline hfoppen - 27/02/2008 20:23 (laatste wijziging 27/02/2008 20:24)
Avatar van hfoppenNieuw lid mensen,

ik heb een content met rondingen. Nu moet hier echter een afbeelding in komen (die is natuurlijk weer zonder rondingen.
Hoe krijg ik dit voor elkaar??

  1. #content {
  2. margin-top: 20px;
  3. margin-bottom: 20px;
  4. width:950px;
  5. height:575px;
  6. float:left;
  7. overflow:auto;
  8. background:#ffffff url('images/content_back.png') no-repeat;
  9. }
  10.  
  11. .curvy {
  12. position:relative;
  13. width:950px;
  14. height: 575px;
  15. background:#649831;
  16. color:#FFFFFF;
  17. }
  18. #ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#649831; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
  19. #ctl {top:0; left:0;}
  20. #cbl {bottom:0; left:0;}
  21. #ctr {top:0; right:0;}
  22. #cbr {bottom:0; right:0;}
  23.  
  24. .curvy em b {position:absolute; font-size:150px; font-family:arial; color:#649831; line-height:40px; font-weight:normal;}
  25. #ctl b {left:-8px;}
  26. #ctr b {left:-25px;}
  27. #cbl b {left:-8px; top:-17px;}
  28. #cbr b {left:-25px; top:-17px;}
  29. .curvy p {position:relative; z-index:100; padding:5px 10px;}


  1. <div id="content">
  2. <div class="curvy">
  3. <em id="ctl"><b>&bull;</b></em>
  4. <em id="cbl"><b>&bull;</b></em>
  5. <em id="ctr"><b>&bull;</b></em>
  6. <em id="cbr"><b>&bull;</b></em>
  7. <p>Paginatitel<br /><br />
  8. Welkom blablablabla
  9. </p>
  10. </div>
  11.  
  12.  
  13. </div>

4 antwoorden

Gesponsorde links
Offline Pieter - 27/02/2008 21:50
Avatar van Pieter Gouden medaille

SEO guru
Je kan:
-de afbeelding ook afrondingen geven.
-de afrondingen zelf boven de box en de afbeelding zetten in de nodige achtergrond.
Offline hfoppen - 28/02/2008 15:20
Avatar van hfoppen Nieuw lid Heb ik nu ook maar gedaan, die afbeelding hun rondingen gegeven. Veel makkelijker!!

Heb wel een andere vraag.
Op pagina 'home' moet afb. back_home.png als background-image, bij alle andere pagina's de afbeelding back_nothome.png als achtergrond.

Hoe doe ik dit??

  1. #content {
  2. float:left;
  3. margin-top: 20px;
  4. margin-bottom: 20px;
  5. padding: 10px;
  6. width:950px;
  7. height:575px;
  8. background:#ffffff url('images/back_home.png') no-repeat;
  9. }
  10. #content_inhoud{
  11. float: left;
  12. padding: 20px;
  13. width: 890px;
  14. height: 515px;
  15. background-color:transparent;
  16. overflow: auto;
  17. }


  1. <div id="content">
  2. <div id="content_inhoud">
  3. <?php
  4. Hier de php-code etc.
  5. ?>
  6. </div>
  7. </div>
Offline Arnout - 28/02/2008 17:28
Avatar van Arnout HTML beginner Ik denk dat het makkelijkste is om twee styles te maken #contenthome en #contentniethome, en dan daarin de achtergrond aanpassen...
Offline Pieter - 28/02/2008 17:31
Avatar van Pieter Gouden medaille

SEO guru
Je kijkt welke pagina je zit en geeft dit de class home mee. Veel meer is er niet aan...
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.187s