Posizionamento assoluto: un elemento espande la finestra, l'altro elemento non lo influenza. Entrambi usano lo stesso codice: C

Ho aggiunto due div per tenere le immagini di sfondo per scopi decorativi - come richiesto dall'artista che sta lavorando con me su un sito web.Posizionamento assoluto: un elemento espande la finestra, l'altro elemento non lo influenza. Entrambi usano lo stesso codice: C

In un primo momento, ha funzionato molto bene. Le immagini dovevano mostrare su ciascun lato del div wrapper che conteneva il contenuto del sito Web - senza influire sulla larghezza della pagina.

Quindi l'organizzazione proprietaria del sito Web ha ottenuto un altro sponsor, il cui logo dovevo aggiungere a una colonna sulla destra. Ho creato un nuovo ID per il 5 ° "pulsante" e ho creato un div per esso. Caricandolo, ho notato che una barra di scorrimento era apparso improvvisamente in fondo alla pagina, senza una ragione apparente.

Prima ho sospettato che il problema fosse il pulsante, ma alla fine ho scoperto che il div decorativo più a destra stava piegando la larghezza della pagina, nonostante l'utilizzo del posizionamento assoluto. Entrambi i div usano lo stesso codice, solo specchiato per sinistra e destra. Non ho idea di che cosa sta causando il problema ..

(Si può vedere il problema in azione finché dura a www.torucon.no/no/)

Please help me out! Ecco il CSS per entrambi i div:

#wolf 
{ 
position:absolute; 
min-height:500px; 
min-width:498px; 
left:-293px; 
top:150px; 
background-image:url('http://www.torucon.no/css/wolf.png'); 
z-index:-1; 
} 

#lion 
{ 
position:absolute; 
min-height:500px; 
min-width:498px; 
right:-293px; 
top:150px; 
background-image:url('http://www.torucon.no/css/lion.png'); 
z-index:-1; 
}

Ecco un frammento di codice HTML che mostra il codice HTML dei div:

<div class="wrapper"> <!-- Contains the entire website for structure --> 
<div id="wolf"> 
</div> 
<div id="lion"> 
</div>

((In caso non l'ottiene: Il div involucro dovrebbe essere centrato, e lo è, ma quando ridimensiono la mia finestra, trovo che una barra di scorrimento appare molto prima che il contenuto del wrapper sia anche vicino ai bordi della finestra del browser. Sarebbe fastidioso su computer con bassa risoluzione o schermi piccoli !))

fonte

2012-04-21 Aurora Schmidt

Posso suggerire 'body {/ * altre cose */overflow-x: hidden; } '? Non sono sicuro, ancora, * perché * questo sta accadendo, ma sembra trattare i sintomi, almeno. Potrebbe essere necessario specificare 'overflow-y: auto;' sebbene, per evitare problemi in alcuni browser. –

@DavidThomas Sì, ho pensato che avrei potuto farlo anche io. Ma non dovrebbe accadere davvero, dovrebbe? Gli elementi posizionati in modo assoluto vengono ignorati dal flusso della pagina e pertanto non dovrebbero influire sulla larghezza dell'elemento del corpo, per quanto ho capito. Quindi, non è colpa mia, ma piuttosto un problema con la capacità dei browser di rendere il codice? Inoltre, l'uso di overflow-x: hidden; non fa sì che il div wrapper scompaia all'esterno delle pareti del browser una volta ridimensionato lo schermo? –

Tendo a sospettare che, a seconda del browser utilizzato, gli sviluppatori hanno aderito agli standard W3 per il rendering (nessun software è perfetto, quindi potrebbero esserci bug, ma anche così ...). E sì; ha i suoi problemi come approccio. =/ –

Penso che ciò che si desidera è di avere il leone e il lupo progressivamente appare come l'utente si allarga la finestra del browser, ma per il resto parzialmente nascosto fuori ai lati della confezione. Corretta?

Penso che tu sia l'unica opzione sicura per ottenere ciò senza attivare le barre di scorrimento che non ti piacciono: combinare le immagini in una e collegarle come immagine di sfondo sull'elemento di corpo della pagina.

Credo che tu abbia ragione sull'uso di overflow nascosto nel corpo: perdi la possibilità di scorrere per vedere il contenuto in overflow se la finestra viene ridimensionata sotto la larghezza del wrapper.

fonte

2012-04-21 20:02:40 Faust

Sai, è stata una soluzione davvero buona. E l'ho già fatto prima! Mi sono abituato a dover scrivere un sacco di codice per correggere questi strani errori, che ho completamente smesso di pensare a quelle soluzioni semplici e logiche. Grazie! <3 –

Ho controllato che hai postato il link http://www.torucon.no/no/ ma non riesco a vedere la barra di scorrimento in basso, In ogni caso, perché non puoi impostare lo sfondo?

<body> 
<div class="overlay"> 
    <div class="wrapper"> 
    </div> 
</div> 
</body> 


<style> 
    body{width:100%; background:---;} 
.overlay{width:100%; background:---;} 
<style>

fonte

2012-04-21 18:43:51 ShibinRagh

Posizionamento assoluto: un elemento espande la finestra, l'altro elemento non lo influenza. Entrambi usano lo stesso codice: C

risposta

Problemi correlati