Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] div pozycjonowanie
micbuc
post
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 1.10.2005

Ostrzeżenie: (0%)
-----

Witam wszystkich,

Od kilku godzin próbuję rozwiązać pewien problem...

Posiadając taki oto plik html
[HTML] pobierz, plaintext 
  1. <div id="maincontainer">maincointainer
  2.   <div id="header">header
  3.     <div id="menu">menu</div>
  4.   </div>
  5.   <div id="main">main</div>
  6. </div>
  7.  
  8. <div id="footcontainer">footcontainer
  9.   <div id="footer">footer</div>
  10. </div>
[HTML] pobierz, plaintext


oraz arkusz styli
[HTML] pobierz, plaintext 
  1. #maincontainer{
  2.   background-color:#096;
  3. }
  4. #header {
  5.   text-align:left;
  6.   width: 980px;
  7.   height:160px;
  8.   background-color:#030;
  9. }
  10. #menu {
  11.   height: 38px;
  12.   background-color:#0F0;
  13.   margin-left:150px;
  14.   position:relative;
  15. }
  16. #main{
  17.   text-align:left;
  18.   width: 980px;
  19.   height:200px;
  20.   background-color:#F00;
  21. }
  22. #footcontainer{
  23.   background-color:#999;
  24. }
  25. #footer {
  26.   width: 980px;
  27.   margin: 0; 
  28.   padding: 0; 
  29.   height: 250px;
  30.   background-color:#063;
  31. }
[HTML] pobierz, plaintext


chciałbym aby warstwa 'menu' została tak rozciągnięta w prawo, aby w całości przykryła maincointainer.

Byłbym wdzięczny za wszelką pomoc.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
pedro84
post
Post #2





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

Szerokość na 100%?
Go to the top of the page
+Quote Post
micbuc
post
Post #3





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 1.10.2005

Ostrzeżenie: (0%)
-----

Przy ustawieniu szerokości na 100%, dopasowywana jest ona do szerokości warstwy header. Nie o to mi dokładnie chodzi.

Ten post edytował micbuc 18.05.2010, 17:01:23
Go to the top of the page
+Quote Post
pedro84
post
Post #4





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

No a widzisz, żeby #maincointainer miał jakiekolwiek style?
Go to the top of the page
+Quote Post
micbuc
post
Post #5





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 1.10.2005

Ostrzeżenie: (0%)
-----

Przy ustawieniu szerokości #menu na 100%, dopasowywana jest ona do szerokości warstwy #header (980px). Nie o to mi dokładnie chodzi.
Chciałbym aby ta wartość była płynna. Bo w chwili obecnej przy niskich rozdzielczościach #menu wychodzi poza #maincointainer, przy wysochich natomiast, nie dochodzi do krawędzi.
Go to the top of the page
+Quote Post
kapuch
post
Post #6





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Nie wiem w czym problem, skoro #container i #header maja zdeklarowana taka sama szerokosc 980px.
Ale przede wszystkim powinienes zrobic to tak, aby tylko ten glowny pojemnik mial przypisana jakas szerokosc np 980px, a wszystko co jest w nim, czyli meny i header i foot, mialo "width: inherit;", czyli wartosc dziedziczona od rodzica.
Latwiej wtedy zmieniac szerokosc, bo nie trzeba kazdemu elementowi pojedyncza ja przypisywac, tylko wystarczy temu nadrzednemu.
Go to the top of the page
+Quote Post
micbuc
post
Post #7





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 1.10.2005

Ostrzeżenie: (0%)
-----

Dzięki Kapuch za uwagi, już je wdrożyłem, jednak mój problem wciąż pozostaje nierozwiązany ;/
#maincointainer i #header nie mają tej samej szerokści.
#maincointainer wypełnia całe okno przeglądarki, pływający #header tylko jego konkretną, centralną część.
Moim celem jest "wypuszczenie" z #headera warstwy, która ma dopłynąć do prawej krawędzi przeglądarki.
I nie wiem jak to zrobić (IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
kapuch
post
Post #8





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Cytat(micbuc @ 19.05.2010, 13:28:38 ) *
Dzięki Kapuch za uwagi, już je wdrożyłem, jednak mój problem wciąż pozostaje nierozwiązany ;/
#maincointainer i #header nie mają tej samej szerokści.
#maincointainer wypełnia całe okno przeglądarki, pływający #header tylko jego konkretną, centralną część.
Moim celem jest "wypuszczenie" z #headera warstwy, która ma dopłynąć do prawej krawędzi przeglądarki.
I nie wiem jak to zrobić (IMG:style_emoticons/default/sad.gif)

Tak jak pisalem, dajesz glownemu kontenerowi interesujaca cie szerokosc, a wszystkiemu co wewnatrz jego, dajesz width: inherit; (jesli ma miec taka sama szerokosc jak glowny kontener).
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. .glownyKontener {
  3.  width: 200px;
  4.  height: auto;
  5.  margin: 0px 0px 0px auto;
  6.  padding: 0px;
  7.  border: 1px solid #000000;
  8. }
  9. .tytulMenu {
  10.  width: inherit;
  11.  height: 25px;
  12.  margin: 0px auto;
  13.  padding: 0px;
  14.  border: 0px;
  15.  background: #00cccc;
  16. }
  17. .trescMenu {
  18.  width: inherit;
  19.  height: auto;
  20.  margin: 0px auto;
  21.  padding: 0px;
  22.  border: 0px;
  23.  background: #dddddd;
  24. }
  25. .stopkaMenu {
  26.  width: inherit;
  27.  height: 20px;
  28.  margin: 0px auto;
  29.  padding: 0px;
  30.  border: 0px;
  31.  background: #999999;
  32. }
  33. </style>
  34. <body>
  35. <div id="" class="glownyKontener">
  36.  <div id="" class="tytulMenu">Jakis tytul</div>
  37.  <div id="" class="trescMenu">
  38.    <li>Link 1</li>
  39.    <li>Link 2</li>
  40.  </div>
  41.  <div id="" class="stopkaMenu">stopka</div>
  42. </div>
  43. </body>
[HTML] pobierz, plaintext

Cos w tym stylu, pisze z glowy, moze cos byc zle, ale latwo bedzie ew. poprawic (IMG:style_emoticons/default/winksmiley.jpg)
Teraz chcesz aby calosc przylegala do prawej krawedzi okna?
A wiec dajesz temu glownemu kontenerowi wartosc margin: 0px 0px 0px auto;
Powinno byc ok, pisze z glowy (IMG:style_emoticons/default/winksmiley.jpg)

Ten post edytował kapuch 19.05.2010, 12:52:23
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 23:57
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn