Avatar billede espeholt_jr Nybegynder
10. maj 2009 - 18:01 Der er 9 kommentarer og
1 løsning

Textarea og input for bred

Hej,

Har et problem med XHTML 1.1/CSS. Jeg har flg. side hvor textarea og input går længere ud end de skal, hvordan kan det være?

Og så skal felterne ligge helt tæt op af overskrifterne og ikke det store mellemrum der er nu.

Løsningen skal være XHTML 1.1 og virke til alle de kendte browsere.

På forhånd tak :)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

</head>
<body>
<div style="width: 600px; background-color: blue;">
<table style="width: 100%; background-color: red;">
        <tr>
            <th style="width: 0%; text-align: left; vertical-align: top;">
                Navn:
            </th>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <th style="width: 0%; text-align: left; vertical-align: top;">
                E-mail:
            </th>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <th style="width: 0%; text-align: left; vertical-align: top;">
                Emne/Overskrift:
            </th>
            <td>
                <input type="text" style="width: 100%;" />
            </td>
        </tr>
        <tr>
            <th colspan="2" style="text-align: left; vertical-align: top;">
                Kommentar:<br />
                <textarea rows="2" cols="20" style="height:80px; width: 100%;"></textarea>
            </th>
        </tr>
    </table>
</div>
</body>
</html>
Avatar billede keysersoze Guru
10. maj 2009 - 18:26 #1
så længe du har noget før din doctype kan du ikke forvente at din css opfører sig som den skal. derudover vil du nok kunne løse det ved at sætte margin/padding til 0px.
Avatar billede jagdos Nybegynder
10. maj 2009 - 18:47 #2
Dit input og textarea felt bliver for stort fordi du har sat with til 100%, bare fjern/ændrer det, så bliver de mindre.

dvs.
<textarea rows="2" cols="20" style="height:80px; width: 100%;">
burde være
<textarea rows="2" cols="20" style="height:80px; width: 60%;">

Mellemrummet tror jeg kommer af at du sætter <th>'s width til 0%, hvilket ikke kan lade sig gøre, så den ignorerer det. Sætter man den til fx 1% virker det.
Avatar billede espeholt_jr Nybegynder
10. maj 2009 - 18:57 #3
Det med 1% virker, tak :)

Men grunden til at den er sat til 100% er fordi den skal fylde det hele. Den skal bare ikke gå udover det røde som den gør.
Avatar billede espeholt_jr Nybegynder
10. maj 2009 - 23:14 #4
keysersoze->det med <?xml i starten skulle vidst være påkrævet af XHTML 1.1 hhm... prøver lige padding/margin
Avatar billede espeholt_jr Nybegynder
10. maj 2009 - 23:17 #5
Hvor vil du have padding/margin henne?
Avatar billede keysersoze Guru
10. maj 2009 - 23:20 #6
Den er påkrævet hvis man serverer XML og det tvivler jeg på at du gør - og så ødelægger linjen i stedet størstedelen af CSS. Læs de to XHTML-artikler her; http://www.eksperten.dk/guide/Programmering/DHTML/

padding og margin skal på input og textarea.
Avatar billede espeholt_jr Nybegynder
10. maj 2009 - 23:43 #7
kan ikke umildbart få margin/padding til at virke. Har fundet en midlertidig løsning hvor man sætter <div style="padding: 0 0 6px 0;"> </div> omkring input. Dog ikke så elegant :/
Avatar billede espeholt_jr Nybegynder
10. maj 2009 - 23:58 #8
I følge:
http://www.smackthemouse.com/xhtmlxml

skal der <?xml på
Avatar billede zips Juniormester
11. maj 2009 - 00:31 #9
Da du ikke skriver xhtml 1.1 skal det ikke være på, du har stadig <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
altså content="text/html som fortæller at det er html og ikke xhtml, men du kan jo sætte den rigtige ind content="application/xhtml+xml" og se hvad der så sker :-)

Læs om xhtml 1.1 her http://www.w3.org/TR/xhtml11/
Og media type her http://www.w3.org/TR/xhtml-media-types/
Avatar billede espeholt_jr Nybegynder
11. maj 2009 - 23:32 #10
Har sat det ind, der sker intet. Indtil videre bruger jeg padding :/ men er åben for forslag :)
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