Come trasformare correttamente una tabella HTML

Valeria75

Nuovo Utente
28 Set 2006
29
0
0
Ciao, sto facendo alcune prove nell'utilizzo corretto di CSS... vorrei capire qual'è la soluzione ottimale per trasformare una tabella con dei contenuti nella logica XHTML, quindi utilizzando <div> (non vorrei usare <p>)


<table width="200" border="0">
<tr>
<td width="86">Login</td>
<td width="104"><input type="text" name="textfield" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="textfield2" /></td>
</tr>
</table>


Come diventerebbe appliando i CSS?

Grazie
 

dead

Utente Attivo
22 Lug 2005
684
0
0
55
Brescia
www.dead.it
Ecco qua:
<style type="text/css"><!--
.a {width:200px; float:left;}
.b {width:40%; float:left;margin-top:5px;}
.c {width:60%; float:left;margin-top:5px;}
input {width:104px;}
--></style>

<div class="a">
<div class="b">Login</div><div class="c"><input type="text" name="textfield" /></div>
<div class="b">Password</div><div class="c"><input type="text" name="textfield2" /></div>
</div>
 

Valeria75

Nuovo Utente
28 Set 2006
29
0
0
Grazie infinite per l'aiuto che mi stai dando...

oggi voglio fare alcune prove sulla base dei tuoi suggerimenti e del tuo esempio

Grazie
 

Valeria75

Nuovo Utente
28 Set 2006
29
0
0
Ciao, vorrei chiedere un chiarimento in merito agli ultimi 3 dubbi...

1) per quale motivo in IE vedo correttamente allineati textbox e label, mentre i FF un textbox mi va nella riga successiva??

2) per quale motivo il testo (label) non risulta allineato verticalmente rispetto al textbox (ma leggermente piu in alto)

3)... alla fine un consiglio: come posso creare una struttura gerarchica, per fare in modo che ci siamo un foglio di stile login e poi i vari fogli ad esso collegati login.textbox, login.label eccc... spesse volte vedo fogli di stile organizzati in questo modo


Uso questo HTML

<html>
<head>
<title>Box con scrollbar</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">

table {
font-size: 1em;
}

h1, h2, h3, h4 {
margin: 0;
font-family: tahoma, arial, helvetica, sans-serif;
}

p {
line-height: 1.4em;
}

hr {
border: 0;
border-top: 1px solid #bababa;
height: 1px;
}

a {
text-decoration: none;
color: #d32525;
}

a:visited {
color: #980000;
}

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

a:active {
color: #980000;
}

body {
background-color: #ffffff;
margin: 0;
padding: 0;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.7em;
color: #666666;
}

img {
border-width: 0;
}



/* PAGE */

.page {
background-repeat: repeat-y;
margin-left: auto;
margin-right: auto;
text-align: left;
}

.login {
width: 190px;
margin: 0px;
}

.login-column1 {
width: 70px;
height: 20px;
vertical-align: middle;
text-align: right;
float: left;
padding: 2px;
}

.login-column2 {
width: 100px;
vertical-align: top;
text-align: left;
float: left;
padding: 2px;
font: 10px Verdana, Trebuchet MS;
}

.login-messages {
width: 190px;
text-align: center;
padding: 0px;
}

.login-label {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #666666;
}

.login-textbox {
width: 80px;
font: 10px Verdana, Trebuchet MS;
color: #666666;
}

</style>
</head>
<body>

<table id="ctl00_Main_LoginArea_Login" class="Login" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
<tr>
<td>
<div class="login">

<div class="login-column1"><label for="ctl00_Main_LoginArea_Login_UserName" id="ctl00_Main_LoginArea_Login_UserNameLabel" class="login-label">Username: </label></div>
<div class="login-column2"><input name="ctl00$Main$LoginArea$Login$UserName" type="text" id="ctl00_Main_LoginArea_Login_UserName" accesskey="u" class="login-textbox" /></div>
<div class="login-column1"><label for="ctl00_Main_LoginArea_Login_Password" id="ctl00_Main_LoginArea_Login_PasswordLabel" class="login-label">Password: </label></div>
<div class="login-column2"><input name="ctl00$Main$LoginArea$Login$Password" type="password" id="ctl00_Main_LoginArea_Login_Password" accesskey="p" class="login-textbox" /></div>
<div class="login-column1"></div>
<div class="login-column2"><span class="login-textbox"><input id="ctl00_Main_LoginArea_Login_RememberMe" type="checkbox" name="ctl00$Main$LoginArea$Login$RememberMe" /><label for="ctl00_Main_LoginArea_Login_RememberMe">remember</label></span></div>

<div class="login-messages">
<span id="ctl00_Main_LoginArea_Login_UserNameRequired" title="User Name is required." style="color:Red;visibility:hidden;">*</span>
<span id="ctl00_Main_LoginArea_Login_PasswordRequired" title="Password is required." style="color:Red;visibility:hidden;">*</span>
</div>

<input type="image" name="ctl00$Main$LoginArea$Login$LoginButton" id="ctl00_Main_LoginArea_Login_LoginButton" src="Img/button-login.gif" alt="Login" style="border-width:0px;" />
<a class="button" href="register.aspx">
<img id="ctl00_Main_LoginArea_Login_Image1" src="Img/button-create.gif" alt="Nuovo utente" style="border-width:0px;" />
</a>

</div>
</td>
</body>
</html>


Grazie
 

Valeria75

Nuovo Utente
28 Set 2006
29
0
0
Se un foglio di stile rappresentasse tutto ciò che devo fare in un applicativo on line sarei la persona piu felice del mondo
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Trasformare sito in app Sviluppo app per Android 0
S [MS Access] trasformare un numero in lettere in un report MS Access 1
A [Visual Basic] Trasformare stringa in ora Visual Basic 0
C Trasformare una foto digitale con photoshop Photoshop 5
Trabba [MySQL] Trasformare tabella con totali MySQL 2
matteoraggi [PHP] Trasformare una animazione html5 in un file video PHP 0
lidya123 ALGORITMO per trasformare/mappare/coordinare Tocchi tra Tablet e Desktop PC Programmazione 0
V [Javascript] Trasformare secondi a giorni, ore, minuti Javascript 12
fabryx [PHP]RISOLTO: Trasformare righe in colonne assegnando singole variabili PHP 10
S Problema trasformare una stringa in html object Javascript 0
A trasformare l'iphone in un cicalino attraverso un app Sviluppo app per iOS 5
E Trasformare in html HTML e CSS 10
J [risolto] Trasformare la seguente classe PHP PHP 2
N trasformare la rete di casa del pc fisso in una rete wifi Reti LAN e Wireless 1
F Trasformare risultato funzione in maiuscolo (uppercase) Javascript 7
M Trasformare una pagina PHP caricata in un documento PDF o XML PHP 3
S Script per trasformare apici in altri caratteri Javascript 4
A [html] trasformare codice in html PHP 0
A Trasformare un immagine in una tabella HTML e CSS 16
L Trasformare delle immagini tutte nella stessa dimensione Photoshop 1
B Trasformare/convertire codice javascript in link URL Javascript 11
L Trasformare array in stringa Classic ASP 0
M Trasformare una immagine in vettoriale. Webdesign e Grafica 8
max_400 trasformare .SCR (Screensaver) in .SWF oppure in gif Flash 7
LaKanka trasformare una data in formato RFC 2822 PHP 5
N trasformare una stringa in variabile PHP 2
P trasformare una selezione con photoshop Photoshop 1
H Trasformare i link in immagini Programmazione 2
T Trasformare da MAIUSCOLO a minuscolo Classic ASP 1
V BOX fatto con tabella HTML da trasformare in XHTML HTML e CSS 6
G TRASFORMARE MP3 in CODICI HTML HTML e CSS 2
metalgemini trasformare le date PHP 3
M Sapete come trasformare una presentazione di PowerPoint in una presentazione in dvd? Webdesign e Grafica 1
A trasformare un vbscript in javascript ..???? Javascript 4
M Questa pagina non carica correttamente Google Maps: aiuto!! HTML e CSS 1
felino [Windows 8.1] Windows Update non funziona correttamente Windows e Software 3
P [PHP] Input Type="date" non va correttamente con Apple PHP 2
M La bozza di un sito con alcune funzioni javascript non si apre correttamente su smartphone Javascript 1
S [PHP] Simbolo di euro e sterlina non correttamente visualizzato PHP 3
C Sottomenù Bootstrap che non funziona correttamente HTML e CSS 8
A Javascript non funziona correttamente su smartphone Javascript 2
Shyson Database non estrae correttamente caratteri accettati PHP 17
S Condividere correttamente link su Facebook (immagine anteprima errata) HTML e CSS 1
J Icone non allineate correttamente nella barra di navigazione HTML e CSS 2
E [risolto] win 8.1 + IE11 le sessioni PHP non fuonzionano correttamente PHP 7
M Importare correttamente in tabella file CSv con doppi apici MySQL 4
M Il menu HTML funziona correttamente se richiamato da un file php non funziona più PHP 3
I Perchè devo cliccare 2 volte su un link per caricare correttamente il css di una galleria? WordPress 1
F Problemi con il mio primo sito, galleria fai da te non visualizzata correttamente HTML e CSS 1
O Sito creato su notepad++ non viene letto correttamente da dreamweaver Webdesign e Grafica 0

Discussioni simili