Weiche für verschidene Auflösungen

Zitat von Donkey

Code

/* 
10px = 0.6em
12px = 0.76em
14px = 0.9em
16px = 1.0em
18px = 1.12em
22px = 1.38em
26px = 1.63em
*/
body
{
font-size:100,01%;
font-weight:bold;
background-color:#EDEDED;
background-image:url('images/bg.jpg');
}
.blue
{
color:#FFFFFF;
font-family:arial;
font-size:1em
}
div#main2
{
top:0px;
width:83%;
}
div#navi2
{
position:relative;
float:left;
width:23%;
text-align:left;
background-image:url('images/tab-bg.jpg');
}
div#inhalt2
{
position:relative;
float:right;
width:75%;
text-align:left;
background-image:url('images/tab-bg.jpg');
}
.cell
{
background-image:url('images/tabcell.gif');
height:1.6em;
text-align:center;
vertical-align:middle;
color:#000080;
font-size:1.1em;
}
.text
{
padding:1em;
}
.navi
{
width:100%;
text-align:center;
}
.navi ul
{
list-style-type: none;
padding: 0px;
margin: 2px 0px;
}
.navi li
{
display: block;
}
.navi li a, .navi li a:link
{
text-decoration: none;
display: block;
color: #FFFF00;
width: 100%;
padding:0px;
margin:6px 0px 6px 0px;
}
.navi li a:hover
{
color: #000000;
background-color: #00BBFF;
}

Alles anzeigen

HTML lass ich mal weg beim Checken

*) Das comment is unnötig am anfang
*) top:0px; in div#main2 is unnötig
*) in .blue fehlt ein ;
*) width:100%; in .navi is unnötig
*) ", .navi li a:link" bei ".navi li a, .navi li a:link" is unnötig
*) width:100% dabei ist unnötig
*) margin kann man darauf kürzen: margin:6px 0px;

Das war beim ersten blick mal so alles

Um noch mal auf das leidige Thema Javascript zurück zu kommen.....

Zum Beispiel kann man den Inhalt der Zwischenablage des Surfers auslesen. Diese und viele andere schöne Sachen sind möglich.

Edit: Kleiner Link zum Thema

mal ganz unabhängig von den tatsächlichen möglichkeiten von javascript:
es reicht imho die tatsache, dass es von vielen firmen standardmäßig deaktiviert wird. Wie begründet das ganze ist mag zwar eine interessante Diskussion sein, ist aber für die Praxis irrelevant. Fakt ist, viele Firmen haben es deaktiviert, also sollte man auch keine wichtigen Inhalte einer Seite nur bei aktiviertem JavaScript verfügbar machen. Es sei denn es ist eine unkommerzielle Seite die es sich erlauben kann zu sagen: "Du hast kein JavaScript aktiviert? Wir wollen dich hier nicht!"

Perfekt formuliert. Damit sollte das Thema, wenn überhaupt, in einem seperaten Thread weiter diskutiert werden.

ich sag nur das hier dazu:

Zitat von Dodo

meine devise: leute die JS deaktivieren sind selbst schuld (mach aber trotzdem barrierefrei und nur kleine spielereien mit JS)

So wie man es machen sollte, also, oder?

ich mach es in der regel so:
ich mache eigentlich alles wichtige (navi und sowas) mit js aber ich sorge dafür, dass auch ohne javascript alles angezeigt werden kann (dann halt mit pagereload) aber sonst ohne irgendwelche einbußen

Eigentlich gibt es nur zwei Lösungen: das Liquid Layout: Eine elegante Art die Seite dem Browserfenster anzupassen (der Königsweg), aber schwer zu händeln, oder ein festes (an der Größe gemessen) Layout. Eine Anpassung mit JS ist immer tragisch, wenn der Nutzer kein JS eingeschaltet hat und die Garantie hast Du nie. Deßhalb gehört die JS-Lösung in die Tonne.

Tach,

Zitat von yeti66

das Liquid Layout: Eine elegante Art die Seite dem Browserfenster anzupassen (der Königsweg), aber schwer zu händeln,

du meinst mit % für die Breiten und alles andere, oder?
Wenn ja, dann ist das imho gewiß kein Königsweg. Da kann dein Layout auf extrabreiten Bildschirmen kann schön komisch ausschauen.
Außerdem kann der IE <7 nicht so gut mit paddings/margins in % umgehen.

Der Königsweg ist imho ein "elastisches Layout", d.h. alles in em definieren, dann bleibt dein Layout immer intakt auch wenn du z.B. im IE den Schriftgrad vergrößerst.;-)
Außerdem ist es nicht schwer zu händeln.

koslowski