login  Naam:   Wachtwoord: 
Registreer je!
 Forum

header opmaken (Opgelost)

Offline johndewitte - 03/02/2012 09:32
Avatar van johndewitteLid
Beste forumleden,

in hiernavolgende css code tracht ik 2 png bestandjes
elkaar te laten overlappen. Het ene bestand is de kleur,
het andere de logo.
Ik slaag er niet in beide te combineren.

Kan iemand helpen?

#header {
width: 680px;
height: 140px;
background: url(images/bggroen.png) repeat-y;
/*background:url("images/witlogo.png") no-repeat;*/
background-position: center right;
}

Bedankt,

John

11 antwoorden

Gesponsorde links
Offline nick5556 - 03/02/2012 10:25
Avatar van nick5556 PHP beginner Code tags aub.

Je kan het doen met twee verschillende ID's. Dit doe je door ze een absolute positie mee te geven, eventueel kan je nog een z-index meegeven.

Even in het kort:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #header {
  2.     position: absolute;
  3.     width: 680px;
  4.     height: 140px;
  5.     background: url(images/bggroen.png) repeat-y;
  6.     z-index: 1;
  7. }
  8.  
  9. #logo {
  10.     position:absolute;
  11.     /* margins om de positie te bepalen */
  12.     background:url("images/witlogo.png") no-repeat;
  13.     z-index: 2;
  14. }


Nick.
Offline johndewitte - 03/02/2012 11:13
Avatar van johndewitte Lid Bedankt Nick,

is er geen andere mogelijkheid die de position absolute niet gebruikt?
want anders moet ik de volledige website herpositioneren.

John
Offline Pieter - 03/02/2012 11:27
Avatar van Pieter Gouden medaille

SEO guru		 position:relative en negatief positioneren, nog steeds met z-index. Of de groene achtergrond als css background en het logo als echte afbeelding in de html erop.
Offline johndewitte - 03/02/2012 12:04
Avatar van johndewitte Lid Kom er nog niet uit,

probeer het eerste advies uit met de css, maar de logo blijft onzichtbaar.

de html code =

<div id="wrapper">

<div id="headerleukelijstjes">

<div id="logo">

Aan wat kan dit liggen?

John
Offline Pieter - 03/02/2012 12:26
Avatar van Pieter Gouden medaille

SEO guru		 Heb je een online voorbeeldje staan waar we tegelijk de CSS en de HTML kunnen bekijken?
Offline johndewitte - 03/02/2012 12:52
Avatar van johndewitte Lid Tja,

nee eigenlijk. 't is een website in opbouw en heb nog geen host.
Ken je een gratis (en makkelijke) hostservice.


John
Offline riagabel2 - 03/02/2012 16:36
Avatar van riagabel2 Lid een makkelijke en gratis hostservice is woelmuis.nl het enigste waar ik dan mee zou zitten is dat ze een hele kleine advertentie boven je template zetten. Alleen is wel helemaal gratis.

Riagabel2
Offline johndewitte - 03/02/2012 21:18
Avatar van johndewitte Lid


heb een voorbeeldje met css en html gemaakt op siteadres
http://johndewitte.woelmuis.nl/

inloggegevens:

login johndewitte
pasword 322012
Offline Pieter - 04/02/2012 09:13 (laatste wijziging 04/02/2012 09:14)
Avatar van Pieter Gouden medaille

SEO guru		 Het logo bleef onzichtbaar omdat de div waarin het zat geen inhoud had en bijgevolg geen hoogte.
Dit werkt:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #headerleukelijstjes {
  2. 	width: 680px;
  3. 	height: 140px;
  4. 	background: url(bggroen.png) repeat-y;}
  5. #logo {
  6. 	background:url(witlogoleukelijstjes.png) no-repeat;
  7. 	height:90px;
  8. 	width:477px;}
Offline johndewitte - 04/02/2012 11:14
Avatar van johndewitte Lid Bedankt, dit werkt.

Nog een vraagje, hoe komt het dat die div geen inhoud had.
Het png bestandje zat er toch in?

JOhn
Offline Pieter - 05/02/2012 18:42
Avatar van Pieter Gouden medaille

SEO guru		 Het pngbestandje was er enkel door middel van css, dat is geen inhoud, maar opmaak(layout). Om htmlinhoud te hebben heb je voldoende aan een spatie, maar het is correcter om via CSS de hoogte mee te geven dan.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.195s