Egy kis CSS

Internet: PHP, CGI, stb.

Több konkrét próblámám van, azért adtam ezt a topikcímet.

Az első, hogy készítettem egy weboldalt, de a készítése közben sokmindenre rájöttem, mondjuk arra, hogy úgy rossz ahogy van, legalábbis a forráskód. A kinézet másodlagos, abba nincs beleszólásom, tehát kérem csak a szerkezetre koncentráljunk :)

Sok táblázat volt táblázatban, ezeket elkezdtem DIV-el kiváltani amik feleslegesek. Mindenki mást mond, így nem tudom eldönteni, hogy érdemes e minden táblázatot átírni DIV-el vagy sem?!

A miért rosszak a táblázat című majdnem feltett kérdésemre itt egy példa ami talán Ok. Elég kicsi látszatra, de a forrás mégis elé nagy, vagy csak rosszul entereztem.
Mindenesetre ezzel van két probléma:

  • table alapú
  • minden kép alatt van hézag, ami ff-ban megmozdul ha rákattintok. IE6 alatt nem, marad.

A weboldal készítése során több - számomra nagy - probléma is felmerült. PL, hogy szeretnék ha a két szélső oszlopon lévő vörös csík egyvonalba lenne a középe lévő, 2. sor képeinek az aljával.

A weboldal fő szerkezete még táblázat. Sok problémám volt a böngészőfüggetlenítéssel, most Windows-on ff és ie6 alatt fogjuk rá, egyforma, de otthon Ubuntu-n ff alatt már a vörös csíkok lecsúsznak.

Tehát:

  • Érdemes minden táblázatot kiváltanom? (HTML 4.01 valid oldalt szeretnék)
  • Meg lehet csinálni ezt egyszerűbben DIV-el?
  • 1574 megtekintés

( cARGo- | 2007. 12. 20., cs – 09:55 )

Ezt nem ertem.
Lehet azt biztositani, hogy minden kedves weboldal-latogato ugyanazt a betutipust es betumeretet hasznalja? Nem? Akkor mi a baja a megrendeloknek a csikokkal?....sztem ird at az egeszet flash-be. :)

( tomek73 | 2007. 12. 20., cs – 10:00 )

Szia,
ha már kész az oldal szvsz nem érdemes átírni táblázat nélkülire, mert sok idő. Mondom ezt úgy, hogy én eleve táblázatmentesen tanultam meg weboldalt készíteni. Tehát nekem a táblázatos megoldás a nehezebb :).

Egyébként igen, sokkal egyszerűbben meg lehet csinálni. Például: http://maxdesign.com.au/presentation/definition/dl-image-gallery.htm

( Ajnasz v | 2007. 12. 20., cs – 10:07 )

Érdemes minden táblázatot kiváltanom? (HTML 4.01 valid oldalt szeretnék)
Ezekben az esetekben felesleges a táblázat. Táblázatba olyan dolgokat illik tenni, amit egyébként is táblázatban tárolnál. Pl egy árlista cikkszámm, név, netto ár, bruttó ár. Ez tipikusan táblázat. Hogy az oldalon a helyén legyenek a dolgok, az nem a táblázat dolga.

Meg lehet csinálni ezt egyszerűbben DIV-el?
Meg. 


<div id="main">
  <div class="img"><img src="..." alt=".." /><p>szoveg</p></div>
  <div class="img"><img src="..." alt=".." /><p>szoveg</p></div>
  <div class="img"><img src="..." alt=".." /><p>szoveg</p></div>
  ...
  <div class="clear"></div>
</div>

Style: 


#main { width: 300px; }
.img { width: 100px; float:left; }
.clear { clear:both; }

Valami ilyesmi. A #main szélessége fix, ez fogja tartalmazni a képeket tartalmazó stuffokat. A .img-k a #main/3 px szélességű. Esetleg kisebb margin/padding/border-től függően. A kód nincs tesztelve, de egy hasonlót képzelj el.
--
HUP Firefox extension

Jójó, elindultam az elején, és a fentieket elolvasva készítettem egyet, de ff-ban nem jó: http://rexfa.com/hup.html

Amit te írtál azzal nem sikerült ilyen boxot csinálnom még.
És előjött a te példádnál a probléma, hogy ha a #main szélesség 300px, és beállítok 1px bordert, akkor IE már két sorba rendezni, mert ie hozzáteszi a borderek szélességét ff meg a belső helyez szűkíti. (éljen a szabvány)
Tehát ki kell sakkoznom, hogy akkor a #main szélessége (3x2) 6+ pixel, akkor 306 legyen. Egyforma nem lesz ie és ff alatt

Igen, ezért írtam, hogy a szélességek margin/padding/bordertől függően változhatnak. A példa egy 0,0,0 értékűre vonatkozik, de talán még ott is érhetnek meglepetések a benne lévő elemektől függően.
A példádnál margin: 0 0 5px 0; megoldja a problémád.

Teljesen egyformára felesleges törekedni, hasonlóra lehet. A látogatót egyébként sem fogja érdekelni, hogy egy doboz 2px-lel magasabb vagy alacsonyabb. Ő csak hozzá akar férni a tartalomhoz és kész. A designnak nincs akkora hatása, mint gondolják. Fontos ugyan, de nem annyira, mint sokan feltételezik.
--
HUP Firefox extension

Ezért van lejjebb a 2. és 3. box ff-ban?

Szerintem amit írtál nem jó, mert a dl.main-nek levehetem a bordert, mert nekem úgysem kell, de mi van ha valakinek kell? Csak így tehet keretet a box-nak.
A másik, meg, hogy ha margin: 0px; akkor egybeér a 3 doboz. Tehát kell a margin-right: 5px, de szerintem nem is ezekkel van a baj. A baj, most az, hogy a 2. és . box nincs egyvonalba vizszintesen az 1. box-al. Vagy ezt csak én látom?!

Szia,
nos a megoldás az eltolódásra csak annyi, hogy beteszel egy margin: 0;-t a dl-hez a css-ben:

dl.main {
width: 160px;
height: 160px;
float: left;
border: 1px black solid;
text-align: center;
background-color: #ddd;
padding: 5px;
margin: 0;
margin-right: 5px;
}

vagy így: margin: 0 5px 0 0;

Arra azért figyelj oda, hogy mialatt tesztelsz, már az oldal írásának kezdetén legyen beállítva a helyes doctype.

Azt tényleg az oldal készítésének elején el kell dönteni, hogy milyen beállítások lesznek a mérvadóak: minden az alap beállítások (böngésző) szerint, vagy te határozol meg mindent. Ha az utóbbi, akkor célszerű (én így szoktam) mindent levenni nullára, és a későbbiek során definiálod az egyes elemek tulajdonságait.

Viszont figyelj arra oda, hogy a class sokszor használható egy oldalon, míg az id csak egyszer. (pl a text id-t láttam többször is)

Köszi, végigmentem rajta, de egy gondom van vele.
A középső rész, szépen igazodik a széthúzás és összetolás-hoz, de ha nagyon összetolom, a jobb szélső rész először a középsőre, majd a baloldali oszlopra is fölécsúszik. A szotar.sztaki.hu-n ezt valahogy fixálták. Valami minimum mértet meglehetne adni, amit már nem "nyomjon" össze?

Persze, meg lehet adni a minimum szélességet és a maxot is. Természetesen az IE nem ismeri, tehát hack.
Egyébként is kell néhány IE specifikus dolog, célszerű külön CSS-be tenni:
pl:
!--[if IE]>
link rel="stylesheet" type="text/css" href="../iehack.css"
![endif]--

body
{
margin: 0;
padding: 0;
min-width: 770px;
max-width: 1300px;
}
* html body {
width: expression(document.documentElement.clientWidth < 792? "790px" : document.documentElement.clientWidth > 1302? "1300px" : "auto");
}
egy ilyen megoldással akár...
(a kódból kiszedtem a "<" jeleket)

( kiuka | 2007. 12. 21., p – 17:42 )

nem olvastam el a hozzaszolasokat, de ff alatt ha linkrol van szo, akkor probald ki azt hogy css-be *-ba megadod neki azt hogy:
"-moz-outline: 0;"
az elvileg ezen segit.