layout fluido:problemi con schermi diversi!

**Francesco14** · 01-09-2008, 23:54

Ciao..ho realizzato un sito utilizzando un layout fluido a due colonne.Il problema che quando lo visualizzo sul mio portatile..il sito è visualizzato in modo perfetto..mentre se passo sul mio fisso,dove lo schermo è più ampio il sito si visualizza,ma nn copre tutta la superficie dello schermo..e esteticamente non è un bell'effetto.
Forse il problema potrebbe nascere dal fatto che utilizzo un frame interno perchè mi piace il fatto che le pagine del sito si aprono mantenendo la cornice dei link.(Se ci fosse un'altro modo per ottenere tale effetto io nn ne sono a conoscenza...)
Scusami se scoccio,ma sarei proprio curioso di risolvere questo problema,cosicchè poi posso implementare il sito on internet.Grazie cmq per l'attenzione.Per essere più chiaro t invio il codice relativo:
<style type="text/css">
body{
margin:0;
padding:0;
height:100%;
}

#header{
background:url(img10.jpg) repeat-x;
height:60px;
}

#header .logo{
float:left;

}

#header .slogan{
font-family: 0.8em Georgia, "Times New Roman", Times, serif;
color: white;
float:left;
margin-right: 2em;

}
#navbar {
position: absolute;
top: 7em;
left: 4em;
width: 14em;

}
#navbar ul {
list-style: none;
margin-left: 1em;
padding-left: 0;

}
#navbar li {
font-size: 80%;
border-bottom: 1px dotted #CCCCCC;
margin-bottom: 0.3em;
}
#navbar li a:link, #navbar a:visited {
text-decoration: none;
color: #A99B81;

}
#navbar a:hover {
color: #FF9966;
}
#navbar h2 {
font: 110% Georgia, "Times New Roman", Times, serif;
color: #726750;

border-bottom: 1px dotted #CCCCCC;
}
#content {
margin-left: 18em;
margin-right: 2em;
}
h1 {
font: 150% Georgia, "Times New Roman", Times, serif;
color: #726750;
}
#content p {
font-size: 80%;
line-height: 1.6em;
padding-left: 1.2em;
}

</style>
</head>
<body bgcolor="black">
<div id="header">
[img]img110.jpg[/img]
<span class="slogan">Villanova
-Via Roma-Villanova d'Ardenghi-27030-Pavia </span>
<span id="webaddress" style="position:relative; visibility:hidden; font-style:bold; font-size:2em;"><FONT color="white">Campionato</FONT></span>
<div id="content">
<IFRAME width=690px marginWidth=0 marginHeight=0 frameBorder=0 height=460px name=main src="home.html">
</IFRAME>

</div>

<div id="navbar">
<h2>Menu</h2>
<ul>[*]HOME
[*]ROSA&STAFF..
[*]I GIOCATORI..
[*]PHOTOS
[*]CAMPIONATO
[*]CLASSIFICA
[*]LE PAGELLE[*]DOVE SIAMO[*]THANKS TO..[*]RISULTATI DI SUNDAY[*]PAGELLE DI SUNDAY [/list]
</div>
</body>
</html>

Ciao..Aiutatemi..please!

**Mich_** · 02-09-2008, 09:30

La rete e` piena di layout di tutti i tipi. Alcuni link importanti sono riportati nei "link utili" del forum.

Per il tuo problema, io partirei da uno dei layout pronti, lo visualizzerei nei vari browser / risoluzioni / dimensioni finestre, e una volta scelto un layout che rispecchia le mie esigenze, cercherei di adattarlo.

Chiaramente colori e sfondi dovrai poi modificarli secondo le tue esigenze: nella prima passata devi concentrarti solo sul comportamento al ridimensionamento della finestra (visto che e` il tuo problema).

PS: quando inseirsci codice, sua gli appositi codici VB (bottoni # o PHP sopra l'area di inserimento), altrimenti si perde la formattazione e la lettura risulta difficoltosa.

NOTA: nel tuo codice utilizzi strutture obsolete e deprecate:
- frame, iframe, target potrebbero non essere supportate in qualche browser di nuova generazione
- la formattazione realizzata con attributi HTML puo` creare conflitti con i CSS, e i browser risolvono i conflitti a modo loro (sempre in modo diverso da come te lo aspetti)

**Francesco14** · 02-09-2008, 11:56

T ringrazio per i consigli...e t pongo una domanda.
Se io utilizzo un layout fluido,nella parte dedicata al (content)è possibile nel codice associare un collegamento ad un file html?Come ti ho detto non capisco come con i css è possibile che i link aprano pagine all'interno del content(lasciando fissi sempre l'header e il navbar)
Dato che non conosco altro modo di operare per ottenere ciò,ho utilizzato i frame,anche se concordo con te che sono assolutamente da evitare.
Nell'attesa di una risp proverò a testare nouvi layout..grazie per l'attenzione.
Ciao

**Mich_** · 02-09-2008, 12:45

I frame non ci sono piu`. Non ci sono strutture simili o che li sostituiscono.
Si tratta di impostare un modo diverso di programmare le pagine.

La pagina va ricaricata tutta, ma la cosa non e` troppo dispendiosa, dato che i CSS sono in un file a parte, le immagini sono file a parte, e cosi` pure qualsiasi oggetto richiamato (e quindi non serve ricaricarli quando si resta nello stesso sito o sottosito).

I CSS definiscono la formattazione, non il contenuto.
Il contenuto (link compresi) va messo nel codice (X)HTML; le cose di contorno (la formattazione, gli sfondi, gli abbellimenti) vanno messe nel CSS.

Praticamente hai una pagina, con il suo contenuto.
La parte che chiami header sono poche righe, che contengono un titolo, una (o piu`) immagini e poco altro; idem per il footer.
Se hai un programma lato server (ASP, PHP, SSI, ...) puoi usare un include per inserire le parti comuni.
Oppure con un programma lato server puoi usare un template uguale per tutte le pagine e cambiare solo il contenuto.

**Francesco14** · 02-09-2008, 14:50

Ho seguito il tuo consiglio ed ho modificato tutte le pagine(css+xhtml) e ora riesco a realizzare quello che volevo(fare si che le pagine si visualizzino con la cornice dell'header e della navbar).
Ho però un problemino..
In una pagina ho uno sfondo(Img),dei link che vorrei che fossero visualizzati sopra lo sfondo e uno script javascript.Nn capisco se devo inserire l'img di sfondo nella sezione #content(css),oppure nella sezione(div id="content").E soprattutto quale sintassi usare perchè ho provato in vari modi ma l'unico modo che funziona è quello:Img src=" " .Però cosi i link sballano..io vorrei che rimanessero sopra lo sfondo circa a metà pagina allineati sulla dx.

**Mich_** · 02-09-2008, 15:23

n una pagina ho uno sfondo(Img),dei link che vorrei che fossero visualizzati sopra lo sfondo e uno script javascript.Nn capisco se devo inserire l'img di sfondo nella sezione #content(css),oppure nella sezione(div id="content").E soprattutto quale sintassi usare perchè ho provato in vari modi ma l'unico modo che funziona è quello:Img src=" " .Però cosi i link sballano..io vorrei che rimanessero sopra lo sfondo circa a metà pagina allineati sulla dx.

Con una descrizione cosi` e` come se non avessi detto niente.
Posta il pezzetto di codice (o le due alternative) HTML+CSS + Doctype.
Se hai un'idea di cosa vorresti ma non riesci a realizzarlo, posta un'immagine schematica in allegato.
Invece il JS non interessa in questo forum, a meno che non vada a modificare gli oggetti interessati o la loro formattazione.

In linea di massima lo sfondo va inserito nel CSS, come background, mentre i link vanno inseriti dentro i[*] e opportunamente formattati.

**Francesco14** · 02-09-2008, 15:48

Ti invio il codice della pagina..e la sezione che mi interessa particolarmente è questa:
#content {
margin-left: 18em;
margin-right: 2em;
height:100%;
background:url(Img/ro7.jpg);
Non mi carica l'immagine come sfondo,mentre nelle altre pagine le immagini sono caricate solo con [img] [/img]nella sezione <div id="content">.Non capisco perchè nn funge visto che mi sembra che la sintassi nel css nn sia errata.
Chiedo lumi..perchè sn nel buio pesto...Grazie per la pazienza..

<style type="text/css">
body{
margin:0;
padding:0;
height:100%;
width:100%;

}

#header{
background:url(img10.jpg) repeat-x;
height:60px;
}

#header .logo{
float:left;

}

#header .slogan{
font-family: 0.8em Georgia, "Times New Roman", Times, serif;
color: white;
float:left;
margin-right: 2em;

}
#navbar {
position: absolute;
top: 7em;
left: 4em;
width: 20%;
height:100%;
float:left;

}
#navbar ul {
list-style: none;
margin-left: 1em;
padding-left: 0;

}
#navbar li {
font-size: 80%;
border-bottom: 1px dotted #CCCCCC;
margin-bottom: 0.3em;
}
#navbar li a:link, #navbar a:visited {
text-decoration: none;
color: #A99B81;

}
#navbar a:hover {
color: #FF9966;
}
#navbar h2 {
font: 110% Georgia, "Times New Roman", Times, serif;
color: #726750;

border-bottom: 1px dotted #CCCCCC;
}
#content {
margin-left: 18em;
margin-right: 2em;
height:100%;
background:url(Img/ro7.jpg);

}

</style>
</head>
<body bgcolor="black">
<div id="header">
[img]img110.jpg[/img]
<span class="slogan">Villanova Calcio-Campo Sportivo Comunale Maggi-
-Via Roma-Villanova d'Ardenghi-27030-Pavia </span>
<span id="webaddress" style="position:relative; visibility:hidden; font-style:bold; font-size:2em;"><FONT color="white">Campionato di Terza Categoria: Girone B</FONT></span>
<div id="content">

</div>

<div id="navbar">
<h2>Menu</h2>
<ul>[*]HOME
[*]ROSA&STAFF..
[*]I GIOCATORI..
[*]PHOTOS
[*]CAMPIONATO
[*]CLASSIFICA
[*]LE PAGELLE[*]DOVE SIAMO[*]THANKS TO..[*]RISULTATI DI SUNDAY[*]PAGELLE DI SUNDAY [/list]
</div>
</body>
</html>

**Mich_** · 02-09-2008, 16:08

1. ti avevo chiesto di inserire il codice usando i tag VB corretti

2. mi pare di vedere errori di innestamento dei tag (ma mancando la formattazione e` difficile verificare)

3. mescoli CSS con tag e attributi di formattazione: questo crea conflitti, che i browser risolvono a modo loro: se vuoi far funzionare i CSS devi eliminare tutta la formattazione HTML

4. manca il DOCTYPE

5. non dici in quali browser non funziona

6. sei sicuro dei percorsi? Sono corrette anche le maiuscole-minuscole?

**Francesco14** · 02-09-2008, 16:27

Relativamente al problema dell'inserimento dell'image ci sono riuscito fissando la dimensione del content a 460px(dimensione dell'image di sfondo).Ora verifico se tutto funziona e cerco di seguire i tuoi consigli..grazie mille.A presto

Discussione: layout fluido:problemi con schermi diversi!

Strumenti discussione

Ricerca discussione

Visualizza

layout fluido:problemi con schermi diversi!

layout fluido..

css #content img di sfondo

sfondo

Permessi di invio