[HTML][html/xhtml] Dlaczego nie działa? Opcje

[adam_krk]

Przy normalnym, niezgodnym ze standardem nagłówku strona wygląda poprawnie:
http://www.programypartnerskie.xorg.pl/index2.php

Ale wystarczy abym dodał <!DOCTYPE... itd. (dwie pierwsze linijki skopiowane z kodu tego forum) aby strona wyglądała tak:
http://www.programypartnerskie.xorg.pl/index.php

Dlaczego tak się dzieje, i co zrobić by wyglądało poprawnie?

[pedro84]

Przeleć walidatorem a zobaczysz błędy. Fatalny kod.

[krzysztof_kf]

Jak coś kodujesz jakiś layout to zawsze wklej sobie odpowiednie DOCTYPE bo bez tego ani rusz normalna rzecz teraz sobie poprawiaj ;]

[adam_krk]

pedro84> Widać, że w [1] nie podłączył pliku ze stylami, mimo że kod jest poprawny. Validator nie wskazał tej linijki. Dlaczego uważasz, że kod jest fatalny?

krzysztof_kf> Dzięki za wskazówkę, zapamiętam. Niestety nie wskazuje jak sobie poradzić z tym problemem.

[pedro84]

1. 150 niepotrzebnych divów.
2. Tabelka (widzisz gdzieś tam dane tabelaryczne?)
3. <br/>...
4. Obrazki po prawej powinny być w liście.

CSS tak samo.

[krzysztof_kf]

adam_krk masz ok tylko popraw css na małą czcionkę i będzie git z doctype . bo masz selektory o nazwie #NAGLOWEK popraw wszędzie na #naglowek ;]

Ten post edytował krzysztof_kf 7.05.2010, 22:18:44

[adam_krk]

pedro84>

Ad 1. Ilość divów zminimalizowana. Wszystkie otoczyłem czarną ramką, więc widać gdzie są. Jeśli zobaczysz jeszcze jakąś która powinna być czymś innym to daj znać, będę wdzięczny.
Ad 2. Tabelka -> ul (edit: było divy, ale ul lepsze)
Ad 3. Tam gdzie się dało to wyrzuciłem. Jeśli są gdzieś jeszcze niepotrzebne to p. ad. 1 (:
Ad 4. Mówisz i masz.

CSS uszczuplony.

Czy kod nadal jest fatalny?

krzysztof_kf>

Dzięki, to faktycznie rozwiązało problem (: Ten katalog to niezła rozgrzewka przed czymś większym...

======

Pojawił się kolejny problem:

Po uszczupleniu css warstwa z logiem i tytułem nie da się wycentrować.

W warstwie 1:

[HTML] pobierz, plaintext 
#tlo_naglowka
{
	background-image: url(../graphics/tytul_pasek.jpg);
	background-repeat: repeat-x;
	height: 140px;
}
[HTML] pobierz, plaintext 

jest umieszczona warstwa 2:

[HTML] pobierz, plaintext 
#naglowek
{
	text-align: left;
	font-family: verdana,arial,sans-serif;
	float: left;
	width: 635px;
	margin: 0 auto;
}
[HTML] pobierz, plaintext 

i tej dwójki nie wiem jak ruszyć na środek... Jak to zrobić?

Ten post edytował adam_krk 8.05.2010, 00:35:04

[pedro84]

Po uszczupleniu css warstwa z logiem i tytułem nie da się wycentrować.

Pomyśl...jak chcesz wycentrować coś czemu nadajesz float:left;? (IMG:style_emoticons/default/smile.gif)

Co do stosowania <br/>. Nie możesz po prostu obrazkowi nadać display:block;? CSS już lepszy, kod HTML także. Jak masz jeszcze jakieś problemy, to wal.

Ten post edytował pedro84 8.05.2010, 00:21:37

[adam_krk]

Ostatni już problem (:

W tej chwili #naglowek otacza ramka (border: 1px solid black;). Po jej usunięciu (tylko tej jednej linijki) nagłówek się rozjeżdża - dolarki opadają o kilkanaście pikseli, tytuł i podpis zostają na swoich miejscach, a na górze strony na całej szerokości pojawia się czerwony pasek. Dlaczego tak się dzieje i jak można to naprawić?

[krzysztof_kf]

Zmień na takie coś

[CSS] pobierz, plaintext 
}
#naglowek
{
	text-align: left;
	font-family: verdana,arial,sans-serif;
	color: white;
	font-variant: small-caps;
	width: 635px;
	margin: 0 auto;
}
#naglowek img
{
	border-bottom: 1px solid black;
	margin-right: 20px;
	float: left;
}
p.tytul
{
        float: left;
	font-weight: bold;
	margin: 30px 0 0 0;
	font-size: 1.5em;
}
[CSS] pobierz, plaintext 

Ten post edytował krzysztof_kf 8.05.2010, 09:19:58