Forum PHP.pl

Tutaj masz opisane co zrobić by dla IE nie serwować XHTML - którego nie zna ta "doskonała" przeglądarka: http://www.doktorno.boo.pl/content_negotiation.php.

Można też skorzystać z mod_rewrite dla stron statycznych:
http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html - na dole strony.

Nie robiłem tego ale korzystając z np jQuery to łatwe, chwila zabawy i powinno działać. Musisz dodać śledzenie kliknięć na określonych elementach i gdy ktoś taki kliknie dajesz wrap (w jQuery) z formularzem o określonych atrybutach. Następnie po zapisaniu znowu przełączasz widoczność strona przeładowuje Ci się i masz już stronę bez formularza, chyba, że chcesz użyć ajax-a tu będziesz musiał usunąć formularz. Ale tutaj będziesz musiał skopiować zawartość textarea lub value w inpucie i utworzyć taki element za pomocą js, a następnie usunąć cały formularz remove (w jQuery).
Myślę, że z wspominanym jQuery nie będzie to trudne zadanie.

[HTML] pobierz, plaintext 
<div style="background-color: #FFFFFF;margin:0 auto; width: 875px; height: 450px ; padding: 3px 3px 3px 20px;">
[HTML] pobierz, plaintext 

Po co ci background-position było? Jak dajesz kolor to wypełni on cały kontener.

// edit
align=center było dobre ładnych kilka lat temu, więc proszę nie wracajmy do tego.

Dodaj do nich float:left;

-moz-opacity jest jak najbardziej poprawne, jest to tylko styl dla Gecko i zastępuje opacity wprowadzone w jeszcze nie wydanej specyfikacji CSS3. Dodam tylko, że FF 1.5 nie zna opacity (chociaż FF2 na dobre się zadomowił na komputerach, to jeszcze kilka FF1.5 pozostało).

vertical-align? To nie tabelka, więc nie zadziała. Spróbuj tak:

[HTML] pobierz, plaintext 
a {line-height:18px}
[HTML] pobierz, plaintext 

To nie dodawaj tego jak ci się strona sypie:) A poważnie to resetuj na początku domyślne style przeglądarki, łatwiej później wszystko ustawić. Arkusze do resetu znajdziesz u wujka Googla, ja tu wkleję ten co stosuję:

[HTML] pobierz, plaintext 
/*reset styles*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
lockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;}
q:before,q:after{content:"";}
fieldset,img,abbr,acronym{border:0;}
[HTML] pobierz, plaintext 

Przegladarki mają swoje domyślne style, np p ma margin:1em 0; jeśli chodzi o h1 to w tej chwili nie pamiętam.

OptiPNG, jak masz Gimpa to zapisuje on mniejsze pliki i nie tylko png ale i jpg i gif przy porównywalnych jakościach.

Jeśli masz w dodatku Linuksa to napisz na PW, albo w temacie to podrzucę ci skrypcik, który ułatwia bardzo pracę z tym narzędziem.

W XHTML 1.0 Strict element formularza jakim jest input MUSI być zamknięty w innym znaczniku. Jakim? Walidator już Ci odpowiedział.

Usuń ten margin-top z pasekin i dodaj do pasek padding-top:1px

OK. Sam tego chciałeś
1. HTML 4.01 Translational - to tak się jeszcze pisze?
2. Te style wpisane w atrybut style to na pewno dobry pomysł?
3. div style="p" zastępuje Ci znacznik p? Ale możesz się pochwalić stroną "na divach" - i to dosłownie...
4. Przypomniałeś mi o istnieniu czegoś takiego jak znacznik font.

Graficznie oprócz może nieco zepsutego nagłówka jest ok.

Podsumowując kod - walidator do niczego się nie przyczepił, ale napisać stronę poprawnie walidującą się jako Translational to nie problem, brak semantyki kodu, brak optymalizacji pod wyszukiwarki. Tak się pisało 5-8 lat temu.

Możesz dodać trzeci div który to wszystko przesłoni o szerokości 20px, maginesem lewym odsuniesz go na -10px, oczywiście pozycjonowany absolutnie z left:50%.

Uprzedzam, że nie testowałem tego i piszę "z palca".

Ale myślę, że da się to też inaczej wyciąć, tylko trzeba się dobrze zastanowić patrząc na psd.

[HTML] pobierz, plaintext 
<div id="container">
    <div id="container2">
        <!-- tresc strony -->
    </div>
</div>
[HTML] pobierz, plaintext 

i css:

[HTML] pobierz, plaintext 
#container {background:url(sciezka/do/obrazka1) repeat-x top;}
#container2 {widht:100%;float:left;background:url(sciezka/do/obrazka2) repeat-x bottom;}
[HTML] pobierz, plaintext 

To rozwiązanie prostsze, ale musisz utworzyć obrazki o odpowiedniej wysokości i nie jest odporne na różne rozdzielczości.

Inne rozwiązanie to pozycjonowanie absolutne:

[HTML] pobierz, plaintext 
<div id="container"></div>
<div id="container2"></div>
<div id="strona">
    <div id="main">
        <!-- tresc -->
    </div>
</div>
[HTML] pobierz, plaintext 

css:

[HTML] pobierz, plaintext 
#container {
background:url(sciezka/do/obrazka1) repeat;
width:100%;
height:50%;
top:0;
left:0;
position:absolute;
}
#container2 {
widht:100%;
height:50%;
background:url(sciezka/do/obrazka2) repeat;
bottom:0;
left:0;
position:absolute;
}
#strona {
position:absolute;
top:0;
left:0;
z-index:100;
width:100%;
}
#main {
width:900px; /*tutaj zmień sobie*/
margin:0 auto;
}
[HTML] pobierz, plaintext 

Zdefiniowałeś height dla div.top. I wszystko jasne - wstaw albo min-height albo powieksz do takiej wartości jaka ma być, albo usuń height.

[HTML] pobierz, plaintext 
div#container {
    margin:0 auto; /* to usuń */
    width:100%;
    background-image:#fff url(images/top_bg.gif) repeat-x top;
}
div#content {    
    background-image: url(images/top_bg.gif);/* to usuń */
    background-repeat: repeat-x;/* to usuń */
    background-position: top;/* to usuń */
    text-align: center;/* to usuń */
    width:847px;
    margin:0 auto;
}
div#header {
    margin-left: auto;/* to usuń */
    margin-right: auto;/* to usuń */ 
    width: 874px;/* to usuń */
    width:100%;
    height: 274px;
}
div#wih {
    position: relative;
    background-image: url(images/world_in_hand.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin-left: 274px;/* to usuń */
    width: 600px;/*tutaj masz 2 wyjścia, albo tutaj szerokość zmniejszyć o 4px albo w logo zmniejszyć, tak aby obie dały w sumie 874px*/
    float:right;
}
[HTML] pobierz, plaintext 

Tutaj masz zmiany, to co z komentarzem to usuń u siebie, bez komentarza dodaj, pozostałe pozostaw bez zmian. Nie testowałem. Zastosuj się do tego i na 90% będzie poprawnie we wszystkich przeglądarkach. Na twoim miejscu pod logo podlinkowałbym stronę główną, to nic że może to byc obok w menu, już tak się ludzie przyzwyczaili, że logo prowadzi na główną.

Jeśli wewnątrz td to tak:

[HTML] pobierz, plaintext 
td a {text-decoration:none;color:inherit}
[HTML] pobierz, plaintext 

nie zadziała to w IE które nie rozumie inherit, lepsze rozwiązanie to (czytaj: odporne na bugi IE):

[HTML] pobierz, plaintext 
td.fontdark a {text-decoration:none;color:#366;}
[HTML] pobierz, plaintext 

Teksty powinny być generalnie w p. Div jest takim znacznikiem wyznaczającym pewną część strony, dobrze np. nadaje się do scalenia w całość elementów które tworzą treść stopki, kolumn layoutu, często wykorzystywany jest do nadawania tła pod inne elementy. Dlatego czasami widzimy w kodzie strony kilka zagnieżdżonych w sobie div-ów, a dopiero w samym środku np. treść newsa...

//edit
Co do nagłówków: jeśli mamy tytuł strony dobrze dać go w <h1>, napis newsy w <h2>, tytuł newsa w <h3> (niektórzy tytułu strony nie dają w <h1>, zalezy to od ich polityki optymalizacji kodu pod wyszukiwarki, wtedy to się przesunie o jeden poziom, ale też należy dążyć do tego by nie było więcej niż jedno <h1> na stronę).

Zalet pisania kodu opartego na prawidłowych znacznikach jest wiele, jako przykład podam SEO, osoby korzystające ze screenreaderów, osoba która później wprowadza jakieś zmiany szybko zorientuje sie w strukturze kodu.

1. Jakie masz DOCTYPE?
2. Czy przed DOCTYPE nie masz nic więcej?
3. Czy dla div id="main} nadałeś te style co wcześniej pokazywałeś dla body?
4. Dla body nadaj styl: text-align:center, dla div#main text-align:left - wyśrodkuje stronę także w IE5.5 (używa ktoś jeszcze? ).

Dodaj jakiś wrapper okalający całą treść strony i dla niego nadaj taki styl jak podałeś wyżej.

[HTML] pobierz, plaintext 
...
<body>
<div id="main">.... tresc ...</div>
</body>
...
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
function clearText()
{
document.getElementById('help').innerHTML = 'Witaj...';
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="pl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="pl-Pl" />
[HTML] pobierz, plaintext 

//powód edycji - zmiana z en na pl

A jaki masz adres w pasku przeglądarki? Zaczyna się od http:// czy od file://, bo jeśli od file:// to musisz uruchomić to z serwera lokalnego, o ile takowy posiadasz. Jeśli nie masz musisz zainstalować.

[HTML] pobierz, plaintext 
#div:hover
{
background-color: #D90FDB;
}
[HTML] pobierz, plaintext 

Do tego dla IE6 które nie obsługuje hover dla innych elementów niż linki skorzystaj z tego.

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="pl">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body
{
color: #494949;
font-family: Tahoma, Helvetica, Verdana, sans-serif;
text-align: center;
font-size: 12px;
margin: 0;
}
 
#site
{
background-color: black;
width: 800px;
margin: 80px auto 0 ;
 
/*dodaj to lub kod przy którym jest poniżej komentarz*/
overflow:auto;
}
 
#menu
{
background-color: blue;
width: 220px;
float: left;
margin: 0 0 0 10px;
}
 
#tresc
{
background-color: yellow;
width: 300px;
float: right;
margin: 0;
}
</style>
</head>
<body>
<div id="site">
<div id="menu">
tekst2
</div>
<div id="tresc">
tekst1
</div>
 
<br style="clear:both" /> 
 
</div>
</body>
</html>
[HTML] pobierz, plaintext