Weblabor

Sziasztok,

épp egy Wordpress témát készítek egy sportegyesületnek és jelenleg odáig jutottam el, hogy kész van egy valid XHTML (transitional) és CSS kód, ami a modern böngészőkön jól jelenik meg és szabványos, tehát elsőre minden jónak tűnik.

Azonban gondoltam kikérem a tapasztalt Weblaborosok véleményét, hogy min lenne érdemes változtatni, mit lehetne elegánsabban megoldani, mi nem a legcélravezetőbb megoldás. Kérem ezt azért, mert nem vagyok biztos benne, hogy a legmegfelelőbb megoldásokat választottam a layout elemek pozicionálásánál, tele van az egész float-okkal, meg position:relative-okkal, nem tudom professzionális szemszögből mit szóltok a dologhoz. Többé kevésbé egy faux columns-os megközelítést alkalmazok, csak éppen van egy háttérben lévő logó, ami megkeveri a dolgokat egy kicsit.

Ez főleg azért merült fel bennem, mert természetesen IE 6 alatt teljes mértékben össze-vissza jelenik meg az egész (és ha esetleg kicsit ésszerűbb lenne a layout, akkor esetleg kisebb <!--[if IE 6]> rész kellene). (És én azért csak szeretném többé-kevésbé támogatni az IE6-ot, nálam még 5%-környékén van a részesedése.)

Másrészt pedig azért, mert bár Windows-on az összes főbb böngésző aktuális verzióival rendesen jelenik meg, amikor átváltottam az Ubuntu 10.04-ben lévő aktuális Firefox-ra (nem tudom alapértelmezetten mi van benne, de szerintem 3.6.3-nál nem régebbi) akkor a postok befloatoltak bal oldalra a bal sidebar-ba, miután véget ért a menü rész.

Tehát összefoglalva annyit szeretnék kérni a Weblabor közösségétől, hogy:

1) Nézzetek már rá a kódra, ti hogyan csinálnátok elegánsabban, mi az, ami nem minőségi, professzionális benne, milyen konvenciókat nem követek, mi nem tetszik, stb. Legyetek kíméletlenek a kritikával nyugodtan, autodidakta módon tanultam a XHTML-t és CSS-t, szóval biztos, hogy vannak hiányosságaim.

#right{
opacity: .5;
position:relative;
width:200px;
margin:0;
padding:0;
float:left;
background-color:#333; <-----ide mit kell írni a hátttérkép megjelenítéséhez?
}

#right{
opacity: .5;
position:relative;
width:200px;
margin:0;
padding:0;
float:left;
background-image:"kep.jpg"; <----- így nem működik!
}