Naprawiono tło div

Question

Chcę utworzyć układ, w którym chcę wyświetlić obraz po lewej stronie, a zawartość po prawej. Obraz powinien pozostać niezmieniony, gdy zawartość przewija się.

css Używam:

<style type="text/css"> 

     #page-container 
     { 
      margin:auto;    
      width:900px;    
      background-color:Black; 
     } 

     #header 
     { 
      height:150px; 
      width:650px; 
     } 

     #main-image 
     { 
      float:left; 
      width:250px; 
      height:500px; 
      background-image:url('../images/main-image.png'); 
      position:fixed; 
     } 


     #content 
     { 
      margin-left:250px; 
      padding:10px; 
      height:250px; 
      width:630px; 
      background-color:Teal; 

     } 
    </style> 

HTML:

<div id="page-container"> 
    <div id="header"><img src="someimagelink" alt="" /></div> 
    <div id="main-image"></div> 
    <div id="content"></div>  
</div> 

dużo czasu na tej stronie i mam rozumieć, że background-attachment: fixed pozycji obraz w całej rzutni, a nie element, do którego jest zastosowany.

Moje pytanie brzmi: jak mam stworzyć ten rodzaj układu?

Nie chcę nadać tego obrazu jako obrazu tła, tak jakby okno było zmieniane, może zostać ukryte. Chcę, aby paski przewijania były wyświetlane, jeśli rozmiar okna jest mniejszy niż 900 pikseli (moja szerokość strony), aby obraz mógł być cały czas wyświetlany.

Tak dzieje się z tym kodem, jednak chciałbym, aby obraz zaczął się od mojego elementu.

Jak mam to zrobić?

z góry dzięki :)

edycja:

Wziąłem porady i dodał position: fixed właściwość # main-image. Używanie HTML i CSS, jak pokazano powyżej. Teraz również chcę naprawić nagłówek, aby się nie ruszał. Zasadniczo powinna przewijać się tylko moja sekcja zawartości. Jeśli jednak dodaję pozycję: naprawioną w nagłówku, moje # główne zdjęcie i #content znajdują się teraz na górze mojego nagłówka. Jeśli dodaję margin-top: 150px (ponieważ moja wysokość nagłówka wynosi 150px) do # głównego obrazu, działa dobrze i przesuwa się odpowiednio w dół. Jeśli dodaję margines-top: 150px do #content, mój nagłówek przesuwa się o 150 pikseli i nadal znajduje się na szczycie mojej #content. Czy ktoś może wyjaśnić, dlaczego tak się dzieje? Z góry dziękuję :)

Answer 1

Spójrz na ten link:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

można dowiedzieć się, jak umieścić Div jest z nim.

To rozwiąże problem: #main-image {position:fixed;}

---

EDIT: Nie jestem pewien, co spowodowało problem, ale tutaj jest rozwiązanie: #content{ position:relative; top:150px; }

Zgaduję: myślę stało się tak, ponieważ przy użyciu pozycji: naprawiono te 2 elementy div zostały umieszczone względem okna przeglądarki, podczas gdy drugie było względne w stosunku do samego dokumentu.

W tym linkiem można zobaczyć więcej na temat pozycjonowania i można przetestować niektóre z tych cech odnoszących się do właściwości position:

http://www.w3schools.com/cssref/pr_class_position.asp

O tym, że jeden div została umieszczona nad drugą, należy szukać dla właściwości 'z-index'. Firefox posiada tryb 3D, dzięki czemu można zobaczyć wyraźniej:

http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/

Answer 2

Ustaw min-width na html i body.

Answer 3

Czy próbowałeś ustawić # kontenera strony na względny i swój # główny obraz kontenera do absolutnego i ustawienie pozycji za pomocą góry, dołu, itp. Następnie powinieneś być w stanie unieść swój kontener #content w prawo .