Problemi con il posizionamento div [chiuso

StackOverflow https://stackoverflow.com/questions/5378174

  •  28-10-2019
  •  | 
  •  

Domanda

Questo sta iniziando a fare la testa ora, ho un ID div CSS chiamato Frontwidth che contiene 1 titolo IMG 1 e 1 testo.

Quando faccio una seconda o terza larghezza di frontiera si sdraia dietro di sé invece di andare sotto e sotto ..

AIUTO :-( http://www.e-fluenential.com/offline/

Grazie in anticipo

È stato utile?

Soluzione

Secondo il mio commento:

Wow, questo è ... un approccio unico? Hai troppo position: absolutee position: relative. Ho appena risolto questo a Firebug, ma ci vorranno qualche minuto per scrivere una risposta, la quantità di regole che ho dovuto attivare e aggiungere.

Rimuovi il position regola di ciascuno di questi elementi:

  • #mainbody.
  • #frontwidth.
  • #titlesbig.
  • #greyline.
  • #homepageimage.
  • #titlesmedium.
  • #homepagetext.
  • Spero di non aver dimenticato nessuno: D

Con l'eccezione di mainbody, stai usando ciascuno di questi elementi più volte.

Quindi, passa all'uso di un file class invece.

Ad esempio, nel tuo HTML, cambia in:

<div class="frontwidth">

E nel tuo CSS, cambia in:

.frontwidth {

}

Ora possiamo ottenere quegli elementi come vuoi:

  • SU .homepageimage, Inserisci float: left.
  • SU .frontwidth, Inserisci overflow: hidden (a Cancella i galleggianti).
  • SU .titlesmedium e .homepagetext Inserisci margin-left: 340px.

Altri suggerimenti

Hai posizionato tutto il contenuto all'interno del frontwidth Divs assoluto. Il posizionamento assoluto toglie elementi dal flusso e tutti gli altri elementi sono posizionati come se non ci fossero.

La soluzione migliore sarebbe non usare position: absolute (che è una cosa di "ultima risorsa" da usare di solito comunque). Invece fluttuare l'immagine a sinistra e dare al titolo e mandare un messaggio a sinistra.

Qualche altro consiglio:

  • Mancano molte delle tue immagini alt attributi.
  • Il tuo codice sorgente è un grande div la minestra. "Layout senza tavolo" non significa "usare solo divs ". Non avvolgere le cose divS per il diavolo di esso. Ad esempio, non è necessario avvolgere ogni immagine in un div. Puoi applicare lo stile direttamente alle immagini. E usa elementi significativi come h1, h2, ecc. Per i titoli, p Per i paragrafi di testo, ul e li per elenchi (menue), ecc. divS sono anche una cosa "ultima risorsa". Usali solo se nessun altro elemento HTML è adatto.

Il problema risiede nel tuo utilizzo della posizione: assoluto e posizione: relativo.

Se si rimuovono quelli dal CSS, non si accumulano più uno sopra l'altro. Prova a rimuovere quelli e quindi regolare l'HTML

La maggior parte del layout si risolve se rimuovi position: absolute Dall'HomePageImage, titlesMEDIUM e HomePagEText. I vari position: relative Gli elementi non causano problemi perché non hanno riferimenti in alto, in basso, a sinistra o a destra - essenzialmente, non stanno affatto cambiando il layout.

Per far sedere un elemento accanto a un altro, puoi usare il galleggiante. Ad esempio, galleggiare l'immagine a sinistra e quindi fluttuare il titolo lasciato. Questo posizionerà il titolo accanto all'immagine. Successivamente, assicurati di utilizzare Clear per ricominciare a flusso come di nuovo normalmente. In alternativa, sbarazzati di tutti i div extra: stai cambiando il layout aggiungendo molti elementi extra. Per avvolgimento e styling di un elemento in linea, considera a <span> tagga invece.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top