titolo più immagine - come fare?

[valerio matrix]

premesso che conosco pochissimo i css, volevo avere un consiglio pratico da voi esperti. Sto provando a realizzare un piccolo server aziendale ma come ben sapete, non basta fare un buon lavoro per il back end ma serve soprattutto il front end e per realizzarlo in modo armonioso per l'utente avevo intenzione di crearlo in modo minimal ma con una piccola immagine di sfondo sul titolo, o meglio: la parte più alta della pagina, top, deve contenere sulla destra in un riquadro bianco il titolo, il cui colore di sfondo sarà uguale a quello del background del body e subito dopo il titolo, sulla destra, quindi sullo stesso asse orizzontale deve partire l'immagine che arriva fino al lato opposto della pagina (lato sinistro), nello specifico uno skyline.

Per adesso ho realizzato soltanto questo:

 .titolo {
background-color: white;
color: rgb(25, 25, 112);
font-family: arial, sans-serif;
font-size: 16px;
text-align: center;
font-weight: bold;
margin: 0 85% 0 0;
padding: 10px;
}

Cosa mi consigliate di fare:
- creare un'immagine con la prima parte bianca in modo da caricarla e scriverci sopra;
- oppure fare un riquadro a destra del testo con l'immagine dentro? (è l'opzione che io preferisco e che però non so se riesco a fare)

grazie a tutti voi :byebye:

 

[Max 1]

Sarò rintronato! Ma la tua premessa/descrizione non mi è molto chiara e mi contrasta un po' con l'immagine che hai postato, in tutti i casi i terrei separati i testi/titoli dalle immagini mettendoli dentro a contenitori, componendo il tutto formattato con i CSS.

Se hai bisogno di uno spezzone di codice descrivi con più chiarezza e per linee essenziali la composizione che vuoi ottenere e sarai accontentato

 

[valerio matrix]

provo a spiegare meglio.. dove vedi scritto gestione 1, quello è il titolo h1 della pagina al quale ho aggiunto uno sfondo bianco. Ora, attaccato al riquadro bianco (fianco destro) devo aggiungere con la stessa altezza del riquadro, un'immagine larga fino al lato destro del monitor. Allego un'immagine fatta con gimp per farti capire. calcolando che l'immagine non è quella e che vorrei mettere un contorno bianco. Faccio a fatica a capire come allineare più elementi sullo stesso piano. Ho provato con float e clear ma ancora con scarsi risultati.
Spero di essere stato più chiaro..
Ciao.

 

[Max 1]

Il modo migliore per allineare sulla stessa riga più elementi rimane sempre il float, ovvio che bisogna stare attenti alle dimensioni degli elementi perchè se queste non sono precise l'elemento si sposta nella riga successiva. le misure in percentuale a volte creano problemi e bisogna dare sempre una misura in larghezza cosa che non vedo nel tuo codice

 

[valerio matrix]

Ciao Max, grazie per il consiglio.. per questo tipo di misure come mi devo comportare? Inserisco una misura in pixel?

 

[Max 1]

Un layout in misure fisse è sempre più tranquillo, ma se vuoi proprio un layout elastico usa le % ma come ho detto è ovvio che è più da esperti combinare le cose. Io quando posso uso sempre layout fissi a 980px e devo dire che non ho mai avuto problemi

 

[valerio matrix]

Grazie Max Ti faccio sapere appena riesco a metterci mano.

 

[valerio matrix]

Perfetto. Ho utilizzato anche i div per ottenere questo:


Grazie per il suggerimento. Continuo l'opera :byebye: