Problemi impaginazione

**PinkBetta** · 03-04-2008, 18:22

Ciao a tutti,
premetto che sono una principante, non vi spaventate per i miei dubbi elementari!

Il problema è questo: sto costruendo la pagina di un sito, ho messo lo sfondo (che in pratica è costituito da un'immagine fatta con photoshop). Questo sfondo è bianco (almeno per adesso) con un'ellisse al centro.
Ora io vorrei che tutto il contenuto del sito venga inserito in questa ellisse, menù a sx, testo e foto più o meno centrate a seconda dello spazio che mi porta via il menù, intestazione al centro.
Ovviamente voglio che venga così come ho deciso per qualsiasi risoluzione e browser.

Ho realizzato in html dei div per separare i vari elementi (per adesso gli ho dato un nome e basta) e adesso mi sto dedicando alla prova di impaginazione degli elementi del menù (per adesso la lista delle voci). In pratica ho creato un foglio di stile collegato, ho richiamato il div del menù e sono andata un pò per tentativi, dato che fino ad adesso avevo sempre lavorato con le tabelle, assegnandogli dimensioni fisse e regolandomi di conseguenza. Qui ho messo:
position:absolute;
top:una dimesione in percentuale;
left:un'altra dimesione in percentuale;

Ma non mi torna, mettiamo che questa percentuale è il 50%, ma di cosa? Quali sono le misure intere, dato che io non ho impostato niente? Che va con le dimesioni dell'immagine di sfondo? E dove le imposto?

Poi come faccio a fare in modo che queste percentuali (sempre che sia corretto metterle in percentuale) vengano visualizzate uguali per tutti? Devo dare una misura intera fissa (come nelle tabelle) e regolarmi di conseguenza? E dove la metto?

Grazie!

**paololosco** · 03-04-2008, 18:30

premettendo che la tua immagine di sfondo è per forza di cose in pixel e non in percentuale...

non puoi lavorare in percentuale se vuoi che i contenuti siano sempre inseriti all'interno dell'ellisse...

comunque... perchè non posti magari un'immagine di quello che vorresti realizzare, e il codice che hai gia fatto????

fino a domani non sarò reperibile, ma una mano la do volentieri...

ciao!

( ps se servisse la mia mail è paololosco@gmail.com )

**PinkBetta** · 03-04-2008, 18:58

Grazie della risposta!

Allora, questo è quello che ho scritto in html:

<body>
<div id="header"></div>
<div id="menu">

Home</p>

Acquario</p>

Pesci</p>

Piante</p>

Link</p>
</div>
<div id="content"></div>
<div id="footer"></div>
</body>

E questo quello in css:

body {
background-image:url(img/immagine.jpg);
padding:0px;
margin:0px;
background-repeat:no-repeat;
background-position:center;
}

#menu {

position:absolute;
top:37%;
left:18%;
}

Lo sfondo è questo:

Tra l'altro non sono nemmeno convinta che lo sfondo vada bene così grande, forse sarebbe meglio fare l'ellisse grande e poi sotto uno sfondo?

**paololosco** · 04-04-2008, 10:51

io lo farei cosi (l'ho buttato giu velocemente...)

il css ha tutti i commenti...

in ogni caso... utilizzare un'ellisse come corpo forse non è la soluzione ottimale (ricordiamoci che il web lavora per rettangoli!) comunque... dimmi che ne pensi...

ciao

l' accatiemmelle

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenitore">
	<div id="header">
		<h1>nome sito</h1>
	</div>
	<div id="menu">
		Home
Acquario
Pesci
Piante
Link
		
	</div>
	<div id="content">
		<h2>titolo</h2>
		

qui i contenuti del sito</p>
	</div>
	<div id="footer"></div>
</div>
</body>
</html>

...e il ciessesse...

codice:

/* CSS Document */
body {
background:url(immagine.jpg) top center no-repeat; /*tanto per evitarsi qualche riga...*/
padding:0px; /*vabbè... l'avevi scritto tu!!!*/
margin:0px; /*idem*/
text-align: center; /*centra su IE*/
/*definiamo un font standard*/
font-family: Arial, Helvetica, sans-serif;
font-size:14px; 
color: #000;
}
h1{
/*proprietà dell'<h1> (titolo principale)*/
margin: 0;
font-size: 28px;
line-height: 28px;
}
h2{
/*proprietà dell'<h2> (facciamo che sia il titolo della pagina)*/
margin: 0;
font-size: 18px;
}
	/*un div che conterrà gli altri!*/
	#contenitore{
	width: 900px; /*altezza FISSA (poichè l'immagine è fissa...!!!) - io ho ipotizzato 900px per 
	non tagliare troppo - anche se a mio avviso la scelta di un ellisse non è azzeccatissima, tagli gran parte dello spazio disponibile! i CSS lavorano su rettangoli!!*/
	margin: 50px auto; /*centra sui browser intelligenti*/
	height: 550px;
	text-align: left; /* ripristino l'allineamento */
	}
		/*alla head non diamo larghezza... occuperà automaticamente tutto lo spazio disponibile*/
		#header{
		height: 130px;
		text-align: center; /* allineamento centrale */
		}
		/*un div che contiene il menu*/
		#menu {
		float: left; /*appoggia il div menu a sinistra facendo scorrere il resto alla sua destra!*/
		width: 200px; /*la lunghezza che vuoi per il tuo menu*/
		height: 300px; /*altezza fissa sempre per il motivo di sopra!*/
		margin: 0 40px 0 0; /* non è stata una bella cosa farlo... ma l'ho fatto :D */
		}
			#menu ol{/* i menu (e le liste in generale), è bene che siano trattate come liste, per ordine, facilità di impaginazione, lettura... insomma, è meglio! */
			list-style-type: none; /* tolgo lo stile della lista (numeri su firefox, pallini su IE - o il contrario??? boh lo tolgo sempre...) */
			list-style-position: outside; /* evito il rientro */
			}
			#menu ol li{
			margin-top: 10px; /* margine tra un oggetto della lista e l'altro */
			font-family: Geneva, Arial, Helvetica, sans-serif;
			}
			#menu ol li a{
			/* proprietà del link del menu */
			font-weight: bold;
			text-decoration: none;
			color: #000099;
			font-size: 16px;
			}
			#menu ol li a:hover{
			/* proprietà del link del menu stato mouse over */
			text-decoration: underline;
			}
			#content{
			/* proprietà del div contenuti */
			padding: 10px 20px;
			text-align: left;
			}
		#footer{
		clear:both; /* annulla il float!!! */
		}

se non ti è chiaro qualcosa ... domanda!!!!

**PinkBetta** · 04-04-2008, 11:42

Mi hai addirittura scritto tutto! Grazie! Lo vado subito a provare.

Riguardo alla scelta dell'ellisse mi è stato chiesto di farlo così il sito, io li avevo sempre fatti rettangolari (o quadrati, insomma non con le curve) usando le tabelle. I div in effetti sembrano più comodi, ma ci devo prendere confidenza non avendoli mai usati.

Per l'elllise ho dato un'occhiata agli altri siti fatti così, ho visto che usavano un'immagine e allora ho fatto anch'io così. Però ad essere sincera c'è qualcosa che non mi convince in questa ellisse...

**paololosco** · 04-04-2008, 12:26

beh, il fatto di utilizzare css è molto meglio per:

- gestione contenuti
- adattabilità grafica (risulta separata dai contenuti, senza contare che cambiando un valore nel css esterno è come cambiare TUTTE le pagina in un layou tabellare...)
- soprattutto, una volta che si entra nell'ottica CSS è molto più semplice utilizzare questo metodo!

ciò premesso: graficamente sinceramente l'ellisse in generale non è molto fine, in secondo luogo l'ellisse da te postata mi lascia un po' così... nel senso che il colore è piuttosto forte, la sfumatura risulta un po' amatoriale come effetto grafico.

Ma è solo un'idea basata su quelo che ho visto (in pratica nulla...)

vorrei indirizzarti un attimo sul metodo di realizzazione...

prima di pensare all'ellisse come immagine, sarebbe bene che proponessi un layout (fatto di contenuti, link, head ecc... insomma, un'immagine (magari fatta con illustrator

) dove vedi quello che vorresti realizzare in HTML-CSS.

fatto ciò (cosi che hai un'idea chiara di colori, spazi da attribuire a menu, contenuti..., font da usare eventuali immagini di icone ecc...) allora puoi iniziare a studiare la struttura... ad esempio...

domande che dovresti porti...

- voglio che i contenuti restino all'interno dell'ellisse. E se sono troppi? che effetto darò alla pagina?

- che link avrò nel menu principale? e quanti?

- avrò dei menu di secondo livello (esempio - l'azienda ---> dove siamo - chi siamo - contatti ) ???

- avrò una head e un foot. ma saranno all'interno dell'ellisse o all'esterno???

- nella header cosa andrà messo? che spazi occuperà???

- avrò sezioni dinamiche? (gestione news, ecc...)

- il footer, da cosa sarà composto? che spazi occuperà???

insomma un'idea BEN CHIARA prima di iniziare a scrivere il codice evita un bel po' di problematiche, come lo scrivere un CSS confusionario (e difficile da gestire) perchè continuo ad aggiungere div su div per l'impaginazione...

ma la domanda più importante, a idee chiare, è:

- COME FACCIO A REALIZZARE IL TUTTO USANDO IL MINOR CODICE POSSIBILE? (HTML ESSENZIALE E CSS CONSEGUENTE!)

ribadisco la disponibilità a dare una mano...

ciao

**luisir** · 04-04-2008, 14:17

scusatemi se mi intrometto in questa discussione ma avrei scritto lo stesso titolo se avessi aperto un'altra discussione ....

il mio problema non riguarda le immagini ma una questione che all'apparenza sembra facile da risolvere, eppure sto combattendo senza risultati utili ...

ho modificato il tema del mio sito xoops, ed essendo nel tema originale il gruppo di blocchi di destra impaginati nel layout del content, adesso voglio distaccare questa parte destra in modo indipendente dal content centrale ...

allego due immagini per far vedere il risultato e come sarebbe senza la parte destra dei blocchi ...
immagine senza blocchi:

immagine con blocchi:

aggiungo che a me sembra che siano i css che riguardano lo spazio dei blocchi a prescindere dal resto della parte centrale del tema che da problemi ...

i file css nel tema sono 6 quindi non è molto facile trovare le righe incriminate ...

in pratica il vero problema è la distanza che dovrebbe esserci dal bordo destro ai blocchi uguale a quello dei blocchi di sinistra .... idem per l'altezza ....

spero mi possiate aiutare
grazie!

**paololosco** · 04-04-2008, 14:41

...sarà difficile trovare l'errore nelle righe... ma senza avere le righe è ancora più difficile.... comunque...

provo a dari una possibile diagnosi e una eventuale soluzione ma, ripeto, senza il codice incriminato non posso avere la certezza che sia questo il problema...

mi sembra che la distanza del div principale dal bordo sia data dall'inserimento del div eventualmente aggiunto...

devi mettere un div vuoto con la larghezza del riquadro che aggiungi, con le stesse proprietà del riquadro

quando c'è il riquadro lo metti dentro a quelo, con margin:0 e senza float...

se non è cosi, posta il codice!

**luisir** · 04-04-2008, 14:50

grazie per il tuo intervento ...

questo è il codice che si trova nel file blocks.css

/* ===== right column ===== */
/* ===== right columns ===== */
#xo-canvas-rightcolumn .xo-block {
margin-right: 11px;
margin-bottom: 2px;
padding: 0px;
}

#xo-canvas-rightcolumn .xo-blocktitle {
min-height: 15px;
background-color: transparent;
background: url(../img/bg-blocktitle.png) no-repeat;
padding: 5px 5px 2px 5px;
color: #fff;
font-family: Verdana, sans-serif,"Lucida Grande", "Trebuchet MS";
font-size: 0.8em;
font-weight: bold;
text-align: left;
}

#xo-canvas-rightcolumn .xo-blockcontent {
min-height: 30px;
background: #0E87B2 url(../img/bg-blockcontent.gif) left top;
padding: 2px 8px 5px;
color: #fff;
font-family: Verdana, sans-serif,"Lucida Grande", "Trebuchet MS";
font-size: 11px;
line-height: 10px;
border-color: #31488C;
border-style: solid;
border-width: 0px 0px 4px 0px;
}

* html #xo-canvas-rightcolumn .xo-blockcontent {
height: 110px;
}

#xo-canvas-rightcolumn .xo-blockcontent a {
background-color: transparent;
color: #DCDD00;
text-decoration: none;
}

#xo-canvas-rightcolumn .xo-blockcontent a:hover {
background-color: transparent;
color: #FEFF5E;
text-decoration: none;
}

#xo-canvas-rightcolumn img {
margin: 3px 1px 0 2px;
padding: 1px;
/*border: 1px solid #999;*/
letter-spacing: 4px;
}

#xo-canvas-rightcolumn img:hover {
/* border: 1px solid #aaa;*/
}

e questo è quello del file content.css

table td {
padding: 0;
border-width: 0;
}
table th, table.outer th,
#xo-page table.outer th.head,
#xo-page table.xodata-list thead th,
#xo-page table.xo-formfields thead th {
background: #5CA8A1 url(../img/table-caption3.png) repeat-x left top;
padding: 2px .25em;
color: #fff;
font-weight: bold;
border: 1px solid #74D3C8;
}

table.outer th a,
#xo-page table.xodata-list thead th a,
#xo-page table.xo-formfields thead th a {
background-color: inherit;
color: #eee;
}

table.outer td,
#xo-page table.xodata-list tbody td,
#xo-page table.xo-formfields tbody td {
background-color: #00A2D5;
padding: 2px .25em;
color: inherit;
border: 1px solid #efefef;
}

#xo-canvas-rightcolumn .outer td {
font-size: .9em;
}
table.outer .head,
table.outer .head td,
table.outer td.odd,
#xo-page table.xodata-list tbody th,
#xo-page table.xodata-list tbody td.odd,
#xo-page table.xo-formfields tbody th {
background-color: #00A2D5;
color: inherit;
}
#xo-page table.xodata-list tfoot td, #xo-page table.xodata-list tfoot th {
background-color: #fc4c4c;
padding: 4px .25em;
color: #A7F1EA;
text-align: center;
border: 1px solid #efefef;
}
#xo-page table.xo-formfields tbody th {
padding: 2px .5em;
vertical-align: top;
}
#xo-page table.xodata-list tbody th[scope=col] {
background: #c5c5c5 url(../img/table-caption_grey.png) repeat-x left top;
color: inherit;
}
#xo-page table.xodata-list {
border: 1px solid #ccc;
}

che in realtà potrebbe non contenere il codice che lo riguarda ma il file layout.css

#xo-canvas-columns {
border-collapse: collapse;
}
#xo-canvas-leftcolumn { width: 171px;}
#xo-page {
min-height: 200px;
color: #fff;
background-color: #0E87B2;
border-color: #0A77A2;
border-style: solid;
border-width: 1px 1px 1px 1px;
}
* html #xo-page {height: 200px;}
#xo-canvas-rightcolumn {width:171px;}

#xo-canvas-leftcolumn, #xo-page, #xo-canvas-rightcolumn {
vertical-align: top;
}
/*========== Règles pour les configurations spécifiques des colonnes ===========*/
#xo-canvas.leftcolumn-layout #xo-canvas-columns, #xo-canvas.threecolumns-layout #xo-canvas-columns
{}
#xo-canvas.rightcolumn-layout #xo-page, #xo-canvas.threecolumns-layout #xo-page
{
border-right-width: 1px;
margin-right: 2px;
padding-right: 2px;
}

forse si ...

**PinkBetta** · 04-04-2008, 19:54

Originariamente inviato da paololosco
ciò premesso: graficamente sinceramente l'ellisse in generale non è molto fine, in secondo luogo l'ellisse da te postata mi lascia un po' così... nel senso che il colore è piuttosto forte, la sfumatura risulta un po' amatoriale come effetto grafico.

Capisco che non ti piaccia l'ellisse (mi è stato chiesto di farla così), anche io preferisco i siti con layout più "classico"!
Riguardo al colore ecc... per ora non è finita, però tieni conto che photoshop non lo so usare molto (e infatti voglio prendermi un manuale). Ed è per questo motivo che non sono riuscita a realizzare un progetto grafico prima; comunque questo più che un sito vero e proprio è un qualcosa che mi serve a me per allenamento.

Ho applicato il codice che mi hai dato, funziona bene ma mi sono sorti dei dubbi:

1)Perchè solo il contenitore i il menù hanno una dimensione fissa?
2)Vorrei variare lo spazio tra intestazione e titolo e tra contenuto e footer (allego un'immagine di come è ora per rendere meglio l'idea), ma non so come agire, se provo ad impostare i margini, il padding ecc... mi si sposta tutto! Non c'è modo di rendere tutti i div indipendenti l'uno dall'altro (se conviene)?
3)Come fccio a stabilire quanti pixel deve essere grande un margine ecc...? Ci sono dei calcoli da fare?

Grazie!

Discussione: Problemi impaginazione

Strumenti discussione

Ricerca discussione

Visualizza

Problemi impaginazione

Permessi di invio