Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP] [CSS] Problem z pozycjonowaniem DIV'a
Forum PHP.pl > Forum > Przedszkole
ArthasDelano
23.08.2010, 19:57:07
Witam, od kiedy pamietam tworzylem strony na tabelkach gdyz nigdy nie byly to profesjonalne strony a jedynie male wizytowki etc..

Poniewaz Div'y sa jednak od dawna standardem uznalem, ze czas jednak nauczyc sie i ich.. Zaczalem tworzyc strone dla kolegi, wczesniej zrobiona w oparciu o tabelki, w tym momencie przerabiam ja na Div'y.. Pomimo przeczytania wielu kursow mam jednak wciaz problem z odpowiednim ustawieniem div'ow tak by strona wygladala wg moich zamierzen..

Oto kod php:

Kod
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
    <meta name="Description" content="Tu wpisz opis zawartości strony" />
    <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
    <title>Slawomir Kowalski - profesjonalna fotografia</title>

    <link rel="Stylesheet" type="text/css" href="css/style.css" />

    <script language="Javascript">
                if (document.images)
                {
                button1 = new Image
                button2 = new Image
                button3 = new Image
                button4 = new Image
                button5 = new Image
                button6 = new Image
                button7 = new Image
                button8 = new Image
                button9 = new Image
                button10 = new Image


                button1.src = 'images/home.png'
                button2.src = 'images/homee.png'
                button3.src = 'images/omnie.png'
                button4.src = 'images/omniee.png'
                button5.src = 'images/galeria.png'
                button6.src = 'images/galeriaa.png'
                button7.src = 'images/oferta.png'
                button8.src = 'images/ofertaa.png'
                button9.src = 'images/kontakt.png'
                button10.src = 'images/kontaktt.png'
                }
        </script>
</head>
<body>

<div id="main">
     <div id="empty">
     </div>

     <div="menu">
        <img src="images/pusty.png"><img src="images/pusty.png"><img src="images/pusty.png"><img src="images/pusty.png">
        <a href="index.php" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><img src="images/home.png" border=0 name="rollover"></a>
        <img src="images/pusty.png">
        <a href="omnie.php" onmouseover="document.rollover2.src=button4.src" onmouseout="document.rollover2.src=button3.src"><img src="images/omnie.png" border=0 name="rollover2"></a>
        <img src="images/pusty.png">
        <a href="galeria.php" onmouseover="document.rollover3.src=button6.src" onmouseout="document.rollover3.src=button5.src"><img src="images/galeria.png" border=0 name="rollover3"></a>
        <img src="images/pusty.png">
        <a href="oferta.php" onmouseover="document.rollover4.src=button8.src" onmouseout="document.rollover4.src=button7.src"><img src="images/oferta.png" border=0 name="rollover4"></a>
        <img src="images/pusty.png">
        <a href="kontakt.php" onmouseover="document.rollover5.src=button10.src" onmouseout="document.rollover5.src=button9.src"><img src="images/kontakt.png" border=0 name="rollover5"></a>
     </div>

     <div="center">
           <div="left">
           <img src="images/banner-home.png"></img>
           </div>
           <div="right">
           <img src="images/banner-reklama.png"></img>
           </div>
     </div>

</div>

</body>
</html>


Oraz CSS

Kod
body
{
background-color: black;
margin: 0px;
padding: 0px;
}

#main
{
margin: 0px auto;
padding: 0px auto;
width: 1024px;
height: 768px;
background-image: url("../css/background.png");
}

#empty
{
margin: 0px;
padding 0px;
width: 1024px;
height: 180px;
}

#menu
{
margin: 0px;
padding 0px;
width: 1024px;
height: 45px;
}

#center
{
margin: 0px;
padding 0px;
width: 1024px;
height: 100px;
}

#left
{
margin: 0px;
padding 0px;
width: 580px;
height: 100px;
}

#right
{
margin: 0px;
padding 0px;
width: 254px;
height: 100px;
}


Natomiast adres strony internetowej to:
Strona WWW

Wiem, ze bedzie to slabo widoczne poniewaz prv wyswietla reklamy, ale pod dolnymi reklamami powinno byc widac wystajace 2 grafiki, ktore maja byc naglowkami 2 blokow znajdujacych sie zaraz pod menu.. Niestety nie wiem czemu przesuwaja mi sie one na sam koniec strony, tak jakby ustawialy sie juz za divem glownym.. Chcialbym natomiast by Div "center" znalazl sie zaraz pod div'em "menu" i byl podzielony na 2 bloki..

Prosze uprzejmie o wskazanie bledu w moim mysleniu, z gory bardzo dziekuje.
Mgorka
23.08.2010, 20:17:01
zrobił bym to inaczej usunął bym js i zrobił to całe menu na css i liście nie uporządkowanej zapraszam na kontakt skype podaj mi soją nazwe na privie to sie ugadamy
ArthasDelano
23.08.2010, 20:44:28
Niestety zadne proby nie pomogly, efekt wciaz ten sam.. 2 ostatnie divy uciekaja poza glownego mimo, ze w kodzie znajduja sie w srodku..
Blame
23.08.2010, 20:58:57 
[HTML] pobierz, plaintext 
  1. <div="center">
  2.            <div="left">
  3.            <img src="images/banner-home.png"></img>
  4.            </div>
  5.            <div="right">
  6.            <img src="images/banner-reklama.png"></img>
  7.            </div>
  8.      </div>
[HTML] pobierz, plaintext

blink.gif A nie brakło ci tu przypadkiem id? Piszesz to w notatniku? Ściągnij sobie jakiś porządny edytor, który będzie ci wywalał takie błędy.
ArthasDelano
23.08.2010, 21:02:50
Bawie sie programowaniem w roznych jezykach juz ponad 6 lat.. I co najsmieszniejsze kazdy problem, ktory zajmowal mi czesto wiecej niz 1 dzien byl wlasnie takiego typu smile.gif Bardzo dziekuje, przelecialem 3 kursy, mnostwo porad, zmienilem kod mnostwo razy ale o najprostszym rozwiazaniu standardowo nie pomyslalem tongue.gif

Jeszcze raz dziekuje smile.gif
set4812
23.08.2010, 21:28:46
Hmm sciagnij notepad ++ tak jak kolega doradził a co do wygladu polecam firebuga w firefoxie ten to ma kopa w robienie wyglądu tongue.gif

PS ja tez zawsze głupie błedy robie
ArthasDelano
23.08.2010, 22:16:00
Uzywam ConTexta..

Niestety mam wciaz problem ze zrozumieniem pozycjonowania DIVow..

CSS:
[PHP] pobierz, plaintext 
  1. body
  2. {
  3. background-color: black;
  4. margin: 0px;
  5. padding: 0px;
  6. }
  7.  
  8. #main
  9. {
  10. margin: 0px auto;
  11. padding: 0px auto;
  12. width: 1024px;
  13. height: 768px;
  14. background-image: url("../css/background.png");
  15. }
  16.  
  17. #empty
  18. {
  19. margin: 0px;
  20. padding 0px;
  21. width: 1024px;
  22. height: 180px;
  23. }
  24.  
  25. #menu
  26. {
  27. margin: 0px;
  28. padding 0px;
  29. width: 1024px;
  30. height: 45px;
  31. }
  32.  
  33. #center
  34. {
  35. margin: 0px;
  36. padding 0px;
  37. width: 1024px;
  38. overflow: hidden;
  39. }
  40.  
  41. #left
  42. {
  43.  
  44. overflow: hidden;
  45. margin: 0px auto;
  46. padding 0px;
  47. width: 580px;
  48. height: 100px;
  49. }
  50.  
  51. #right
  52. {
  53. overflow: hidden;
  54. margin: 0px auto;
  55. padding 0px;
  56. width: 254px;
  57. height: 100px;
  58. }
[PHP] pobierz, plaintext


Strona:
Strona WWW

Jak sprawic by te bloki (Home oraz Reklama) byly wysrodkowane a jednoczesnie obok siebie.. Potem odleglosc miedzy tymi blokami ustawie poprzez marginesy ale musze je najpierw miec na srodku.. Mijaja 2 godziny, google przejrzalem z kazdej strony, wypilem 2 x 50 na uspokojenie a to nadal nie dziala.. Ustawia sie w kazdy mozliwy sposob tylko nie w taki jaki ja chce tongue.gif Przeciez nie uzyje "center".. DIV "Center" jest glownym a "Left" i "Right" maja byc wysrodkowane wewnatrz tego "Center" ale byc obok siebie.. Przeciez to nie moze byc tak trudne zebym na to nie wpadl ;/
Blame
24.08.2010, 08:40:41
Poczytaj o float winksmiley.jpg
ArthasDelano
24.08.2010, 13:36:48
Ja przewaznie zanim napisze posta na forum naprawde sprawdzam inne mozliwosci, probowalem floatem ale nigdy nie chce ustawic mi sie w 1 rzedzie.. Kod wrzucony tu na strone jest tylko do zobrazowania, od tego czasu do dzis wyprobowalem naprawde sporo mozliwosci ale zaden nie daje pozadanego efektu..
glh
24.08.2010, 13:41:34
Zapodaj szkic tych bloków w jakimś "paintcie" to będzie wiadomo co chcesz osiągnąć.
ArthasDelano
24.08.2010, 13:51:13


STRONA WWW

Taki uklad chce uzyskac, niestety czego bym nie wpisal wciaz "reklama" znajduje sie pod "home", zamiast obok.. Jednoczesnie zalezy mi na tym aby bloki "home" i "reklama" byly wysrodkowane gdyz chcialbym potem dowolnie ustalic ich szerokosc mogac zostawic marginesy po lewej i prawej stronie (nie chce tych blokow rownac do lewej badz prawej strony)..
glh
24.08.2010, 14:28:54
Popraw sobie ścieżkę do pliku stylów, bo u Ciebie jest css/style.css, a u mnie samo style.css.
Poza tym wymiary sobie dopasujesz. Tylko pamiętaj, żeby szerokość bloku home+ szerokość bloku reklama = szerokość bloku homereklama.
Inaczej będzie się sypał układ i np. reklama spadnie na dół:-)
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6.     <meta name="Description" content="Tu wpisz opis zawartości strony" />
  7.     <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  8.     <title>Tytul strony</title>
  9.     <link rel="Stylesheet" type="text/css" href="style.css" />
  10. </head>
  11. <body>
  12.  <div id="kontener">
  13.  
  14.   <div id="gora">GORA , CZYLI NAGLOWEK</div>
  15.   <div id="belkamenu">Menu widoczne na stronie</div>
  16.   <div id="homereklama">
  17.    <div id="home">HOME</div>
  18.    <div id="reklama">REKLAMA</div>
  19.   </div>
  20.   <div id="stopka">STOPKA</div>
  21.  </div>
  22. </body>
  23. </html>
[HTML] pobierz, plaintext


Style:
[PHP] pobierz, plaintext 
  1. *{padding:0;margin:0;}
  2.  
  3. body, html
  4. {
  5.   text-align:center;/*dla ie*/
  6. }
  7.  
  8. #kontener
  9. {
  10.  width:900px;
  11.  height:700px;
  12.  margin:0 auto;
  13. }
  14.  
  15. #gora
  16. {
  17.  width:900px;
  18.  height:100px;
  19.  background-color:#111111;
  20.  color:white;
  21. }
  22.  
  23. #belkamenu
  24. {
  25.  width:900px;
  26.  height:50px;
  27.  background-color:#33CCFF;
  28. }
  29.  
  30. #home
  31. {
  32.  width:700px;
  33.  height:400px;
  34.  float:left;
  35.  background-color:#333333;
  36. }
  37.  
  38. #reklama
  39. {
  40.  width:200px;
  41.  height:400px;
  42.  float:left;
  43.  background-color:#555555;
  44. }
  45.  
  46. #stopka
  47. {
  48.  clear:both;
  49.  width:900px;
  50.  height:30px;
  51.  background-color:#888888;
  52. }
  53.  
[PHP] pobierz, plaintext


A i bym zapomniał. Szerokość bloku homereklama nie może być większa niż kontener. Inaczej też się posypie.
Trzeba pamiętać o tych wymiarach.
ArthasDelano
24.08.2010, 14:38:16
Mega dzieki za pomoc smile.gif

Sprawdze all i edytuje z wynikiem czy all dziala smile.gif Powiem szczerze ze nie myslalem ze w Div'ach wymiary sa az tak istotne ze musza byc dopilnowane, myslalem ze jak dam te 2 bloki mniejsze niz wymiar calosci "pustka" wypelni sie sama smile.gif
glh
24.08.2010, 14:52:19
Zapisz sobie ten html do pliku testowego i możesz zobaczyć jak to działa, bo każdy blok ma inny kolor tła. Specjalnie tak zrobione jest żebyś mógł sprawdzić przed edycją czy o taki układ chodzi. Oczywiście kolor tła sobie usuniesz w swoim css.

Co do wymiarów w blokach to lepiej się ich pilnować. Oszczędza to sporo nerwów.
ArthasDelano
24.08.2010, 15:48:53
Pytanie z innej beczki, mam nadzieje ze na przykladzie tej strony zrozumiem pelne dzialanie divow..

Zrobilem cos takiego dla HOME:

[PHP] pobierz, plaintext 
  1. #left
  2. {
  3. float: left;
  4. width: 700px;
  5. height: 100px;
  6. margin: 0px;
  7. padding: 0px 40px 0px 80px;
  8. overflow: hidden;
  9. border: 1px solid white;
  10. }
[PHP] pobierz, plaintext


Teoretycznie suma width sie zgadza (obrazek 580 + padding 40 + padding 80 = 700), niestety ten div ma wieksza szerokosc niz 700, co sprawia ze reklama zsuwa mi sie nizej.. pomimo tego ze wczesniej padding zmienilem tylko left ccac obrazek HOME przesunac w prawo a reszte padding ustawilem na 0, rozmiar diva sie zwiekszal.. Czy dodajac padding nalezy zmniejszyc szerokosc diva o rozmiar zawarty w padding ?
glh
24.08.2010, 16:32:58
Są takie przeglądarki dla których zapis
{
width:100px;
padding:0 20px 0 30px;/*gora lewo dol prawo*/
}
oznacza, ze blok ma 100px szerokości, a w jego wnętrzu jest przestrzeń na treść 50px szeroka : 100px - 20px - 30px.
Dla nich szerokość bloku to 100px, czyli tak jak ustawione w stylach.

A niektóre liczą sobie tak szerokość bloku:
100px szerokości + 20px lewy padding + 30 pikseli prawy padding = 150px szerokości.
Dla takich przeglądarek ten blok będzie miał 150 pikseli szerokości.

Czy te dane są jeszcze aktualne w nowych przeglądarkach to nie wiem, ale wiem, że kiedyś taki problem był.

U Ciebie jest tak:
blok ma 700 szerokości,a 120px paddingu. Nie mieści się więc może zamiast 700 dać mu 580 pikseli szerokości:-)


A tak już odchodząc od tematu, to zawsze można w jakimś bloku (mówię o left i right) wstawić mniejszy blok przeznaczony na właściwą treść.
I dopiero ten blok przesuwać marginesami. Wiem z autopsji, że jest to pewniejsze niż padding.

Ps. Obramowanie też się liczy do szerokości. Chyba...smile.gif
ArthasDelano
24.08.2010, 16:41:01
Obramowanie sie liczy dlatego w Right zmiejszylem je o 4 tongue.gif

Uzywam Opery, najnowszej wersji wiec liczylem ze bedzie to normalnie odbierane, widze jednak ze faktycznie Twoj pomysl moze byc tym pewniejszym, licze ze komendy margin nie zalicza do zadnej dodatkowej szerokosci tongue.gif

Dziekuje bardzo za pomoc, mnostwo czasu przekonywalem sie do nauki DIV'ow wlasnie dlatego ze duzo osob mowilo mi o poczatkowych sporych problemach z nauka "obslugi" winksmiley.jpg
thek
24.08.2010, 18:39:02
To co wspomniano o paddingach, marginach, width ujęte jest jako tak zwany "box model". Istnieją wersje "IE" oraz "reszta świata". Zobacz zresztą w necie. Na browsehappy też jest artykuł o tym -> http://kurs.browsehappy.pl/CSS/BoxModel
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.