Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html i css] [php] rozmieszczenie divow
Forum PHP.pl > Forum > Przedszkole
aliatic
Na wstępie chciałbym się przywitać, gdyż jest to mój pierwszy post na tym forum.

No a dalej przejdę już do problemu jaki mam. Otóż ... postanowiłem stworzyć sobie stronę internetową. Wykorzystanie głównie XHTML i CSS oraz PHP. Początkowo miałobyć tylko w tym pierwszym języku, jednak pewnej rzeczy nie dało się w niej zrobić, więc doszedł również język PHP. Mianowicie problem polegał na tym, iż menu mojej strony będzie się zmieniało co jakiś czas (zmiana linków i napisów). No i trzeba było to zrobić w PHP, aby header (w którym jest menu) oraz footer były w formie jednego pliku. Natomiast wszystkie podstrony były w top'ie. Udało mi się to zrobić jednak jest jeszcze jeden problem i nie wiem jak temu zaradzić. Postaram się to przedstawić na obrazku ...



jak widząc top składa się dwóch kolumn. wcześniej tworząc stronę w języku XHTML i CSS stworzony był jeden div, a wewnątrz tego diva jeszcze dwa pod każdą z kolumn (lewa i prawa). Chciałbym aby na każdej podstronie były dwie takie kolumny, gdzie prawa na każdej wyglądałaby tak samo. Natomiast jak coś w niej zmienię, to aby zmiana ta była na wszystkich podstronach. czyli dobrze by było, aby podobnie jak header czy footer była ta kolumna zapisana w formie jednego pliku. Próbowałem wrzucać ta prawą kolumnę do footera lub headera jednak za każdym razem wyświetla mi te dwie kolumny pod spodem. Umieściłem je w osobnych divach, a oba te divy w jeden główny. No i w takiej formie umieszczałem prawą kolumnę w footerze czy headerze.

  1. <div id="top_glowny">
  2. <div id="lewa_kolumna">
  3. </div>
  4. </div>

  1. <div id="top_glowny">
  2. <div id="prawa_kolumna">
  3. </div>
  4. </div>


Próbowałem nadawać pozycję relative topowi głównemu natomiast absolute poszczególnym kolumna, i nic. Cały czas sa jedna po druga. Próbowałem opcji float nadając obu kolumną opcji left, natomiast overflow hidden nadawalem na top glowny, i tez nic. Tak więc, czy mógłby mi ktoś pomóc jak to zrobić, aby było to dobrze? A może znowu przy wykorzystaniu PHP da to w prosty i łatwy sposób zrobić? Tylko prosiłbym - jeśli to możliwe - o proste kody. Gdyż jestem początkującym smile.gif

EDIT:
Aha, i jeszcze jedno pytanie. Jak miałem wcześniej w XHTMLu zrobiony projekt, to wszystko wyświetlało mi się poprawnie. Natomiast jak podzieliłem to na header i footer w PHP i odpaliłem stronę, to przed headerem zrobił mi się taki pasek biały wysokości jakiś 15px. No a w kodzie nic nie było zmieniane. Więc może ktoś wie również, jak to przywrócić do pierwotnej wersji?

Z góry dziękuję za okazaną pomoc smile.gif

Pozdrawiam,
aliatic
benio101
  1. <table cellpadding="0px" cellspacing="0px" style="border: 1px solid black; width: 800px">
  2. <tr>
  3. <td colspan="4" valign="middle" style="border-bottom: 1px solid black"><center><br><br><br>Header<br><br><br></center></td>
  4. </tr>
  5. <tr>
  6. <td valign="middle" style="width: 300px"><center><br><br><br>kolumna lewa<br><br><br></center></td>
  7. <td valign="top" style="border-right: 1px solid black; width: 200px"><center><br><br><br>TOP<br><br><br></center></td>
  8. <td valign="middle" style="border-right: 1px solid black; width: 200px"><center><br><br><br>kolumna prawa<br><br><br></center></td>
  9. <td style="width: 100px"></td>
  10. </tr>
  11. <td colspan="4" style="border-top: 1px solid black"><center><br><br><br>Footer<br><br><br></center></td>

Proszę bardzo yahoo.gif
I to nawet bez PHP aarambo.gif

U mnie wygląda tak:



Oczywiście wartości (px) możesz sobie pozmieniać.
Pozdrawiam.
Fifi209
Nie czytaj tego co napisał kolega nade mną - tabelki służą do prezentowania danych w tabeli a nie do tworzenia układu strony.

Co do tematu najprościej:

  1. <div id="strona">
  2. <div id="header"></div>
  3. <div id="top">
  4. <div>1</div><div>2</div><div></div>
  5. </div>
  6. <div id="footer">
  7. </div>


Strona będzie swego rodzaju "pojemnikiem" o ustalonych wcześniej wymiarach.
Header - zawiera się w stronie, height ustawiasz jaki chcesz, width ustawiasz 100%
Top - zawiera się w stronie, height ustawiasz jaki chcesz, width ustawiasz 100%
Top div - zawierają się w top, float ustawiasz na left, a wymiary dobierasz jakie potrzebujesz
Footer - zawiera się w stronie, height ustawiasz jaki chcesz, width ustawiasz 100%

Prosto i szybko.
benio101
Tak, a moja metoda jest jeszcze lepsza tongue.gif
A strony się na % nie robi ze względu na to, że ludzie mają różne rozdzielczości.
Jednym się strona rozjedzie, drugim wszystko wejdzie na kupę i się zrobi bałagan.
NIE POLECAM TEJ METODY!

Po skorzystaniu z pomocy fifiKota Albo strona Ci się rozjedzie:



Albo ulegnie inkluzji.
Damonsson
@up Czarownice kiedyś palono na stosie, za herezje...z przyjemnością, ja dziś spaliłbym Ciebie.

Tabela służy do prezentowania danych TABELARYCZNYCH, jak sama nazwa mówi.
aliatic
Kuzwa, napisałem posta, dałem podgląd i się skasowało sad.gif

więc jeszcze raz smile.gif

Dziękuję za pomoc. Skorzystałem z opcji float i zadziałało. Dodatkowo dodałem tą prawą pionową stronę w osobnym pliku, a korzystając z PHP zapodałem linki. Tak więc, mogę bez problemu zmienić dane w jednym pliku i ukarzą mi się one na wszystkich stronach smile.gif. Aha, strona mi się nie rozsuwa, gdyż zamiast 100% podałem stałą wartość dotycząca szerokości strony. Widać to w kodzie poniżej.

Został jeszcze jeden problem. Edytowałem pierwszego posta i go dopisałem, jednak jeszcze raz pozwolę go sobie przytoczyć. Mianowicie jak miałem wcześniej zrobiony projekt w XHTMLu, to wszystko wyświetlało mi się poprawnie. Natomiast jak podzieliłem to na części i dałem do osobnych plików php, to przed headerem zrobił mi się taki pasek biały wysokości jakiś 15px. No a w kodzie nic nie było zmieniane. Więc może ktoś wie również, jak to przywrócić do pierwotnej wersji? Znalazłem już na tym forum podobny (o ile nie ten sam problem), jednak po zastosowaniu zasugerowanego rozwiązania, wcale się to nie poprawia. Oto kilka screenów ...

Wyświetlenie strony w kodzie XHTML i CSS


Wyświetlenie strony po podziale na części i przejściu na skróty plików php


Po dodaniu funkcji float do #header


Dla ułatwienia podam może jeszcze kody ...
  1. <div id="header">
  2. <div class="content">
  3. <ul>
  4. <li><a href="index.html">HOME</a></li>
  5. <li><a href="html/sitemap.htm">MAPA STRONY</a></li>
  6. <li><a href="html/linki.htm">LINKI</a></li>
  7. <li><a href="html/kontakt.htm">KONTAKT</a></li>
  8. </ul>
  9. </div>
  10. </div>


  1. /* szerokość strony */
  2. .content { width: 960px;}
  3.  
  4. /* header */
  5. #header { height: 19px; border-bottom: 1px solid white; background: url(../images/header-tlo.png) repeat-x;}
  6. #header ul { position: absolute; left: 685px; list-style: none; overflow: hidden;}
  7. #header ul li { float: left; padding-right: 2px; height: 19px; background: url(../images/header-kreska.png) no-repeat;}
  8. #header ul li:first-child { position relative; background: none;}
  9. #header ul li a { display: block; padding: 2px 15px; color: #979797; font: bold 1.1em arial, tahoma, verdana, sans-serif; text-decoration: none;}


Będę bardzo wdzięczny za pomoc w rozwiązaniu i tego problemu smile.gif

Pozdrawiam,
aliatic
Adis92
A w stylach masz wyzerowane marginesy?
  1. *{
  2. margin: 0;
  3. padding: 0;}
aliatic
tak, nie podawałem tego aczkolwiek wszystkie wartości wcześniej w stylach są wyzerowane. gdybym tego nie zrobił, to pewnie by już w pliku xhtml mi tego nie wyświetlił poprawie. a tym czasem tam wyświetla mi się dobrze. natomiast po przerobieniu tego na części i zmianie plików na php, zrobił się ten biały pasek.
Adis92
Błąd może leżeć po stronie plików php. Sprawdź dokładnie czy nie masz gdzieś tam czegoś co może być odpowiedzialne ze zrobienie wolnego miejsca.
aliatic
nie znam się na kodzie PHP. znalazłem jedynie na internecie szczegółowy opis jakiegoś kolesia, który krok po kroku opisywał jak to coś takiego zrobić. no i jedyne linijki kodu wyglądały następująco.

  1. <?php include $_SERVER['DOCUMENT_ROOT'].'/header.php'; ?>

oraz
  1. <?php include $_SERVER['SCRIPT_FILENAME'].'.html'; ?>

osobiście nie sądze, aby coś z tego było odpowiedzialne za ten biały pasek nad headerem. no ale jak już pisałem, nie znam się na kodzie php więc mogę się mylić. tak więc, jeśli ktoś potrzebowałby jeszcze jakiś informacji, aby móc rozwiązać ten problem to prosiłbym o info co miałbym sprawdzić, gdzie szukać błędu.
benio101
@Damonsson: Uważasz, że strona zrobiona pod np. 1280x1024 z argumentami % nie rozjedzie się pod np. 1920x1080?
..A spalić to się możesz ze wstydu, bo głosisz bzdury, chłopie z konurbacji.

edt: Sam swoich stron na % nie robisz, więc co za bzdury wygadujesz?
A tak mulących flashy to się nie wrzuca na swoje portfolio, bo aż rzygać się chce.

  1. ++i
się pisze, a nie
  1. i++
, bo muli jak Twoje rozumowanie z rozjeżdżaniem się strony.
Ale każdy początkujący programista ma prawo do błędów, tylko się nie wymądrzaj, jak nie wiesz, bo się ośmieszasz.
Dziękuję.
aliatic
dobra, udalo mi sie rozwiazac wreszcie ten problem z bialym paskiem. wszystko rozbijalo sie o kod php ...

  1. <?php include $_SERVER['SCRIPT_FILENAME'].'.html'; ?>


... oraz plik index.php.html w ktorym byla zawarta tresc

<title>...</title>

po usunieciu tego i nadaniu <title>...</title> bezposrednio w pliku php, wszystko wrocilo do normy. minus jedynie jest taki, ze kazda podstrona bedzie nazywala sie tak samo jak glowna. no ale trudno. grunt, ze pozbylem sie tego szpecacego paska winksmiley.jpg
Damonsson
@benio101
znacznik table i pochodne- nie służą do budowania struktury stron!

Ani razu nie odniosłem się do jakichś twoich śmiesznych procentów, których się uczepiłeś jak rzep psiego ogona. Nawet nie rozumiem o co Ci chodzi. Dlatego tego wątku nie poruszam. Co do 1920x1080 ostatnio sobie z ciekawości odpaliłem jeden projekt na takiej rozdziałce i nic się nie "rozjechało", no bo jakby miało się niby rozjechać.

Yyy jakich moich stron? Mówisz o tym portfolio? Jedyne uchybienie to mulący flash? Haha, no naprawdę udałeś się. Dla takich tępaków, chyba umieszczę specjalny podpis pod linkiem, że strona może służyć do nauki, jak nie tworzyć stron.

i++ albo ++i ? O czym Ty piszesz? Chyba wyprzedzasz własne myśli.

No tak, tak bo Ty jesteś zaawansowany programista front-end haha.

PS. Zawsze wiedziałem, że brzydkim ludziom jest w życiu ciężej, ale to nie upoważnia do pisania głupot.
PS2. Mam nadzieję, że swoją stronę z podpisu tworzyłeś w czasach, gdy poznawałeś dopiero co to jest znacznik <html> <body> itp. tak jak ja, kiedy tworzyłem swoją. Bo jeśli nie, to sądzę, że Twój cały profil i teksty to tylko marna prowokacja w którą dałem się wciągnąć.
PS3. Jeżeli masz jakiś procent niepełnosprawności, to przepraszam za moje obrażanie Ciebie, nie mówię tego wcale złośliwie i ironicznie, po prostu różnie w życiu bywa.
benio101
Aha, tego się spodziewałem.

1. Przyznałeś się do popełnionego błędu.
2. Nie zrozumiałeś, że i++ żre pamięć i procka.

3. Wyzwałeś mnie od:
-brzydkiego
-głupiego

4. Nazwałeś mnie:
- niepełnosprawnym
- młodym

1. rozumiem, każdemu się zdarza, cieszę się, że wreszcie to pojąłeś.
2. nic nie szkodzi, kiedyś się i tak o tym przekonasz.
3. nerwy ci puściły po tym, jak dopuściłeś myśl, że przez cały czas popełniałeś tragiczny błąd z i++
4. jestem pełnosprawny, ale, prawda, młody. Zgadza się, niedoświadczony, ale ambitny. Masz rację, jesteś ode mnie być może bardziej doświadczony. Brawo! Ogłośmy dzień, w którym to odkryłeś Świętem Narodowym! Tak więc trafiłeś w połowie. Brawo! Maturę z nazywania ludzi byś zdał. Naprawdę gratuluję!

..Naprawdę nie przejmuj się tą być może zbyt mocną ironią i totalnym wdeptaniem Cię w glebę, po prostu chcę Ci pomóc, przestrzegając Cię przed błędem używania postinkrementacji tam, gdzie nie potrzeba, gdyż jest to olbrzymi błąd.

5. Tak, jestem FrontEndem i jestem z tego dumny. Nie obchodzą mnie żadne zasady, ważne by kod był czytelny dla innych, Użytkownicy mogli bezproblemowo korzystać z serwisu, a ja miał łatwą możliwość aktualizacji witryny, programu. Mam gdzieś standardy, jeśli nic one nie dają poza powodami do kłótni, w jaką się niemal nie wdałem. Jeśli strona działa bez problemu w tabelkach, to będę ich używał. A to, do czego one służą, to naprawdę mnie nie obchodzi. Np. znacznik font służy do zmiany parametrów czcionki, a ja wykorzystuję go do pisania tekstu, formatowania go, zamiany kursora z kreski na trójkącik z ogonkiem. Nie korzystam w ogóle ze znacznika P, korzystam z BR. Nie piszę / na końcu znaczników. Po co sobie utrudniać życie? Strata czasu, bajtów i znów czasu. Skoro działa bez i nie ma żadnych problemów, to nie będę utrudniał sobie życia smile.gif Stawiam na użyteczność, jak porządny FrontEnd i proszę, uszanuj moją decyzję tak, jak ja szanuję Ciebie.

Pozdrawiam.
Damonsson
1. Jakiego?
2. Ale wytłumacz o co Ci chodzi z tym i++, skąd Ty to wyjąłeś?
3. - Jesteś brzydki, stwierdziłem tylko fakt.
- nie napisałem, że jesteś głupi tylko, że piszesz głupoty, nazwałem Cię tępakiem, bo na 1szy rzut oka widać że strona w moim podpisie jest poza wszelkimi kanonami i tylko tępak może się do niej odwoływać, w przypadku braku innych argumentów.
4. - nie nazwałem, po prostu nie chciałem abyś poczuł się urażony, gdyby tak było.
- młodym? Nawet nie wiem ile masz lat.
5. Chłopie używaj sobie nawet kartki papieru i biegaj do każdego kto chce zobaczyć Twoją "stronę" z tą kartką papieru i pokazuj mu, że to właśnie Twoja "strona". Ale nie pisz, że to jest lepsze, bo jeszcze ktoś pomyśli, że naprawdę masz rację.
BlackWorth
Specjalnie zrobiłem konto na tym forum żeby rozwiązać problem tego cholernego ++i i i++...
++i polega na inkrementacji zmiennej i przed jej odczytaniem czyli wymagane są 2 cykle procesora : inkrementacja i odczyt nowej wartości i+1. Niby mało ale np. przy pętlach obsługujących bazy danych to jest wiele wiele cykli procesora.
i++ najpierw odczytuje zmienną, potem inkrementuje a potem znowu odczytuje. 3 cykle procesora ale mniejsze obciążenie pamięci bo zmienna nie musi być zapisana w pamięci bo jest za każdym cyklem pętli odczytywana ponownie. Więc jak kto woli..... mniejsze obciążenie procka czy pamięci......różnica naprawdę niewielka ,chyba że obsługujecie dużą bazę danych .
Pozdro i sory za offtop
kapuch
Cytat(benio101 @ 10.01.2011, 21:57:45 ) *
2. Nie zrozumiałeś, że i++ żre pamięć i procka.

Hahaha, czlowieku o czym ty pi....szesz?
Żre? Różnice sa tak niewielkie, ze nazwanie tego "zżeraniem", to jak budowanie laya na tabelkach - czyli jednym slowem PORAŻKA.
Cytat(benio101 @ 10.01.2011, 21:57:45 ) *
3. Wyzwałeś mnie od:
-brzydkiego
-głupiego

Fakt, to nie konkurs pieknosci, ale cos w tym musi byc (frustracja?), za to jesli chcesz komus pomagac, to upewnij sie chociaz, ze robisz to dobrze, bo tabele czlowieku sluza do czegos innego - juz dwie osoby ci to napisalu (ja jestem trzeci), a ty brniesz dalej w tym zacofaniu - przyznaj sie, ze nie znales float'a...
Cytat(benio101 @ 10.01.2011, 21:57:45 ) *
..Naprawdę nie przejmuj się tą być może zbyt mocną ironią i totalnym wdeptaniem Cię w glebę, po prostu chcę Ci pomóc, przestrzegając Cię przed błędem używania postinkrementacji tam, gdzie nie potrzeba, gdyż jest to olbrzymi błąd.

Kogo ty chcesz w glebe wdeptac? I jakim sposobem? biggrin.gif
Aha, no i lepiej juz nie pomagaj...pomoz sobie.

Cytat(benio101 @ 10.01.2011, 21:57:45 ) *
5. Tak, jestem FrontEndem i jestem z tego dumny. Nie obchodzą mnie żadne zasady, ważne by kod był czytelny dla innych, Użytkownicy mogli bezproblemowo korzystać z serwisu, a ja miał łatwą możliwość aktualizacji witryny, programu. Mam gdzieś standardy, jeśli nic one nie dają poza powodami do kłótni, w jaką się niemal nie wdałem. Jeśli strona działa bez problemu w tabelkach, to będę ich używał. A to, do czego one służą, to naprawdę mnie nie obchodzi. Np. znacznik font służy do zmiany parametrów czcionki, a ja wykorzystuję go do pisania tekstu, formatowania go, zamiany kursora z kreski na trójkącik z ogonkiem. Nie korzystam w ogóle ze znacznika P, korzystam z BR. Nie piszę / na końcu znaczników. Po co sobie utrudniać życie? Strata czasu, bajtów i znów czasu. Skoro działa bez i nie ma żadnych problemów, to nie będę utrudniał sobie życia smile.gif Stawiam na użyteczność, jak porządny FrontEnd i proszę, uszanuj moją decyzję tak, jak ja szanuję Ciebie.

Nie obrazaj prawdziwych frontendowcow, bo daleko ci do nich.

Podsumowujac, masz wysokie mniemanie o sobie, niby to dobrze - trzeba sie cenic, ale rob to z rozwaga, a nie obnazajac wszystkie swoje "niedociagniecia" wmawiasz nam, ze tak ma byc...

W pelni popieram Damonssona i Fifi209

PS. Zaj**sty medal! biggrin.gif

PS2: Administracjo wybacz, rzadko ostatnio pisze, ale tutaj nie moglem sie powstrzymac - warna przyjme z godnoscia wink.gif

PS3: Ehhh znow dalem sie wpuscic w maliny, zdaje sie ze to jakis trollololo :/
blooregard
Panowie, ochłońcie, to nie onet.

Albo dalej będzie rzeczowa dyskusja w temacie, albo zamykamy i polecą ostrzeżenia. Decyzja należy do Was.
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.