Forum PHP.pl > Jak przerobic na XHTML

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

Bastion

14.02.2006, 15:15:26

Witam,

dopiero raczkuje w XHTMLu i zastanawia mnie jak zrobic cos takiego nie uzywajac tabelek :

http://www.vertis.com.pl/w002/

chodzi mi konkretnie o cieniowany obrazek jako tlo po lewo i po prawo strony o szerokosci 770px.

czesc zrobilem na divach, ale jak rozpracowac to - to nie wiem

TomASS

14.02.2006, 15:26:56

Może tutaj znajdziesz pomoc.....

mike

14.02.2006, 15:34:03

~TomASS przecież dobrze wiesz że tam nie ma odpowiedzi!
~Bastion pyta o konkretne zagadnienie a ty mu dajesz linka do arta o tym dlaczego stosować! XHTML

(to jest nabijanie postów i następnym razem dostaniesz ostrzeżenie)

A co do podpowiedzi.
Jeśli wszystko dajesz w jednym użym kontenerze to daj mu jako tło plik o długości powiedzmu 700px (czy ile tam potrzebujesz) który na obu końcach ma powiedzmy po 7px cienia. A potem daj paddingi dla tego kontenera po obu stronach tyle ila dałeś cienia.

Mam nadzieję że wiesz o co mi chodzi.

SHiP

14.02.2006, 16:00:04

No cóż też ostatnio zaczałem z xhtmlem =) jeśli pisze głupoty to poprawiać mnie

Kod

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Vertis Developers</title>

<style>
body { background: #ccd3dc; font-size: 12px; margin:0px; width: 100%; padding:0px; }
a { text-decoration: none }

.page_white {float:left; background: #f2f2f2; min-height: 500px;width:770px; }

#small_bar_blue { background: #4b87aa; margin-left:auto; margin-right: auto; width:770px; height:5px }
#small_bar_green { background: #628f43; margin-left:auto; margin-right: auto; width:770px; height:5px }
#title_bar { background: #eaeaea; background-image: url(images/gray_grad.png); padding: 0px 0px 0px 0px; height: 31px }
#menu_bar { background: #eaeaea; background-image: url(images/gray_grad_menu.png); padding: 0px 0px 0px 0px; height: 40px }
#vertis { display: inline; float: left; padding: 0px 0px 0px 10px }
#online { display: inline; font-size: 11px; float: right; height: 31px; line-height: 31px; padding: 0px 10px 0px 0px }
#image_shoot { background: #55b024; background-image: url(images/grass.jpg); padding: 0px 0px 0px 0px; height: 114px }

</style>

</head>
<body>
    <div style="float:left;background: url(images/left_bg_400x1.gif) top right repeat-y;height:100%;width:40px;"></div>
    <div class="page_white">
  <div id="small_bar_blue"></div>
      <div id="title_bar">
    <div id="vertis"><a href="http://www.vertis.com.pl/"><img src="images/vertis.png" alt="www.vertis.com.pl" border="0"></a></div>
    <div id="online">Użytkowników on-line : <strong>20</strong></div>
      </div>
  <div id="image_shoot"></div>
  <div id="small_bar_green"></div>
  <div id="menu_bar"></div>
    </div>
    <div style="float:left;background: url(images/right_bg_400x1.gif) repeat-y;height:100%;width:40px;"></div>
</body>
</html>

Z tymi obrazkami-cieniami lekko przesadziłeś ;] nie mam pojecia jak to zmontować ;] Nie mam tez pojecia dlaczego margin:auto nie centruje strony? o.O w kazdym bądz razie tak tez wyglada nieźle =)

Bastion

14.02.2006, 16:13:08

dokladnie robilem jak ty

i mialem ten sam efekt, nie chcialo sie wycentrowac

SHiP

14.02.2006, 16:17:10

OK nowa wersja =) troche posiedzialem i dziala

Kod

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Vertis Developers</title>

<style>
body { background: #ccd3dc; font-size: 12px; padding:0px; margin:0px;}
a { text-decoration: none }

.page_white {float:left;background: #f2f2f2; min-height: 500px;width:770px; }

#small_bar_blue { background: #4b87aa; margin-left:auto; margin-right: auto; width:770px; height:5px }
#small_bar_green { background: #628f43; margin-left:auto; margin-right: auto; width:770px; height:5px }
#title_bar { background: #eaeaea; background-image: url(images/gray_grad.png); padding: 0px 0px 0px 0px; height: 31px }
#menu_bar { background: #eaeaea; background-image: url(images/gray_grad_menu.png); padding: 0px 0px 0px 0px; height: 40px }
#vertis { display: inline; float: left; padding: 0px 0px 0px 10px }
#online { display: inline; font-size: 11px; float: right; height: 31px; line-height: 31px; padding: 0px 10px 0px 0px }
#image_shoot { background: #55b024; background-image: url(images/grass.jpg); padding: 0px 0px 0px 0px; height: 114px }

</style>

</head>
<body style="background:url(images/tlo.png) top center;">
<div style="margin:auto;width:770px;">
    <div class="page_white">
  <div id="small_bar_blue"></div>
      <div id="title_bar">
    <div id="vertis"><a href="http://www.vertis.com.pl/"><img src="images/vertis.png" alt="www.vertis.com.pl" border="0"></a></div>
    <div id="online">Użytkowników on-line : <strong>20</strong></div>
      </div>
  <div id="image_shoot"></div>
  <div id="small_bar_green"></div>
  <div id="menu_bar"></div>
  <div style="background:white;min-height:200px;">lorem impus ble ble ble</div>
    </div>
</div>
</body>
</html>

plik images/tlo.png ma wtmiary 1570x1 po lewej jest lewy cien, po prawej prawy cien a w srodku bialość na 770px =)

ens0re

14.02.2006, 16:36:37

http://www.alistapart.com/articles/fauxcolumns <= Ten art moze sie przydac

Zeby wycentrować strone to nie

Kod

margin: auto;

Kod

margin: 0 auto;

w ten sposob margines górny i dolny jest 0 a lewy i prawy automatyczny

@SHiP: Twój kod nie jest zbyt piękny i poprawny

(zaczynasz z xhtml'em a !doctype masz do html'a

i jeszcze wiele róznych błedów). Pisz co chcesz wiedziec to postaramy sie wytlumaczyć

SHiP

14.02.2006, 16:46:27

Cytat

zaczynasz z xhtml'em a !doctype masz do html'a

doctype skopiowałem ze strony Basitona w sumie nawet nie zwróciłem uwagi jaki on jest dokładniej =). Co do błedów to wiem że wszystko powinno być w pliku css, style mogą być również w skróconej wersji itp. Po prostu skopiowałem kod bastiona

Cytat

Pisz co chcesz wiedziec to postaramy sie wytlumaczyć

Gdybyś MI chciał pomóc =) to lepiej pisz tutaj

Bastion

14.02.2006, 19:03:04

Ship, ens0re

nawet nie wiecie jakie z Was skarby

http://www.vertis.com.pl/w001/

ens0re - widze ze jestes znawca XHTMLa - jest tu cos co nie powinno byc tak ? lub jest to nie elegenackie ?

ens0re

14.02.2006, 20:09:05

To po pierwsze zmieniłbym z XHTML 1.1 na XHTML 1.0 Strict lub Trans. Dlaczego? Ponieważ Tobie jeszcze daleko do 1.1 a narazie głównie robi sie w 1.0 Strict lub Trans. Jest wiele powodów dla ktorych tak a nie inaczej ale do tego masz pełno linkow podawanych wielokrotnie na forum. Dalej..CSS wrzucić do pliku style.css a wtedy index bedzie bardziej przejrzysty. Nastepnie:

Kod

Po co? Style wrzucasz do pliku style.css i zostaje Ci ładnie

Kod

. Tak samo wymiary i wszystkie inne atrybuty obrazka(prócz alt="") też dajesz do style.css. I tak dla pielegnacjii CSS w pliku pisz przejrzyściej:

Kod

selektor {
  własciwosc: wartosc1;
  własciwosc: wartosc2;
  własciwosc: wartosc3;
}

Jak coś jeszcze to pytaj - napisałem Ci ogolnie info co i jak.

Bastion

14.02.2006, 20:16:23

dziekuje za rady

z xhtml1.1 chociaz sprobuje jesli czegos nie bede mogl/potrafi zrobic zejde stopien nizej

tym czasem biegne nanosic poprawki o ktorych mowisz

ens0re

14.02.2006, 20:27:27

To powiedz mi po co chcesz używać 1.1 a nie 1.0 Strict/Trans?

Wierz mi, że po zobaczeniu !doctype zaawansowani webmasterzy nie beda na Ciebie patrzeć lepiej; że nie bedziesz lepszy od innych...Naprawde...

Bastion

14.02.2006, 20:36:37

Poniewz pisze sie ze sie zaleca http://pl.wikipedia.org/wiki/XHTML#XHTML_1.1 , kilka razy na forum widzialem rozne dyskusje ze powinno sie uzywac nowych standardow zamiast tych z eopki kamienia lupanego - wiec mysle ze jesli sie juz uczyc - to dlaczego nie aktualnej specyfikacji

wbrew pozorom wcale nie mam nadziei ze przez DOCTYPE beda na mnie patrzec lepszym okiem - na to ma pracowac wyglad i wygoda strony a nie DOCTYPE.

ps. sugerowane poprawki przez Ciebie naniesione - wielkie dzieki

revyag

14.02.2006, 20:44:23

A teraz wejdź na w3c (jakoś kurka znajomo brzmi

)i zobacz jaki jest doctype na głównej stronie

Bastion

14.02.2006, 20:46:03

1.0 ... hm...

dlaczego ja nie widze wady ze chce zaczac od 1.1 zamiast 1.0

ens0re

14.02.2006, 20:46:57

To wg. Ciebie jak bedziesz miał 1.0 Strict to bedziesz projektować strony wg. metody 'z kamienia łupanego'? Pozatym słyszałem ze 1.1 nie jest dokonczone czy tam nie obslugiwany poprawnie przez przegladarki(slyszalem bo 1.1 sie nie interesowałem nigdy). Osobiście polecałbym Ci 1.0 Trans ponieważ ze starego HTMLa najłatewiej przejść na tą wersje, a jeżeli chcesz wskoczyc na głeboka wode odrazu to 1.0 Strict. Poszukaj w necie jakiegos porównania pomiedzy poszczegolnymi wersjami(na forum tez napewno jest).

Bastion

14.02.2006, 20:50:36

mowiac "kamien lupany" mialem na mysli HTML-4.01 okreslnageo w ten sposob przez wyjadaczy XHTML

moze masz racje, poczytam wiecej o wersjach XHTML - bo pewnie na dzien dzisiejszy farmazony opowiadam

jakbym sie znal heh

zufam na slowo i skupie sie na 1.0

xarr

14.02.2006, 22:46:27

Przede wszystkim 1.1 wymaga odpowiedniego typu (application/xhtml+xml), ktorego czesc browserow (w tym najpopularniejsza IE) nie potrafi poprawnie odczytac, a przez to wyswietlic stronki. Mozesz zerknac po wiecej info na ten temat tutaj (W3C) . Btw. tutaj masz wlasnie uzyte xhtml1.1 Jezeli uzywasz IE powinienes dostrzec brak supportu typu application/xhtml+xml, ktory powinien byc stosowany w xhtml, a obowiazkowo w xhtml1.1. Wiec nie ulegaj manii numerkow jezeli nie jestes w stanie w pelni zastosowac sie do wymogow standardu. Poki co uzywaj 1.0 i uskuteczniaj poprawny semantycznie kod.

Co do www to tak po pierwszym zerknieciu:
- jak uzywasz <script> uzywaj tez <noscript>
- koniecznie poznaj inne znaczniki niz <div> (naglowki, akapity, listy...)
- troszke optymalizacji w css (np: padding: 0px 0px 0px 0px; = padding:0;)

Chwali sie, ze chcesz zaczac i oby zapal Ci nie minal, ale poczytaj jakies artykuliki na temat XHTML i CSS. Na tym forum masz takze mase linkow do roznych ciekawych stron , nic tylko szukac i zglebiac wiedze. Powodzenia

Bastion

15.02.2006, 13:52:57

mam takie pytanie odnosie ampersanda &, na stronie php.pl wyczytalem ze aby php dobrze interpretowal paramatery przekazywane w formacie trzeba robic zabiegi poprzez php_ini. wiec zrobilem sobie maly test :

[PHP] pobierz, plaintext 
<?php
 
print '<a href="index.php?index.php?param1=a&amp;param2=b">test</a> ';
print '<a href="index.php?index.php?param1=a&param2=b">test2</a>';
print $_GET['param1'];
print $_GET['param2'];
 
?>
[PHP] pobierz, plaintext

i oba przypadki działają poprawnie, pomimo tego ze moj konfig php mowi :

Kod

arg_separator.input & &
arg_separator.output & &

Dlaczego mi dzialaja oba przypadki? Pytam poniewaz nie wiem czy to oczywiste ze zadzialalo i czy uzyje takiego linka z & do innej strony z zewnatrz to czy tamten interpreter poradzi sobie z & zamiast &

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.