[css] visualizzare tutto il corpo della pagina

**Joan** · 12-11-2003, 17:16

Salve a tutti,

sto cercando di realizzare un layout con i css.
sono all'inizio per cui ho diversi problemini:
- vorrei che il contenuto della pagina sia interamente visualizzato, in quanto non supera l'altezza della finestra del browser.Questo non succede.

Ho provato vanamente a diminuire la percentuale dei valori nelle regole body,html,box.

Comunque vi posto tutto il codice in modo che possiate vedere meglio dove possa essere l'errore.

grazie

html {
height: 100%;
}

body {
background-color: #006A40;
text-align: center;
margin: 0px;
padding: 0px;
height: 100%;
}

#box {
background-color: #D9F2D9;
text-align: left;
width: 768px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: auto;
}

#top {
background-color: #D9F2D9;
background-image: url(images/logo.gif);
height:110px;
}

#middle {
background-color: #D9F2D9;
width: 508px;
float: left;
height: 100%;
margin: 0px;
}

#contenuto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #D9F2D9;
width: 409px;
margin-top: 20px;
margin-right: 9px;
margin-left: 9px;
}

#bottom {
background-color: #1E8D61;
height:40px;
}

#nav{
background-color: #FF9900;
padding: 10px;
margin-left: 260px;
text-align: center ;
}

#nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
letter-spacing: 2px;
}

#nav a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

#nav a:hover {
color: #006A40;
text-decoration: none;
}

#left {
background-color: #FF9900;
background-image: url(sfondo.gif);
float: left;
width: 260px;
height: 100%;
margin: 0px;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #006A40;
}

/*parte inferiore della pagina contenente l'indirizzo*/
.indirizzo{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
text-align: center;
padding: 12px;
color: #FFFFFF;
}

.images{
border-top: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
margin-top:10px;
margin-left:10px;
margin-right:5px;
margin-bottom:10px;
}

.kommentar{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin-left:10px;
margin-right:5px;
margin-bottom:5px;
color: #666666;
}

.autor{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
margin-left:10px;
margin-right:5px;
color: #666666;
}

/* collegamenti*/
.collega {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-align: right;
color: #FFFFFF;
margin-top: 10px;
margin-right: 15px;
}

.collega a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

.collega a:hover {
color: #006A40;
text-decoration: none;
}

**cantard** · 12-11-2003, 19:22

Mah, senza il codice della pagina....

secondo me potrebbe crearti problemi quell' height:100% nel #middle.

**Joan** · 13-11-2003, 10:12

Ecco il codice della pagina:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BSZ-Translation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

<div id="box">

<div id="top">

</div>

<div id="nav">
<div id="barretta">
WIR | UNSERE ARBEITE | LEISTUNGEN |
KONTAKT | REFERENZEN
</div>
</div>
<div id="left">
<div class="images">[img]images/home.jpg[/img]</div>

<h2>Kommentar</h2>

<div class="kommentar">Cher Jesús,

Voici le feed-back pour le traducteur.

Les deux minimes modifications signalées en jaune dans le texte ne concernent que des préférences linguistiques personnelles.

Le niveau de la traduction est impeccable.
</div>

<div class="autor">

Cristina Cinieri

Responsable Traductions Service du personnel

» Bedag Informatique SA

</div>

<div class="collega">more</div>

</div>

<div id="middle">
<div id="contenuto">
<h1>Beziehung BSZ – Brugos Übersetzungen</h1>
Hinter der BSZ Translation Centre GmbH steht neben fähigen Fachübersetzerinnen und –übersetzern vor allem der Firmeninhaber Jesús Brugos, Architekt EATC.
Nach umfassender Praxis im Verl6agswesen und in der Fachpresse der Bautechnik und Architektur leitete er während 10 Jahren eigene Architektur-büros in Barcelona und Bern. Seit 1991 ist er als Fachübersetzer im Bereich komplexer technischer Übersetzungen in Spanisch tätig.
Dieses Angebot bietet er in der BSZ-Schwesterfirma „Brugos Übersetzungen“ als thematischen Schwerpunkt weiterhin an

Inhaber
Für alle Themen und Sprachen rund um den Globus ist also die BSZ Translation GmbH für sie da.
Und für alle Spanische in der technischen Welt wählen Sie mit Vorteil Brugos Übersetzungen.

Ihre Ansprechpartner
</div>
</div>

<div id="bottom">
<div class="indirizzo">BSZ Translation Centre GmbH - Telefon: 031 333 84 10 - Fax: 031 333 85 16 - E-Email: info@bsz-translation.ch</div>
</div>

</div>

</body>
</html>

**cantard** · 13-11-2003, 19:28

Ecco, ho provato la pagina in locale.
Prima però devo dirti che c'è un

nel layer top da correggere e che tutti i
sono aperti, cioè da chiudere
.

Dunque:
la pagina con i.e.6 funziona come vuoi tu e così anche con opera7.21 e con explorer in quirk-mode (col prologo xml).
Con Opera 6.05 trovo l'errore che indichi tu.
Con Mozilla e Ns7 non ti saprei dire di preciso, perchè non tengono lo spazio del home.jpg (che non ho). Mi sembra comunque che tolgano quello che non serve (come vuoi tu), ma le due colonne si sfasano.

Sostituendo nei div #middle e #left il height:100%; con height:auto; succede che risolvi in parte il problema, cioè togli il vuoto, ma si sfasano le colonne, cioè il bottom sale ai piedi del testo del #contenuto, eccetto che con Opera.
Cerco di riassumere:

sostituendo gli height al 100% non succede più quello che lamenti, ma il bottom viene spostato in alto sotto il contenuto, in questa maniera:

explorer: il bottom sale sotto il contenuto, ma resta lo sfondo chiaro
moz+nscape: il bottom sale e manca lo sfondo chiaro (ma come detto, mancando la foto...)
opera: il bottom rimane al suo posto, ma manca lo sfondo chiaro.

Spero di esserti stato d'aiuto.

Se posso: nel menu in tedesco c'è scritto UNSERE ARBEITE.
E' sbagliato. O scrivi UNSERE ARBEITEN (i nostri lavori)
o UNSERE ARBEIT (il nostro lavoro).

altro non so dirti, non ho mai fatto un layout simile.

p.s. nella pagina ci sono anche tutti i valori ASCII da correggere.
:bubu:

**Joan** · 14-11-2003, 10:33

Grazie per la risposta.

cosa si intende per: ....e con explorer in quirk-mode (col prologo xml).
Comunque non posso fare niente perché sia compatibile anche con ie5?
"unsere Arbeite". Danke! ich habe es nicht bemerkt.

**cantard** · 14-11-2003, 11:27

Originariamente inviato da Joan
Grazie per la risposta.

cosa si intende per: ....e con explorer in quirk-mode (col prologo xml).

Prego... io di più non so fare...

il prologo xml che può essere inserito prima del doctype xhtml che hai usato è questo:
<?xml version="1.0" encoding="iso-8859-1"?>
Con questo prologo explorer emula la versione 5.5, almeno per quel che riguarda la grandezza dei box, se non sbaglio.
Sicuramente blackwolf o mutato ne sanno di più. Io sono al lavoro e non so dirti di più, non ho link alla mano.

ciao

Discussione: [css] visualizzare tutto il corpo della pagina

Strumenti discussione

Ricerca discussione

Visualizza

[css] visualizzare tutto il corpo della pagina

Permessi di invio