Ga naar inhoud

Problemen met Z-index en layers enzo.

E-boy

Door E-boy
in Archief Website Hulp & Scripts

 Delen

Aanbevolen berichten

E-boy Nieuweling

E-boy

Geplaatst:
Geplaatst:

Ik weet niet echt hoe ik alles moet uitleggen, dus gooi ik gewoon de codes neer en geef wat uitleg.

<!-- CSS STYLE -->

   <style>    img.screendp {
position: relative;
top: 192px;
left: 0px;
z-index: 0;

}

  img.cornerdp {
position: relative;
z-index: 1;

}

div.content { 
font-family: verdana;
font-size: 12px;
}</style>

Dit is dus mijn stylesheet, daar zit de fout...

<body style="background-color: #CDCBD1;">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat egestas nunc. Nulla malesuada, nisl sit amet consectetur vulputate, quam metus pellentesque purus, non hendrerit metus eros ut sapien. Aliquam eget mi. Nulla et nunc. Cras condimentum, pede eget commodo semper, lectus ante placerat purus, quis ullamcorper magna nisl id enim. Pellentesque sed tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc erat metus, auctor ac, rhoncus at, consequat sed, quam. Cras urna nibh, mollis eget, lacinia id, venenatis at, magna. Ut laoreet libero quis eros. Aliquam erat volutpat. Sed tristique lacus. Suspendisse eu tortor.

<img class="screendp" src="http://pokefront.be/images/screens/DP/battletower1.png" />
<img class="cornerdp" src="http://pokefront.be/images/cornerdp.png" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat egestas nunc. Nulla malesuada, nisl sit amet consectetur vulputate, quam metus pellentesque purus, non hendrerit metus eros ut sapien. Aliquam eget mi. Nulla et nunc. Cras condimentum, pede eget commodo semper, lectus ante placerat purus, quis ullamcorper magna nisl id enim. Pellentesque sed tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc erat metus, auctor ac, rhoncus at, consequat sed, quam. Cras urna nibh, mollis eget, lacinia id, venenatis at, magna. Ut laoreet libero quis eros. Aliquam erat volutpat. Sed tristique lacus. Suspendisse eu tortor.

</div>

Dit is de file. Het is dus de bedoeling dat de twee layers, die perfect op elkaar liggen, 'behandeld worden als 1 image', als je begrijpt wat ik bedoel. Er moet geen plaats boven, onder, links of rechts van het plaatje zitten, maar gewoon één plaatje dat tussen de twee blokken Lorem Ipsum staat.

XiroN Enthousiasteling

XiroN

Geplaatst:
Geplaatst:

Ik heb de 2 afbeeldingen voor je op elkaar gezet :)

Mss kan je hier mee verder?

Als je liever een andere oplossing wilt, zal ik proberen je code aan te passen zodat het werkt :D

pc-h.png

Je kan het ook zo doen:

Ik heb dus de 2 plaatjes van plaats verwisseld (die z-index werkt blijkbaar niet...)

en op gelijke hoogte in het document gezet (dus naast elkaar en dan het 2e plaatje naar links verschoven zodat deze achter het 1e komt te staan :)

maar de plaatjes samenvoegen en als 1 afbeelding gebruiken vind ik persoonlijk een beter idee ;)

<style>    img.screendp {
position: relative;
top: 192px;
left: -260px;
z-index: 0;

}

  img.cornerdp {
position: relative;
top: 192px;
z-index: 1;

}

div.content { 
font-family: verdana;
font-size: 12px;
}</style>


<body style="background-color: #CDCBD1;">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat egestas nunc. Nulla malesuada, nisl sit amet consectetur vulputate, quam metus pellentesque purus, non hendrerit metus eros ut sapien. Aliquam eget mi. Nulla et nunc. Cras condimentum, pede eget commodo semper, lectus ante placerat purus, quis ullamcorper magna nisl id enim. Pellentesque sed tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc erat metus, auctor ac, rhoncus at, consequat sed, quam. Cras urna nibh, mollis eget, lacinia id, venenatis at, magna. Ut laoreet libero quis eros. Aliquam erat volutpat. Sed tristique lacus. Suspendisse eu tortor.

<img class="cornerdp" src="http://pokefront.be/images/cornerdp.png" />
<img class="screendp" src="http://pokefront.be/images/screens/DP/battletower1.png" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat egestas nunc. Nulla malesuada, nisl sit amet consectetur vulputate, quam metus pellentesque purus, non hendrerit metus eros ut sapien. Aliquam eget mi. Nulla et nunc. Cras condimentum, pede eget commodo semper, lectus ante placerat purus, quis ullamcorper magna nisl id enim. Pellentesque sed tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc erat metus, auctor ac, rhoncus at, consequat sed, quam. Cras urna nibh, mollis eget, lacinia id, venenatis at, magna. Ut laoreet libero quis eros. Aliquam erat volutpat. Sed tristique lacus. Suspendisse eu tortor.

</div>

PS: Welke browser gebruik je?

leroy Mentor

leroy

Geplaatst:
Geplaatst:

je zou ook in je stylesheet de codes voor rounded edges kunnen gebruiken...

dan worden de hoekjes met een bepaalde graad gebogen.. en gelijk dezelfde kleur gemaakt als wat de achtergrond is.

ik weet alleen niet of dat bij afbeeldingen kan.. bij DIV tags kan het wel... de precieze code ervoor weet ik even niet uit mijn hoofd wat je erbij zou moeten zetten.

ik kan wel voor je kijken... maar ik zit nu op me werk :S dus dat zal van het weekend moeten zijn.

 Delen
Ga naar topic overzicht
Logo

OVER ONS

PC Helpforum helpt GRATIS computergebruikers sinds juli 2006. Ons team geeft via het forum professioneel antwoord op uw vragen en probeert uw pc problemen zo snel mogelijk op te lossen. Word lid vandaag, plaats je vraag online en het PC Helpforum-team helpt u graag verder!

SITEMAP

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.