[css,arty] zamiast <table>

Dreen · Post autor: **Dreen** » wt wrz 07, 2004 6:12 pm

no tak, ostatnio sie wlasnie zainteresowalem tym (wywalaniem <table> na rzecz arkusza) tylko nie moge znalesc dobrych artow na ten temat i tu prosze o pomoc - na wi w sumie jest kawalek w kursie ale nie jest to dokladnie to o co mi chodzi. arty z w3c sa strzaszliwie zawile, a poza tym brak jest tam wizualnych przykladow a te bardzo by sie przydaly.

ogolnie rzecz biorac, prosilbym o pomoc jak ktos zna arty na ten temat

Kam · Post autor: **Kam** » śr wrz 08, 2004 7:59 am

Wreszcie zaczyna się zainteresowanie tematem i u nas. Czas był po temu wielki. Od czego by tu zacząć? Może na początek trochę "must-read":

http://alistapart.com - przebogata skarbnica wiedzy na ten temat. Źródło wszechrzeczy, można powiedzieć . Serwis, w którym publikuje m.in. sam Zeldman. Radzę przeglądać artykuły lecąc od najstarszych do najnowszych. Te stare (sprzed np. 2-3 lat) są wciąż aktualne.
CSS Discussion wiki - wyjątki z archiwum listy dyskusyjnej dot. layoutu na CSS. Samo miodzio. Stąd właściwie można się nauczyć najwięcej i najszybciej.
CSS Max Design - kilka tutoriali nie do przecenienia.
"Why tables for layout are stupid", "Designing with web standards" - trochę ewangelizmu, na wypadek zwątpienia w trakcie nauki

Na początek chyba wystarczy. Powodzenia w studiach

Im więcej "oświeconych" webdeveloperów, tym lepiej

Dreen · Post autor: **Dreen** » śr wrz 08, 2004 2:03 pm

wielkie dzieki. juz wertuje

masterix · Post autor: **masterix** » śr wrz 08, 2004 4:17 pm

css.maxdesign.com to bardzo ciekawe źródło. Również dziękuję

Kam · Post autor: **Kam** » śr wrz 08, 2004 5:52 pm

No problem

Cieszę się, że mogłem pomóc.

obrobkareczna · Post autor: **obrobkareczna** » czw wrz 09, 2004 3:26 pm

jezusie drogi! czemuz to taki trudne ..

chciałbym zrobic za pomocą styli css tak zebym mieć dwie kolumny na stronie. jedna powiedzmy 450px i druga 300. no i one powinny byc obok siebie (to chyba jasne)

Pomózcie prosze jak zapisac style css dla tych kolumn bo nie daje sobie rady a siedze juz nad tym od rana

ps. no chyba ze wróce do zwykłych tabel ale tego chyba nie chcemy, prawda ?

Kam · Post autor: **Kam** » czw wrz 09, 2004 4:25 pm

Proszę bardzo:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Cols</title>
<style type="text/css">
body {
	text-align:center;
}
div#root {
	background:#eeeeee;
	margin:0 auto;
	text-align:left;
	width:780px;
}
div#nav {
	background:yellow;
	float:left;
	width:450px;
}
div#content {
	background:pink;
	margin:0 0 0 450px;
	width:300px;
}
ul {
	margin:0;
}
p {
	margin:0;
}
.clear {
	clear:both;
	font-size:1px;
	height:1px;
}
</style>
</head>
<body>
<div id="root">
  <div id="nav">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </div>
  <div id="content">
    <div id="lipsum" class="normal">
      <p>Jakiś tekst </p>
      <p>Jakiś tekst </p>
      <p>Jakiś tekst </p>
      <p>Jakiś tekst </p>
      <p>Jakiś tekst </p>
      <p>Jakiś tekst </p>
    </div>
  </div>
  <div class="clear"><!-- --></div>
</div>
</body>
</html>

Wprawdzie istnieje rozwiązanie pozwalające na pozbycie się tego bezsensownego semantycznie diva:

Kod: Zaznacz cały

<div class="clear"><!-- --></div>

...ale na początek daję łatwiejsze rozwiązanie

.Widać na tym przykładzie (kiedy włączone są tła obu kolumn) buga w Explorerze (zwanego "3px text jog"), który powoduje "odstawanie" na 3px jednej kolumny od drugiej. Kiedy włączy się bordery obu kolumn widać, że to nie kolumny odstają, ale tekst w drugiej z nich (wyszła mi w tym zdaniu parafraza tekstu z Matrixa

). Oczywiście bug ten jest do obejścia co najmniej na 2 sposoby, ale to już temat na inną bajkę

.

obrobkareczna · Post autor: **obrobkareczna** » czw wrz 09, 2004 7:02 pm

dziekuje bardzo, dzieki temu wreszcie moge ruszyc dalej ze stronką

Kam · Post autor: **Kam** » czw wrz 09, 2004 7:24 pm

Nie ma sprawy, cieszę się, że mogłem pomóc

obrobkareczna · Post autor: **obrobkareczna** » czw wrz 09, 2004 11:14 pm

heh przepraszam za namolność ale to znów ja

prubuje teraz zrobic 3 kolumny (450,150,150) ale nie daje sie tego zrobic zwykłą modyfikacją kodu który podał kamilp

wszystkie przykłądy jakie przejzałem na sieci mają obszary flexible a ja potrzebuje wszytkich 3 stałej szerokosci.

wszytkie moje pruby w najlepszym przypadku koncza sie 2ma kolumnami w jednym rzedzie i 3cią ale zaczynającą sie co prawdza w swojej jakby kolumnie ale na dopiero od momentu gdzie konczy sie kolumna druga

jesli mozna porsic o rade jak to zrobic to byłbym niezmiernie wdzieczny

ps. te style rzeczywiscie sa swietne tylko trudno sie jest przestawic (przynajmniej mnie) myslowo do nich, ale sie uparłem ze sie pozbede tych <table> ze strony i słowa dotrzymam (oby)

Kam · Post autor: **Kam** » pt wrz 10, 2004 6:57 am

Faktycznie, pozbycie się tabel jako podstawowego budulca layoutu wymaga zmiany w sposobie myślenia. Ale jak to już się uda - jest już z górki

.
Ale do rzeczy - po pierwsze, jeśli dobrze Cię zrozumiałem, w Twoim przypadku całkiem dobrze da sobie radę layout z "rozciągliwą" środkową kolumną (takich przykładów chyba w Sieci jest najwięcej). Tak czy owak musisz te trzy kolumny umieścić w jakimś "wrapperze" (w podanym przeze mnie wcześniej przykładzie takim wrapperem był <div id="root">). Wystarczy więc, jeśli temu wrapperowi nadasz szerokość, która jest sumą szerokości Twoich kolumn (czyli 750px, o ile dobrze liczę z rana

). Wówczas ta rozciągliwa kolumna i tak dostosuje się do pożądanej szerokości.
Odnośnie layoutów 3-kolumnowych w ogóle - polecam przejrzenie tej oto skarbnicy:http://css-discuss.incutio.com/?page=ThreeColumnLayouts i eksperymentowanie. Poza tym naprawdę radzę dokładnie przejrzeć całość http://css-discuss.incutio.com. To tak naprawdę kompletna encyklopedia wiedzy z zakresu CSSa, przydatna wszystkim - i początkującemu, i zaawansowanemu developerowi.
PS. Cieszę się, że coraz więcej ludzi porzuca tabele. Może początkowo przejście na CSSa jest frustrujące, ale z biegiem czasu wychodzi coraz więcej i więcej korzyści

wad · Post autor: **wad** » śr wrz 29, 2004 4:15 pm

Tutaj popatrz
http://css.maxdesign.com.au/listamatic2/

obrobkareczna · Post autor: **obrobkareczna** » czw wrz 30, 2004 8:55 pm

wad: tylko po co ten link ? pytałem o to 10go, dawno temy, twój link był juz podany na poczatku przez Kam-a a poza tym nie ma w nim odpowiedzi na mój problem...

[css,arty] zamiast <table>

[css,arty] zamiast <table>

Re: [css,arty] zamiast <table>

Re: [css,arty] zamiast <table>

Re: [css,arty] zamiast <table>

Re: [css,arty] zamiast <table>

Re: [css,arty] zamiast <table>

Re: [css,arty] zamiast <table>

Re: [css,arty] zamiast <table>

Re: [css,arty] zamiast <table>

Re: [css,arty] zamiast <table>

Re: [css,arty] zamiast <table>

Re: [css,arty] zamiast <table>

Re: [css,arty] zamiast <table>