Ciao a tutti,
non riesco ad impostare un blocco del ridimensionamento del contenuto della mia pagina html.
Mi spiego meglio:
Nella parte alta della pagina ci sono due elementi distinti, un box div contenente una scritta nella parte sinistra e un'immagine nella parte destra. Entrambi gli elementi sono impostati con una posizione assoluta (absolute), hanno le coordinate top, left e right impostate in valori percentuali e hanno una dimensione espresssa in px.
Al ridimensionamento manuale della finestra del browser gli elementi sopradescritti rimangono nelle posizioni corrette e della dimensione fissa, ma, quando la finestra diventa troppo piccola per contenerli entrambi, si sovrappongono.
Io vorrei che, quando la finestra del browser raggiunge una certa dimensione, gli elementi smettessero di muoversi e si attivasse lo scroll orizzontale della pagina.
Per intenderci, è il comportamento della riga blu di fb che, quando la finestra del browser diventa troppo piccola, smette di avvicinare gli elementi che la compongono e attiva lo scroll della pagina.
Grazie in anticipo e spero di essermi spiegato decentemente...:-)
Ecco il codice html della pagina:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>pagina</title>
<link rel='stylesheet' href='style.css' type='text/css' media='screen' />
</head>
<body>
<div id="header">
[img]WHEREareu.gif[/img]
</div>
[img]terra2.gif[/img]
Ed ecco il codice del file style.css
#header
{
position: relative;
width: 93%;
background-color:black;
margin: 0 auto;
}
.img_terra
{
position:absolute;
display: block;
width: 160px;
top: 2%;
right: 10%;
}
.img_WHEREareu
{
display: block;
width: 330px;
top: 3%;
left: 5%
}
Rispondi quotando
