Weblabor

Nem lehet, hogy olyankor előugrik jobbszélen a görgetősáv, és az tolja balra az egészet?

elvileg ez nem nagyon ugrálhatna semmere a görgő miatt, mert a teljes szélességed, ha jól néztem 900px. a #content-ből hiányzik egy kapcsos zárójel, de biztos ezt csak begépelésnél rontottad el :)
sztem túl sokat float-oltál, inkább csak ott kéne, ahol nagyon muszuáj(#main és #sidebar). ja igen csináltam neked egy #main id-jű divet :)
bemásolom és ha van kérdésed, írj nyugodtan!

<div id="container"> <div id="sidebar"> <div id="top"> <div id="logo"><a href="index.html" title="nyitóoldal"><img src="images/logo.png" alt="" /></a></div> <div id="mainmenu"> <ul id="nav"> <li><a href="#" title="nav 1">nav 1</a></li> <li><a href="#" title="nav 2">nav 2</a></li> <li><a href="#" title="nav 3">nav 3</a></li> </ul> </div> </div> <div id="submenu"> <ul id="subnav"> <li><a href="#" title="subnav 1">subnav 1</a></li> <li><a href="#" title="subnav 2">subnav 2</a></li> <li><a href="#" title="subnav 3">subnav 3</a></li> </ul> </div> </div><!-- sidebar --> <div id="main"> <div id="picture"></div> <div id="content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div><!-- content --> </div><!-- main --> <div class="clear"></div> <div id="footer"></div> </div><!-- container -->

a css-ben a * { ... } miatt meg fognak lincselni :D annak helyére egy "CSS reset" kellene, majd guglizz rá, hogy mi ez, egy ilyen css reset pl itt érhető el: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

* { margin: 0; padding: 0; list-style: none; border: 0; outline: 0; } body { text-align: center; } #container { position: relative; margin: 20px auto; width: 900px; text-align: left; background: #eee; } #sidebar { width: 225px; display: inline; float: left; background: #ccc; } #top { width: 225px; background: #aaa; } #logo { width: 225px; } #logo a { display: block; margin: 0 auto; height: 140px; width: 140px; background: #333; } #logo a img { display: block; width: 140px; height: 140px; } #mainmenu { padding: 10px 0; width: 225px; background: #777; } #submenu { padding: 10px 0; width:225px; background: #555; } #nav, #subnav { display: block; position: relative; margin: 0 10px; } #main { display: inline; float: right; width: 675px; background: #888; } #picture{ width: 675px; height: 360px; background: #444; } #content { position: relative; margin: 10px auto; width: 655px; background: #eee; } #footer { width: 900px; height: 45px; background: #555; } .clear { clear: both; display: block; float: none; height: 0; line-height: 0; font-size: 0; }

ha jól értem, akkor min-height tulajdonságra van szükséged, ami IE6 alatt csak táblázat cellájánál működik, viszont szerintem arra már tegyél magasról :) tehát adsz a #container-nek mondjuk min-height: 800px;-et és akkor már szépen akkoris lent lesz a footer, amikor csak kevés tartalom van.

főelg IE különböző változtaira szoktak külön css-t írni, nem olyan bonyi szerencsére :) /ill tudsz többek között nyomtatáshoz is csinálni külön, annál csak a media="print"-et kell megadnod media="screen, projection" helyett/
------

ie6-ra példa(conditional comment):



ebben azt hiszem minden benne van:

<!--[if IE 6]> ha IE6 <![endif]-->
<!--[if !IE 6]> ha nem IE6 <![endif]-->
<!--[if IE lt 6]> ha kisebb, mint IE6 <![endif]-->
<!--[if IE lte 6]> ha kisebb vagy egyenlő, mint IE6 <![endif]-->
<!--[if IE gt 6]> ha nagyobb, mint IE6 <![endif]-->
<!--[if IE gte 6]> ha nagyobb vagy egyenlő, mint IE6 <![endif]-->

megadhatod simán is, hogy IE és az akkor az minden egyes IE verzióra vonatkozik.
------

@font-face pedig:

neked köszönhetően találtam egy iszonyatosan jó megoldást egy generátorral:

http://www.fontsquirrel.com/fontface/generator


kitallózod a font-ot, feltöltöd, majd legenerálja neked szépen... letöltöd a zip-et, aminek a demo.html-ében van egy "stylesheet.css" - itt lesz a @font-face kódja és a zip-ben még ott fognak figyelni a különbüző böngészőkre szánt font-formátumok(eot, svg, ttf, woff). fel kell őket tölteni a tárhelyre és már csak az elérési útakra kell figyelni :) mondjuk én csak chrome-mal néztem, ott szuper, de dícsérték!

nincs mit :)
igazából az if !IE-s lehetőséget még sosem használtam, csak leírtam minden eshetőséget.
úgy szokott lenni, hogy van egy alap css-ed, amit nem is raksz feltételbe egyáltalán, tehát az globálisan vonatkozik minden böngészőre, és akkor az IE-s bugokat úgy javítgatod ki, hogy a fenti módszerrel 6-os vagy a 7-es bugjai miatt, felülírod a neccesen viselkedő elemek tulajdonságait.
nekem most éppen így néz ki a dolog az egyik oldalnál:

hát igen, félmegoldás, de annyira jó, hogy ne legyen fent a footer, mert az az igazán csúnya, a görgőzést ki lehet bírni, mondjuk, ha pont úgy áll össze a design, az megint más. viszont ha sok a tartalom, amúgy is lent lesz, szóval sztem ez jár a legkevesebb szívással :)
ha nem jó így, akkor marad vmilyen js megoldás.