Avatar billede excession Nybegynder
05. oktober 2002 - 03:29 Der er 27 kommentarer og
2 løsninger

kan ikke sætte cursor i formular?

hej

jeg har lavet en login side her:

http://www.newidentity.dk/coolIdentity/login.asp

Men jeg kan ikke få lov at sætte cursoren i tekstfelterne eller trykke på submit...

siden er bygget op i DIV'er og css

hvad har gjort galt?
Avatar billede jakoba Nybegynder
05. oktober 2002 - 03:36 #1
det ser ud somom du har lagt et lag henover felterne.
Avatar billede excession Nybegynder
05. oktober 2002 - 03:38 #2
ja det er jeg bange for

jeg synes ellers at jeg har sat z-index højere i tekstDiv...

jeg tror det er den DIV der indeholder baggrundsbilledet..

er nogen vej uden om eller skal jeg til at sætte det op igen?
Avatar billede jakoba Nybegynder
05. oktober 2002 - 03:39 #3
kan de passe at fyren ligger i starkImageDiv og at den div er absolut placeret ovenpå?
Avatar billede excession Nybegynder
05. oktober 2002 - 03:40 #4
jep
Avatar billede jakoba Nybegynder
05. oktober 2002 - 03:42 #5
starkImage har z-indez 3 og textdiv har højere z-indez end alle de andre.
men den er relativt placeret. prøv evt en test hvor du gør den absolut placeret, om den så popper op ovenpå.
Avatar billede excession Nybegynder
05. oktober 2002 - 03:46 #6
jeg ved ikke helt hvad det er jeg har lavet..

synes lige pludselig at jeg manger en afsluttende </div> tag på      <div id="mainGreyDiv">
Avatar billede jakoba Nybegynder
05. oktober 2002 - 03:54 #7
svært at sige hvor det mangler, men jeg tælle en færre </div kommandoer.
Avatar billede excession Nybegynder
05. oktober 2002 - 03:55 #8
irriterende... nu havde jeg lige sat det hele op og troede det var fint, men så mangler jeg en afsluttende tag...

men jeg nåede lige at prøve at sætte absolute på og det virkede, men jeg vil gerne undgå absolute, fordi de lag skal helst bare udvides sammen med teksten når det bliver længere
Avatar billede limemedia Nybegynder
05. oktober 2002 - 03:56 #9
Jeg har kigget dybt i krystalkuglen og fremkommet med følgende

Jeg har lagt stylesheet'et ind i filen, tilføjet to manglende </div>, tilføjet en manglende &nbsp; til netscape og sminket koden så jeg kunne finde rundt - intet af dette hjalp.

Jeg kiggede så i dine divs og slettede én efter én, og fandt at netop #mainGreyDiv skabte problemer. Jeg fjernede kommando efter kommando, og ved at slette position: relative; i stylen, virker skidtet.

Dont ask me why ...

hermed resultatet


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>admin - newidentity.dk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
    #starkImageDiv {
        position: absolute;
        top: 70px;
        left: 10px;
        width: 570px;
        height: 570px;
        border: 1px none #000000;
        background-image: url("images/thomasstark.gif");
        background-repeat: no-repeat;
        filter:alpha(opacity=20);
        z-index: 3;
    }
   
    #cvImageDiv {
        position: absolute;
        top: 85px;
        left: 10px;
        width: 570px;
        height: 940px;
        border: 1px none #000000;
        background-image: url("images/coolstanding.gif");
        background-repeat: no-repeat;
        filter:alpha(opacity=20);
        z-index: 3;
    }
   
    #contactImageDiv {
        position: absolute;
        top: 70px;
        left: 10px;
        width: 570px;
        height: 570px;
        border: 1px none #000000;
        background-image: url("images/thomasstark.gif");
        background-repeat: no-repeat;
        filter:alpha(opacity=20);
        z-index: 3;
    }
   
    #projectsImageDiv {
        position: absolute;
        top: 70px;
        left: 10px;
        width: 570px;
        height: 570px;
        border: 1px none #000000;
        background-image: url("images/thomasstark.gif");
        background-repeat: no-repeat;
        filter:alpha(opacity=20);
        z-index: 3;
    }
   
    #mainWhiteDiv {
        position: relative;
        width: 590px;
        background-color: #FFFFFF;
        border: 1px none #000000;
        z-index: 1;
        margin-top: 20px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
    }
   
    #menuGreyDiv {
        position: relative;
        top: 0px;
        left: 0px;
        width: 570px;
        height: 50px;
        background-color: #D1D1D1;
        border: 1px none #000000;
        z-index: 2;
        margin-right: auto;
        margin-left: auto;
    }
   
    #menuDiv {
        position: relative;
        top: 10px;
        left: 10px;
        width: 550px;
        height: 30px;
        border: 1px none #000000;
        z-index: 2;
        margin-right: auto;
        margin-left: auto;
    }
   
    #mainGreyDiv {
        top: 10px;
        left: 0px;
        width: 570px;
        height: 570px;
        background-color: #D1D1D1;
        border: 1px none #000000;

        z-index: 2;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 10px;
    }

    .foo {
        position: relative;
    }
   
    #whiteDiv {
        position: relative;
        top: 10px;
        left: 140px;
        width: 400px;
        height: 520px;
        background-color: #FFFFFF;
        border: 1px none #000000;
        filter:alpha(opacity=70);
        z-index: 8;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;       
    }
   
    #titleDiv {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 380px;
        height: 20px;
        border: 1px none #000000;
        z-index: 5;
        font-family: Geneva, Arial, Helvetica, san-serif;
        font-size: 14px;
    }
   
    #tekstDiv {
        position: relative;
        top: 0px;
        left: 0px;
        width: 370px;
        border: 1px none #000000;
        z-index: 12;
        color: #000000;
        font-family: Geneva, Arial, Helvetica, san-serif;
        font-size: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }
   
    #copyrightDiv {
        position: relative;
        top: 10px;
        left: 380px;
        width: 100px;
        height: 30px;
        border: 1px none #000000;
        z-index: 10;
    }
   
   
    p {
        font-size: 12px;
        font-family: Geneva, Arial, Helvetica, san-serif;
        color: #000000;
    }
   
    body {
        font-size: 12px;
        font-family: Geneva, Arial, Helvetica, san-serif;
        color: #000000;
        background-color: #E6E6E6;
        margin: 0px 0px 0px 0px;
        text-align: center;
    }   
   
    .forms  {
        background-color:#FFFFFF;
        border-bottom:solid 1px;
        border-left:solid 1px;
        border-right:solid 1px;
        border-top:solid 1px;
        border-color: #B2B2B2;
        color: #000000;
        font-family: Geneva, Arial, Helvetica, san-serif;
        font-size: 11px;
        filter:alpha(opacity=60);
    }
   
    table {
        font-size: 12px;
        font-family: Geneva, Arial, Helvetica, san-serif;
        color: #000000;
    }
-->
</style>
</head>


<body>
    <div id="mainWhiteDiv">
          <div id="menuGreyDiv">
              <div id="menuDiv">
                  <table border="0" width="100%" cellpadding="0" cellspacing="0">
                  <tr>
                  <td><a href="#"><img alt="" src="images/logo.jpg" border="0"></a></td>
                  <td width="50px">&nbsp;</td>
                  <td><a href="#"><img alt="home" name="home" src="images/home_off.jpg" border="0" onMouseOver="document.images.home.src='images/home_on.jpg'"    onMouseOut="document.images.home.src='images/home_off.jpg'"></a></td>
                  <td><a href="#"><img alt="cv" name="cv" src="images/cv_off.jpg" border="0" onMouseOver="document.images.cv.src='images/cv_on.jpg'" onMouseOut="document.images.cv.src='images/cv_off.jpg'"></a></td>
                  <td><a href="#"><img alt="projects" name="projects" src="images/projects_off.jpg" border="0" onMouseOver="document.images.projects.src='images/projects_on.jpg'" onMouseOut="document.images.projects.src='images/projects_off.jpg'"></a></td>
                  <td><a href="#"><img alt="contact" name="contact" src="images/contact_off.jpg" border="0" onMouseOver="document.images.contact.src='images/contact_on.jpg'" onMouseOut="document.images.contact.src='images/contact_off.jpg'"></a></td>
                  </tr>
                  </table>
              </div>
        </div>

        <div id="starkImageDiv">
        </div>

          <div id="mainGreyDiv">
              <div id="whiteDiv">
                <div id="tekstDiv">
                    <b>login - newidentity</b><br>
                    <form name="login" METHOD="POST" ACTION="loginkode.asp">
                    <table width="250" border="0">
                    <tr>
                    <td>username : </td>
                    <td><input type="text" name="username" class="forms"></td>
                    </tr>
                   
                    <tr>
                    <td>password : </td>
                    <td><input type="password" name="password" class="forms"></td>
                    </tr>
                   
                    <tr>
                    <td>&nbsp;</td>
                    <td><input type="submit" name="submit" value="login" class="forms"></td>
                    </tr>
                    </table>
                    </form>
                </div>
            </div>

            <div id="copyrightDiv">
            <img alt="&copy; copyright 2002 thomas stark" src="images/copyright.gif" border="0">
            </div>
        </div>
    </div>
</div>
</body>
</html>
Avatar billede limemedia Nybegynder
05. oktober 2002 - 03:57 #10
hov, jeg har én div for meget med, beklager...

ps. alpha:opacity virker ikke i mozilla. Dit billede bliver *for* stærkt på denne platform. Synd for ellers en god ide
Avatar billede excession Nybegynder
05. oktober 2002 - 04:01 #11
ok.. tak

men det virker ikke hos mig :(

skidt med opacity og mozilla.. er der noget andet man kan bruge?
Avatar billede jakoba Nybegynder
05. oktober 2002 - 04:02 #12
så kan jeg da bidrage med lidt:
        filter:alpha(opacity=20);      /* ignoreres af NS & mozilla */
        opacity:20%;              /* til NS & Moz; ignoreres af IE */
Avatar billede excession Nybegynder
05. oktober 2002 - 04:05 #13
smukt jaokoba!

jeg tror hellere jeg må få styr på de DIV..
Avatar billede excession Nybegynder
05. oktober 2002 - 04:06 #14
jakoba even
Avatar billede limemedia Nybegynder
05. oktober 2002 - 04:09 #15
snip, den snupper jeg også... tak jakob :)
Avatar billede jakoba Nybegynder
05. oktober 2002 - 04:11 #16
Ups. galt navn.
        -moz-opacity:20%;          /* til NS & Moz; ignoreres af IE */

bemærk at navnet starter med -
Avatar billede excession Nybegynder
05. oktober 2002 - 04:16 #17
jeg kan ikke få det til at ligge ordentligt..! :|

jeg kan ikke få mainGreyDiv til at ligge oveni billedet eller billedet oveni mainGreyDiv

hvad gør jeg forkert? har ikke helt fattet forskellen mellem relative og absolute tror jeg
Avatar billede excession Nybegynder
05. oktober 2002 - 04:26 #18
hvis jeg sætter DIV med billedet til absolute ligger den ok, men jeg kan ikke bruge textfields eller fremhæve tekst osv..

hvis jeg sætter DIV med billedet til relative ligger den af lor* men jeg kan bruge textfields og fremhæve tekst osv..
Avatar billede excession Nybegynder
05. oktober 2002 - 04:48 #19
ok nu har jeg fået lagt det ordentligt tror jeg..

men jeg kan ikke rigtig finde ud af det med z-index og opacity nu.. fordi det hvide felt som lå i midten er nu grå
Avatar billede excession Nybegynder
05. oktober 2002 - 04:57 #20
Avatar billede excession Nybegynder
05. oktober 2002 - 04:58 #21
Avatar billede jakoba Nybegynder
05. oktober 2002 - 09:41 #22
jeg tror opacity er kumulativ i Netscape

starkImageDiv    er  20%
whiteDiv indeni starkImageDiv er 70% af 20%  ->  14%
forms indeni whitediv er 60% af 14%  ->  8,4%

den er grumme svær at se den form.
Avatar billede jakoba Nybegynder
05. oktober 2002 - 09:49 #23
Der er slet ikke brug for gennemsigtighed her.
det eneste den bruges til er et fade billedet så det ikke er så kraftigt.
og igen whitediv bruges til at fade billedet lidt mere der hvor den ligger.

så hvad med at hive billedet ind i et paintprogram og fade det til 20%
derfeter vælge det areal i billedet hvor whiteDiv ligger og fade det lidt mere.

fjerne gennemsigtigheden i starkImageDiv og helt fjerne whitediv.
placere tekstDiv og copyrightDiv relativt i starkImageDiv.

mvh JakobA
Avatar billede excession Nybegynder
05. oktober 2002 - 14:48 #24
jeg kan ikke helt finde ud af hvad det er der går galt..

er det den mainGreyDiv der ligger henover whiteDiv? kan du se det?
Avatar billede excession Nybegynder
05. oktober 2002 - 14:51 #25
det holder hellere ikke rigtig at lave om på billedet, fordi teksten måske er længere end det lille stykke man laver om i billedet
Avatar billede excession Nybegynder
05. oktober 2002 - 15:41 #26
nu har jeg fået det ordnet: http://www.newidentity.dk/coolIdentity/login.asp

jeg siger mange tak for hjælpen
Avatar billede excession Nybegynder
05. oktober 2002 - 15:59 #27
hvis jeg lige må stille et sidespørgsmål hurtigt..

hvad er forskellen mellem transitionel og strict? får jeg noget ud af at lave det til strict?
Avatar billede limemedia Nybegynder
05. oktober 2002 - 16:02 #28
ikke udover en masse bøvl... jeg koder altid mod transitional
Avatar billede excession Nybegynder
05. oktober 2002 - 16:08 #29
du lyder rimelig proff lj.. plejer du at lave layout på denne måde? og ikke i en masse tabeller?

normalt har jeg altid lavet layout i tabeller, men det virker hurtigere og mre præcist med div
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester