Problema creazione pagine web

obo. · Messaggio da **obo.** » venerdì 5 settembre 2008, 0:18

in parole povere avrei bisogno di un paio di consigli:
che attributi (css) posso dare affinchè degli oggetti non sbordino dal "contenitore" se la pagina viene visualizzata ad esempio su schermi a 16:9?

altra cosa che credo difficile, ma che renderebbe che usare il primo consiglio:
che modo posso usare per far si che la pagina venga ridimensionata automaticamente in base alla risoluzione delle schermo, contando che header e footer sono due immagine con dimensioni fisse?

garak · Messaggio da **garak** » venerdì 5 settembre 2008, 11:12

obo. ha scritto: in parole povere avrei bisogno di un paio di consigli:
che attributi (css) posso dare affinchè degli oggetti non sbordino dal "contenitore" se la pagina viene visualizzata ad esempio su schermi a 16:9?

Di default gli oggetti restano dentro i loro contenitori, a meno che non hai modificato alcuni attributi. Ma forse sarebbe meglio se postassi gli esempi di html/css che stai usando

obo. ha scritto: altra cosa che credo difficile, ma che renderebbe che usare il primo consiglio:
che modo posso usare per far si che la pagina venga ridimensionata automaticamente in base alla risoluzione delle schermo, contando che header e footer sono due immagine con dimensioni fisse?

Non si può, a meno di usare diverse immagini di dimensioni fisse, una per ogni dimensione (follia)
Forse è meglio usare immagini piccole, che si adattano alla dimensione minima, e poi un'immagine ripetuta (o un colore) per il resto dell'header/footer

donPi · Messaggio da **donPi** » venerdì 5 settembre 2008, 11:23

Premetto, è tanto tempo che non programmo una pagina web, mi sto riavvicinando ora, dopo qualche anno di abbandono. Premesso ciò, credo ti venga più facile lavorare in percentuali. Se ad esempio utilizzi una tavola (table) a suoi interno ne puoi costruire altre, in modo da lavorare in percentuale e con aree che non si accavallino. Altrimenti costruisci una pagina che rientra in una larghezza di 780 px, tanto non viene utilizzata una risoluzione minore, e in questo modo puoi mantenere le grandezze con misure fisse.
Spero di esserti stato utile!

Messaggio da **Zoff** » venerdì 5 settembre 2008, 13:17

garak ha scritto:
obo. ha scritto: altra cosa che credo difficile, ma che renderebbe che usare il primo consiglio:
che modo posso usare per far si che la pagina venga ridimensionata automaticamente in base alla risoluzione delle schermo, contando che header e footer sono due immagine con dimensioni fisse?
Non si può, a meno di usare diverse immagini di dimensioni fisse, una per ogni dimensione (follia)
Forse è meglio usare immagini piccole, che si adattano alla dimensione minima, e poi un'immagine ripetuta (o un colore) per il resto dell'header/footer

Non è vero... Le immagini rispettano i css come tutti gli altri componenti per cui indicare la larghezza di un immagine in % come suggeriva donPi potrebbe risolvere il problema, a patto che la deformazione dell'immagine ne mantenga l'aspetto voluto... (NB. Se imposti solo la larghezza l'altezza si modifica in proporzione per cui anche quell'aspetto è risolto)...
Non posso comunque che essere d'accordo sul fatto di utilizzare un immagine piccola e uno sfondo replicabile...

@obo, il browser adatta sempre il contenuto al browser e di conseguenza alla risoluzione a meno che tu non abbia indicato dimensioni fisse (es. "width=800px") nei CSS...

obo. · Messaggio da **obo.** » lunedì 8 settembre 2008, 13:32

(scusate l'assenza)

comunque guardate qui
http://browsershots.org/screenshots/3c8 ... c2e797049/

ad esempio con una risoluzione di 1152X864 il contenuto (ancora da finire) sborda. io vorrei, almeno per iniziare che rimanesse tutto compatto, anche a risoluzioni maggiori di 1024X768 (chi avrà risoluzioni maggiori vedrà più arancione di sfondo)

poi, questo è l'html

Codice: Seleziona tutto

<!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" xml:lang="en" lang="en">
<head>
<title>Oratorio Sacro Cuore Stezzano</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="title" content="Oratorio Sacro Cuore Stezzano">
<meta name="description" content="Oratorio Sacro Cuore Stezzano.">
<meta name="keywords" content="Oratorio Sacro Cuore Stezzano">
<meta name="distribution" content="global">
<meta name="Copyright" content="Oratorio Sacro Cuore Stezzano">
<meta http-equiv="imagetoolbar" content="false">
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="css/barra.css" media="screen">
<style type="text/css"></style>
</head>
<body>
<!--inizio intestazione -->
<div id="intestazione">
<div style="width: 763px; height: 4px; top: 211px; left: 22px;" id="menu">
<div align="center">
<div class="hovermenu">
<ul>
<li><a href="../">Home</a></li>

<li><a href="http://obo.helloweb.eu/blog">Notizie</a></li>

<li><a href="../smf">Forum</a></li>

<li><a href="http://obo.helloweb.eu/blog/eventi">Calendario Eventi</a></li>

<li><a href="#">Bacheca</a></li>
<li><a href="#">Galleria</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="contenitore">
<div style="color: rgb(5, 5, 5);"id="contenuti">

<h2>Questa &egrave l'homepage del sito dell'oratorio di Stezzano</h2>
<br>
<h2>Siamo a buon punto. 
</h2>
<div id="news">
PROVA ULTIME NOTIZIE
<br>
<?php require_once 'wpultimi.php'; ?>
</div>
<br>
<div id_="news2">
PROVA ULTIMI TOPIC
<br>
<?php require_once 'smfultimi.php'; ?>
</div>
<img src="http://servizi.ing.unipi.it/ing_inf/img/lavori_in_corso.jpg" alt="">
<br>
<h3>Ti piace eh?</h3>
<p>In costruzione da molto tempo. finirà?</p>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>

e questo il css

Codice: Seleziona tutto

body {
  margin: 1px;
  padding: 20px;
  font-size: 10px;
  line-height: 12px;
  color: white;
  text-align: justify;
  background-color: #f19100;
  width: 765px
  height: 435px
}
#intestazione {
  margin: auto;
  padding: 102px 40px 40px;
  background: transparent url(../images/head_home.jpg) no-repeat scroll left center;
  position: static;
}
#menu {
  border-width: 0;
  margin: -66px 0 0;
  list-style-position: inside;
  text-transform: none;
  font-size: 1.4em;
  font-weight: inherit;
  background-repeat: no-repeat;
  background-position:  center center;
  font-family: Arial,Helvetica,sans-serif;
  text-align: left;
  text-decoration: none;
  display: inline;
  position: absolute;
  list-style-type: none;
  float: left;
  padding-top: 0;
}
#contenitore {
  margin: auto;
  padding: 30px 20px 20px;
  background: transparent url(../images/cont.gif) repeat-y scroll left center;
  text-align: justify;
  position: static;
  overflow: auto;
}
#contenuti {
  padding-left: 30px;
  padding-top: 30px;
  position: static;
  font-family: Arial,Helvetica,sans-serif;
}
#footer {
  padding: 0 20px 50px;
  background: transparent url(../images/footer.gif) no-repeat scroll left center;
  position: static;
}

Messaggio da **Zoff** » lunedì 8 settembre 2008, 13:35

obo. ha scritto: (scusate l'assenza)

comunque guardate qui
http://browsershots.org/screenshots/3c8 ... c2e797049/

ad esempio con una risoluzione di 1152X864 il contenuto (ancora da finire) sborda

Ad occhio direi che è causata dall'utilizzo di impostazioni che "estraggono" gli elementi dal normale albero e struttura DOM...
Per farti un esempio se usi float o position capita che gli elementi "si dimentichino" di essere contenuti in altri e sbordino...

Controlla l'utilizzo di queste impostazioni...

Se vuoi un aiuto piu' esplicito meglio psotare un po' di codice...

ciauz

obo. · Messaggio da **obo.** » lunedì 8 settembre 2008, 13:39

aggiunto nel post precedente

comunque si, ho utilizzato position.

ora provo a toglierlo

Messaggio da **Zoff** » lunedì 8 settembre 2008, 13:41

obo. ha scritto: aggiunto nel post precedente

comunque si, ho utilizzato position.

ora provo a toglierlo

Manca proprio la parte interessante...
Quella riguardante il riquadro "sbordante"...
La voce #news{} nei CSS...

ciauz

obo. · Messaggio da **obo.** » lunedì 8 settembre 2008, 13:46

probabilmente l'ho tolto per sistemare qualcosa perchè c'era nell'html in ecc..

Forum Ubuntu-it

Problema creazione pagine web

Problema creazione pagine web

Re: Problema creazione pagine web

Re: Problema creazione pagine web

Re: Problema creazione pagine web

Re: Problema creazione pagine web

Re: Problema creazione pagine web

Re: Problema creazione pagine web

Re: Problema creazione pagine web

Re: Problema creazione pagine web

Chi c’è in linea

Accedi • Iscriviti