link che va a capo in una riga della pagina

**domedim** · 09-11-2010, 18:18

Ciao a tutti
ho trovato molto interessante il sito http://blog.html.it/layoutgala/
consigliatomi in questo forum, ho utilizzato il css: layoutgala31e l'ho trovato eccezionale per le mie esigenze, però mi dà un grosso problema che non riesco a risolvere in alcun modo e precisamente se creo un link all'interno di una riga o di una cella di tabella in cui ho un'immagine seguita da un termine link, me lo sposta ad un paragrafo successivo.
Qualcuno cortesemente puo' verificarlo e darmi un aiuto?
Se non chiedo troppo vorrei sapere come aggiungere le istruzioni per la stampa escludendo l'header e la navigation, lo so fare soltanto con un css esterno.
Vi saro' molto grato perche' mi interessa.
grazie
domedim
allego il codice completo:
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 31</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:60px;line-height:60px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:left;width:100%}
div#content{margin-left:200px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header">
<table width="95%" border="1" align="center" cellpadding="1" cellspacing="0">
<tr>
<td><div align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Homepage</font></div></td>
<td><div align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">indice</font><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
sezione A</font></div></td>
<td><div align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">stampa</font></div></td>
</tr>
</table>
</div>
<div id="wrapper">
<div id="content">

1) Content here. column long long column very long fill
fill fill long text text column text silly very make long very fill silly
make make long make text fill very long text column silly silly very column
long.</p>

very make make fill silly long long filler column
long make silly silly column filler fill fill very filler text fill filler
column make fill make text very make make very fill fill long make very
filler column.</p>
</div>
</div>
<div id="navigation">

2) Navigation here.</p>

</div>
<div id="extra">

3) More stuff here. </p>
</div>
<div id="footer">

footer</p></div>
</div>
</body>
</html>

**Prill** · 10-11-2010, 16:59

Ciao domedim, i tuoi problemi coi link nascono dall'avere nel css

codice:

a{display:block;color: #981793;padding:10px}

il che fa sì che il link occupi tutto lo spazio disponibile e generi un a capo.
Per evitarlo, puoi creare un'altra classe per i collegamenti che devono comportarsi a quella maniera o, se sono quelli inseriti nel div navigation indicarli così

codice:

div#navigation a{display:block;color: #981793;padding:10px}

eliminando l'altra regola.

Per quanto riguarda il css per la stampa, crea il tuo foglio esterno, nel quale per gli elementi che non dovranno essere stampati imposterai un display:none; e richiamalo poi in head specificando come media "print"

codice:

<link rel="stylesheet" type="text/css" media="print" href="cssPerStampa.css">

(per inciso, dovresti eliminare quella tabella nel div header e impostare tipo di font e dimensioni nel css)

**domedim** · 10-11-2010, 17:50

funziona perfettamente!!! - ti ringrazio tantissimo till, mi hai fatto una cosa molto importante per me.
Per quanto riguarda la tabella nell'header ti chiedo come posso fare per creare un'impostazione simile per riportare link, titoli ed altro? non conosco altro tipo di struttura perchè sono poco esperto

Per il problema della stampa ho sempre fatto così come mi hai indicato, speravo di incorporarlo nella pagina per non portarmi dietro un file esterno (pazienza, non e' un grosso problema)
Se puoi darmi una indicazione per l'header te ne sarò grato.
grazie ancora

**Prill** · 10-11-2010, 18:19

Avere un css incorporato non conviene se gli stessi stili sono adottati da più pagine, in questo caso infatti, oltre a dover ripetere il codice ogni volta, se si rendesse necessaria una modifica dovresti farla su tutte le pagine e non sul solo css. Puoi comunque anche incorporare il css specificando le varie regole attraverso @media print e @media screen

codice:

@media print {
 
   /* qui tutte regole che serviranno per la stampa per la stampa */
 
}
 
@media screen {
 
   /* qui quelle per lo schermo */
}

Per quanto riguarda i contenuti del div header, se hai solo dei link puoi inserirli direttamente semplicemente distanziandoli fra loro (anche solo sfruttando il word-spacing ma anche altro), o all'interno di un elenco opportunamente impostato. Se invece devi avere più div affiancati con contenuti diversi allora puoi ricorrere al float. Se non ti è chiaro o hai difficoltà, chiedi pure (ma dicci anche precisamente cosa devi mettere all'interno di quel div)

**domedim** · 10-11-2010, 18:45

OK tutto chiaro, domani proverò, ma penso che va meglio, come tu consigli, con i css esterni.
ancora grazie 1000

**domedim** · 11-11-2010, 17:44

Ho provato in tutti i modi e funziona tutto perfettamente, ho trovato una buona soluzione per eliminare la tabella nell'header, ho collegato gli elementi con del tratteggio (per non mettere spazi vuoti) e li ho dato il colore dello sfondo per non farli apparire.
Sono contento per il risultato ottenuto, ma anche perchè da questo problema, grazie a te, ho appreso due istruzioni importanti.
grazie ancora e buona serata
domedim

Discussione: link che va a capo in una riga della pagina

Strumenti discussione

Ricerca discussione

Visualizza

link che va a capo in una riga della pagina

Permessi di invio