Wyrównaj div obok tego, który używa marginesu: 0 auto

To jest mój pierwszy raz na tym forum i chory staram się być jasny, jak to możliwe, mam problem z utworzeniem małej witryny dla siebie, szczególnie z nagłówka. Próbuję utworzyć stronę, która ma wrapper z centrum 1024px (margines: 0 auto;) i chciałbym 2 divs, po obu stronach tego opakowania, gdzie mogę użyć innego obrazu jako tła. Mój obecny css wygląda następująco:Wyrównaj div obok tego, który używa marginesu: 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; 
}

i mój html wygląda następująco:

<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>

co próbuję wykonać jest mieć nagłówek, który trwa na lewej i prawej strony (zarówno nagłówki używać różne tła), w tym przypadku działa po lewej stronie, ponieważ używam ujemnego marginesu, ponieważ używam 50% szerokości i dokładnie połowy opakowania (-512px), to działa, ale gdybym spróbował użyć ujemny margines po prawej (margin-right: -512px) spowoduje to rozszerzenie strony po prawej z dodatkowym 512px, co nie jest moją intencją.

Przeszukałem cały dzień, ale nie mogę znaleźć odpowiedzi na moje pytanie, również próbowałem zrobić 3 divy z floatem: po lewej, ale nie mogłem wymyślić, jak zrobić 1 w środku z szerokością 1024px, a reszta 100% szerokości, jeśli ktokolwiek mógłby mi pomóc, byłoby to naprawdę docenione.

poważaniem

Źródło

2012-10-24 Geo

Rozważ użycie [jsfiddle] (http://jsfiddle.net) w kolejnych postach. Łatwiej jest debugować i wyświetlać wyniki za jego pomocą. – ShadowScripter

dziękuję Shadowscripter, chory o tym pamiętać na następny raz! – Geo

Nie jestem do końca pewien, jak chcesz wyglądać, ale dam ci szansę.
Jeśli jestem daleko, może mógłbyś mi przedstawić jakiś schemat?

W każdym przypadku, przykład podany poniżej nie używa twojego konkretnego kodu, ale powinien dać ci pojęcie, jak to się robi.

Wynik: first example

po lewej i prawej nagłówki są „nieskończony”, w tym, że zawsze wypełnić całą szerokość strony.
Środkowy nagłówek zakrywa resztę.Jeśli masz obrazy tła, możesz użyć ich background-position, aby ustawić je tak, aby były wyrównane z lewą i prawą krawędzią środkowego nagłówka.

Kod | 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; 
}

Źródło

2012-10-24 14:23:54 ShadowScripter

wielkie dzięki, usunąłem poprzednią wiadomość, ponieważ już znalazłem moją poprzednią odpowiedź, dostanę ją do pracy teraz, wielkie dzięki! – Geo

@GMolenaar Great! Witamy w stackoverflow! – ShadowScripter

Chcesz dwa nagłówek z wrappper i poza nim w porządku? Jeśli im rację, spróbuj tego:

<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;

w każdym elemencie (header-lewo, header-prawo, wrappper) i wydostać się z marginesem ujemnym

Źródło

2012-10-24 13:14:50 Toping

hi ark, dzięki za odpowiedź, próbowałem tego, ale nie naprawiłbym, czy powinienem zostawić szerokość: 50%? a co z pozycjonowaniem 3 elementów div? – Geo

spróbuj bez pozycji i szerokości ... – Toping

hi ark, dzięki za szybką odpowiedź, która zadziałała! ostatnie pytanie jest takie, że obie strony nie mają określonej szerokości i powinny być tak długie, jak strona, opakowanie jest ustawione na 1024px, obie strony muszą być "nieskończone" (tak jak szerokość ekranu) – Geo

W twoich divach użyj float: left; powinno to oznaczać, że w opakowaniu jednostkowym tak długo jak nie ma wystarczająco dużo miejsca będą unosić się obok siebie na przykład 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 -->

Naprawdę dobre narzędzie do manipulacji css jest Firebug Firefox https://getfirebug.com/

jeśli chcesz centrum div spróbuj tego: http://jsfiddle.net/kzfu2/1/

Źródło

2012-10-24 13:27:44 anna

cześć! dzięki za twoją odpowiedź, problem polega na tym, że musisz mieć 3 divy i tylko 1 o stałej szerokości (1024px), boki po obu stronach muszą być tak długie, jak długo strona jest długa – Geo

Masz na myśli wysokość lub szerokość po długiej? zaktualizowałem to skrzypce http://jsfiddle.net/kzfu2/5/ tak, że opakowanie ma stałą szerokość, a divy wewnątrz są wartościami procentowymi lub środek div ma stałą szerokość z dwoma symbolami div na stronie http://jsfiddle.net/kzfu2/6/ – anna

Wyrównaj div obok tego, który używa marginesu: 0 auto

Odpowiedz

Powiązane problemy