BOX angoli arrotondati che non compare

[albidonameteo]

Salve ragazzi Da giorni Sto cercando di inserire un Box con angoli arrotondati sulla mia home di altervista...ma invano.

(NB.Nel Boxetto Riquadro ci vorrei inserire l'anteprima delle pagine relative agli ultimi miei articoli )..

Ho scaricato il Codice html già pronto dal sito "http://www.roundedcornr.com" (generatore di Codici Box pronti) ma poi quando lo vado ad inserire come html nella pagina altervista, il Box non Compare (...NB.compaiono solo le scritte del codice, nessun box, nessun layout)

PS.Sono disperato ..non sò se qualcuno mi può aiutare.

Utilizzo Google CHROME e il Codice html del Box è il Seguente:

<div class="roundedcornr_box_323896">
   <div class="roundedcornr_top_323896"><div></div></div>
      <div class="roundedcornr_content_323896">
         Lorem ipsum dolor sit amet, consectetur 
         adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim 
         veniam, quis nostrud exercitation ullamco laboris 
         nisi ut aliquip ex ea commodo consequat. Duis aute 
         irure dolor in reprehenderit in voluptate velit esse 
         cillum dolore eu fugiat nulla pariatur. Excepteur 
         sint occaecat cupidatat non proident, sunt in culpa 
         qui officia deserunt mollit anim id est laborum.
      </div>
   <div class="roundedcornr_bottom_323896"><div></div></div>
</div>

Grazie.

[karl94]

Queste tecniche sono superate, usa la proprietà CSS3 border-radius, su internet trovi migliaia di guide ed esempi al riguardo.

[albidonameteo]

Queste tecniche sono superate, usa la proprietà CSS3 border-radius, su internet trovi migliaia di guide ed esempi al riguardo.

Che cosa sono..???..

Io dovrei generare 2 Box 200x200 pixel per inserire le anteprime dei miei articoli in home..

PS.Non sono un esperto html-pothoshop..ho aperto il sito da poco, e quindi cercavo qualcosa di già pronto

[karl94]

Quella che ti ho indicato è la soluzione più semplice, prova a fare una piccola ricerca al riguardo per comprendere di cosa si tratta.
E cosa c'entra Photoshop? Io non l'ho menzionato...

[albidonameteo]

Quella che ti ho indicato è la soluzione più semplice, prova a fare una piccola ricerca al riguardo per comprendere di cosa si tratta.
E cosa c'entra Photoshop? Io non l'ho menzionato...

Ho trovato il sito" http://border-radius.com/"...ma non sò che devo fare ..dove prendo il codice Html::?????

PS.Inserendo dei numeri diversi mi cambia il bordo , ma il colore rimane uguale ...e poi su qs Box ci si può inserire pagine web in anteprima/miniatura?????

Non sò proprio da dove iniziare..

[karl94]

Se non hai basi è difficile iniziare da cose così. Spiega bene il risultato che desideri ottenere, cosicché ti si possa fornire una qualche indicazione.

[albidonameteo]

Ho fatto una prova...Inserendo il Codice "-webkit-border-radius: 53px " nella pagina altervista il box non compare....mi ridà solo la scritta del Codice (compare solo la scritta ...come con il codice generato dall'Altro Editor)..

[karl94]

Leggi il mio precedente messaggio e rispondi alla mia richiesta.

[albidonameteo]

Io dovrei creare un semplice Box per inserire in anteprima un mio articolo (..che stà in una pagina html a sè)..punto!

[karl94]

Ciò che ti fornisce quel sito che hai indicato sono semplicemente le proprietà CSS da applicare al tuo elemento. Ora devi inserirle all'interno di una regola CSS che le attribuisca al tuo box e includere il foglio di stile nella pagina.
La pagina in questione ha già un foglio di stile?

[albidonameteo]

Ciò che ti fornisce quel sito che hai indicato sono semplicemente le proprietà CSS da applicare al tuo elemento. Ora devi inserirle all'interno di una regola CSS che le attribuisca al tuo box e includere il foglio di stile nella pagina.
La pagina in questione ha già un foglio di stile?

oh mannaggia..NON ti seguo
karl94...se potresti fornirmi un esempio di codice html di Box già pronto da inserire !

Io sono alle prime armi... ecco perchè starei cercando un generatore di codice html Completo da inserire nella pagine altervista e che mi faccia comparire AUTOMATICAMENTE qs benedetto box 200x200 pixel

[karl94]

Appunto poiché sei alle prime armi ti ho chiesto cosa esattamente desideri ottenere, ma hai solo fornito una risposta vaga. Se indicassi l'indirizzo o il codice della pagina in questione potrei indicarti le modifiche da effettuare con relativa spiegazione, o se questa non esiste ancora potrei realizzarla purché non sia troppo complessa.
Ciò che desideri fare non si può realizzare solamente mediante l'HTML, perché tu vuoi modificare l'aspetto grafico della pagina e ciò si effettua mediante i fogli di stile, il CSS è un linguaggio che descrive un foglio di stile, ovvero che descrive l'aspetto grafico di un documento (in questo caso un documento HTML).

[albidonameteo]

Appunto poiché sei alle prime armi ti ho chiesto cosa esattamente desideri ottenere, ma hai solo fornito una risposta vaga. Se indicassi l'indirizzo o il codice della pagina in questione potrei indicarti le modifiche da effettuare con relativa spiegazione, o se questa non esiste ancora potrei realizzarla purché non sia troppo complessa.

No Purtroppo la pagina non esiste ancora..comunque ti posso fornire un'esempio di Box anteprima articoli meteo..

Ti fornisco il Sito: http://www.cosenzameteo.it/

I Box che vedi in basso sono delle Anteprime di pagine vere e proprie che contengono poi articoli, approfondimenti, ecc,,...così dovrei realizzare la mia home.


PS.Grazie al sito www.Widgetbox.com sono riuscito a creare un box Feed Rss con news scorrevoli, ora non penso che non esista un altro sito generatore di Box pagine web che fornisca Codice html completo


Grazie!


EDIT:

Allora ho provato a generare un Box dal sito "http://www.css3.me/"...ma non ho capito se quel codice che mi ha generato và poi copiato così com'è sul sito Altervista ..????????...

L'ho incollato così com'è ..e niente da fare ..sulla pagina altervista mi restituisce solo la scritta del Codice , il benedetto box non compare ancora...

Secondo me c'è qualche Script specifico da aggiungere ..

Qualcuno saprebbe indicarmi in maniera semplice come vanno inseriti questi Codici CSS3 in una pagina Html..affinchè il Box compaia sulla pagina Html , quel codice generato lo devo inserire tra 2 Script ..e se sì quali sarebbero qs Script????

Vi prego aiutatemi...Uffà sono disperato!!!


Il Codice CSS3 generato è il Seguente:

-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:0px 0px 20px #000000;
-webkit-box-shadow:0px 0px 20px #000000;
box-shadow:0px 0px 20px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
background-image: -moz-linear-gradient(top, #949eff, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#949eff), to(#000000));
background-image: -o-linear-gradient(top, #949eff, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#949eff', endColorstr='#000000');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startC olorstr='#949eff', endColorstr='#000000')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: linear-gradient(top, #949eff, #000000);
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/

Queste tecniche sono superate, usa la proprietà CSS3 border-radius, su internet trovi migliaia di guide ed esempi al riguardo.

Scusami se mi intrometto.
Ti vorrei far notare che CSS3 non viene per nulla implementato da IE escluso versione 9, il che si traduce in oltre il 50% dei browser in circolazione.
In altre parole 1 visitatore su 2 non vedrà gli angoli arrotondati.
Secondo me usando CSS3 e volendo che TUTTI vedano le cose così per come le abbiamo progettate, e quindi fare qualcosa Cross-browser, aumenti il carico di lavoro soprattutto per chi ne sa poco.

Ma è la mia opinione.

[karl94]

Scusami se mi intrometto.
Ti vorrei far notare che CSS3 non viene per nulla implementato da IE escluso versione 9

Grazie, ma ne ero già a conoscenza.

il che si traduce in oltre il 50% dei browser in circolazione. In altre parole 1 visitatore su 2 non vedrà gli angoli arrotondati.

Qui sono io che ti vorrei far notare che queste statistiche non sono poi così reali, consultando un famoso sito di statistiche globali potrai notare che in Italia le versioni dismesse di Internet Explorer rappresentano circa un quarto delle visite.

Secondo me usando CSS3 e volendo che TUTTI vedano le cose così per come le abbiamo progettate, e quindi fare qualcosa Cross-browser, aumenti il carico di lavoro soprattutto per chi ne sa poco.

Infine io sono del parere che è sbagliato che i siti siano uguali su ogni browser, semplicemente non ha senso, se il bowser supporta una determinata tecnologia, allora un utente potrà trarne vantaggio altrimenti pazienza. L'importante è non appoggiarsi interamente a queste tecnologie ma pensarle come una cosa in più: il tutto deve necessariamente funzionare senza, se poi vengono supportate tanto di guadagnato.
Questa filosofia è denominata progressive enhancement.


Ora, tornando al problema, questo è un semplice documento che mostra l'uso della proprietà border-radius:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-IT">
	<head>
		<title>Titolo</title>
		<style type="text/css">
			.rounded_box{
				border: 3px red solid;
				border-radius: 20px;
			}
		</style>
	</head>
	<body>
		<h1>Intestazione 1</h1>
		<div class="rounded_box">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
			<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
		</div>
	</body>
</html>

[albidonameteo]

Innanzitutto Chiedo scusa a Karl94 se sono andato off-topic, e poi vorrei ringraziarlo perchè finalmente con quello script che mi ha dato , il famoso box compare finalmente sulla mia pagina html..

Ora per poter iniziare ad usare i file CSS3 (...e sempre se non ho capito male) Vi volevo chiedere alcune precisazioni/conferme:

1)affinchè un codice CSS3 (..che sia un box o altro.) compaia sulla pagina html bisogna scrivere :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-IT">
<head>
<title>Titolo</title>
<style type="text/css">
Codice CSS3
</div>
</body>
</html>


2)e poi volevo sapere cortesemente come potrei fare per inserire in quel Box CSS3 generato, una specie di Mininiatura-Anteprima di un'altra pagina html in modo tale che si veda l'anteprima...bisogna inserire il codice al posto del Contenuto Testuale..??????


Grazie.

[albidonameteo]

..allora..?????

Qualche Consiglio su questi Codici CSS3..??'

..allora..?????

Qualche Consiglio su questi Codici CSS3..??'

Ho cercato ma mi pare di non aver visto nulla in merito all'obbligo di rispondere alle richieste.

Una cosa però l'ho trovata, è vietato l'up nei post.

Ti posso dire qualcosa di base del css. Innanzitutto hai due modi di mettere codici css dentro ad una pagina. Il primo è semplicemente con i tag <style></style> ma è poco usato ed è scomodo da usare. L'altro modo è quello di creare un file "style.css" nella stessa cartella della pagina e inserire tra i tag <head></head> questo codice:

<link rel="stylesheet" type="text/css" href="style.css ">

Dopodichè i codici inseriti nel file appena creato sarà il css della pagina. Adesso guardiamo questo codice:

body {
   font-family: Arial;
   background-color: #ffffff;
   font-size: 12pt;
   }

#box {
   background-color: #fefefe;
   }

Come puoi vedere abbiamo una parola (es. body e #box) e dopo delle parentesi graffe che racchiudono delle proprietà.

La prima parola indica a cosa si riferiscono delle proprietà.
Se per esempio volessimo avere i testi racchiusi tra <p></p> rossi dovremmo scrivere il tag e le proprietà:

p {
color: red;
}

Invece, se vogliamo estendere delle proprietà, ad esempio, a solo un box <div>, scrivendo come sopra avremmo TUTTI i <div> con quelle proprietà. È per questo che ci vengono in aiuto gli id.
Se io scrivo un <div> in questo modo: "<div id="id_qui"></div>" e poi nel css scrivo:

#id_qui {
codici: blablabla;
eccetera...
}

solo ed esclusivamente i div scritti in quel modo avranno quelle proprietà. Comunque io non posso stare qui a scriverti una guida completa, quindi se hai bisogno di aiuto usa la pagina di wikipedia sul css, che tralaltro contiene una guida completa e facile da comprendere:

http://it.wikipedia.org/wiki/CSS

Chiedo scusa per questo necropost, ma stavo cercando informazioni in merito ad una particolare proprietà del border-radius di css3 e per pure caso mi sono imbattuto in questa discussione.

In merito ad alcune mezze informazione e stupidate scritte in questo Topic, vorrei evidenziare che la proprietà border-radius è COMPLETAMENTE supportata da IE9.

Se il 10% dei naviganti usa un browser datato e quindi mi riferisco a IE8 e IE7, i problemi sono solo suoi e si perde gli angoli arrotondati.
Può essere però che il vostro cliente esiga gli angoli arrotondati per OGNI BROWSER IE6 compreso (ed un cliente così è meglio perderlo che trovarlo), è sufficiente implementare un file HTC da 4kb nel proprio foglio di stile e magicamente la regola CSS3 Border-radius diventerà completamente compatibile con ogni browser.
Una versione è questa: http://code.google.com/p/curved-corn...der-radius.htc
In rete ce ne sono diverse versioni e molte implementano anche altre regole, come il multi background, text-shadow, box-shadow, e altro. Gugle è vostro amico.

Se si scrivono dati e numeri, è bello che siano veritieri. Un saluto