[LØST] Problem med lengde på input-felter

9 innlegg i emnet

Skrevet

Sitter altså her å prøver å lage en enkel nettside som skal se sånn ut:

772817.jpeg

Siden skal ikke benytte noen spesifikke table / tr / td attributter (unntatt colspan), men skal benytte

CSS. Jeg skal kunne kontrollere hvor mye luft det blir omkring teksten inni hver celle i tabellen. Feltene for

navn og poststed skal starte på samme sted. Feltene for navn og kommentar skal strekke seg like

langt til høyre.

Mitt foreløpige (håløse)forsøk ser: slik ut

Noen gode hoder som kan forklare meg hva jeg skal gjøre?

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Kanskje ikke de beste løsningene, men prøv dette:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Untitled 1</title>

<style>


#navn {width: 80%;}

#psted {width: 75px;}

#kommentar {width: 90%; height: 50px;}

#felt {	background-color: #C0C0C0;}

</style>

</head>

<body>

<h1>Velkommen</h1>

<table width="90%" border="1">

  <tr>

    <td colspan="3">&nbsp;</td>

  </tr>

  <tr>

    <td style="height: 220px; width: 91px;"></td>

    <td id="felt" colspan="2" style="height: 220px;">

    <form name="form1" method="post" action="">

      	<p>Navn

      	  <label for="navn"></label>

      	  <input type="text" name="navn" id="navn" style="position:absolute;left:190px;width: 73%;"/>

      	</p>

      	<p>Poststed

      	  <label for="psted"></label>

      	  <input name="psted" type="text" id="psted" maxlength="4" style="position:absolute;left:190px;"/>

      	</p>

      	<p>Min kommentar</p>

      	<textarea name="kommentar" cols="45" rows="5" style="width: 355px"></textarea><br />

      	<p>

      	  <input type="submit" name="send"/>

      	  <input type="reset"/>

   	    </p>

    </form></td>

  </tr>

  <tr>

    <td style="width: 91px"><p>dato 1/1-10</p></td>

    <td width="79">e-post: <a href="mailto:xxx@xxx.xxx">xxx</a></td>

    <td style="width: 152px">navn: xxx</td>

  </tr>

</table>


</body>


</html>

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet (endret)

Kanskje ikke de beste løsningene, men prøv dette:

Tror ikke position:absolute er så smart, hvis jeg endrer størrelsen på nettleservinduet, så ser det helt på trynet ut

Endret av Martin Aleksander
0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Jepp, sorry... Så det nå :P

Skal se på det mer senere.

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet (endret)

Bruk Martin Aleksander sin løsning! :)

Endret av lor3ntz
1

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Forandret markupen litt, håper ikke jeg har gjort leksene dine nå :P

Hvorfor er det sånn at løsningen alltid skal være så enkel? Jo, fordi det er det enkle man aldri tenker på :P

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Du har fått en del forslag her allerede ser jeg, men du skal få et forslag fra meg også.. ;)

Det jeg ønsker å poengtere med mitt eksempel, er at du ikke skal bruke tabeller til design og layout.

Tabeller skal kun brukes til å vise tabulære data.

Har gjort en kjapp markup her:

773389.jpeg

Selve skjemaet er gjort med labels og inputfields, med tilhørende CSS.

Deretter har jeg brukt tabellen til å vise frem data.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.formLayout,
.tableLayout{
background-color: #f3f3f3;
border: solid 1px #a1a1a1;
margin-bottom:20px;
padding: 10px;
width: 600px;
}

.formLayout label{
display: block;
width: 120px;
float: left;
font-weight:700;
margin-bottom: 10px;
text-align: right;
padding-right: 20px;
}

.formLayout input#name{
display:block;
width:420px;
float:left;
margin-bottom: 10px;
}
.formLayout input#postnummer{
display:block;
float:left;
margin-bottom: 10px;
width:80px;
}

br{
clear: left;
}
</style>
</head>
<body>
<h2>Velkommen</h2>
<div class="formLayout">
<form action="" method="get">
<label>Navn</label>
<input name="name" type="text" id="name" /><br />

<label>Postnummer</label>
<input name="postnummer" type="text" id="postnummer" maxlength="4" /><br />

<label>Din kommentar</label>
<textarea name="comment" cols="50" rows="4" id="comment"></textarea><br /><br />

<input name="" type="submit" value="Send inn" /> <input name="" type="reset" value="Tilbakestill" />
</form>
</div>
<div class="tableLayout">
<table width="580" border="1">
<tr>
<th scope="col">Dato</th>
<th scope="col">Epostadresse</th>
<th scope="col">Navn</th>
</tr>
<tr>
<td>01.01.10</td>
<td><a href="mailto:test@localhost.com">test@localhost.com</a></td>
<td>Navn Navnesen</td>
</tr>
<tr>
<td>02.01.10</td>
<td><a href="mailto:test2@localhost.com">test2@localhost.com</a></td>
<td>Ola Nordmann</td>
</tr>
</table>
</div>
</body>
</html>
[/code]

1

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Martin A.s løsning er nok bedre. Antok at det var et mål å bruke tables ut i fra posten.

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Takk for forslag begge to, hadde ikke tenkt over at det kanskje var best uten tabell.

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!


Start en konto

Logg inn

Har du allerede en konto? Logg inn her.


Logg inn nå

  • Hvem er aktive   0 medlemmer

    Ingen innloggede medlemmer aktive