Toggle sidebar Toggle sidebar

css esterno con layout

@

@utente

Nuovo Utente
9
0
css esterno con layout


ho necessita di creare una css esterno da questa piccola pagina html con layout ,molto semplice, chi puo darmi un aiuto ed suggerimento grazie :) .

questa e la pagina html :


2)
inoltre, se possibile, vorrei aggiungere nel css esterno in link di collegmamento di richiamo pagina htm, per inviare un messaggio da un form invio pagina.html


PAGINA HTML
HTML: 
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
.centro {
margin-left: auto;
margin-right: auto;
width: 80%;
}

</style>
</head>
<body>
<!-- cento -->
<div class="centro">
<h1 style="font-family: Helvetica,Arial,sans-serif;">TESTO PRINCIPALE</h1>
<h4 style="font-family: Helvetica,Arial,sans-serif;"><big><big><big>Testo
secondario </big></big></big></h4>
<br>
<span style="font-family: Helvetica,Arial,sans-serif;">Testo contenuto </span><br>
<br style="font-family: Helvetica,Arial,sans-serif;">
<span class="style1"
style="color: rgb(0, 0, 0); font-family: Helvetica,Arial,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><span
class="style1"
style="color: rgb(0, 0, 0); font-family: &quot;Times New Roman&quot;; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><br>
<span></span></span>
<table style="text-align: left; width: 100%;" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: top; background-color: rgb(52, 73, 94);"><br>
</td>
</tr>
</tbody>
</table>
</div>
</body>
[/CODE=html]
 
Ultima modifica da un moderatore:
elvan2

elvan2

Utente Èlite
6,520
1,990
CPU
Intel i5 4590
Dissipatore
CM Hyper T4
Scheda Madre
H97 PLUS Asus
HDD
vari
RAM
HyperX (2X4GB) DDR3 1600MHz
GPU
Sapphire TOXIC R9 270X 2GB
PSU
Antec Neo Eco 520c
Case
Zalman z3
Finché c'è poca roba si può utilizzare benissimo <style> come hai fatto tu.
Però con un CSS esterno ottieni un lavoro più pulito e ordinato. Lavori meglio.

Inserisci
HTML: 
 <link rel="stylesheet" href="style.css">
nell'head .
Poi nella stessa cartella crei un file style.css , rimuovi tutto quello che hai in <style > e lo inserisci nel file style.css.

Non ho capito bene la seconda domanda.
 
@

@utente

Nuovo Utente
9
0
ciao, grazie per la risposta , ho creato la pagina con il css esterno, ma non sono riuscito a visualizzarla correttamente, con la barra inferiore bleu , layout e caratteri predifiniti della pagina, devo poi comunque richiamarli nella pagina html.
 
elvan2

elvan2

Utente Èlite
6,520
1,990
CPU
Intel i5 4590
Dissipatore
CM Hyper T4
Scheda Madre
H97 PLUS Asus
HDD
vari
RAM
HyperX (2X4GB) DDR3 1600MHz
GPU
Sapphire TOXIC R9 270X 2GB
PSU
Antec Neo Eco 520c
Case
Zalman z3
Non riesci a visualizzare la pagina correttamente nel senso che qualche elemento non subisce le modifiche oppure nessuno ?
Posta qui lo style.css che vediamo il codice. ( Ti consiglio ti scriverlo come codice CSS cliccando sul simbolo + accanto all'icona dei video)
 
@

@utente

Nuovo Utente
9
0
pagina html
HTML: 
<html>
<head>
 
 <link rel="stylesheet" href="style.css">
 
  </head><body><br>
</body></html>
 
Ultima modifica da un moderatore:
@

@utente

Nuovo Utente
9
0
file style.css

CSS: 
.centro > h1 {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > h4 {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > span {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > br {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > table {
  text-align: left;
  width: 100%;
}


.centro {
}


.style1 {
  color: rgb(0, 0, 0);
  font-family: Helvetica,Arial,sans-serif;
  font-size: medium;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  orphans: 2;
  text-align: start;
  text-indent: 0px;
  text-transform: none;
  white-space: normal;
  widows: 2;
  word-spacing: 0px;
}


.centro > h1 {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > h4 {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > span {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > br {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > table {
  text-align: left;
  width: 100%;
}


.centro {
}


.style1 {
  color: rgb(0, 0, 0);
  font-family: Helvetica,Arial,sans-serif;
  font-size: medium;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  orphans: 2;
  text-align: start;
  text-indent: 0px;
  text-transform: none;
  white-space: normal;
  widows: 2;
  word-spacing: 0px;
}


.centro > h1 {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > h4 {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > span {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > br {
  font-family: Helvetica,Arial,sans-serif;
}


.centro > table {
  text-align: left;
  width: 100%;
}


.centro {
}


.style1 {
  color: rgb(0, 0, 0);
  font-family: Helvetica,Arial,sans-serif;
  font-size: medium;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  orphans: 2;
  text-align: start;
  text-indent: 0px;
  text-transform: none;
  white-space: normal;
  widows: 2;
  word-spacing: 0px;
}
 
Ultima modifica da un moderatore:
elvan2

elvan2

Utente Èlite
6,520
1,990
CPU
Intel i5 4590
Dissipatore
CM Hyper T4
Scheda Madre
H97 PLUS Asus
HDD
vari
RAM
HyperX (2X4GB) DDR3 1600MHz
GPU
Sapphire TOXIC R9 270X 2GB
PSU
Antec Neo Eco 520c
Case
Zalman z3
Il CSS va abbastanza bene , nessun errore di sintassi.

Lo sai invece perché non funziona correttamente ?
Perché devi creare i <div> in HTML con le classi e/o ID.

Hai inserito nello style.css .centro e .style1 , ma non sono presenti nell' index.html !

Te lo potrei sistemare io ma sono sicuro che lo puoi fare anche tu , provaci che impari.

Per ogni dubbio guarda qui .. ciao fammi sapere

https://www.w3schools.com/css/css_syntax.asp
 
@

@utente

Nuovo Utente
9
0
ciao grazie :) ,
ho provato velocemente ma miu accordo che andrebbe andrebbe dedicato piu tempo e letto tutto il contenuto a rigurado, ma lo faro' appena possibile, ho provato ,
ci siamo quasi , unica cosa che non riprende il layout e lo sfondo della barra bleu sottostante , sicuramente manca qualche accorgimento, questo è il risultato :
domanda il layout puo essere contenuto nel css esterno ?

HTML: 
<html>
<head>
<title></title>
<meta name="description" content="x">
<meta name="keywords" content="x">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="firma"> gggdffdsfsdfsdfdsfdsf... </p>
<p class="style1"> ...contenutoProvaTest </p>
</body>
</html>

il sito segnalato , molto ben fatto, appena possibile , visualizzero il css dalla a alla z , grazie . (y)
 
Ultima modifica da un moderatore:
elvan2

elvan2

Utente Èlite
6,520
1,990
CPU
Intel i5 4590
Dissipatore
CM Hyper T4
Scheda Madre
H97 PLUS Asus
HDD
vari
RAM
HyperX (2X4GB) DDR3 1600MHz
GPU
Sapphire TOXIC R9 270X 2GB
PSU
Antec Neo Eco 520c
Case
Zalman z3
per la barra blue sottostante devi aggiungere questa porzione di codice al css :
CSS: 
 .footer{
    vertical-align: bottom;
    height: 70px;
    width: 100%;
    background-color: rgb(52, 73, 94);

      }
questo è un esempio , poi decidi tu come sistemarlo.

Io l'ho chiamato footer perché solitamente è il suo nome ; ovviamente dovrai aggiungere class="footer" al file html ma ormai l'hai già capito..

Di quale layout parli ?
 
Ultima modifica:
@

@utente

Nuovo Utente
9
0
prima di tutto grazie ancora per il suggerimento, si inizia a vedere qiialocosa , l'effetto voluto ,ma ne approffitero di approfondire il tema in seguito, anche con ll link segnalato., per curiosita. .
Attualmente il contenuto non è centrato all'interno di un quadrato centrale, ma è alltineato veerso desta. ti in invio screnschot senza il css esterno , è posizionato all'internodel layout .
 

Allegati

  • 25_07_2017 , 12_12_36.jpg
    25_07_2017 , 12_12_36.jpg
    21.8 KB · Visualizzazioni: 13
elvan2

elvan2

Utente Èlite
6,520
1,990
CPU
Intel i5 4590
Dissipatore
CM Hyper T4
Scheda Madre
H97 PLUS Asus
HDD
vari
RAM
HyperX (2X4GB) DDR3 1600MHz
GPU
Sapphire TOXIC R9 270X 2GB
PSU
Antec Neo Eco 520c
Case
Zalman z3
@utente ha detto:
prima di tutto grazie ancora per il suggerimento, si inizia a vedere qiialocosa , l'effetto voluto ,ma ne approffitero di approfondire il tema in seguito, anche con ll link segnalato., per curiosita. .
Attualmente il contenuto non è centrato all'interno di un quadrato centrale, ma è alltineato veerso desta. ti in invio screnschot senza il css esterno , è posizionato all'internodel layout .
Clicca per espandere...
Volevi dire verso sinistra ?!

Devi giocare con i "margin" e "align" , vedo che hai messo tanti "left"..
 
@

@utente

Nuovo Utente
9
0
si, scusa, attualmente è a sinistra. nel file base originale con css interno, e centrato e contenuto in un layout prefissato centrale , senza uscire dal quadro centrale
 
elvan2

elvan2

Utente Èlite
6,520
1,990
CPU
Intel i5 4590
Dissipatore
CM Hyper T4
Scheda Madre
H97 PLUS Asus
HDD
vari
RAM
HyperX (2X4GB) DDR3 1600MHz
GPU
Sapphire TOXIC R9 270X 2GB
PSU
Antec Neo Eco 520c
Case
Zalman z3
Il primo html che hai postato con css interno ti mostra il contenuto centrato perché il <div class="centro"> viene modificato con i margin "auto" e width 80% ( sesta riga)
Finché non chiudi con </div> tutto l'intero contenuto all'interno subirà queste modifiche ..
 
elvan2

elvan2

Utente Èlite
6,520
1,990
CPU
Intel i5 4590
Dissipatore
CM Hyper T4
Scheda Madre
H97 PLUS Asus
HDD
vari
RAM
HyperX (2X4GB) DDR3 1600MHz
GPU
Sapphire TOXIC R9 270X 2GB
PSU
Antec Neo Eco 520c
Case
Zalman z3
Certo che si può. :brindiamo:
 
Devi accedere o registrarti per rispondere qui.

Ci sono discussioni simili a riguardo, dai un'occhiata!

Gigi_xx_1
PROBLEMA Quando il post viene pubblicato deve uscire anche nome e cognome dell'utente
Risposte
1
Visualizzazioni
602
Web Development
Moffetta88
Moffetta88

Entra

Hai dimenticato la password?
oppure Accedi utilizzando
Discord Ufficiale Entra ora!

Discussioni Simili