allineare un div vicino a uno che utilizza il margine: 0 auto

Questa è la mia prima volta su questo forum e mal tentativo di essere il più chiaro possibile, ho un problema con la creazione di un piccolo sito web per il mio, in particolare con l'intestazione. Sto cercando di creare una pagina che abbia un wrapper di 1024px center (margine: 0 auto;) e vorrei 2 div, su entrambi i lati di questo wrapper in cui posso usare un'altra immagine come sfondo. Il mio css corrente si presenta così:allineare un div vicino a uno che utilizza il margine: 0 auto

body, html  
background: url(../images/bg.jpg); 
background-repeat: no-repeat; 
background-position: top center; 
margin: 0; 
padding: 0; 
} 
#wrapper 
margin: 0 auto; 
width: 1024px; 
} 
#header { 
width: 1024px; 
height: 254px; 
background-image: url(../images/header2.png); 
background-repeat: none; 
position: relative; 
} 
#header_right { 
width: 50%; 
right: 0; 
background-image: url(../images/header_right2.png); 
position: absolute; 
height: 254px; 
} 
#header_left { 
width: 50%; 
left: 0px; 
background-image: url(../images/header_left.png); 
position: absolute; 
background-position: right; 
margin-left: -512px; 
height: 254px; 
}

e il mio html appare come:

<body> 
<div id="header_right"></div><!--End header right!--> 
<div id="header_left"></div><!--End header right!--> 
<div id="wrapper"> 
<div id="header"></div><!--End header!--> 
<div id="content"></div><!--End Content!--> 
</div><!--End wrapper!--> 
</body>

Quello che sto cercando di realizzare è quello di avere un colpo di testa che continua su entrambi sinistra e destra (sia le intestazioni utilizzano sfondi diversi), in questo caso funziona a sinistra, perché im usando un margine negativo, dato che io uso il 50% della larghezza e esattamente la metà del wrapper (-512px), funziona, ma se provassi ad usare un margine negativo a destra (margin-right: -512px) questo estenderà la pagina a destra con un extra 512px, che non è la mia intenzione.

Sono stato su Google per tutto il giorno ma non riesco a trovare alcuna risposta alla mia domanda, ho anche provato a fare 3 div con float: a sinistra, ma non riuscivo a capire come fare 1 al centro con una larghezza di 1024px e il resto larghezza del 100%, se qualcuno potesse aiutarmi sarebbe molto apprezzato.

Cordiali saluti

fonte

2012-10-24 Geo

considerare l'utilizzo di [jsfiddle] (http://jsfiddle.net) nei prossimi post. È più facile eseguire il debug e mostrare risultati con esso. – ShadowScripter

grazie a shadowscripter, lo terrò a mente per la prossima volta! – Geo

Non sono del tutto sicuro di come vorresti che assomigli, ma ci provo.
Se sono lontano, forse potresti fornirmi uno schema di sorta?

In ogni caso, l'esempio di seguito riportato non usa il tuo codice specifico, ma dovrebbe darti un'idea di come è stato fatto.

Risultato: first example

sinistra e destra sono le intestazioni "infinito", nel senso che da sempre riempiono la larghezza dell'intera pagina.
L'intestazione centrale copre il resto.Se hai immagini di sfondo puoi usare background-position per posizionarle in modo che siano allineate con i bordi sinistro e destro dell'intestazione centrale.

Codice | JSFiddle example

HTML

<div class='side_wrapper'> 
    <div class='left_header'></div><div class='right_header'></div> 
</div> 
<div class='header'></div> 
<div class='content'> 
    Content here 
</div>

CSS

.header, .side_wrapper, .left_header, .right_header{ 
    height: 100px; 
} 

.header, .content{ 
    width: 400px; 
    margin: 0 auto; 
} 

.side_wrapper{ 
    width: 100%; 
    white-space: nowrap; 
} 

.left_header, .right_header{ 
    width: 50%; 
    display: inline-block; 
} 

.left_header{ 
    background-color: blue; 
} 

.right_header{ 
    background-color: lightblue; 
} 

.header{ 
    position:absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -200px; 
    background-color: red; 
} 

.content{ 
    background-color: green; 
    text-align: center; 
}

fonte

2012-10-24 14:23:54 ShadowScripter

grazie mille, ho cancellato il messaggio precedente perché ho già trovato la mia risposta precedente, lo farò funzionare ora, molte grazie! – Geo

@GMolenaar Ottimo! Benvenuto su StackOverflow! – ShadowScripter

si desidera che i due di testa fuori dalla wrappper e parte di esso giusto? Se im destra, provate questo:

<body> 

<div id="header_left"></div><!--End header right!--> 
<div id="wrapper"> 
<div id="header"></div><!--End header!--> 
<div id="content"></div><!--End Content!--> 
</div><!--End wrapper!--> 
<div id="header_right"></div><!--End header right!--> 
</body>

display: inline; float: left;

a ciascun elemento (header-sinistra, header-destra, wrappper), e uscire dal margine negativo

fonte

2012-10-24 13:14:50 Toping

ciao arca, grazie per la tua risposta, l'ho provato, ma non l'avrei aggiustato, dovrei lasciare la larghezza: 50% così? e per quanto riguarda il posizionamento dei 3 div? – Geo

prova senza la posizione e la larghezza ... – Toping

ciao arca, grazie per la tua risposta rapida, che ha funzionato! l'ultima domanda è che entrambi i lati non hanno una larghezza specifica e dovrebbero essere lunghi quanto la pagina, il wrapper è impostato su 1024px, entrambi i lati devono essere 'infinito' (come larghezza dello schermo) – Geo

In voi div usate float: left; questo dovrebbe significare che all'interno di un involucro a patto che ci sia abbastanza spazio che galleggia accanto all'altro, ad esempio css:

#divWrapper 
{ 
width:500px; 
float:left; 
background-color:red; 
} 
#divLeft 
{ 
width:250px; 
float:left; 
background-color:blue; 
} 
#divRight 
{ 
width:250px; 
float:left; 
background-color:green; 
}

Html

<div id "divWrapper"> 
    <div id = "divLeft">content here</div> 
    <div id = "divRight">content here</div> 
</div><!--this is the end of the wrapper div -->

Davvero un valido strumento da utilizzare per la manipolazione di css è Firebug in Firefox https://getfirebug.com/

se si vuole un centro div provare questo: http://jsfiddle.net/kzfu2/1/

fonte

2012-10-24 13:27:44 anna

ciao! grazie per la tua risposta anna, il problema è che ci devono essere 3 div e solo 1 con una larghezza fissa (1024px), i lati su entrambi i lati devono essere lunghi quanto la pagina è lunga – Geo

Ciao intendi l'altezza o larghezza a lungo? ho aggiornato questo violino http://jsfiddle.net/kzfu2/5/ in modo che il wrapper abbia una larghezza fissa e le div all'interno siano percentuali di esso o il centro div abbia una larghezza fissa con due div al lato http://jsfiddle.net/kzfu2/6/ – anna

allineare un div vicino a uno che utilizza il margine: 0 auto

risposta

Problemi correlati