Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Nowy wygląd strony...
Forum PHP.pl > Forum > Po stronie przeglądarki
zbig13
7.07.2005, 08:23:37
Chciałem zmienić trochę wygląd mojej strony http://republika.pl/szok_2. Opracowałem wstępny projekcik w Photoshopie, tylko teraz mam problem, bo nie wiem jak to zrobić w HTML-u (XHTML-u) sad.gif Wszystkie poprzednie strony, które robiłem były raczej proste, standardowego, blokowego schematu. A z tym, nie wiem jak sobie poradzić. Myślałem o tabelach, ale to chyba kiepski pomysł, bo będą odstępy między poszczególnymi pozycjami i nie będzie widać tego efektu cieniowania. Proszę o pomoc, bo kompletnie nie wiem jak sie do tego zabrać!
Kas
7.07.2005, 08:32:40
Stronę możesz zrobić na tabelach lub divach.

Zacznij od samego szkieletu strony.
Jeżeli będziesz robił tabele wewnątrz tabel dobrym pomysłem może być użycie php i funkcja include(), niestety php nie działa na republice - musiałbyś znaleźć inne konto.
Wtedy dajesz menu w zewnętrznym pliku.

Prócz tego pokrój swoją grfikę na części i umieść w odpowiednich miejscach.
Jak sklecisz wszystko do kupy powinno być ok.
dag
7.07.2005, 09:58:30
Zalecam stworzenie strony zgodnie ze standardami sieciowymi. Stosuj DIV zamiast tabel, CSS, etc.

Jeśli uda Ci się stworzyć stronę w miarę zgodną ze standardami przyczyni się to w znaczny sposób do zmniejszenia transferu generowanego przez stronę. Powód? Mniejsza ilość przesyłanego kodu, a także łatwiejszy w utrzymaniu kod strony.
zbig13
7.07.2005, 12:25:39
Właśnie próbuje zrobić tą strone na divach, tylko cos mi nie wychodzi. Chodzi o to, że mam jednego diva, który jest jakby głównym. W nim są zawarte dwa inne i chcę, żeby te dwa divy zawarte w głównym divie były obok siebie, a one są niestety jeden, pod drugim. Może pokaże to na kodzie będzie prościej smile.gif 
[HTML] pobierz, plaintext 
  1. <div style="display: block; width: 300px; border: solid 1px;">
  2.   <div style="display: block; width: 150px; height: 500px; border: solid 1px;">1 div</div>
  3.   <div style="display: block; width: 150px; height: 500px; border: solid 1px;">2 div</div>
  4. </div>
[HTML] pobierz, plaintext

i potem wychodzi:
1 div
2 div
a ja chcę
1 div 2 div
Jak to zrobić?
kicaj
7.07.2005, 13:37:51
Zastosuj `float` i/lub `position` smile.gif
revyag
7.07.2005, 14:10:21
Div jest elementem blokowym, więc niepotrzebne jest nadawanie mu stylu display:block.
Co do problemu: przykład:
Kod
<style type="text/css">
body {
    text-align:center;
}
div#main {
    width:600px;
    margin:0 auto;
}
div#left {
    float:left;
    width:200px;
}
div#right {
    float:right;
    width:400px;
}

[HTML] pobierz, plaintext 
  1. <div id="main">
  2.     <div id="right">></div>
  3.     <div id="left"></div>
  4.     <br style="clear:both" />
  5. </div>
[HTML] pobierz, plaintext
zbig13
8.07.2005, 12:02:40
Dzięki waszym poradom udało mi się już dojść do czegoś takiego. To już i tak sukces bo nie robiłem nigdy wczesniej strony na tych div'ach. Ale jak widać brakuje jeszcze paru rzeczy i nie wiem jak sobie z tym poradzić. Po pierwsze: prawe menu odstaje od srodka (tresci strony), a po drugie to nie wiem jak zrobic zeby gora i dol lewego menu mialy zaokraglone rogi, tak jak na rysunku. Zapisałem góre i dół lewego menu w osobnych plikach tloLeweGora.jpg i tloLeweDol.jpg ale teraz nie wiem jak zrobic zeby byly tam gdzie trzeba w lewym menu. Ma ktoś jakiś pomysł jak to zrobić. Kod strony mozna podejrzec w zrodle, ale na wszelki wypadek napisze go tu:

CSS
Kod
div.main {
   width: 800px;
}

div.left {
   float: left;
   width: 140px;
    height: 500px;
   padding-left: 6px;
   background: URL('./images/tloLeweSrodek.jpg');
}

div.leftTop {
    background: URL('./images/tloLeweGora.jpg');
}

div.right {
   float: right;
   width: 660px;
}

div.top {
    width: 556px;
    height: 120px;
    background: URL('./images/top.jpg');
}

div.tresc {
    width: 413px;
    height: 350px;
    padding-left: 15px;
    background: URL('./images/tloTrescSrodek.jpg');
    float: left;
}

div.rightMenu {
    width: 140px;
    height: 410px;
    padding-left: 6px;
    background: URL('./images/tloLeweSrodek.jpg');
    float: right;
}

HTML
[HTML] pobierz, plaintext 
  1. <div class="main">
  2. 	<div class="left">
  3. 	Lewe menu
  4. 	</div>	
  5. 	<div class="right">
  6. 		<div class="top">
  7. 		</div>
  8. 		<div class="tresc">
  9. 		Treść strony
  10. 		</div>
  11. 		<div class="rightMenu">
  12. 		Prawe menu
  13. 		</div>
  14. 	</div>
  15. </div>
[HTML] pobierz, plaintext
revyag
8.07.2005, 12:52:02
Pierwsze co, to poprawa tego co napisałeś snitch.gif
Ustawiłeś szerokość kontenera na 800px, a sumaryczna szerokość elmentów to 696px pytam więc czemu ? snitch.gif
Druga sprawa, wyrzucamy paddingi z divów pozycjonujących grafikę. Dlaczego ? Obejrz stronę pod ff i operą, zobaczysz smile.gif
Trzecia sprawa to umieszczanie tekstu w divach, tutaj zastosujemy padding elementu p, tekst nie będzie wtedy dotykał krawędzi.
Dodawnie górnego i dolnego zaokrąglenia, chyba źle pociąłeś grafę, bo obrazek tloLeweGora.jpg jest o 1px węższy od środka, zobaczysz zaraz.
Style wyrzuć do zewnętrznego pliku, łatwiej będzie się pracować.
Zmodyfikowany kod:
Kod
div.main {
   width: 696px;
}

div.ltop {
    width:139px;
    height:28px;
    background: URL('./images/tloLeweGora.jpg');
}

div.lmid {
    width: 140px;
    height: 500px;
    background: URL('./images/tloLeweSrodek.jpg');
}

div.lbot {
    width: 140px;
    height: wysokosc_dolnego_obrazka;
    background: URL('./images/tloLeweDol.jpg');    
}

div.left {
   float: left;
}

div.leftTop {
    background: URL('./images/tloLeweGora.jpg');
}

div.right {
    float: right;
    width: 556px;
}

div.top {
    width: 556px;
    height: 120px;
    background: URL('./images/top.jpg');
}

div.tresc {
    width: 416px;
    height: 350px;
    background: URL('./images/tloTrescSrodek.jpg');
    float: left;
}

div.rightMenu {
    width: 140px;
    height: 410px;
    background: URL('./images/tloLeweSrodek.jpg');
    float: right;
}

p {
    margin:0;
    padding:10px;
}

[HTML] pobierz, plaintext 
  1. <div class="main">
  2. 	<div class="left">
  3.         <div class="ltop"></div>
  4.         <div class="lmid">
  5.             <p>Lewe menu</p>
  6.         </div>
  7.         <div class="lbot"></div>
  8. 	</div>	
  9. 	<div class="right">
  10. 		<div class="top">
  11. 		</div>
  12. 		<div class="tresc">
  13.             <p>Treść strony</p>
  14. 		</div>
  15. 		<div class="rightMenu">
  16.             <p>Prawe menu</p>
  17. 		</div>
  18. 	</div>
  19.     <br style="clear:both" />
  20. </div>
[HTML] pobierz, plaintext
zbig13
14.07.2005, 13:11:26
@revyag: wielkie dzięki! już udało mi się poprawić te błędy i wszystko jest ok.

Edit: Mam jeszcze tylko jedno pytanie: jaki parametr w CSS trzeba dodać do elementu main, zeby wszystkie divy w nim zawarte byly na srodku stronu, czyli po prostu jak wysrodkowac cala strone na divach? Szukalem w ksiazce i na roznych stronach o css odpowiedzi na to pytanie ale tam bylo tylko jak wysrodkowac tekst. A nie o to mi chodzi. A przy okazji zna ktoś jakiś darmowy serwer z obsluga php i[/B] najlepiej jeszcze MySQL?
revyag
14.07.2005, 13:17:06
Oj to niedokładnie szukałeś smile.gif
Kod
body {
    text-align:center;
}
div.main {
    margin:0 auto;
}
zbig13
14.07.2005, 13:36:44
No dobra, niby działa. Ale nie dałoby się zrobić tak, żeby wyśrodkowywały się tylko divy, a nie divy i tekst?
revyag
14.07.2005, 13:42:15
to do div.main dodaj:
Kod
text-align:left;

a jak potrzebujesz różnych pozycjonować tekstu na stronie dla każdego elementu musisz ustawić osobno.
zbig13
14.07.2005, 13:50:46
Ale właśnie w tym problem, że żeby wszystkie divy były na środku strony, to text-align musi mieć wartość center. Nie wiem dlaczego tak się dzieje. Samo
Kod
margin: 0 auto;
nie wystarcza. Próbowałem jeszcze
Kod
margin-left: auto;
margin-right: auto
ale mimo to divy są wyrównane do lewej. Żeby były na środku musze text-align ustawić na center. Dziwne trochę bo text-align powinien odnosić się tylko do tekstu...

Edit: Dobra rozwiązałem już problem. Po prostu do div.main dodałem
Kod
text-align: center;
ale do div.left i div.right
Kod
text-align: left;
Teraz jest dobrze bo i strona jest na środku i tekst jest wyrównany do lewej. Thx for help smile.gif
Edd_s
14.07.2005, 18:05:03
Jeśli ci są potrzebne jakieś adresy serwerów z php to zobacz sobie na tym właśnie forum w dziale Sewrewry WWW, jest tam taki przyczepiony temat: ADRESY SERWEROW HOSTINGOWYCH
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.