[layout] Radex's lay, Jaką by tu nazwę dać?:P Opcje

[.radex]

Cały czas nad tym pracuję, ale dam do zobaczenia w pół-skończony prawie skończony layout.

Link: http://radex.byethost18.com/skin/szablon.htm


[Uwaga!] Layout ten nie działa pod IE. Dla IE zrobiona będzie wersja osadzona na tabelkach, lub o stałej szerokości, chyba że coś wymyślę:P

Niezabardzo wiem co zrobić z tym zdjęciem. Bo zbyt mało szerokie by strasznie wyglądało na miejszych monitorach. Naprawdę bez tego zdjęcia wygląda strasznie, ale dopasowanie tego zdjęcia nie jest najlepsze :/ Mam nadzieję że doradzicie mi w sprawie zdjęcia, wersji ie, no i samego laya.

Powyżej stare informacje nijak odnoszące się do dzisiejszego stanu.

Stare odsłony lay'a:

http://radex.byethost18.com/skin/szablon_old.htm
http://radex.byethost18.com/skin/szablon_older.htm - najstarsza wersja, niedziałająca całkowicie pod ie.


Czkeam na opinie

Ten post edytował radex_p 1.06.2007, 14:59:52

[haponiuk]

Cały czas nad tym pracuję, ale dam do zobaczenia w pół-skończony layout.

pracuj, pracuj, pracuj i pracuj

[.radex]

prosiłem o opinie, komentarze a nie nabijanie postów:P

[babejsza]

Błagam Cię ... . Tak prosty lay na prawdę da się zrobić bez hacków, no może tylko z jednym dla przeźroczystości.

Błędy:
- Strona wygląda tragicznie w rozdzielczości 1600x1200.
- brak doctype
- kwiatek: <a href="ie/">
- do tworzenia menu służy znacznik listy nieuporządkowanej
- <br> pomiędzy div'ami :|

Samo zdjęcie powienieneś na końcach zgradientować do czerni i położyć na czarnym tle od lewej do prawej.

Jak trochę nad tym popracujesz to będzie to jakoś wyglądało. Na razie jest bardzo marnie. I pod względem graficznym i kodu.

[phpion]

Poprzednicy właściwie wszystko już napisali. Dodam tylko, że nagłowki wyglądają paskudnie - szczegolnie to pogrubienie pierszej litery... I po co dajesz buttony o poprawności kodu skoro podczas walidacji wywalane są błędy?

Naprawdę bez tego zdjęcia wygląda strasznie

Z nim również

[.radex]

- Strona wygląda tragicznie w rozdzielczości 1600x1200.

- mówiłem, że to zdjęcie jest do bani, pod 1280x1024 i 1024x768 wygląda całkiem dobrze

- brak doctype

- hmm... to ciekawe. Jest doctype HTML4.0 Strict. Są błędy validacji tylko przez serwer [reklama]

- kwiatek: <a href="ie/">

- to tylko tak testowo. Będzie się automatycznie przekierowywało ( if IE6 itd.)

- do tworzenia menu służy znacznik listy nieuporządkowanej

- tylko że nie ma tu jeszcze żadnego menu! To tylko opis

- <br> pomiędzy div'ami :|

- coś nie działało, więc to wstawiłem, ale jest to niepotrzebne

Jak trochę nad tym popracujesz to będzie to jakoś wyglądało. Na razie jest bardzo marnie. I pod względem graficznym i kodu.

- mówiłem że jest w pół skończone

Ten post edytował radex_p 17.05.2007, 17:10:40

[Daimos]

zaczne zliczac strony w sieci co daja znaczniki w3c dla ozdoby bo juz mi sie nie dobrze robi
This page is not Valid HTML 4.01 Strict!
a reszte bedzie mozna oceniac jak skonczysz, bo za wiele tam niema

[babejsza]

- mówiłem, że to zdjęcie jest do bani, pod 1280x1024 i 1024x768 wygląda całkiem dobrze

Tu nie chodzi tylko o zdjęcie

- hmm... to ciekawe. Jest doctype HTML4.0 Strict. Są błędy validacji tylko przez serwer [reklama]

Sorki - jakoś tak przewinąłem źródło, że nie zauważyłem

- to tylko tak testowo. Będzie się automatycznie przekierowywało ( if IE6 itd.)

chodziło mi o slash pomiędzy cudzysłowami

- tylko że nie ma tu jeszcze żadnego menu! To tylko opis

Nie link określa co jest menu a co nie, a to że tworzysz pewną listę. Tu wykorzystałeś do tworzenia listy zły znacznik

- coś nie działało, więc to wstawiłem, ale jest to niepotrzebne

Zdecydowanie .

- mówiłem że jest w pół skończone

Prosileś o rady to je dostajesz .

[.radex]

Nie link określa co jest menu a co nie, a to że tworzysz pewną listę. Tu wykorzystałeś do tworzenia listy zły znacznik

- ale jakie menu skoro tu nie ma menu?! Podaj kod. [do menu używa się ul/ol, li]

Tu nie chodzi tylko o zdjęcie

- a więc o co? Layout ma stałą szerokość 80% ekranu

[babejsza]

- ale jakie menu skoro tu nie ma menu?! Podaj kod. [do menu używa się ul/ol, li]

Albo robisz sobie ze mnie jaja, albo z siebie. Dokładnie wiesz o czym pisałem. to całe test test test ... to nic innego jak menu w wersji projektowej. Już w tej fazie powinno wylądować w liście.

- a więc o co? Layout ma stałą szerokość 80% ekranu

Niby tak, ale wszystko robi się strasznie "naleśnikowate" .

[.radex]

Albo robisz sobie ze mnie jaja, albo z siebie. Dokładnie wiesz o czym pisałem. to całe test test test ... to nic innego jak menu w wersji projektowej. Już w tej fazie powinno wylądować w liście.

Chodzi o header menu? Hmmm... Przecież to są pojedyncze linki i a nie cała lista (nie jest też rozwijana) - więc po co lista? Listy nie używa się do linków, chyba że jest to lista (szczególnie z podgrupami) , menu - wtedy tak.

Niby tak, ale wszystko robi się strasznie "naleśnikowate" .

- Kurde. Doskonale wygląda na miejszych monitorach. Może zrobić tak, aby były dwie ikonki - Zmienna szerokość (te 80%) i stała szerokość (powiedzmy 975px) - chybaże masz lepszy pomysł


EDIT
Na serwer doszła częściowo poprawiona wersja

[babejsza]

Podstawową sprawą, którą powinieneś się zająć to dostosowanie tego do IE FF i Opery na raz. Tak jak pisałem, strona jest banalnie prosta i nic nie stoi na przeszkodzie, aby obsługiwał ją jeden szablon.

- Kurde. Doskonale wygląda na miejszych monitorach. Może zrobić tak, aby były dwie ikonki - Zmienna szerokość (te 80%) i stała szerokość (powiedzmy 975px) - chybaże masz lepszy pomysł

To może być jakiś pomysł. Ja osobiście nie lubię stron, które nie mają stałej szerokości, szczególnie, że korzystam z dużych rozdzielczości. Tyle, że jest to odczucie zdecydowanie subiektywne.

Chodzi o header menu? Hmmm... Przecież to są pojedyncze linki i a nie cała lista (nie jest też rozwijana) - więc po co lista? Listy nie używa się do linków, chyba że jest to lista (szczególnie z podgrupami) , menu - wtedy tak.

Nie ważne czy jest wielopoziomowe czy jednopoziomowe. Menu to menu i robi się je na listach. U ciebie na ten moment powinno to wyglądać tak:

Kod

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

Z kolei dla updatu menu powinieneś dla linków w liście dodać atrybut display: block i width. Będzie łatwiej trafić w link.

[Unité]

[Uwaga!] Layout ten nie działa pod IE. Dla IE zrobiona będzie wersja osadzona na tabelkach, lub o stałej szerokości, chyba że coś wymyślę

To rozwiązanie jest bez sensu jak lokata. ;-)

[.radex]

To rozwiązanie jest bez sensu jak lokata. ;-)

Czy to kolejna osoba ktora pisze post "bo pisze" ? Jeżeli tak sądzisz to daj mi uzasadnienie.

[babejsza]

Ja Ci już dawałem. Lay jest tak banalnie prosty, że nic nie stoi na przeszkodzie, aby zrobić jedną wersję dla wszystkich przeglądarek .

[.radex]

Wiem. Nie o to wcale chodziło, tylko nie lubię jak ktoś krytykuje bez uzasadnienia ( oczywiście co innego jesli ktos uzasadni, bo wtedy jest to konstruktywna krytyka)

[Unité]

Czy to kolejna osoba ktora pisze post "bo pisze" ? Jeżeli tak sądzisz to daj mi uzasadnienie.

Ależ oczywiście. Po pierwsze da się zrobić stronę, która będzie poprawnie wyświetlana pod IE 6 / 7, Operą, czy FireFoxem, bez tworzenia osobnych wersji dla wyżej wymienionych przeglądarek.
Po drugie chcesz zrobić wersję dla IE "osadzoną na tabelkach" co jest rozwiązaniem niesemantycznym (czyt. idiotycznym), ponieważ tabele do tego bynajmniej nie służą.

[.radex]

Ależ oczywiście. Po pierwsze da się zrobić stronę, która będzie poprawnie wyświetlana pod IE 6 / 7, Operą, czy FireFoxem, bez tworzenia osobnych wersji dla wyżej wymienionych przeglądarek.
Po drugie chcesz zrobić wersję dla IE "osadzoną na tabelkach" co jest rozwiązaniem niesemantycznym (czyt. idiotycznym), ponieważ tabele do tego bynajmniej nie służą.

No:P Już to ktoś mówił, ale masz rację. Osobiście nie lubię tabel i uzywam ich jak najrzadziej...

PS: Nowa wersja na serwerze!

Proszę o ocenę, jak to wygląda graficznie (bo te błędy wyeliminuję:P spokojnie)

EDIT:

kolejna poprawka (animacja header menu)

Przypominam link: http://radex.byethost18.com/skin/szablon.htm

[babejsza]

Witam,

graficznie bardzo oszczędne, ale poprawne. Podoba mi się kolorystyka. Ładna zieleń. Co do reszty to się nie wypowiadam póki co bo są ciągle te same błędy, w które dodatkowo brniesz dalej.

[.radex]

Ok:) Tak jak mówiłem, błędami się zajmę (prawdopodobnie dziś), ale cieszę się że się podoba. No i usunąłem już przezroczystość, bo jest gradient, a nie zdjęcie - a po co zwiększać wielkość pliku:P (niedużo ale zawsze, bo cztery forumuły (opacity, KhtmlOpacity, MozOpacity i filter) w kilku miejscach to jednak jest)

EDIT:
No i zastanawiam się jak ten hack wyeliminować i konieczność tworzenia dwóch wersji....

Bo musi coś takiego spełniać:

mieć szerokość zmienną ( % )
przy czym stałą szerokość menu ( px )
i równe długości kolumn.

Bez hacka nie da się tego spełnić na div'ach (da się na samym CSS'ie , ale nie na IE)
A tabele odpadają.

Więc co proponujecie?

Z góry dzięki

Ten post edytował radex_p 22.05.2007, 12:23:33

[Łukasz O.]

żebyś się poduczył...

i może raz kiedyś poczytał coś na necie a nie w odpowiedziach w tym wątku

[.radex]

heh,

Czyli rozumiem, że masz na myśli - poszukać na fourm i w googlach na ten temat? Bo jeśli tak to już trochę szukałem i nic nie znalazłem :/

[Łukasz O.]

Twój szablon - bez hack'ów dobrze wyświetlany w każdej przeglądarce

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
	background:#8dc23b url(bg.png) repeat-x 0 0;
	font:normal 11pt verdana,tahoma,arial,sans-serif;}
h1,h2,h3,h4,h5,h6,div,p,ol,ul,li,table,th,td,a{
	margin:0;
	padding:0;}
 
	#menu ul{
		list-style-type:none;
		padding-left:15px;
		text-align:left;
		font-weight:bold;}
	#menu ul li{padding-bottom:5px;}
	#menu ul ul{
		list-style-type:square;
		padding-left:30px;
		font-weight: normal;
		font-size:10pt;}
	#menu ul ul li{padding-bottom:0;}
 
#main{
	width:80%;
	margin:0 auto 0 auto;
	overflow:auto}
	#main h1{
		color:#155511;
		font-size:xx-large;
		font-variant:small-caps;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		text-align: center;
		padding:5px 10px 5px 10px;
		background-color:#88A987;
		width:200px;
		margin:0 auto 0 auto;}
#horMenu{
	background-color:#ccc;
	list-style-image:none;
	list-style-type:none;
	display:block;
	height:15pt;}
	#horMenu li{
		float:left;
		display:inline;
		width:16.6%;
		text-align:center;}
		#horMenu li a{
			display:block;
			width:100%;
			background-color:#A4B0AA;}
		#horMenu li a:hover{
			background-color:#D9E4CB;}
#menu{
	width:230px;
	float:right;}
#content{
	padding-right:230px;}
#page{
	background:url(back.png) repeat-y 50% 50%}
.clear{margin:0;padding:0;width:100%;font-size:1px;line-height:1px;height:1px;clear:both;}
</style>
</head>
 
<body>
<div id="main">
   <h1>Test site</h1>
   <ul id="horMenu">
   	<li><a href="#">test</a></li>
   	<li><a href="#">test</a></li>
   	<li><a href="#">test</a></li>
   	<li><a href="#">test</a></li>
   	<li><a href="#">test</a></li>
   	<li><a href="#">test</a></li>
   </ul>
<div id="page">
	<div id="menu">
   	<ul>
      	<li>AAAAAAA
         <ul>
         	<li><a href="/">1</a></li>
				<li><a href="/">2</a></li>
				<li><a href="/">3</a></li>
				<li><a href="/">4</a></li>
			</ul>
			</li>
         <li>BBBBBBBBB
         <ul>
				<li><a href="/">1</a></li>
				<li><a href="/">2</a></li>
				<li><a href="/">3</a></li>
				<li><a href="/">4</a></li>
				<li><a href="/">5</a></li>
			</ul>
      </li>
      <li><a href="/">CCCCCC</a></li>
		<li><a href="/">DDDDDDDDD</a></li>
		<li>EEEEEEEEEE
			<ul>
				<li><a href="/">1</a></li>
				<li><a href="/">2</a></li>
			</ul>
		</li>
	 </ul>
   </div>
   <div id="content">
   	<p>Lorem ipsum dolor sit amet, <a href="#as">consectetuer</a> adipiscing <a href="#assada">elit</a>. Sed vulputate elit a magna.
      Phasellus et nunc. Donec magna urna, feugiat vel, ultrices at, eleifend non, ipsum. Sed id magna quis purus pellentesque varius.
      Aenean eu eros. Aenean ante orci, placerat id, ultricies eget, facilisis cursus, magna. Nunc consequat sodales tortor. Maecenas
      consequat diam ultricies velit laoreet dapibus. Nulla tincidunt tellus ullamcorper ipsum. Curabitur vitae tellus at justo iaculis
      malesuada. Aenean arcu elit, tincidunt ut, sagittis vel, hendrerit id, sapien. Etiam non turpis. Nam nisl leo, lobortis quis,
      accumsan sit amet, tincidunt ut, mauris. 
      </p>
      <p>Nunc porta venenatis sem. Nam pretium <code>pharetra mauris  </code>. Donec euismod. Sed dapibus, justo sit amet tempor
      cursus, magna tellus lacinia pede, ut semper diam libero et ligula. Sed sollicitudin leo quis sem. Sed sapien tortor, viverra
      et, convallis et, varius non, nulla. Mauris blandit pellentesque tortor. Etiam tincidunt eleifend justo. Pellentesque eget orci
      in velit pulvinar posuere.
      </p>
   </div>
   <div class="clear"><!-- --></div>
</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext 

Ten post edytował Łukasz O. 23.05.2007, 08:44:43

[.radex]

Dzięki Wielkie Łukasz. Nie są co prawda równe kolumny, ale to jest szczegół. Oszczędziłeś mi sporo roboty w przerabianiu tego (ponieważ nie jestem jeszcze dobrze "obcykany" w robieniu layoutu na divach.

[Łukasz O.]

spójrz dobrze w kod - kolumny są równe (takie złudzenie, które otrzymasz jeśli dodasz plik tła do kodu, który wkleiłem)

[.radex]

No właśnie to tylko złudzenie. Po dodaniu innego tła do content'a a innego do menu widać że content ocejmuje całość, a menu tylko część.

Ale jak mówiłem, dla mnie to szczegół.

[acztery]

bez urazy ale ten szablon jest bardzo słaby ( to mało powiedziane ) lepiej zrob nowy.

[.radex]

bez urazy ale ten szablon jest bardzo słaby ( to mało powiedziane ) lepiej zrob nowy.

Krytykować to umiesz:P Najpierw daj mi argumenty a nie bluzgasz na szablon. Po co mam robić nowy? Po to żeby wyszedł jeszcze gorzej?

No i chodzi ci o wygląd czy o kod (semantyczność itp.)? Bo jeśli o wygląd, to możliwe że używasz IE. Jeśli tak, to właśnie pracuje nad wersją działającą na każdej przeeglądarce.

EDIT:

~Łukasz O - aaaaa.... już rozumiem. Żeczywiście teraz jest dobrze(wkleiłem do złego foldera).

Są problemy z szerokością menu(HeaderMenu oczywiście). Pod IE i FF działa ale O czyta tylko liczbę przed przecinkiem(kropką). Czy da się zrobić tak, aby szerokość się sama dopasywała (no i działała pod ie)? Bo mógłbym zrobić 5x20%, ale po pierwsze primo to troszkę za mało przycisków, a po drugie primo po dodaniu bordera wszystko się spartoczyło

Ten post edytował radex_p 26.05.2007, 09:57:13

[acztery]

no co tu oceniać kilka Div.ów kolory są mdłe. pozatym nie stosuje sie iso tylko utf-8 To jest w xhtml czy html bo z kodu wynika ze html a nie takie bylo pewnie załorzenie.

tak czy siak szablon jest słaby o ile to mozna nazwać szablonem.

[.radex]

no co tu oceniać kilka Div.ów

- powinny odstraszać tabele, ale co ty masz do div'ów?

kolory są mdłe.

- co proponujesz?

pozatym

- po za tym? //poza tym :]

nie stosuje sie iso tylko utf-8

- jak najbardziej stosuje się iso. nie stosuje się za to windows.

To jest w xhtml czy html

- html

bo z kodu wynika ze html

- jak najbardziej

a nie takie bylo pewnie załorzenie.

- było takie założenie. Jest taka zasada - jeśli nie jesteś na 105% pewien, że xhtml jest bez bledow, to użyj html.

tak czy siak szablon jest słaby o ile to mozna nazwać szablonem.

- co proponujesz? Co dla ciebie jest dobrym szablonem? co jest nie tak ( a może tylko to co podałeś)?


Tak więc nie odpowiedziełeś do końca na pytanie. Co jest źle - wygląd / semantyczność, i czy używasz IE.

Ten post edytował radex_p 26.05.2007, 13:16:18

[acztery]

stosuj iso czy co tam chcesz, do kodu nie mam nic nie zagłębiałem się ale chodzi i wygląd. Takie strony mogę robić dzieci w gimnazjum ...

po wypowiedziach wniosjuję ze jestes młody. po szablonie ze zaczynasz przygode z projektowaniem www.... powodzenia

[.radex]

stosuj iso czy co tam chcesz, do kodu nie mam nic nie zagłębiałem się ale chodzi i wygląd. Takie strony mogę robić dzieci w gimnazjum ...

po wypowiedziach wniosjuję ze jestes młody. po szablonie ze zaczynasz przygode z projektowaniem www.... powodzenia

Tak mogą, i zgadłeś co do wieku. Z projektowaniem www także masz rację ( zawszę wolałem programować niż projektować [c++, php itd.]).

Ale nie zmienia to faktu, że jesteś strasznie [bez obrazy] upierdliwy. Nie odpowiedziałeś po raz kolejny na pytanie.

No i kolejne pytanie: Skoro "takie strony to mogąrobić dzieci w gimnazjum" to jakie strony mogą robić osoby w starszym wieku (po wypowiedzi wnioskuję, że np. Ty)? Hmmmm....?

[acztery]

oj krytyki to Ty nie umiesz znosić. Jeżeli Ci sie podoba to ok. Polska to podobno demokratyczny kraj ale ja mam swoje zdanie... Stronie wiele brakuje i juz. pozdro

[.radex]

oj krytyki to Ty nie umiesz znosić. Jeżeli Ci sie podoba to ok. Polska to podobno demokratyczny kraj ale ja mam swoje zdanie... Stronie wiele brakuje i juz. pozdro

Umiem rozróżnić konstruktywną krytykę od "krytyki" po prostu. Nie odpowiedziałeś na moje pytanie! Czego brakuje? Co zrobić aby to ulepszyć?

EDIT: PS: Nie że się czepiam, ale to jest layout, a ty napisałeś "... Stronie wiele..." - to jest duża różnica:P

EDIT:

Nadeszła mała rewolucja... Dałem na serwer poprawioną wersję szblonyu (Jeszcze raz Dzięki Łukasz ).

Nadal pod tym samym adresem: http://radex.byethost18.com/skin/szablon.htm

Natomiast stara wersja na hackach: http://radex.byethost18.com/skin/szablon_old.htm

Proszę o komentarze:P

Ten post edytował radex_p 27.05.2007, 17:28:32

[snipe]

przy 1024x768 pojawia się poziomy pasek przewijania

[.radex]

Poziomy? Na jakiej przeglądarce?

Aaaa.... Na firefoxie? To przez ten header menu. Nie wiem jak zrobić, żeby border nie zwiększał szerokości (w %) buttonów :/ A na operze jest kompletna klapa. Jest po prawej wcięcie, bo opera to 19.96% jako 19% (w przeciwieństwie do FF i IE)... Nie wiem jak to rozwiązać, bo 20% daje cały czas pasek przewijania przez border. Jak to można byłoby rozwiązać?

[babejsza]

[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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Untitled Document</title>
		<style type="text/css">
			ul, li, body {margin:0; padding: 0}
			ul {width: 100%;}
			li {float: left; width: 20%}
			li a {display: block; border: 1px solid #000}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
		</ul>
	</body>
</html>
[HTML] pobierz, plaintext 

[.radex]

Na przykładzie działa, ale niestety nie w praktyce (nie wiem jeszcze czemu).

Link: http://radex.byethost18.com/skin/szablon.htm

Edit:

Zauważyłem, że coś dziwnego stało się z layem pod IE. Nie wyśrodkowuje się poprawnie, a HeaderMenu ma wcięcie po lewej:/

[babejsza]

Nic dziwnego. Dopisujesz, poprawiasz itp. itd.. Kod się bez sensu rozrasta. Masz tu:

[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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Untitled Document</title>
		<style type="text/css">
 
			ul, li, body {margin:0; padding: 0}
			body {background: #8dc23b url(http://radex.byethost18.com/skin/bg.png) top left repeat-x;}
 
			h1 {color:#155511; font: small-caps bold xx-large Verdana, Arial, Helvetica, sans-serif; text-align: center; padding: 0 10px;	background: #88A987;	width: 200px;	margin:20px auto}
 
			#conteiner {width: 80%; margin: 0 auto; border: 1px solid #FFF}			
			ul#top_menu  {width: 100%;}
			#top_menu li {float: left; width: 20%; list-style-type: none}
			#top_menu li a {display: block; border-bottom: 1px solid #FFF;  border-right: 1px solid #FFF; text-align: center; text-decoration: none; background: #999;}
			#right_menu {float: right; width: 230px}
			.clear {clear: both}
 
		</style>
	</head>
	<body>
		<h1>Test Site</h1>
		<div id="conteiner">
		<ul id="top_menu">
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
		</ul>
			fffffffffff
			<div id="right_menu">
				<ul>
					<li>AAAAAAA
						<ul>
							<li><a href="/">1</a></li>
							<li><a href="/">2</a></li>
							<li><a href="/">3</a></li>
							<li><a href="/">4</a></li>
						</ul>
					</li>
					<li>BBBBBBBBB
						<ul>
							<li><a href="/">1</a></li>
							<li><a href="/">2</a></li>
							<li><a href="/">3</a></li>
							<li><a href="/">4</a></li>
							<li><a href="/">5</a></li>
						</ul>
					</li>
					<li><a href="/">CCCCCC</a></li>
					<li><a href="/">DDDDDDDDD</a></li>
					<li>EEEEEEEEEE
						<ul>
							<li><a href="/">1</a></li>
							<li><a href="/">2</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<br class="clear" />
		</div>
	</body>
</html>
[HTML] pobierz, plaintext 

i zacznij z tym od początku.

[.radex]

jedynie na FF wygląda nareszcie tak jak trzeba(mówię o hmenu). Na O i IE po prawej jest małe wcięcie :/ Natomiast dobrze wygląda po wyśrodkowaniu.

Dzięki

[babejsza]

Wcięcie będzie w zależności od (dokładnej) szerokości obrazu. Podajesz procentowe wartości i przeglądarka je oblicza z szerokości. Czasami wychodzi jej dzielenie z resztą i wtedy będzie to małe wcięcie (poskaluj sobie ręcznie okno przeglądarki to zobaczysz o co chodzi) - poza FF, które potrafi sobie poradzić z tym problemem.

Tak na serio to nie znam dobrego rozwiązania tego problemu, chodź wydaje mi się, że będzie on występował tylko przy nie do końca otwartym oknie przeglądarki.

Powiedz dlaczego upierasz się przy zmiennych szerokościach layout'u? Ja osobiście za tym nie przepadam, bo pracuję w bardzo dużych rozdzielczościach, a w takich warunkach część contentowa zazwyczaj jest strasznie rozciągnięta.

[.radex]

Co do Hmenu a w zasadzie jej szerokości to daj se spokój, wyśrodkowałem po prostu.

Dlaczego tak się upieram?

Poniważ na miejszych rozdzielczościach (1280x1024 w dół) wygląda to bardzo dobrze, a na mojej rozdzielczości nie lubię takich małych contentów. Dlatego też wygodnym rozwiązaniem jest dostosowania szerokości bloku do ilości linii monitora.

1600x1200 to wciąż około 0.8% (w Polsce wg. ranking.pl) użyszkodników(z czego pewnie większość to gracze - a to jest sprzeczne trochę z tematyką strony do której robię layout) - tak więc sądzę że nikomu to nie będzie przeszkadzało. A jeśli będzie kogoś to dręczyło to pstryk na szerokość w px(taki przełącznik).

W takim przypadku sądzę, że dla większości użytkowników będzie to wygodniejsze. Przepytałem także kilkunastu kumpli z których część przepytała swoich kumpli no i wychodzi na to że praktycznie wszyscy wolą szerokość zmienną (w %).

Edit:

Już prawie skończyłem. Wersja tradycyjnie pod tym samym adresem

Dla przypomnienia:

Nowa wersja: http://radex.byethost18.com/skin/szablon.htm
Wersja poprzednia: http://radex.byethost18.com/skin/szablon_old.htm
Wersja najstarsza (ta na hackach): http://radex.byethost18.com/skin/szablon_older.htm

Jak poradzić na to, aby menu prawe zachowywało się tak jak w poprzedniej wersji, tzn. przy większym tekście, aby ten tekst nie chował się pod menu, tylko menu stanowiło odrębny blok?

Szkoda, że najstarsza wersja okazała się nie działać pod ie. Ponieważ pod względem wyglądu najbardziej mi się podobała - żadnych wcięć, proste kolumny, zero problemów. Ale musiał się znaleść M$ z jego "wspaniałym" IE Z tabelami nie ma takich problemów, no ale oczywiście nie trzeba mi tłumaczyć dlaczego ich nie używać

Ten post edytował radex_p 28.05.2007, 16:01:48

[Łukasz O.]

Jak poradzić na to, aby menu prawe zachowywało się tak jak w poprzedniej wersji, tzn. przy większym tekście, aby ten tekst nie chował się pod menu, tylko menu stanowiło odrębny blok?

właśnie dlatego, że poprawiasz, a nie patrzysz jak było w oryginale - dałem dwa bloki, a Ty jeden

[HTML] pobierz, plaintext 
<!-- tak ma być -->
<div style="padding-right:250px;">
   <h2>Strona główna</h2>
   <p>Lorem ipsum dolor sit amet, <a href="#as">consectetuer</a> adipiscing <a href="#assada">elit</a>. Sed vulputate elit a magna.
   Phasellus et nunc. Donec magna urna, feugiat vel, ultrices at, eleifend non, ipsum. Sed id magna quis purus pellentesque varius.</p>
</div>
[HTML] pobierz, plaintext 

[.radex]

heh. Masz rację. Dziękuję za przypomnienie o tym głupim błędzie. Poprawiona wersja jest na serwerze. W tej chwili robię poprawki

Edit:

Znów mała rewolucja:P

Poprawione kolory HeaderMenu,
dodany styl dla <code>
dodany styl dla <abbr>

zrobione style dla "list kodu" czy jak to tam nazwać


Przypominam link: http://radex.byethost18.com/skin/szablon.htm

Co sądzicie o tych listach z kodem? Widziałem coś takiego na kilku stronach i się mi spodobało, podejrzałem źródło, no i dowiedziałem się jak to jest zrobione:P

Proszę o komentarze.

Edit:

Poprawiona wersja na serwerze.

Zmiany:
dodane "podbloki", a konkretniej styl h3.

Problemy:

Jak zrobić, aby po dodaniu dłuższego tekstu( nie w <p>) tekst nie wychodził poza cały blok( pod IE: aby menu nie rozszerzało się) , a w <p> aby nie robił przerw w tekście z bloku głównego.

Dlaczego tak się dzieje? Dlaczego tak się nie robi w LiścieMenu? Co zrobiłem źle? To chyba nie jest niedomknięty tag, bo validator niczego nie pokazuje :/ Prosze o komentarze do layouta i pomoc w rozwiązniu problemu.

Okazało się, że tekst w menu robi lukę w tekście z bloku głównego wtedy, kiedy tekst z menu koliduje z "listami stylów". Dlaczego tak się dzieje? A problem z dłuższym tekstem nie został rozwiązany

Edit:

Wersja na serwerze, pokazująca problem opisany wyżej.. (wysunięcia tekstu pod O i FF, całkowita kaszana pod IE)

I dodany został styl <hr>


Pozdrawiam

Ten post edytował radex_p 29.05.2007, 16:50:53

[frickle]

No to jeszcze tego kwiatka popraw:

[.radex]

Rozumiem, że chodzi ci o niezawinięcie tekstu i luka w głównym bloku. Przeczytaj poprzedni post. Nie wiem właśnie dlaczego tak się dzieje, natomiast wiem w jakiej sytuacji to się dzieje.

Edit:

Cały czas layout pod adresem: http://radex.byethost18.com/skin/szablon.htm .

Zmiany:

dodane style elementów <form>:

fieldset
label
legend
input
textarea
input[type=submit]
optgroup

Problemy:

Cały czas jest problem z dziwnym zachowaniu się tekstu - problem opisany dwa posty wyżej.

Prócz tego:

dodałem osobny styl media=print (okrojona wersja przeznaczona do druku). Testowo wydrukowałem i wygląda... no... całkiem ładnie.

TODO:

style różnych znaczników( na pierwszy ogień stawiam blockquote).

Jak sprawa wygląda pod IE:

Nienajgorzej.

Ignoruje wszystkie *:hover prócz dla <a> ( np. li:hover) nie licząc a:visited:hover. Nie rozumie <abbr>. Nie rozumie input[type=submit] w css'ie oczywiście no i chyba to wszystko

Pozdrawiam

Edit:

Cały czas layout pod adresem: http://radex.byethost18.com/skin/szablon.htm .

Zmiany:

dodane style:
table
td
th
cite
q
dfn
kbd
blockquote

Problemy:

Cały czas jest problem z dziwnym zachowaniu się tekstu - problem opisany dwa posty wyżej.

Pozdrawiam

Ten post edytował radex_p 2.06.2007, 10:55:09