• Home
  • Forum
  • Fare Web
  • HTML e CSS

Doppiamente fluido

  • Creatore Discussione Creatore Discussione JtothaX
  • Data di inizio Data di inizio 14 Mag 2014
J

JtothaX

Utente Attivo
2 Ott 2013
78
0
0
Treviso
  • 14 Mag 2014
  • #1
Ragazzi ho un problemino con un paio di div. Servono a costruire la testata del sito.
Un primo, più esterno, che mi serve come fascia da estendere all'infinito come sfondo: header id="testata"
Il secondo, interno alla fascia: div id="contieni-slider"
Trattasi di sito responsive, quindi il contieni-slider deve gradualmente restringersi (max-width: 940px) fino ad un fissato breakpoint in cui lo farò semplicemente sparire insieme a tutta la testata del sito. Sono riuscito a farlo restringere. Il problema è che arriva ad un certo punto da essere piccolo per rientrare nella fascia.

Questa non riesco a renderla fluida così che entrambi header e div si restringano mantenendo il dislivello mostrato in figura, che altro non è che quello che poi si vede col sito desktop a larghezza estesa massima di 940px.

Come caspio si gestisce sta situazione?
100%, auto, sto provendo in lungo e in largo ma ancora non sono giunto a destinazione.



Grazie come sempre a tutti.
( -- Prima che magari qualcuno me lo chieda: sì, ho gestito il sito di Andrea Diprè fino a 10 giorni fa in cui sono stato scaricato e rimpiazzato senza nemmeno saperlo. Sparito del tutto lui e non ho avuto alcuna buona uscita nemmeno verbale. Amen. Fine dell'inciso. Ahahahah -- )
 
J

JtothaX

Utente Attivo
2 Ott 2013
78
0
0
Treviso
  • 15 Mag 2014
  • #2
Okay, aggiornamento.
Sono riuscito a risolvere il discorso della testata fluida.
La fascia nera dietro prende queste regole qui e si adatta come volevo appunto.

Codice:
header#testata {
	height: auto;
    max-height: 390px;
    padding-top: 35px;
    width: 100%;
	background: black;
	[B]margin-bottom: 85px;[/B]
}

Il margine per separare tutto questo ambaradan dal successivo elemento h2 come lo devo impostare?
Cioè h2 è il primo elemento, poi di seguito c'è tutto il resto della homepage. Volevo si regolasse in modo tale da fluidificarne la distanza, mantenerla costante quando ridimensiono la finestra del browser/provo le 2 media queries impostate.
 
J

JtothaX

Utente Attivo
2 Ott 2013
78
0
0
Treviso
  • 18 Mag 2014
  • #3
Ho provato anche a staccare i due componenti, mettendo il contenitore dello slider fuori (a livello di codice) dalla fascia ma sembra ancora non funzionare.

Any suggest?
 
J

JtothaX

Utente Attivo
2 Ott 2013
78
0
0
Treviso
  • 3 Giu 2014
  • #4
Refresho.
Ancora non ne sono venuto fuori.
L'unica opzione sembra dover mettere lo slider nella fascia, solo che così mi viene meno l'effetto di, diciamo così, dislivello che volevo ottenere fra i due. Devo proprio piegarmi al codice a discapito della grafica?

 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.606
54
48
TN
  • 3 Giu 2014
  • #5
Ciao, prova questo
HTML:
<style>
    html body {
        text-align:center;
    }
    .header {
        height:120px;
        background-color: black;
    }
    .immagine {
        width: 96%;
        margin:auto;
        height:120px;
        background-color: orange;
        margin-top:-100px;
        margin-bottom:20px;
    }
    .corpo {
        height:500px;
        background-color: black;
    }
</style>
<div class="header"></div>
<div class="immagine"></div>
<div class="corpo"></div>
 
J

JtothaX

Utente Attivo
2 Ott 2013
78
0
0
Treviso
  • 4 Giu 2014
  • #6
Non posso usare misure fisse in px per il margine perché finirebbe con il rimanere invariato anche quando il viewport si ridimensiona. Il margin-bottom deve adattarsi. Mi sa che devo rivedere alcune cose da principio...
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

J
Consiglio template fluido
  • james81
  • 7 Ott 2014
  • HTML e CSS
Risposte
2
Visite
1K
HTML e CSS 8 Ott 2014
james81
J
M
Layout fluido
  • marconisi
  • 10 Ago 2013
  • HTML e CSS
Risposte
13
Visite
3K
HTML e CSS 14 Ago 2013
marcomg
M
V
Design Fluido - L'obiettivo?
  • vic.
  • 5 Lug 2013
  • HTML e CSS
Risposte
3
Visite
1K
HTML e CSS 7 Lug 2013
Jonn
F
layout fluido
  • Fabio90
  • 9 Mar 2013
  • HTML e CSS
Risposte
4
Visite
2K
HTML e CSS 30 Mar 2013
marino51
F
problema con layout fluido
  • fabio_198
  • 18 Dic 2012
  • HTML e CSS
Risposte
1
Visite
1K
HTML e CSS 18 Dic 2012
fabio_198
F
layout fluido
  • nim
  • 22 Ott 2011
  • HTML e CSS
Risposte
4
Visite
2K
HTML e CSS 23 Ott 2011
nim
M
immagini e layout fluido
  • mediasteno
  • 13 Ott 2011
  • HTML e CSS
Risposte
0
Visite
2K
HTML e CSS 13 Ott 2011
mediasteno
M
M
Consigli su come rendere fluido questo template
  • matrix83
  • 15 Lug 2011
  • HTML e CSS
Risposte
0
Visite
1K
HTML e CSS 15 Lug 2011
matrix83
M
Condividi:
Facebook X (Twitter) LinkedIn WhatsApp e-mail Condividi Link
  • Home
  • Forum
  • Fare Web
  • HTML e CSS
  • Italiano
  • Termini e condizioni d'uso del sito
  • Policy Privacy
  • Aiuto
  • Home
Community platform by XenForo® © 2010-2024 XenForo Ltd. | Traduzione a cura di XenForo Italia
Menu
Accedi

Registrati

  • Home
  • Forum
    • Nuovi Messaggi
    • Cerca...
  • Novità
    • Featured content
    • Nuovi Messaggi
    • Ultime Attività
X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?

X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?