tabella due angoli quadrati e due arrotondati

[.Reese]

ciao.. innanzitutto voglio dire che mi sono appena iscritta, non so se sono nella sezione giusta, se così fosse scusate.

non sono espertissima di grafica wec, html, css e cose così, infatti sto impazzendo per trovare un tipo di tabella, ovvero quella che ha due angoli arrotondati e due quadrati, la terza figura in questa immagine [URL=http://www.pittorifamosi.it/immagini/2012/03/angoli-arrotondati-moz-border-radius-460x259.gif]
in realtà ho trovato alcune cose nel web, ma tutte parlano di javascript e soprattutto css, a me però serve in html, perchè la devo mettere in forumfree, nella parte apposta per l'html, perchè se metto il codice in css, non mi viene fuori nulla..
potete darmi una mano??

[ybla82]

Con i CSS 3.0 è stata introdotta la possibilità di disegnare i bordi arrotondati per div e tabelle.

HTML.it offre un'ottima guida.Link

Se non puoi inserire il riferimento au foglio di stile, puoi sempre inserire lo stile inline.
Es.

<div style="width:300px; height:300px; background-color:#FF0000; border-radius: 5px 5px;"> </div>

[.Reese]

interessante guida, ma ho ancora una domanda, dopo aver importato i vari border radius, come imposto tutto il codice html del box???

[ybla82]

sopra ti ho postato un esempio, inserendo lo stile come attributo del div.
Così non funziona?

[.Reese]

si, funziona grazie mille!! non capivo come impostare i valori dei border radius nel codice che mi hai scritto!!

[.Reese]

Ho un altro problema, se scrivo dentro al box, la scrittà mi va fuori dal box!!

la tabella è qui: http://angolodiunapeste.blogfree.net...20873#lastpost

e questo è il codice:

<div style="width:300px; height:100px; background-color:#000000;  border:dotted 3px #999999; moz-border-radius-topleft: 75px; moz-border-radius-topright:5px; moz-border-radius-bottomleft:5px; moz-border-radius-bottomright:75px; webkit-border-top-left-radius:75px; webkit-border-top-right-radius:5px; webkit-border-bottom-left-radius:5px; webkit-border-bottom-right-radius:75px; border-top-left-radius:75px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:75px;"> fjdgvbggfmdg </div>

[ybla82]

devi giocare con le proprietà padding-left e padding-top.

Attenzione quando inserisci un valore di padding-left: la larghezza totale del rettangolo aumenta del valore impostato. (Es. 300px + Npx di padding-left).
Di conseguenza devi ridurre la larghezza del rettangolo secondo le tue esigenze.

Per una maggiore comprensibilità del codice,
ed evitare di incasinarti la vita quando tra un anno andrai a riprendere in mano quello che hai scritto, prova a vedere se funziona questo modo di scrivere lo stile del rettangolo

<style type="text/css">
.myrect 
{
width:300px; 
height:300px; 
background-color:#FF0000; 
border-radius: 5px 5px;
} 
</style> 

<div class = "myrect"> </div>

[.Reese]

anche con quel codice, la scrittura va lo stesso fuori dal box...

http://angolodiunapeste.blogfree.net/

<style type="text/css">.myrect {width: 300px;  height: 100px;  background-color: #999999;  border-radius: 75px 5px}</style>  <div class = "myrect"> balblablablabalblablabalbalbalbalbalbalablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla </div>

[ybla82]

Inserisci
padding-left:30px; padding-top:30px;

Per evitare che esca a destra inserisci padding-right:30px;

[.Reese]

evvai! finalmente adesso è perfettamente corretto, le scritte rimangono dentro al box!! grazie mille per gli aiuti!! (: