[HTML/ CSS] dropshadow door div - Softwareontwikkeling

woensdag 19 januari 2005 11:56

Acties:

Topicstarter

Ik probeer achter een site een dropshadow te maken doormiddel van div's in een div. Na verschillende pogingen te hebben gedaan, welke er steeds goed uitzagen in FF maar niet in IE, heb ik besloten om te zoeken naar een oplossing, maar ik kom er niet alleen meer uit. Dus bij deze schreeuw ik uit voor hulp.

De laatste oplossing die ik geprobeerd heb: Css, is het toevallig mogelijk, schaduw achter een table..?

Dit is de HTML van mijn testpagina:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>
      Praktijk voor Fysiotherapie Woudrichem
    </title>
    <link rel="stylesheet" href="css/fysio-css.css" type="text/css" media="screen,projection,tv">
  </head>
  <body>
    <div class="schaduw">
    <div class="wrap">
      [img]"images/slice1.gif"[/img]
      [img]"images/slice2.gif"[/img]
      [img]"images/slice3.gif"[/img]
      [img]"images/slice4.gif"[/img]
      [img]"images/slice5.gif"[/img]
      [img]"images/slice6.gif"[/img]
      [img]"images/slice7.gif"[/img]
      [img]"images/slice8.gif"[/img]
      [img]"images/slice9.gif"[/img]
      [img]"images/slice10.gif"[/img]
      <h1>
        praktijk voor fysiotherapie<br>woudrichem
      </h1>
      <h2>
        Contactgegevens
      </h2>
      <p class="first-contact">
        De praktijk is op de beide locaties, tijdens de openingstijden, telefonisch
        bereikbaar op het telefoonnummer <strong>0183 301378</strong>, voor zowel de verwijzers als de pati&euml;nten.
        Buiten onze openingstijden is er op beide locaties een antwoordapparaat aanwezig,
        welke ook in het weekend worden afgeluisterd. <br>
        <br>
        Eventueel kunt U voor vragen over behandelmethoden en duur, ook terecht op
        <a href="mailto:info@fysiowoudrichem.nl?subject=vragen-fysio-woudrichem"> info@fysiowoudrichem.nl</a><br>
        <br>
        <!-- <div id="openDiv"> -->
        <table id="openTable">
        <tr>
         <th>Openingstijden</th>
         <th>Locatie Woudrichem</th>
         <th>Locatie Giessen</th>
        </tr>
        <tr>
         <td class="dag">Maandag</td>
         <td>7.30 - 20.00 uur</td>
         <td>7.30 - 17.00 uur</td>
        </tr>
        <tr>
         <td class="dag">Dinsdag</td>
         <td>7.30 - 18.00 uur</td>
         <td>7.30 - 12.30 uur</td>
        </tr>
        <tr>
         <td class="dag">Woensdag</td>
         <td>7.30 - 18.00 uur</td>
         <td>7.30 - 12.30 uur</td>
        </tr>
        <tr>
         <td class="dag">Donderdag</td>
         <td>7.30 - 20.00 uur</td>
         <td>7.30 - 17.00 uur</td>
        </tr>
        <tr>
         <td class="dag">Vrijdag</td>
         <td>7.30 - 18.00 uur</td>
         <td>7.30 - 12.30 uur</td>
        </tr>
        </table>
        <!-- </div> -->
        <br>
      </p>
      <p class="first-contact">
       Deze locatie is gelegen in de vesting van Woudrichem. De praktijk is goed
       bereikbaar met het eigen vervoer en is op loopafstand van de bushalte.
       In de directe omgeving is er een ruime parkeergelegenheid, waarbij er ook
       sprake is van een invalidenparkeerplaats. Het is ook mogelijk dat mensen
       met een zeer beperkte loopfunctie hun auto voor de deur parkeren.
       De praktijk is toegankelijk voor minder valide en rolstoelafhankelijke
       pati&euml;nten
      </p>
      <div id="contact-adres">
        <b>Adressen:</b>
        <p id="contact-adres2">
          Burgstraat 19<br>
          4283 GE Giessen<br>
          tel: 0183 443936
        </p>
        <p id="contact-adres1">
          Kerkstraat 72<br>
          4285 BC Woudrichem<br>
          tel: 0183 301378
        </p>
      </div>
      <p class="web-contact">
        Voor problemen met de website, kunt U contact opnemen met
        <a href="mailto: info@fysiowoudrichem.nl?subject=website-fysio-woudrichem">info@fysiowoudrichem.nl</a>
      </p>
    </div>
    </div>
  </body>
</html>

Dit is de CSS van mijn testpagina

code:

body {
     margin: 10px;
     padding: 0px;
     color: black;
     background: white;
     font: 12px/1.5 Verdana, Arial, sans-serif;
}

div.schaduw {
     background: #DDDDDD;
     padding: 0px;
     width: 715px;
     margin: 30px 0 0 5em;
}

div.wrap {
     border: 2px solid #006;
     border-left-width: 0;
     background: white url(images/wrap-bg.png) top left repeat-y;
     margin: -0px;
     padding: 0 0 2em 1px;
     left: -7px;
     top: -7px;
     position: relative;
}

div.wrap img.curve {
    float: left;
    clear: left;
    margin: 0 15px 0 0;
    height: 20px;
}


h1 {
    border-bottom: 2px solid #006;
    color: #006;
    background: #9CC;
    margin: 0;
    padding: 0.125em 0.25em;
    text-align: right;
    text-transform: lowercase;
    font-style: italic;
    letter-spacing: 0.25em;
    font-size: 200%;
    line-height: 1.25em;
}

h2 {
    font-size: 150% ;
    margin: 0;
}

h3, p {
    margin: 1em 30px 1em 56px;
    padding-left: 15px;
}


h3 {
    color: #006;
    border: 1px solid #006;
    border-width: 1px 0;
    background: #9CC;
    font-size: 125%;
    margin-right: 0;
}

table#openTable {
    border: 1px solid #006;
    margin: 0 auto;
}

table#openTable th{
    border-bottom: 1px dashed #006;
    background: #9CC;
    width: 33%;
}

table#openTable td{
    text-align: right;
}

table#openTable td.dag{
    text-align: left;
    font-style: italic;
    background: #EEE;
}

p.first-contact {
    margin-left: 100px;
    margin-right: 50px;
}

p.web-contact {
    margin-left: 100px;
    margin-right: 50px;
    border-bottom: 2px solid ;
    padding: 10px 0px 2px 0px;
    text-align: right;
    font: 10px/1.5 Verdana, Arial, sans-serif;
}

div#contact-adres {
    margin-left: 95px;
    margin-right: 90px
}

p#contact-adres1 {
    margin-left: 6em;
    padding: 0px 5px;
    border: solid #9cc;
    border-width: 3px 0;
    width: 12em;
}

p#contact-adres2 {
    padding: 0px 5px;
    float: right;
    border: solid #9cc;
    border-width: 3px 0;
    width: 12em;
}

a {
    color: black;
    text-align: right;
}

a:hover {
    color: #006;
    text-decoration: underline;
}

Nou vraag ik mij af wat IE met mijn images doet en hoe ik hem wijs kan maken om hier mee te stoppen. Het lijkt wel of hij mijn images ontzichtbaar maakt, want de text word nog steeds naar de vorm van het logo uitgelijnd.

Tevens spookt ie ook iets uit, met mijn adressen, ipv van 2 naast elkaar heb ik er nog maar 1.

Iets wat ik nog geprobeerd heb is:

code:

div.wrap img.curve {
    float: left;
    clear: left;
    margin: 0 15px 0 0;
    height: 20px;
    position: relative; in de img.curv
}

Het gevolg hiervan was dat mijn image terugkwam in IE en op FF had het geen invloed, alleen zat er een padding in IE van 2px tussen de plaatjes. (Het logo is opgebouwd uit 10 losse plaatjes)

_{• ik heb geen problemen met opbouwende kritiek op mijn taalfouten, maar graag in zo'n vorm dat ik er iets mee kan.

• ik heb geen problemen met opbouwende kritiek op mijn code, maar graag in zo'n vorm dat ik er iets mee kan.}

Hello fellow humans

woensdag 19 januari 2005 13:11

Acties:

Rowanov

Kop eens wat anders...

Wat ik uit je warrige verhaal opmaak is dat je banner het niet meer doet na het toevoegen van je div met schaduw. Met je schaduw is bij mij (IE6 en FF1.0) niets mis. Je banner is niet te zien, maar dat kan je waarschijnlijk oplossen met het instellen van de z-index van je div en je banner.

Edit: het heeft wel zeker te maken met z-index, de browser laadt je banner namelijk wel; doe maar eens rechter-muis -> save as op de plek waar je banner hoort te staan

[ Voor 25% gewijzigd door Rowanov op 19-01-2005 13:13 ]

woensdag 19 januari 2005 14:04

Acties:

joint_me

Topicstarter

Rowanov schreef op woensdag 19 januari 2005 @ 13:11:
Wat ik uit je warrige verhaal opmaak is dat je banner het niet meer doet na het toevoegen van je div met schaduw. Met je schaduw is bij mij (IE6 en FF1.0) niets mis. Je banner is niet te zien, maar dat kan je waarschijnlijk oplossen met het instellen van de z-index van je div en je banner.

Edit: het heeft wel zeker te maken met z-index, de browser laadt je banner namelijk wel; doe maar eens rechter-muis -> save as op de plek waar je banner hoort te staan

afkortingen:
IE = internet explorer
FF = firefox

Het gaat om het logo linksboven, voorzover je dat een banner kunt noemen, deze is in IE verdwenen. Het logo bestaat uit 10 verschillende plaatjes, die samen het logo vormen (class="curve"). Zoals te zien in FF lijnt de text volgens het logo uit, dat gebeurt ook nog steeds in IE maar het logo is niet te zien.

Daarnaast gaat het om de twee adressen onderin (id="contact-adres") zoals in FF te zien. IE krijgt het voor elkaar om er 1 van te laten verdwijnen naar een plek waar ik niet achterkan komen waar.

Tevens z-index had ik al geprobeerd, maar dat heeft geen resultaat. Naar aanleiding van je post heb ik zelfs verder geexperimenteerd met de z-index om verschillende dingen naar voren te halen, zonder resultaat. Ben alles in de buurt van het logo een z-index gaan geven met ruime getallen ertussen, geen resultaat niet eens in FF.

Hello fellow humans

woensdag 19 januari 2005 15:04

Acties:

Rowanov

Kop eens wat anders...

Moet je voor de gein eens kijken als je de background van div.schaduw, div.wrap en h1 op "transparent" zet. Dan zie je dus dat hij er wel degelijk onder ligt. Ik hoop dat ik je hiermee iig iets op weg help, erg veel tijd om te gaan klooien heb ik vandaag helaas niet.

maandag 24 januari 2005 16:58

Acties:

joint_me

Topicstarter

Rowanov schreef op woensdag 19 januari 2005 @ 15:04:
Moet je voor de gein eens kijken als je de background van div.schaduw, div.wrap en h1 op "transparent" zet. Dan zie je dus dat hij er wel degelijk onder ligt. Ik hoop dat ik je hiermee iig iets op weg help, erg veel tijd om te gaan klooien heb ik vandaag helaas niet.

Dat vermoeden had ik al, het probleem is opgelost, door het logo in een div in te pakken. Had het niet eerder geprobeerd, omdat ik bang was dat het mijn textwrap dan weg zou zijn. Ach heb weer wat geleerd over div's

Natuurlijk ook de position op relative gezet.

Heb nog steeds geen idee, waarom de z-index niet wou werken, maar misschien is het beter als ik mijzelf dat niet afvraag

Iemand die geintresseerd is in de html en css, die zijn upgedate op de url geloof ik, kan je het daar downen

Hello fellow humans