login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS] Header in orde krijgen

Offline Frederic - 11/09/2005 13:49
Avatar van FredericPHP ver gevorderde Ik wil iets héél simpels in CSS, maar het lukt me maar niet:
Een header (met een achtergrond), daarin links een image (met link) en rechts nog een afbeelding:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="header"> //Geeft de achtergrond weer = OK
  2. 	<div class="header-rechtsboven"> //Moet de afbeelding rechts weergeven = NIET OK
  3. 		<a href="http://www.homepage.be/"><img src="afbeeldingen/header.png" alt="MySite.be" title="Naar de hoofdpagina" /></a> //Geeft de image weer = OK
  4. 	</div>
  5. </div>


php code - Bekijk de code zonder highlighting - Klap code in 
  1. /*-----------------------------------------------------
  2. | Plaatsing achtergrond van header                     |
  3. -----------------------------------------------------*/
  4. div.header {
  5. background: url(../afbeeldingen/header_achtergrond.png) repeat-x;
  6. height: 65px;
  7. }
  8.  
  9. /*-----------------------------------------------------
  10. | Plaatsing achtergrond van header                     |
  11. -----------------------------------------------------*/
  12. div.header-rechtsboven {
  13. background: url(../header-rechtsboven.png) no-repeat top right;
  14. height: 65px;
  15. }
.
Beide plaatjes bestaan, maar ik snap niet waarom div.header-rechtsboven zijn ding niet doet?

8 antwoorden

Gesponsorde links
Offline Ontani - 11/09/2005 13:50
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 top-right ipv top right?
Offline Frederic - 11/09/2005 13:52
Avatar van Frederic PHP ver gevorderde Nope, maar als ik er dit van maak:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.header-rechtsboven {
  2. background: url(../header-rechtsboven.png) no-repeat top-right;
  3. height: 65px;
  4. border:6px solid #C0C0C0;
  5. }

Dan krijg ik wel een border rond mijn header
Offline Ontani - 11/09/2005 13:54 (laatste wijziging 11/09/2005 13:54)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 dan doe eens:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.header-rechtsboven {
  2.  background-image: url(../header-rechtsboven.png);
  3.  background-repeat: no-repeat;
  4.  background-position: top-right;
  5.  height: 65px;
  6.  border:6px solid #C0C0C0;
  7. }
Offline Ultimatum - 11/09/2005 13:54
Avatar van Ultimatum PHP expert je moet een punt (.) voor de naam zette, dus .header, .nav etc..
Offline Frederic - 11/09/2005 13:55 (laatste wijziging 11/09/2005 13:57)
Avatar van Frederic PHP ver gevorderde @Ontani: Vreemd genoeg krijg ik dan wel een border, maar de afbeelding blijft uit (ik probeer met relatieve én absolute paden, en die kloppen zéker!)
@Ultimatum: niet als ik er div. voorzet ;)

//EDIT: na een keertje op F5 te hebben geduwd (er zit blijkbaar een delay tussen het publiceren en het effectief aanpassen van de CSS) werkt de oplossing van Ontani wel, maar de afbeelding wordt links boven uitgelijnd ipv rechts? 
Offline Ontani - 11/09/2005 13:56
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 zeker dat je de map /afbeeldingen/ niet bent vergeten 
Offline Rens - 11/09/2005 13:57 (laatste wijziging 11/09/2005 13:58)
Avatar van Rens Gouden medaille

Crew algemeen		 @Ultimatum: Die staat er ook.
Die div is gewoon om aan te tonen dat het in een <div ...></div> staat.
Kan overzichtelijker zijn.
Zo kan je ook voor een td het volgende gebruiken:

td.class1
{
}

td.class2
{
}

<td class="class1"></td><td class="class2"></td>
Offline Frederic - 11/09/2005 13:58
Avatar van Frederic PHP ver gevorderde Thata, het werkt!
Het is geworden:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.header-rechtsboven {
  2. background-image: url(../header-rechtsboven.png);
  3. background-repeat: no-repeat;
  4. background-position: top right;
  5. height: 65px;
  6. }

(streepje weg tussen de top right)
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.193s