|
Categorieën >
HTML & CSS
header opmaken (Opgelost)
|
|
|
offline
|
Lid
|
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
|
|
|
|
offline
|
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:
#header {
position: absolute;
width: 680px;
height: 140px;
background: url(images/bggroen.png) repeat-y;
z-index: 1;
}
#logo {
position:absolute;
/* margins om de positie te bepalen */
background:url("images/witlogo.png") no-repeat;
z-index: 2;
}
#header { position: absolute; width: 680px; height: 140px; background: url(images/bggroen.png) repeat-y; z-index: 1; } #logo { position:absolute; /* margins om de positie te bepalen */ background:url("images/witlogo.png") no-repeat; z-index: 2; }
Nick. |
|
|
|
|
offline
|
Lid
|
Bedankt Nick,
is er geen andere mogelijkheid die de position absolute niet gebruikt?
want anders moet ik de volledige website herpositioneren.
John
|
|
|
|
|
offline
|
Erelid
|
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
|
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
|
Erelid
|
Heb je een online voorbeeldje staan waar we tegelijk de CSS en de HTML kunnen bekijken?
|
|
|
|
|
offline
|
Lid
|
Tja,
nee eigenlijk. 't is een website in opbouw en heb nog geen host.
Ken je een gratis (en makkelijke) hostservice.
John
|
|
|
|
|
offline
|
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
|
Lid
|
|
Pieter – 04/02/2012 09:13 (Laatst gewijzigd op 04/02/2012 09:14)
|
|
|
offline
|
Erelid
|
Het logo bleef onzichtbaar omdat de div waarin het zat geen inhoud had en bijgevolg geen hoogte.
Dit werkt:
#headerleukelijstjes {
width: 680px;
height: 140px;
background: url(bggroen.png) repeat-y;}
#logo {
background:url(witlogoleukelijstjes.png) no-repeat;
height:90px;
width:477px;}
#headerleukelijstjes { width: 680px; height: 140px; background: url(bggroen.png) repeat-y;} #logo { background:url(witlogoleukelijstjes.png) no-repeat; height:90px; width:477px;}
|
|
|
|
|
offline
|
Lid
|
Bedankt, dit werkt.
Nog een vraagje, hoe komt het dat die div geen inhoud had.
Het png bestandje zat er toch in?
JOhn
|
Je moet ingelogd zijn om een reactie te kunnen posten.
|
|
|
Console games waar je niets van leert moeten worden afgeschaft. (S: 17, R: 7)
Actiefste leden van de maand
Actieve forumberichten: