[HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div

[Dreamweaver]

Salve a tutti sono nuovo qui nel forum.Ho un paio di problemi con Dreamweaver;IL PRIMO PROBLEMA è per una tabella base,nella quale ci sono altre tabelle secondare(menu...div ecc...);in pratica questa tabella è impostata con una larghezza e altezza al 100% ma mi lascia un po di spazio all'esterno,non si adatta completamente allo schermo...cosa che prima faceva ma adesso non più,non so cosa sia cambiato (potrei postare il link in html se serve).Il SECONDO PROBLEMA riguarda due DIV uno con position ABSOLUTE (absolute con un immagine all interno) e altro con position RELATIVE (il relative contiene l absolute ecome opzioni ho impostato OVERFLOW-X :Hiden e OVERFLOW-Y :Hiden) nell immagine presente all interno dell absolute ho creato una REGOLA CSS che al passaggio del mouse crea uno zoom sull' immagine che non esce dai DIV e da un effetto tipo questo...https://www.pottermore.com/collection/characters...Il problema è che non riesco a far adattare l immagine dentro il div e cioè se allargo o restringo la pagina html l'immagine dovrebbe adattarsi al 100%...vorrei sapere le giuste misure per adattare l' immaggine e i div.

GRAZIE

 

[Max 1]

Il problema della tabella per capirlo bisogna vedere qualche cosa.
I div e immagini con posizione absoluta non si possono adattare

 

[Max 1]

Sposto in html/css

 

[Dreamweaver]

Molte grazie per la risposta.Per quanto riguarda la tabella allego due immagine non so se possono essere d aiuto...lo spazio è dove indicato dalle frecce grigie prima non c'era

quest' immagine è in vista dal vivo in dreamweaver

quest altra è in vista proggettazione con le misure della tabella in basso

Per quanto riguarda i div ha qualche soluzione alternativa per creare una cosa del genere https://www.pottermore.com/collection/characters ? In pratica nei riquadri ROSSO e GIALLO vorrei inserire un immagine che rimanga dentro i spazi colorati e che si adatti all ingrandimento e ridimensionamento della pagina;la regola per zoommare l immagine la conosco ma non so come adattare l immagine.Mi faccia sapere se serve qualcosa in particolare.

GRAZIE ANCORA PER LA RISPOSTA

 

[Max 1]

Le tabelle per fare layout non sono adatte (le quali vanno usate solo per dati tabellari), bisogna usare dei div con misure in % in particolare modo se si vuole fare dei layout responsive, stesso discorso vale per le immagini.
Per lo zoom è abbastanza complicato farlo ridiminsionare perché ha delle coordinate e una dimensione fissa, bisognerebbe fare uno script in JS che tenga conto delle misure della finestra e ridimensioni lo zoom spostando anche le coordinate, cosa abbastanza macchinosa. Io piuttosto dello zoom penserei a una finestra modale dove aprire l'immagine ingrandita, una cosa tipo lightbox

 

[Dreamweaver]

Grazie ancora per la risposta. I DIV non riesco a centrarli come le tabelle,come posso fare per centrarli con dreamweaver?

Per quanto riguarda i Lightbox-Finestra modale c è un opzione in dreamweaver che me li fa creare o sono plug in da installare ?.
GRAZIE

 

[Max 1]

I DIV non riesco a centrarli come le tabelle,come posso fare per centrarli con dreamweaver?

Non è DW che deve centrare gli elementi (div o altro) ma è il codice che si deve inserire a mano a fare il lavoro. Purtroppo non posso darti suggerimenti di come fare perché non avendo un codice da vedere non posso avere un'idea di cosa fare.
Posta il link alla pagina cosi riusciamo a capire meglio.
Per quanto riguarda lightbox o simili per DW puoi vedere qui:
https://www.google.it/search?q=ligh...firefox-b&gfe_rd=cr&ei=RQv2V6aQLJOT8Qe-6YHoBg
dove ci sono molti spunti, o questo che è il primo della lista e mi sembra interessante
http://www.dreamweaver-templates.net/inserting-lightbox-in-dreamweaver.html

 

[Dreamweaver]

Grazie per la risposta.
Con i div ho creato il layoute e devo dire che è decisamente meglio...e sono riuscito anche a centrarli (in pratica ho creato un div base con larghezza 100% e ne ho inserito uno con larghezza 50% che si è centrato entrambi in position relative ed overflow-x e y hiden) in quello con larghezza al 50 % ne ho inserito un altro con position absolute e larghezza al 50% e il risultato è questo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
#BASE {
    background-color: #FF0004;
    height: 100%;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 50px;
}
body,td,th {
    font-family: homenaje;
    font-style: normal;
    font-weight: 400;
    height: 100%;
}
#basetabellamenu {}
#basetabellamenu {    width: 100%;
}
#tabellamenu {    height: 100%;
}
a:link {
    color: #FFFFFF;
}
a:visited {
    color: #000000;
}
#BASETABELLEZOOM {
    height: 500px;
    width: 100%;
    background-color: #FF0004;
    position: relative;
}
#dentro {
    position: relative;
    height: 400px;
    width: 70%;
    background-color: #FFFFFF;
    text-align: left;
}
#sinistro {
    position: relative;
    height: 400px;
    width: 50%;
    overflow-y: hidden;
    overflow-x: hidden;
}
#sinistroabsolute {
    position: absolute;
    height: 80%;
    width: 100%;
    -webkit-transition: all 4s linear 0s;
    -o-transition: all 4s linear 0s;
    transition: all 4s linear 0s;
}
#sinistroabsolute:hover {
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}
</style>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/homenaje:n4:default.js" type="text/javascript"></script>

</head>

<body bgcolor="#000000" id="SFONDO">
<div id="BASE">
  <h1>Esempio Titolo</h1>
</div>
<table width="100%" align="center" cellspacing="0">
  <tbody>
    
  </tbody>
</table>
<div id="BASETABELLEZOOM">
  <div align="center">
    <div id="dentro">
      <div id="sinistro">
        <div id="sinistroabsolute"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" width="600" height="400" alt=""/></div>
        <p>&nbsp;</p>
      </div>
    </div>
  </div>
</div>
<p>&nbsp;</p>
</body>
</html>

Ovviamente da sviluppare...però rimane sempre il problema dei div che lasciano i spazi laterali e anche se si adattano al movimento della pagina non si adattano completamente e dove c è scritto esempio titolo il div non si è adattato su ma ha lasciato uno spazio nero.

MOLTE GRAZIE DAVVERO

 

[Max 1]

Premesso che sono molto cocciuto e non ho ancora capito bene come deve essere graficamente il layout che vuoi realizzare! A parte il codice che tu posti se mi spieghi bene come deve essere la pagina cerco di farti un'esempio io!

Nel tuo codice noto:

1. Una nidificazione di div non necessaria
2. Un uso di dimensioni fisse anche nell'immagine e questo non lascia fare l'adattamento
3. Un uso di caratteri maiuscoli (non va bene)
4. Definizioni nel tag body (meglio evitare e mettere le regole nel css)
5. ecc.

 

[Dreamweaver]

Grazie ancora per la risposta e la disponibilita...domani con calma allego tutto

 

[Dreamweaver]

Allora vorrei realizzare un sito di vendita di vinili(solo un sito con collegamenti ad altri sito non un negozio online, quindi non serve carrello ecc...)...Per quanto riguarda il layoute vorrei riprendere questo stile presente in questo sito https://www.pottermore.com/collection/characters fare un titolo sopra,poi giu un menu e piu sotto creare dei box o div, uguali a quelli del sito postato sopra (con immagini che si adattano al box o div e che interaggiscano al passaggio del mouse,simili al sito che ho postato sopra,con collegamento all immagine che zoomma).
il menu mi piacerebbe che quando si clicca sui collegamenti la pagina scorra verso il basso (ma va bene anche che cambi pagina al click) e che il mouse abbia un immagine (vinile o altro non so ancora) invece della freccia base.

puoi spiegarmi il perchè degl errori che mi hai elencato cosi da capire dove sbaglio se non è troppo lunga come cosa?

GRANDE MAX GRAZIE DAVVERO

 

[Max 1]

Ci sentiamo nel pomeriggio!

 

[Max 1]

Allora avevo cominciato a farti l'esempio promesso ma mi sono reso conto che per farti un layout completamente responsive (cioè che si adatti alle varie risoluzioni), mi veniva un codice estremamente complicato che per te poi era estremamente difficile da modificare alle tue esigenze.
A questo punto o ti facci un esempio terra a terra con misure in percentuale che garantiscono un adattamento non ottimale o un progettino più complesso che prevede più file come css e js, ma che dovrai scaricare e arrangiarti a modificare.
Cosa dici?

Una cosa però non capisco se vuoi mettere dei box 2 per riga con le immagini che vengono abbastanza grandi che bisogno hai dello zoom?

 

[Dreamweaver]

Si grazie mandami un esempio generale se puoi.Lo zoom lo uso perche è un effetto che mi piace.

Un altra cosa... potrei inserire uno sfondo invece dell' immagini nei div (box) con zoom cosi si adattano bene ...ma non so come renderlo cliccabile con collegamento esterno;con l immagini ci riesco...come posso fare con lo sfondo per renderlo cliccabile?

 

[Max 1]

Esempio generale fatto un po' in fretta, dovrebbe essere più o meno ciò che ti serve senza la pretesa di essere responsive al 100%:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
#contenitore {
    font-family: "Times New Roman";
    font-size: 12px;
    color: #000000;
    background-color: #FFE9C5;
    margin: 20px auto;
    padding: 0px;
    height: auto;
    width: 80%;
    border: 2px solid #0005FF;
}
body,td,th {
    color: #000000;
}
body {
    background-color: #000000;
    padding: 0;
    margin: 0;
    color: #000000;
}
a:link {
    color: #0200FF;
    text-decoration: none;
}
a:visited {
    color: #0200FF;
    text-decoration: none;
}
a:hover {
    color: #FF0000;
    text-decoration: none;
}
a:active {
    color: #0200FF;
    text-decoration: none;
}
#header {
    background-color: #00FFF3;
    margin: 0px;
    padding: 20px;
    height: 110px;
    width: 95.5%;
}
#menu {
    color: #ffffff;
    background-color: #000000;
    margin: 5px;
    padding: 0px;
    height: 40px;
    width: 99%;
}
#contenuto {
    margin: 0;
    padding: 20px;
    height: 600px;
    width: 98%;
}
#box1 {
    background-color: #FF0000;
    margin: 0px;
    padding: 10px;
    float: left;
    height: auto;
    width: 47%;
}
#box3 {
    background: #00FFE3;
    margin: 0px;
    padding: 10px;
    float: left;
    height: auto;
    width: 47%;
}
#box4 {
    background: #B2B2B2;
    margin: 0px;
    padding: 10px;
    float: left;
    height: auto;
    width: 47%;
}
#box2 {
    background-color: #12FF00;
    margin: 0px;
    padding: 10px;
    float: left;
    height: auto;
    width: 47%;
}
#footer {   
    background-color: #00FFF3;
    margin: 0px;
    padding: 10px;
    height: 80px;
    width: 97.5%;
}
#clear {
    clear: both;
}
</style>
</head>

<body>
<div id="contenitore">
    <div id="header">
        <h1 align="center">Qui il titolo e il logo</h1>
    </div>
    <div id="menu" align="center">
        <h1>Inserite qui il menu</h1>
    </div>
    <div id="contenuto">
      <div id="box1" onClick="document.location.href='pag1.html';">
          Inserite qui il contenuto per  id "box1"<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </div>
      <div id="box2" onClick="document.location.href='pag2.html';">
          Inserite qui il contenuto per  id "box2"<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </div>
      <div id="box3" onClick="document.location.href='pag3.html';">
          Inserite qui il contenuto per  id "box3"<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </div>
      <div id="box4" onClick="document.location.href='pag4.html';">
          Inserite qui il contenuto per  id "box4"<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </div>
      <div id="clear">&nbsp;</div>     
    </div>   
    <div id="footer">
        Inserite qui il contenuto per  id "footer"
    </div>     
</div>
</body>
</html>

Con questo codice puoi cliccare il div con solo lo sfondo e ti porta a una pagina esterna, ovvio che se cambi l'url con il link ad un'ancora invece della pagina esterna puoi scorrere la pagina in verticale. Vedi tu!
Anche misure e colori sono cambiabili a tuo piacere
Ciao dimmi se ti piace

 

[Dreamweaver]

Ottimo si cosi dicevo perfetto...per quanto riguarda il menu come posso fare per distanziare in maniera omogenea le varie scritte ,inserisco una tabella li o c è un modo piu semplice? mi serviva anche un codice per trasformare il puntatore del mouse in un immagine fissa o che faceva movimenti (gif,png ecc...).

GRAZIE ANCORA MAX PER LA PAZIENZA E TUTTO

 

[Max 1]

E dai con le tabelle! Le tabelle vanno usate per dati tabellari! Il menu va fatto con liste non ordinate:

<ul>
       <li>......</li>
       <li>......</li>
       ecc..........
</ul>

la distribuzione dei pulsanti va in base al numero e alla dimensione, regolando di conseguenza il padding e il margin.
Per il corsore personalizzato:
Per inserire un'immagine personalizzata come cursore è possibile utilizzare la seguente sintassi, tenendo in considerazione che il cursore deve obbligatoriamente essere in uno di questi 3 formati: .cur .ico .ani
Sintassi:

elemento { cursor: url(link_del_puntatore), auto }

 

[Max 1]

Quali sono le voci che vuoi mettere nel menu?

 

[Dreamweaver]

allora...le voci sono...WELCOME,ACQUISTA VINILI,ASCOLTA MIX, NOTIZIE, INFO...lo posso creare con photoshop il designe ma non so come distanziare le voci in modo che si adattino alla pagina...lo so fare solo con tabelle....

quelle sono in verticale ...e in orizzontale?

Per fare i collegamenti tra le pagine del menu ho creato altre pagine html e messe nella cartella del sito e collegate tra loro.

il codice del cursore non mi funge...dove dovrei inserirlo di preciso ?

GRAZIE ANCORA

 

[Max 1]

Guarda se il menu allegato può andare bene è adattato alla pagina che ti ho fatto ed è responsive