titolo più immagine - come fare?

valerio matrix

Nuovo Utente
7 Mag 2015
33
0
6
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:
Codice:
 .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;
}

Schermata del 2015-06-02 13:13:16.png

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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.404
339
83
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

Nuovo Utente
7 Mag 2015
33
0
6
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.404
339
83
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

Nuovo Utente
7 Mag 2015
33
0
6
Ciao Max, grazie per il consiglio.. per questo tipo di misure come mi devo comportare? Inserisco una misura in pixel?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.404
339
83
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

Nuovo Utente
7 Mag 2015
33
0
6
Perfetto. Ho utilizzato anche i div per ottenere questo:
Schermata del 2015-06-04 19:46:17.jpg

Grazie per il suggerimento. Continuo l'opera :byebye:
 
Discussioni simili
Autore Titolo Forum Risposte Data
sbobby Niente più titolo dei siti!! Sicurezza e Virus 5
P inserire due voci in un titolo post wp WordPress 1
L titolo del sito nella pagina di ricerca di google SEO e Posizionamento 2
Web93 CAMBIARE TAG POST TITOLO DA H2 A H1 WordPress 1
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
trattorino estrarre titolo video facebook in php PHP 0
C [PHP] Url Rewrite titolo pagina in url PHP 3
A riscrivere titolo in php PHP 8
Kolop Titolo PHP PHP 11
U Hover su immagine escluso titolo - flexbox Presentati al Forum 0
U [HTML] Hover su immagine escluso titolo - flexbox HTML e CSS 3
webmachine [WORDPRESS] Cambiare titolo pagina articoli WordPress 0
marino51 [CSS] titolo fisso di una tabella HTML e CSS 4
P [HTML] scrivere il titolo di una pagina nella pagina stessa, si può? HTML e CSS 3
L Il titolo degli articoli e tag è diverso da quello impostato da me WordPress 6
P due problemi sulla ricerca tramite titolo PHP 14
P inserire un titolo e verificare Ajax 4
L Problema per centrare titolo PopUp HTML e CSS 5
A Passare il titolo al posto dell'id PHP 1
A titolo al posto dell'id PHP 12
M Form - inserire titolo, descrizione ed IMMAGINE PHP 2
Devil-94 gestione logo e titolo del sito con php e mysql MySQL 2
T Blog su Altervista e Titolo: come rimuovere la parola "Altervista" dalle SERP? SEO e Posizionamento 2
P Allineare data a sx dello schermo e titolo al centro HTML e CSS 16
L Eliminazione titolo sito sulla homepage Joomla 1
P Problemi di avere il titolo in un unica riga con carattere 18px HTML e CSS 12
S Titolo e descrizione HTML e CSS 3
F Perchè non vedo il TITOLO nel browser? help! HTML e CSS 2
F estrarre titolo e contenuti da un link...come? PHP 0
I Viasualizzare titolo immagine URGENTE Javascript 1
L Visualizzare files in una cartella con titolo in base al file PHP 11
carter Dare un titolo alla finestra confirm Javascript 5
A Codice per inserire favicon nel titolo della pagina HTML e CSS 3
T Troppo spazio tra il titolo ed il menu HTML e CSS 1
E titolo pagina con document.getElementsByTagName('title') Javascript 4
R 2 linguaggi per descrizione, keywords, titolo pagina, nome sito SEO e Posizionamento 2
M funzione che comunica titolo di una pagina ASP.NET 2
A Prelevare i dati in base al titolo selezionato (era Aiuto!) PHP 1
D visualizzare immagini da mysql a fianco del titolo PHP 8
K Titolo pagina HTML e CSS 2
S Problema Animazione Titolo Flash 3
F titolo gol parade Flash 0
G Come far scorrere la linguetta titolo nel browser? HTML e CSS 3
S Barra del titolo [popups] Javascript 4
T Titolo dinamico Classic ASP 3
T Come restringere un titolo in asp Classic ASP 2
C URL della pagina e titolo Javascript 1
S javascript e titolo pagina [era:aiuto!!] Javascript 5
Z Fullscreen ma con la barra del titolo Javascript 1
A Titolo... Flash 1

Discussioni simili