Avatar billede tobrukDk Novice
31. december 2011 - 15:29 Der er 4 kommentarer og
1 løsning

Flytte den der henne ved siden af login input

Hej

Jeg er i gang med at lave et login form hvis man kan sig sådan ;

det ser sådan her ud ;
http://jesperbok.dk/billeder/her.png

men jeg vil gerne have den hen hvor pil gå hen da har det hele samme sted

sådan som det er nu vil jeg ikke have det skal være da jeg synes det er for grimt og virker lidt mærkeligt,

jeg har prøvet med lidt css og det hjælper ikke :(



<div id="loginbox">
    <form action="login.php" method="post">
    Brugernavn: <input type="text" name="brugernavn">
    Password: <input type="password" name="password">
    <input type="submit" value="Login">
    </form>
    <form action="opret.php" method="post">
    <input type="submit" value="Opret">
    </form>
    </div>

sådan har jeg skrevet koden :)


og sådan her har jeg skrevet css som det hele er inde i;

#loginbox {
    background:url(../img/menu-bg/bg-login.png) repeat-x  bottom #fff;
    padding:5px;   
}
Avatar billede tobrukDk Novice
31. december 2011 - 15:30 #1
Håber som sagt at du kan hjælp mig frem til hvad mit problem skulle være? eller om jeg skal tilføj noget mere?
Avatar billede Poko1 Ekspert
31. december 2011 - 15:48 #2
Bare i samme række?

<div id="loginbox">
    <form action="login.php" method="post">
    Brugernavn: <input type="text" name="brugernavn">
    Password: <input type="password" name="password">
    <input type="submit" value="Login">&nbsp;
    <input type="submit" value="Opret"></form>
    </div>
Avatar billede tobrukDk Novice
31. december 2011 - 15:51 #3
Fejl er løst ;


<div id="login">
    <form action="login.php" method="post">
    Brugernavn: <input type="text" name="brugernavn">
    Password: <input type="password" name="password">
    <input type="submit" value="Login">
    </form>
    </div>
    <form action="opret.php" method="post">
    <input type="submit" value="Opret">
    </form>
    </div>



#loginbox {
    background:url(../img/menu-bg/bg-login.png) repeat-x  bottom #fff;
    padding:5px;   
}
#opret {
    float:left;
}
Avatar billede tjens Nybegynder
31. december 2011 - 15:52 #4
form er et block element, og derfor går form nummer 2 ned på en ny linie.

Du kan ændre dette med CSS:
#loginbox form {
    display:inline;
}
Avatar billede olebole Juniormester
31. december 2011 - 16:10 #5
<ole>

@tjens: Det holder ikke  =)

@tobrukDK: Dine input elementer må ikke ligge 'løst', men skal pakkes ind i block-elementer, hvis koden skal være valid.

Gør du det, kan du til gengæld ikke sætte formenes display til inline. I stedet skal du bruge display:inline-block, da formene så opfører sig som inline-elementer udadtil - og som block-elementer indadtil.

Et godt bud i valid kode vil derfor være:


<div id="loginbox">
    <form action="login.php" method="post">
        <div>Brugernavn: <input type="text" name="brugernavn">
        Password: <input type="password" name="password">
        <input type="submit" value="Login"></div>
    </form>
    <form action="opret.php" method="post">
        <div><input type="submit" value="Opret"></div>
    </form>
</div>


- og i CSS'en skal der så stå:


form {
    display: inline-block;
}


Så vil det virke som ønsket.

Og så lige et Godt Nytår på falderebet ... og tak for det gamle  *o)

/mvh
<(bole>
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