contenitore css e html

8749michelep

Utente Attivo
9 Mar 2013
46
0
0
www.listecanali.com
Salve ragazzi volevo creare un contenitore con css magari con spigoli arrotondati ma volevo mettere come sfondo un immagine semplice tipo nero con strisce bianche creata con photoshop. come posso fare? ovviamente devo mettere più di una voce con collegamenti con altre pagine e lo farò con div in HTML visto che crea un ritorno e a capo. Mi aiutate a capire come posso fare? oppure mi date tutti gli attributi per css ecc. Grazie mille per il vostro lavoro
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
un esempio di class da applicare al div
HTML:
<style type="text/css">
.tit{/*class, se id # */
	background-image:url(cartella/immagine.jpg);
	background-position: top;/* o right left bottom center */
	background-repeat: repeat-y; /*o  repeat-x repeat no-repeat o non indicato*/
	background-color:#EBEBEB;/* se serve*/
	width:100%;/* o misure in px*/
	height:100%;
	border-color:#FF0000;
	border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	box-shadow: 2px 4px 5px #a6aeb7;
}
</style>
comunque ti conviene leggere
https://www.mrw.it/css/guide/guida-css3/
 

8749michelep

Utente Attivo
9 Mar 2013
46
0
0
www.listecanali.com
ciao
un esempio di class da applicare al div
HTML:
<style type="text/css">
.tit{/*class, se id # */
	background-image:url(cartella/immagine.jpg);
	background-position: top;/* o right left bottom center */
	background-repeat: repeat-y; /*o  repeat-x repeat no-repeat o non indicato*/
	background-color:#EBEBEB;/* se serve*/
	width:100%;/* o misure in px*/
	height:100%;
	border-color:#FF0000;
	border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	box-shadow: 2px 4px 5px #a6aeb7;
}
</style>
comunque ti conviene leggere
https://www.mrw.it/css/guide/guida-css3/

Grazie per la dritta

questi 2 coosa mi fanno?
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;

Ovviamente se ho capito bene abbiamo integrato gli elementi css nella pagina stessa, ma volendo potrei creare un file esterno giusto?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
servono perche non tutti i bw interpretano il border_radius (se non ricordo male -moz serve per firefox e -webkit per safari)
si io li ho simulati nella pag stessa, ma è evidente che si puo (anzi meglio) fare un file .css esterno
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
se vuoi far ripetre sia per righe che per colonne puoi mettere
background-repeat: repeat;
oppure puoi fare a meno di scrivere tutta la riga
 

8749michelep

Utente Attivo
9 Mar 2013
46
0
0
www.listecanali.com
R

Ok Grazie di tutto

Ho creato una cosa del genere però vorrei capire come posizionare il box all'interno della pagina e ovviamente il carattere e il suo posizionamento all'interno del box

ecco il box creato

 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
se guardi qui vedi proprio il tuo problema
https://www.mrw.it/css/border-radius-angoli-arrotondati-css3_11012.html
poi per posizionare il testo devi metterlo dentro il div che hai fatto con i css
class se . , id se #, ti faccio un esempio con id
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
#tit{/*class, se id # */
	background-image:url(cartella/immagine.jpg);
	background-position: top;/* o right left bottom center */
	background-repeat: repeat-y; /*o  repeat-x repeat no-repeat o non indicato*/
	background-color:#EBEBEB;/* se serve*/
	width:100%;/* o misure in px*/
	height:100%;
	border-color:#FF0000;
	border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	box-shadow: 2px 4px 5px #a6aeb7;
	padding: 10px 15px;/* questo per mettere a posto il testo*/
}
</style>
</head>
<body>
<div id="tit">
bla...bla..bla<br />
bla, bla...
</div>
</body>
</html>

guarda che ho messo delle misure a caso devi mettere tu quelle che ti servono
 

8749michelep

Utente Attivo
9 Mar 2013
46
0
0
www.listecanali.com
Ah si scusa dimenticavo il fatto dell'ID della classe . e #

Adesso provo

Codice:
<!DOCTYPE html>
<html>
<head>
<title>Listecanali - Home</title>
</head>
<body>
<style type="text/css">
.tit{/*class, se id # */
	background-image:url("25.gif");
	background-position: top;/* o right left bottom center */
	background-repeat: repeat-y; /*o  repeat-x repeat no-repeat o non indicato*/
	width:247px;/* o misure in px*/
	height:297px;
}
</style>
<div class="tit">Email</div>

</body>

Ho scritto così mi sembra giusto
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
felino [CSS][Wordpress] Adattare delle immagini alla dimesione del box contenitore HTML e CSS 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
Tommy03 Contenitore non si nasconde dietro al menù HTML e CSS 1
G Importare database dentro un contenitore (docker) wordpress Programmazione 1
G importare database mysql dentro un contenitore (docker) PHP 6
P [HTML] Sfondo colorato di un div contenitore di altri due div HTML e CSS 9
F [HTML] Spazio Contenitore Full Height HTML e CSS 1
L Tooltip "prigioniero" del contenitore HTML e CSS 3
J Div in position fixed rispetto al suo contenitore jQuery 2
novello88 DIV style - stilizzare un div contenitore HTML e CSS 2
emanuelevt sfondo oltre il contenitore HTML e CSS 14
M DIV contenitore di DIV flottanti HTML e CSS 1
E Orologio da polso con contenitore nascosto portapreservativi Altri Annunci 7
daviduccio Ti interessa un contenitore di files da gestire da tutto il mondo? Presenta il tuo Sito 0
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
N [css] :active HTML e CSS 1
Shyson [WordPress] [CSS] Formattare casella WordPress 0
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
A icone css in selectmenu jQuery 2
M Problematica CSS (tag html,body) HTML e CSS 4
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2

Discussioni simili