barra di scorrimento

**smal** · 11-04-2005, 19:21

Originariamente inviato da keramos74
Dunque, ho visitato la pagina relativa ai "Scroll area with overflow in CSS" l'esempio è esattamente quello che voglio fare, ma non ho capito come si procede

Un aiutino...
grazie

Procedi così:

codice:

<html>
<head>

<style type="text/css"></style>

</head>
<body>

<div class="scroll">
  

This is a scrolling are created with the CSS property overflow.</p>
  


  <span style="color: red;">This is red color</span>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
  

This is a normal paragraph.
  <span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
  </p>
  

This scrolling are can contain normal html like link</p>
  

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
  

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>

</body>
</html>

**andrea.paiola** · 11-04-2005, 19:22

ecco un esempio completo XHTML 1.1 + CSS 2:

XHTML

codice:

<!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">
<head>
<title>Pagina di esmpio di Scroll area with overflow in CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset= iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="keywords" content="parole chiave" />
<meta name="description" content="descrizione" />
<style type="text/css" media="screen">
@import url(stile.css);
</style>
</head>
<body>
<div class="scroll">
  

This is a scrolling are created with the CSS property overflow.</p>
  

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
	

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
	

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
	

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
	

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
  

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
  

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
</body>
</html>

CSS (stile.css)

codice:

div.scroll {
	height: 200px;
	width: 300px;
	overflow: auto;
	border: 1px solid #666;
	background-color: #ccc;
	padding: 8px;
}

studiati comunque i CSS sennò non capisci cosa stai facendo...link utili

**miki.** · 11-04-2005, 19:23

Originariamente inviato da keramos74
Dunque, ho visitato la pagina relativa ai "Scroll area with overflow in CSS" l'esempio è esattamente quello che voglio fare, ma non ho capito come si procede

Un aiutino...
grazie

fai un div, ci metti il testo e le immagine al suo interno e poi nel css
#box{
width:300px;
height:50px;
background:#f00; /*(se vuoi colorare lo sfondo)*/
overflow:auto; /* questo ti permette di creare la barra di scorrimento */
}

<div id="box">tutto quello che vuoi anche [img][...][/img]</div>

**keramos74** · 11-04-2005, 19:39

ammetto che è la prima volta che mi scontro con i CSS!
mi metto all'opera; vediamo cosa ne esce!!!!

GRAZIE A TUTTI

**castif** · 12-04-2005, 20:47

Ma questo è anche il mio problema!!

La soluzione sembrerebbe semblice ma non sono riuscito a capire questo passaggio:

"fai un div, ci metti il testo e le immagine al suo interno e poi nel css "

Che cos'è un div?
....e poi nel css...
Già ma come si fa???

Provate a spiegarlo anche a uno che non sa niente di CSS.
Passo passo mi raccomando.

Dai fate una prova!!

Ciao a tutti

**andrea.paiola** · 12-04-2005, 20:59

Non solo ti mancano le basi di CSS ma anche di (X)HTML.
Il tag div fa infatti parte di quest'ultimo e "contiene" una sezione di pagina:

codice:

<div>Testo dentro ad un div</div>

I CSS definiscono delle proprietà "grafiche" e, grazie ai selettori, le assegnano ai tags (X)HTML.
Studiati i link utili

Discussione: barra di scorrimento

Strumenti discussione

Ricerca discussione

Visualizza

Esempio completo

Permessi di invio