Html-Css proporzionalità testo-immagine-pagina

**Gregia** · 02-04-2013, 17:10

Ciao a tutti,
sono nuovo del forum ma seguo da molto il sito... E devo dire che mi ha aiutato molto

Ho 17 anni, una grande passione per il canto ed ora voglio imparare a creare dei siti web!
Mi sono avventurato in questi giorni nell'apprendimento dei CSS per la realizzazione di una mia pagina web. Ma ho riscontrato un primo problema, vi spiego...
Nella mia pagina c'è una foto abbastanza grande posizionata al centro dello schermo e sopra a questa foto, tramite i codici .Caption ho inserito un link con uno sfondo semi-trasparente scrivendo ENTER. Il problema sta nel fatto che se io rimpicciolisco la finestra, l'immagine si adatta, ma il link no! diventando sproporzionato rispetto alla pagina. Io voglio che il link sia in proporzione su di un qualsiasi schermo anche se la finestra viene rimpicciolita e che possibilmente sia compatibile con tutti (o quasi) i browser. Grazie a tutti quelli che mi aiuteranno

Ho usato questo codice per la pagina .html (A cosa serve "alt" nel codice img?)

codice:

<!DOCTYPE html>
<html>
<head>
<title>Tommaso Gregianin</title>
<style type="text/css" media="screen">@import "style1.css";
</style>
</head>

<body>
<center>
<p class="padding">
<div class="caption">
   [img]foto1.jpg[/img]
   <span>
       <a href="home.html">Enter
   </span>
</div>


</p>
</center>


</body>
</html>

E questo il codice del foglio CSS:

codice:

body
{
font: 100.01%;
background-color:black;
}
p1.margin
{
margin-left:2%;
margin-right:2%;
}
p.padding
{
padding-top:5.1%;
}
h1
{
color:#E4E4E4;
text-align:center;
}
.caption {
    font-family: Lucida Grande;
    font-size: 10px;
    float: center;
    margin: 0%;
    padding: 0%;
    position: relative;
    overflow: hidden;
}
 
.caption img {
    float: center;
    margin: 0%;
    padding: 0%;
    background: #fff;
    border: none;
}
 
.caption span {
    float: center;
    margin: 0%;
    padding: 20px;
    width: 100%;
    color: #dedede;
     
    background: #222; /* browser che non supportano rgba */
    background: rgba(0,0,0,0.7);
    position: absolute;
    left: 0%;
    bottom: 0%;
}
 
.caption span strong {
    font-weight: bold;
    font-size: 600%;
    text-transform: uppercase;
    display: block;
    padding-bottom: 0%;
}p1
{
color:#E4E4E4;
font-family:"Lucida Grande";
font-size:20%;
}
p
{
color:#E4E4E4;
font-family:"Lucida Grande";
font-size:20px;
}
div#testo
{
	border:2px solid #E4E4E4;
	width:300px;
	float:center;
	text-align:center;
	color:#E4E4E4;
	font-size:20px;
	font-style:italic;
	font-weight:bold;
}

**Prill** · 02-04-2013, 19:27

l'attributo alt serve a specificare un testo alternativo che sarà visualizzato al posto dell'immagine se quest'ultima non fosse visibile (per chi naviga con le immagini disabilitate o usa browser testuali o screenreader).

Nel tuo codice vi sono cose che non vanno: da evitare il tag center, un paragrafo non può contenere un div, in generale il codice può essere semplificato.

Per fare ciò che chiedi, se usiamo i soli css, possiamo far ricorso alle media queries, il font non viene scalato proprio proporzionalmente ma può essere meglio che niente.

Altrimenti è necessario javascript.

Ti posto esempio con css:

codice:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>...</title>
<style type="text/css">

body{ 
font-size: 100%;
background-color:#000;
}

.caption {
    font-family: "Lucida Grande";
    padding-top:5%;
    position: relative;
				width:55%;
				text-align:center;
				margin:0 auto;
}
 
.caption img {
    background: #fff;
    border: none;
				width:100%;
				height:auto
}
 

 
.caption a {
    font-weight: bold;
    font-size: 600%;
    text-transform: uppercase;
    display: block;
    padding-top: 20px;
				text-align:center;
    width: 100%;
    color: #dedede;
    background: #222;
    background: rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    bottom: 0;
}
@media all and (max-width: 200px) and (min-width: 1px) {
.caption  a {
				font-size:100%;
  }
}
@media all and (max-width: 400px) and (min-width: 201px) {
.caption  a {
				font-size:200%;
  }
}
@media all and (max-width: 600px) and (min-width: 401px) {
.caption  a {
				font-size:300%;
  }
}
@media all and (max-width: 800px) and (min-width: 501px) {
.caption  a {
				font-size:400%;
  }
}
@media all and (max-width: 1200px) and (min-width: 801px) {
.caption  a {
				font-size:500%;
  }
}
</style>

</head>
<body>
<div class="caption">
   [img]foto1.jpg[/img]
   Enter
</div>
</body>
</html>

**Gregia** · 07-04-2013, 19:36

Grazie mille Prill!
Scusami se non ho risposto subito ma ero indaffarato con la scuola...
Mi potresti consigliare qualche pagina/guida dove capire meglio come usare i codici .caption; .caption img; caption a ed anche quei codici @media ? Perchè non ho capito molto bene come sei riuscito a semplificare il codice con .caption e a cosa servono i @media

Grazie ancora

Originariamente inviato da Prill
l'attributo alt serve a specificare un testo alternativo che sarà visualizzato al posto dell'immagine se quest'ultima non fosse visibile (per chi naviga con le immagini disabilitate o usa browser testuali o screenreader).

Nel tuo codice vi sono cose che non vanno: da evitare il tag center, un paragrafo non può contenere un div, in generale il codice può essere semplificato.

Per fare ciò che chiedi, se usiamo i soli css, possiamo far ricorso alle media queries, il font non viene scalato proprio proporzionalmente ma può essere meglio che niente.

Altrimenti è necessario javascript.

Ti posto esempio con css:

codice:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>...</title>
<style type="text/css">

body{ 
font-size: 100%;
background-color:#000;
}

.caption {
    font-family: "Lucida Grande";
    padding-top:5%;
    position: relative;
				width:55%;
				text-align:center;
				margin:0 auto;
}
 
.caption img {
    background: #fff;
    border: none;
				width:100%;
				height:auto
}
 

 
.caption a {
    font-weight: bold;
    font-size: 600%;
    text-transform: uppercase;
    display: block;
    padding-top: 20px;
				text-align:center;
    width: 100%;
    color: #dedede;
    background: #222;
    background: rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    bottom: 0;
}
@media all and (max-width: 200px) and (min-width: 1px) {
.caption  a {
				font-size:100%;
  }
}
@media all and (max-width: 400px) and (min-width: 201px) {
.caption  a {
				font-size:200%;
  }
}
@media all and (max-width: 600px) and (min-width: 401px) {
.caption  a {
				font-size:300%;
  }
}
@media all and (max-width: 800px) and (min-width: 501px) {
.caption  a {
				font-size:400%;
  }
}
@media all and (max-width: 1200px) and (min-width: 801px) {
.caption  a {
				font-size:500%;
  }
}
</style>

</head>
<body>
<div class="caption">
   [img]foto1.jpg[/img]
   Enter
</div>
</body>
</html>

**Prill** · 07-04-2013, 21:12

caption è il nome della classe che attribuisci al tuo div.
.caption img {proprietà} imposta le caratteristiche delle immagini contenute all'interno del div
(si chiamano selettori discendenti)
.caption a invece imposta tutti i link contenuti in quel div

tu usavi già quei selettori nel tuo codice, impostando anche .caption span e strong che però potevano essere eliminati perché le loro impostazioni potevano andare direttamente sul link eliminando codice superfluo nell'html

per quanto riguarda le media queries, basta cercare su google, troverai anche guide in italiano

Discussione: Html-Css proporzionalità testo-immagine-pagina

Strumenti discussione

Ricerca discussione

Visualizza

Html-Css proporzionalità testo-immagine-pagina

Permessi di invio