come da titolo.
come posso codificare in modo ottimizzato questa struttura di boxes?
NOTE:
se possibile un codice tableless, solo con dei divs.
non preoccupatevi dei colori.
la linea rossa è di 1px.
i testi a dx e sx vanno sulla stessa riga (si può fare con un float?)
confido in voi. grazie in anticipo.
se avete tempo libero e volete farmi da consulente anche x altre cose simili, scrivete che vi faccio sapere (è per un progetto gratis...)
ciao,
jack.
ecco l'allegato...
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.contenitore {width:300px;
border:1px solid black}
.testa {background:silver;
border-bottom:1px solid black;
padding:.4em
}
.destra{
float:right}
.giustificato {text-align:justify;
background:green;
padding:.4em;
color:white
}
</style>
</head>
<body>
<div class="contenitore"><div class="testa"><span class="destra">allineato a Dx </span>allineato a Sx
</div>
<div class="giustificato">testo giustificato un'altro po' di testo altrimenti non si vede la giustificazione testo giustificato un'altro po' di testo altrimenti non si vede la giustificazione </div></div>
</body>
</html>
il bordino rosso ti serve o è un refuso?
4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore
il bordino rosso in alto e a sx è FONDAMENTALE a dir poco.
era una delle cose per cui mi serve suggerimento...
io avrei fatto un div dentro l'altro, ma non so se c'è di meglio...
allora aggiungi questo:
.testa {border-top:1px solid red;
border-left:1px solid red}
ora mi vorresti dire che quel bordino lo vorresti rosso senza l'altro nero?
4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore
si, fidati che coi colori giusti l'effetto non è male. :adhone:
e grazie! :metallica
a proposito, ti va di lavorare con me ad un layout?è per un progetto gratuito, tutto ciò che posso fare è mettere un tuo link tra gli sviluppatori.
il lavoro grosso lo faccio io, tu mi fai da consulente.
sempre se hai voglia e tempo (anche perchè il lavoro partirà tra 1 bel po, ora ho degli esami in ballo...)
mandami 1 pvt se vuoi.
ciao,
jack.
si? si???? e perchè non postavi una gif buona allora?
<html>
<head>
<title>Si?</title>
<style type="text/css">
.contenitore {width:300px}
.testa {background:silver;
border-top:1px solid red;
border-left:1px solid red;
border-right:1px solid black;
padding:.4em;
}
.destra{
float:right}
.giustificato {text-align:justify;
background:green;
padding:.4em;
color:white;
border:1px solid black;
}
</style>
</head>
<body>
<div class="contenitore"><div class="testa"><span class="destra">allineato a Dx </span>allineato a Sx
</div>
<div class="giustificato">pappardella giustificata</div></div>
</body>
</html>
il privato te lo mando domani però.
4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore
NOOOOOOOOO
scusa ci siamo capiti male!!!
la mia gif è perfetta :adhone:
allora, il bordino rosso ci va in alto e a sx, ma anche quello nero tutt'intorno! mi serve "esattamente" come nella gif
va bene il secondo pezzo da aggiungere. perfetto.
Ciao scusa ancora, sai darmi una mano per questo?
grazie ancora
v.a.
ciao,
jack.
----edit----
se x questo è un casino, mi va bene anche una tabella.
<html>
<head>
<title>Stitolato</title>
<style type="text/css">
body {font-family:sans-serif;
font-size:90%;
}
.destra p {padding:4px;
text-align:center;
color:white;
margin:0
}
.sinistra p {padding:4px;
margin:0;
color:black;
text-align:left
}
.contenitore {width:400px;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
background:green;
}
.sinistra {
width:50%;
background:silver;
border-top:1px solid red;
border-left:1px solid red;
border-right:1px solid black;
float:left;
}
.destra
{
width:100%;
border-top:1px solid black;
padding:0
}
.clear {clear:both;
height:0px;
font-size:0px;
line-height:0px;
}
</style>
</head>
<body>
<div class="contenitore">
<div class="destra"><div class="sinistra">
Allineato a SX vediamo che succede</p></div>
Allineato al centro</p></div>
<br class="clear">
<div class="destra"><div class="sinistra">
Allineato a SX</p></div>
Allineato al centro</p></div>
<br class="clear">
</div>
</body>
</html>
Fai attenzione, data la natura dei div non è possibile senza immagini di sfondo tenere dipendenti le pseudo-colonne, solo una per pseudo-riga riesce a trascinare in altezza le altre, almeno fino a quando la la lunghezza di una parola non eccede lo spazio della pseudo-cella, in questo caso è quella di sinistra, se fosse maggiore il testo dell'altra per almeno un linea di testo sballerebbe, puoi provarlo con mozilla ridimensionando il testo e vedere che la prima riga rispetta questa condizione e la prima pseudo cella trascina la seconda, la seconda riga no, se ti serve un'impostazione diversa lo dici.
4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore
Permessi di invio
Rispondi quotando