2009-10-13 18 views
6

Ho questo problema abbastanza popolare, ma non sono riuscito a trovare una soluzione che funzioni.CSS e immagini sulla pagina principale

Fondamentalmente, io sto usando una pagina master (/Masterpages/Default.master), che include

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

e comprende anche alcune immagini con lo stesso collegamento relativo.

Ma quando applico la Pagina master alle pagine di contenuto (in diversi livelli di cartella) la formattazione css e le immagini vengono perse.

Esiste comunque la possibilità di risolvere dinamicamente i collegamenti delle cartelle a css e immagini a tutte le pagine di contenuto tramite la pagina principale?

Grazie in anticipo

UPDATE:

C'è un ulteriore problema. È difficile ottenere l'output per il rendering correttamente sia nel browser sia nella visualizzazione Progettazione in Visual Studio.

ho preso a lavorare utilizzando il asp: immagine soluzione per le immagini in masterpage e di doppio che collega il css nel masterpage, uno per renderlo rendere in VS e uno per renderlo rendere correttamente navigando nel sito.

<link href="../css/style.css" rel="stylesheet" type="text/css" /> 
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" /> 

risposta

10

meglio usare:

<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css /> 

dal momento che questo farà fronte con IIS radici applicativi a differenza:

<link href="/css/style.css" rel="stylesheet" type="text/css /> 
+0

Quindi il ResolveUrl, deve essere utilizzato anche su tutti i tagg img? – Andreas

+0

Non se si utilizza asp: componente Immagine, ma sì se si utilizzano i tag html e si specifica l'attributo src. – Richard

1

Abbastanza sicuro che questo funzionerà

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

/vi porta alla radice del vostro sito

+1

che funziona fino a quando si pubblica l'app in una sottocartella del sito web. – tvanfosson

0

Immagini in CSS sono relative al file che viene fatto riferimento da.

(Un'eccezione da questa è la regola "filtro" in Internet Explorer che viene utilizzato per le correzioni PNG Le immagini in questo caso sono relativi al documento HTML..)

1

È possibile utilizzare la tilde per ottenere il link su cui lavorare dovunque. Funzionerà anche in Immagini.

<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css /> 
0

Sì, il problema è che il materpage sta usando un URL relativo per caricare il CSS:

"../css/style.css" 

è necessario modificare questo alla radice del sito (a seconda della posizione dei file CSS) qualcosa del tipo:

"/css/style.css" 

di tutti i vari livelli di cartella possono utilizzare lo stesso url.

3

È possibile creare il proprio collegamento runat = "server" e utilizzare la mappatura tilde per rendere il percorso CSS relativo alla radice del sito.

<link runat="server" id="siteStyle" 
     href="~/css/style.css" 
     rel="stylesheet" 
     type="text/css" /> 

Le immagini a cui fa riferimento il CSS dovrebbe essere relativo alla posizione del file CSS e dovrebbero risolversi normalmente una volta che il file CSS in sé è incluso correttamente. Per le immagini nei tag sulla pagina, è necessario utilizzare l'ASP: controllo dell'immagine e, ancora, utilizzare la mappatura tilde per un percorso relativo alla radice.

0

In realtà, le pagine master rebase automaticamente i file css automaticamente, senza che tu debba aggiungere runat = "server". Assicurati che il tuo file css abbia una directory nella cartella specificata.

È possibile utilizzare un percorso assoluto per il file css, ma visual studio non sembra rendere gli stili in visualizzazione struttura quando si esegue questa operazione. Inoltre, a volte non saprai se stai per essere eseguito in una directory virtuale, quindi non è sempre l'ideale per utilizzare il percorso assoluto.

Inoltre, utilizzare i collegamenti relativi alle immagini assunte dal file css stesso, che funzioneranno indipendentemente dal modo in cui si collega al foglio di stile.

Problemi correlati