Foto a metà pagina fino al margine laterale 
Autore: Giorgio D.
Visite 810,
Followers 1,
Condiviso 0
salve, io avrei bisogno di inserire un'immagine nel corpo centrale di una pagina del mio sito e che essa possa arrivare al margine sinistro, che si adatti quindi alla dimensione della finestra. io ho già usato lo stile righe e la proprietà di estendere alla larghezza della pagina o l'effetto parallasse, ma esse funzionano su tutta la riga, io avrei bisogno di gestire i due elementi foto, che sono sulla stessa riga, portandoli entrambi al relativo margine laterale
Postato il
unisci prima con un programma di grafica le due foto facendole diventare una e applicala poi in stile righe... se ho capito cosa devi ottenere, altrimenti posta uno screenshot o un link per valutare...
... io posso proporti una mia idea EXTRA e fluida, > questa ...con il mio metodo del div_custom+iframe ...
... per ottenerlo devi essere in grado di realizzare le due immagini indipendenti con MAXIMAGE2, e questo dipenderà solo da te studiando le opzioni direttamente dalla fonte...
... poi con un copia/incolla di un codice da me ideato si potrà integrare nel progetto come sfondo di riga, pagina, header, eccetera...
... se ti interessasse devi fare quanto detto prima, postare i LINK delle due pagine con immagini mazimage statiche, ed anche il LINK del sito indicando la riga che vuoi riempire con lo sfondo EXTRA...
... se sei in grado di ottemperare poi continuerò con il mio codice, ... altrimenti, e/o se non ti interessasse, ignora quanto detto, e procedi nel modo suggerito da Skeggia, direi semplicissimo, logico, ed immediato...
.
Autore
grazie mille ad entrambi per l'aiuto. si skeggia hai capito bene cosa mi serve e la tua idea è davvero immediata,, solo che i contenuti della pagina sono organizzati su due colonne secondo lo schema:
1 3
2 4
e per il sito responsive mi servirebbe che si adattassero in quel modo........in più, se non sbaglio, quando imposto uno stile riga con foto di sfondo, se la restringo la finestra internet lateralmente non si adatta, ma perde il contenuto, cioè non è più visibile dato che restringo la schermata (io per avere una foto estesa alla larghezza della finestra uso un elemento testo nel corpo della pagina e do un numero di campi di spazio a seconda di quanto alto mi serve il "banner", dovrei cambiare metodo?).
comunque non è possibile gestire i due elementi singolarmente impostando che si adattino automaticamnete al margine rispettivo della finestra?
... pubblica le tue prove in rete, un click , ... e posta il LINK, ...in modo che si possa valutare...
... puoi usare una sotto directory del tuo spazio web, oppure esportare su Altervista per i test reali...
... allega anche uno esempio grafico del risultato che vorresti ottenere...
.
no le foto che metti nello stile righe si adattano al responsive benissimo...
come detto da kolasim, prova a postare un link per capire bene cosa vuoi ottenere...e uno screnshot esplicativo...
ciao
Autore
salve ad entrambi i moderatori e grazie per il vostro aiuto, mi scuso se non ho risposto ma sono stato impegnato, il sito in questione ora che lo ho termitato è www.pianeta-pc.it e la pagina in questione è nel menù "i prodotti" e poi selezionate CAD. la soluzione che si avvicina maggiormente alla mia richiesta è quella proposta da skeggia 12, e riguarda la prima riga contenente due foto affiancate. il problema che sorge quando gestisco le due foto con lo stile righe con il metodo precedentemente proposto da skeggia è che nella visualizzazione smartphone non si staccano e non mi permettono di capire che i due lementi sono separati e quindi nella visualizzazione a colonna gli elementi sono sfalsati. ci possono essere soluzioni alternative? grazie in anticipo per il vostro aiuto
chiaramente non si dividono, essendo un corpo unico... e in stile righe non si possono inserire due elementi sulla stessa riga...
ho visto che tu hai messo le due foto separatamente in testa ad ogni colonna e non a tutto schermo... che mii sembra una buona soluzione grafica...
ma io metterei un filetto tra le due colonne per separare i due argomenti (allargando anche lo spazio tra loro), che altrimenti così sembrano legati...
ci sono anche delle impostazioni css che ti consentono di distribuire il testo su due colonne con filetto centrale... in un unico oggetto html...
un esempio (in mezzo a tanti altre prove)...
http://www.skeggia12.it/test/v13/oggtesto/index.php
due o più colonne...
Io personalmente ricalcherei il layout degli altri prodotti: una foto in testata a pieno schermo in larghezza e sotto la descrizione con l'altra foto e la descrizione.
Ciao
Autore
grazie per il consiglio di aumentare al distanza tra le due colonne. saprebbe anche dirmi come ottenere quel filetto tra le due colonne di cui mi parlava?
inserisci sulla griglia un oggetto html e metti il codice css nel tab esperto...
.dueColonne {
/*Numero di colonne*/
column-count: 2;
/* Distanza tra le colonne*/
column-gap: 30px;
/*Stile per il bordo delle colonne*/
column-rule: 1px solid #666;
text-align:justify;
/*Amplifica il supporto alle vecchie versioni di Firefox e Chrome/Safari */
-moz-column-count: 2;
-moz-column-gap: 30px;
-moz-column-rule: 1px solid #666;
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px solid #666;
}
e questo css nell'oggetto html e fai delle prove per adattare il codice al tuo progetto...
<div class="dueColonne">
<h2>Due colonne</h2>
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
il testo si dividerà automaticamente in due colonne (naturalmente con più testo di questo) e aggiungerà il filetto centrale tra le due colonne...