"Modificare HTML"

Kolop · 23 Apr 2017

Salve. Mi scuso già in anticipo per il titolo ma non so che mettere.
Vado subito al dunque. Un mio amico mi ha gentilmente creato un sito e io ora voglio modificarlo per bene siccome sono codici obsoleti. Volevo quindi "aggiornare" il mio sito e chiedo aiuto a voi perché non so come muovermi. Ho creato un'altra pagina (per non fare errori) ed è questa qui: LINK

Invece di tutti quei <table> <td> <tr> voglio aggiornarlo tipo con i DIV e CSS.
Non voglio il codice completo fatto da voi anche perché devo imparare e quindi voglio che mi spiegate per bene come fare.
Grazie a tutti e spero di essermi spiegato.

Max 1 · 23 Apr 2017

Il problema non è solo dalla riga 68, il problema comincia dall'inizio del body, perchè lì cominciano le tabelle

Il menu vuole fatta solo con liste non ordinate, il contenuto della pagina compreso header e footer vogliono fatti con div che sono contenitori che seguono il flusso della pagina, pertanto si dispongono uno sotto l'altro, se invece si vuole che siano affiancati si deve usare la regola css float e alla fine dei float la regola clear. Insomma si deve fare il layout con i css e html, le tabelle vanno usate solo per dati tabellari e non per pozionare elementi o testo

Kolop · 23 Apr 2017

Ciao @Max 1 grazie per la risposta. Ho aggiornato non è quel link e dalla pagina 68 (ho un sito di prova dove faccio modifiche). Il problema inizia dal <body>. Si comunque lo so questo è un sito fatto male. Però non so da dove iniziare cioè lo so che devo modificare con l'HTML e il CSS ma sono poco capace.

Se hai qualche esempio di qualche sito o una "guida" vedo un po' come fare. Si comunque avevo intenzione di fare anche il footer che ora con questo sito non lo ho.

Max 1 · 23 Apr 2017

Kolop ha scritto:
Si comunque lo so questo è un sito fatto male. Però non so da dove iniziare cioè lo so che devo modificare con l'HTML e il CSS ma sono poco capace.

E quale modo avremmo noi di aiutarti se non di farti il sito.
Per prima cosa prova a seguire una guida HTML e una CSS in rete ce ne sono tantissime.
Poi comincia a scrivere qualche cosa e quando trovi problemi chiedi qui postando il codice che hai fatto

Kolop · 23 Apr 2017

Ciao @Max 1 non voglio che me lo fate voi il sito, ci mancherebbe. Non so come fare la parte iniziale dopo <body> cioè l'inizio. Non so come iniziare...

Al posto di <table> uso i DIV? E al posto del <tr> e <td> ?

Max 1 · 23 Apr 2017

Intanto devi cominciare ariempire di contenuti queste sezioni, così il menu viene sotto l'intestazione, se lo vuoi a sinistra di fianco al contenuto della pagina, devi spostare il div menu dentro la pagina usando la regola float

Codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
</head>

<body>
<div id="contenitore">
  <div id="header">
    Inserite qui il contenuto per  id "header"
  </div>
  <div id="menu">
    Inserite qui il contenuto per  id "menu"
  </div>
  <div id="contenuto_pagina">
    Inserite qui il contenuto per  id "contenuto_pagina"
  </div>
  <div id="footer">
    Inserite qui il contenuto per  id "footer"
  </div>
</div>
</body>
</html>

Kolop · 24 Apr 2017

Ciao @Max 1 sto rifacendo il sito daccapo come mi hai suggerito tu, quando ho problemi ti faccio sapere.

Kolop · 24 Apr 2017

Ciao @Max 1 ho trovato un piccolo problema. Ho rifatto un nuovo menu questo è il codice:

HTML:

HTML:

<div class="menu2">
        <ul>
            <li class="menu2a"><a href="aaa">AAA</a></li>
            <li class="menu2b"><a href="?page=aaa">BBB</a>
            <li class="menu2b"><a href="?page=aaa">CCC</a></li>
            <li class="menu2b"><a href="?page=aaa">DDD</a></li>
            <li class="menu2b"><a href="?page=aaa">EEE</a></li>
            <li class="menu2b"><a href="?page=aaa">FFF</a></li>
            </ul></div>

CSS:

Codice:

.menu2{font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
font-size:13px;background-color: #89C1EF;border-radius: 0 0 10px 10px;margin-bottom: 4px;font-weight: bold;}
   
.menu2 ul{height:30px;list-style:none;margin:0;padding:0;}
   
.menu2 li{float:left;}
       
.menu2 li a{color:#000000;line-height:30px;padding:0px 20px;text-decoration:none;}
       
.menu2a a:hover{
background:#3F6094;display:block;border-radius: 0 0 0px 10px;color:#000000}

.menu2b a:hover{
background:#3F6094;display:block;display:block;border-radius: 0 0 0 0;color:#000000}

In sintesi esce così:

Se volessi mettere un bordo a sinistra, sotto e destra della barra ho provato ma non ci sono riuscito.

Come posso fare? Grazie.

Max 1 · 24 Apr 2017

Codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
.menu2{font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
font-size:13px;background-color: #89C1EF;border-radius: 0 0 10px 10px;margin-bottom: 4px;
border-left: solid rgba(0,0,0,1.00) 3px;
border-bottom: solid rgba(0,0,0,1.00) 3px;
border-right: solid rgba(0,0,0,1.00) 3px;}
    
.menu2 ul{height:30px;list-style:none;margin:0;padding:0;}
    
.menu2 li{float:left;}
        
.menu2 li a{color:#000000;line-height:30px;padding:0px 20px;text-decoration:none;}
        
.menu2a a:hover{
background:#3F6094;display:block;border-radius: 0 0 0px 10px;color:#000000}

.menu2b a:hover{
background:#3F6094;display:block;display:block;border-radius: 0 0 0 0;color:#000000}
</style>
</head>

<body>
<div class="menu2">
        <ul>
            <li class="menu2a"><a href="aaa">AAA</a></li>
            <li class="menu2b"><a href="">BBB</a>
            <li class="menu2b"><a href="">CCC</a></li>
            <li class="menu2b"><a href="">DDD</a></li>
            <li class="menu2b"><a href="">EEE</a></li>
            <li class="menu2b"><a href="">FFF</a></li>
       </ul>
</div>
</body>
</html>

Se il bordo lo vuoi solo intorno alle voci le istruzioni le passi all'ul

Kolop · 25 Apr 2017

Ciao @Max 1 ho notato che su IE 11 l'header appare 1 px distaccato e l'immagine più sfocata. La pagina d'esempio è questa: LINK
Il codice border-radius: 7px 7px 0 0; su chrome va bene su IE se lo levo appare bene l'header e i px. Come posso fare per far si che anche su IE vada bene?

Poi ho notato che su IE se ho per esempio un'immagine di 300 x 300 (px) se la imposta a 50 x 50 su chrome appare bene ma su IE si sfoca. L'immagine l'ho modificata su photoshop ed è quindi in alta qualità.

Grazie.

Max 1 · 25 Apr 2017

Il problema della sfocatura potrebbe dipendere dal fatto che fai ridurre l'immagine dal browser (ma non è detto che sia il motivo giusto), stando da questa parte è difficile dire quale è il problema.
È noto comunque che IE interpreta diversamente il codice, pertanto è sempre preferibile fare un CSS per IE e correggere le differenze con i commenti condizionali per IE.
Le immagini e sempre preferibile farle subito con le proporzioni con le quali devono essere visualizzate e non ad alta qualità ma a 96px perchè altrimenti diventano troppo grandi di dimensione per il web e i browser

Kolop · 25 Apr 2017

Ciao @Max 1 ho questo codice per la scrollbar solo che su IE non appare, come posso fare in modo che appaia? Lo so che per IE si deve fare un CSS a parte, ma per ora non ne ho avuto bisogno. Il codice è questo:

Codice:

/* SCROLLBAR */

*::-webkit-scrollbar {width: 7px;
height: 7px;
border-radius: 2px; -moz-border-radius: 2px;
background-color: #3F6094;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15), inset 0 0 4px rgba(0, 0, 0, 1); -moz-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15), inset 0 0 4px rgba(0, 0, 0, 1); -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15), inset 0 0 4px rgba(0, 0, 0, 1)}

*::-webkit-scrollbar-thumb {width: 5px;
border-radius: 2px; -moz-border-radius: 2px;
background-color: #3F6094;
box-shadow: inset 0 0 3px rgba(255, 255, 255, .25); -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, .25); -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, .25);
background-image: -webkit-linear-gradient(top, #89C1EF, #89C1EF 35%, #89C1EF 65%, #89C1EF);
background-image: -moz-linear-gradient(top, #89C1EF, #89C1EF 35%, #89C1EF 65%, #89C1EF);
background-image: -o-linear-gradient(top, #89C1EF, #89C1EF 35%, #89C1EF 65%, #89C1EF);
background-image: -ms-linear-gradient(top, #89C1EF, #89C1EF 35%, #89C1EF 65%, #89C1EF);
background-image: linear-gradient(to bottom, #89C1EF, #89C1EF 35%, #89C1EF 65%, #89C1EF)}

*::-webkit-scrollbar-track {background: transparent}

Grazie.

Max 1 · 25 Apr 2017

Cosa significa non appare?
A me diventa difficile verificare pezzi di codice così sparsi senza avere il complesso della pagina sott'occhio
Quei codici dove li prendi?

Kolop · 25 Apr 2017

Ciao @Max 1 ho trovato il codice sul web e l'ho modificato con i colori che si adattano di più al sito. Su Chrome, Safari appare, mentre su IE no. Il risultato su chrome è così: IMMAGINE (la linko su imgur perché è lunga), su IE invece non appare.

PS: Vedendo un po' in giro funziona solo su Chrome, Safari e Opera, ma su Firefox e IE no.

Cerca

Cerca

"Modificare HTML"

Kolop

Utente Attivo

Max 1

Super Moderatore

Kolop

Utente Attivo

Max 1

Super Moderatore

Kolop

Utente Attivo

Max 1

Super Moderatore

Kolop

Utente Attivo

Kolop

Utente Attivo

Max 1

Super Moderatore

Kolop

Utente Attivo

Max 1

Super Moderatore

Kolop

Utente Attivo

Max 1

Super Moderatore

Kolop

Utente Attivo

Discussioni simili