Zoom und andere Auflösungen zerschießen die HP

nietaL · 16 Sep. 2013

Hey Leute,

solange ich HTML schreibe und Programmiere habe ich immer ein Thema unter den Tisch fallen lassen, weil ich nie Lust auf das Problem hatte. Man darf mich schelten. Auf den Bildern sieht man drei Zoom Stufen, alle zeigen ein anderes Erscheinungsbild derselben HP an. Bevor ich meinen PC gewechselt habe, sah es bei 100% aus, wie auf dem neuen PC bei 40%.

Woher kommen diese gewaltigen Anzeigeverschiebungen?

(40%, 100%, 120%)

epiphora · 16 Sep. 2013

Vielleicht verwendest Du einen anderen Browser?

Wie wurde denn die Höhe des select-Elements festgelegt? Wenn Du das nicht nur mit size, sondern einem festen Höhe in CSS machst, müsste das doch mitskalieren.

Kugelfisch · 16 Sep. 2013

Möglicherweise hast du auf deinem neuen PC betriebssystemweit eine Vergrösserung aktiviert. Das ist bei hohen Auflösungen ja auch durchaus sinnvoll. Auf deinem Website hast du scheinbar Annahmen bezüglich der Grösse bestimmter Schriften getroffen - das ist aus eben diesem Grund wenig sinnvoll. Könntest du einen Link zur Website posten oder HTML-Dokument und zugehörige Stylesheets zur Verfügung stellen, damit man sich das einmal genauer ansehen kann?

nietaL · 16 Sep. 2013

Ich weiß, dass ich beim Style immer etwas schludere. Bitte nicht schimpfen

Ich denke aber, dass das Problem etwas grundsätzliches ist. Ja, ich habe Windows auf 120% gesetzt. Aber das sollte es doch nicht dermaßen zerschießen. Ich werde sicherlich nicht der einzige sein, der die Vergrößerung nutzt.

HTML-Dokument
[src=html5]

<!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>
<link rel="shortcut icon" type="image/x-icon" href="img/fav.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ArcaVerborum</title>
<link rel=stylesheet type="text/css" href="stil.css">

<script type="text/javascript">
var i = 1,timer;
window.onload=function() {
timer = setInterval('blink()', 300);
}
function blink() {
if (i<7) {
if (i%2 == 0) {
document.getElementById('status').style.backgroundColor = '#FF6600';
} else {
document.getElementById('status').style.backgroundColor = '#FFFFFF';
}
} else {
document.getElementById('status').style.backgroundColor = '#FF6600';
clearInterval(timer);
}
i++;
}
</script>


<script type="text/javascript">
// <![CDATA[

function hideColumn (colIndex) {
var table = document.all ? document.all.lern :
document.getElementById('lern');
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[colIndex].style.display = 'none';
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[2].style.display = 'none';
}

function showColumn (colIndex) {
var table = document.all ? document.all.lern :
document.getElementById('lern');
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[colIndex].style.display = '';
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[2].style.display = '';

}

function aufnehmen ()
{
var selectedText=(
window.getSelection
?
window.getSelection()
:
document.getSelection
?
document.getSelection()
:
document.selection.createRange().text
);
if(!selectedText || selectedText=="")
{
alert('Es wurde kein Text markiert!');

/* if(document.activeElement.selectionStart)
{
selectedText = document.activeElement.value.substring(
document.activeElement.selectionStart
. document.activeElement.selectionEnd);
}

*/
} else {

window.location.href = "neu.php?aufnehmen=" + selectedText;
}
}

// ]]>
</script>

</head>

<body>
<script type="text/javascript" src="wz_tooltip.js"></script>

<div style="position:absolute; width:750px; height:535px; top:3%; left:20%; background-color:#003366">

<!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>
<link rel="shortcut icon" type="image/x-icon" href="img/fav.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ArcaVerborum</title>
<style type="text/css">
.status{
background-color:#FF6600;
color:#FFFFFF;
position:absolute;
width:750px;
height:20px;
left: 0px;
top: 520px;
font-family:Arial;
text-align:center;
font-style:italic;
vertical-align: middle;
}

</style>
</head>

<body>

<div style="width:291px; position:absolute; height:37px; top:10px; left:439px; overflow:hidden; line-height:1.5; text-align:right;" >
<a class="text">salve JACOB</a>
</div>

<div style="width:117px; position:absolute; height:32px; top:9px; left:14px; overflow:hidden; line-height:1.5" >
<span style="font-size:12px; color:#FFFFFF" >◀ </span><a onmouseover="Tip('zurück')" onmouseout="UnTip()" href="main.php" class="text-button">rursus</a></div>

<div style="width:286px; position:absolute; height:119px; top:408px; left:20px; overflow:hidden; line-height:1.5" >
<img src="img/logo_kl.jpg">
</div>

<div style="position:absolute; top:67px; left:72px; overflow:hidden; line-height:1.5; height: 497px; width: 745px;" >
<table width="707" border="0">
<tr>
<td width="393">
<form id="form3" name="form3" method="get" action="/_ARCA/edit.php">

<div align="left">
<p>
<input name="suche" type="text" value=""/>
<input class="button" type="submit" name="buttonsuche" id="buttonsuche"
onmouseover="Tip('suchen')" onmouseout="UnTip()" value="quaerere" />
<input class="button" type="button" value="verba omnia"
onmouseover="Tip('alle Vokabeln')" onmouseout="UnTip()"onclick="self.location.href='edit.php?suche=&buttonsuche=quaerere'" />
</p>
</div>
</form>
<hr />
<form id="form2" name="form2" method="post" action="/_ARCA/edit.php">

<table class="text_klein" width="277" border="0" cellpadding="3">
<tr>
<td width="128" onmouseover="Tip('bearbeiten')" onmouseout="UnTip()">
<input name="option" type="radio" value="" onclick="document.form2.lat2.disabled=false;document.form2.deu2.disabled=false"
checked="checked" />
mutare</td>
<td width="131" onmouseover="Tip('löschen')" onmouseout="UnTip()">
<input type="radio" name="option" value="del" onclick="document.form2.lat2.disabled='disabled';
document.form2.deu2.disabled=true"/> delere</td>
</tr>
<tr>
<td height="34" onmouseover="Tip('auf Stufe 1')" onmouseout="UnTip()">
<input type="radio" name="option" value="stufe1" onclick="document.form2.lat2.disabled='disabled';
document.form2.deu2.disabled=true"/>
in gradum 1</td>
<td onmouseover="Tip('auf Lernen')" onmouseout="UnTip()">
<input type="radio" name="option" value="neu" onclick="document.form2.lat2.disabled='disabled';
document.form2.deu2.disabled=true"/>
discendum est</td>
</tr>
</table>

<br />

<input type="hidden" name="lat" id="lat" /> <input type="text" name="lat2" id="lat2" />
<span class="text_klein" onmouseover="Tip('Latein')" onmouseout="UnTip()">Latine</span>
<br /><br />
<input type="hidden" name="deu" id="deu" /> <input type="text" name="deu2" id="deu2" />
<span class="text_klein" onmouseover="Tip('Deutsch')" onmouseout="UnTip()">Theodisce</span>
<input type="hidden" name="num" id="num" />
<br /><br />
<input type="hidden" name="neu" id="neu" />
<input type="hidden" name="sta" id="sta" />
<input type="text" disabled name="sta2" id="sta2" />
<span class="text_klein" onmouseover="Tip('Stufe')" onmouseout="UnTip()">gradus</span>

<input class="button" type="submit" name="speichern" id="speichern" value="accipere"
onmouseover="Tip('speichern')" onmouseout="UnTip()"/>
</form></td>

<td width="36" rowspan="2"> </td>

<td width="264" rowspan="2">

<select name="select" size="22" style="width:200px;" id="select">
<option onclick="document.form2.lat.value='-ne?';
document.form2.lat2.value='-ne?';
document.form2.deu.value='Fregesignal-wird nicht übersetzt';
document.form2.deu2.value='Fregesignal-wird nicht übersetzt';
document.form2.num.value='196980';
document.form2.sta.value='5';
document.form2.sta2.value='5';
"
value="-ne?">-ne?</option>

... viele weitere OPTIONS

</select> </td>
</tr>
<tr>
<td height="97"> </td>
</tr>
</table>

</div>

</body>
</html>

[/src]

Style-Sheet
[src=css]

.button{
background-color:#FF6600;
color:#FFFFFF;
}

.button_rot{
background-color:#CC0000;
color:#FFFFFF;
}

.button_gruen{
background-color:#006600;
color:#FFFFFF;
}

.button_gr{
background-color:#FF6600;
color:#FFFFFF;
font-size:50px;
width: 70px;
height: 70px
}

.textfeld{
font-size:24px;
}

.zelle{
border-width:1px;
border-style:solid;
border-color:white;
}

a:link.text-button{
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:16px;
text-decoration:none
}
a:hover.text-button{
font-family:Arial, Helvetica, sans-serif;
color:#FF6600;
font-size:16px;
text-decoration:none
}
a:visited.text-button{
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:16px;
text-decoration:none
}

a:visited:hover.text-button{
font-family:Arial, Helvetica, sans-serif;
color:#FF6600;
font-size:16px;
text-decoration:none
}

a:link.text-button-klein{
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:13px;
text-decoration:none
}
a:hover.text-button-klein{
font-family:Arial, Helvetica, sans-serif;
color:#FF6600;
font-size:13px;
text-decoration:none
}
a:visited.text-button-klein{
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:13px;
text-decoration:none
}

a:visited:hover.text-button-klein{
font-family:Arial, Helvetica, sans-serif;
color:#FF6600;
font-size:13px;
text-decoration:none
}

.text{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFFFFF;
font-style:italic
}

.text_normal{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFFFFF;
}

.text_fett{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFFFFF;
font-weight:bold
}

.text_gr{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFFFFF;
font-weight:bold;
}

.vokabel1{
font-family:Arial, Helvetica, sans-serif;
font-size:45px;
color:#FFFFFF;
font-weight:bold;
}

.vokabel2{
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
color:#FFFFFF;
}

.text_klein{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFFFFF;
}

.text_klein_kursiv{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFFFFF;
font-style:italic;
}

[/src]

Kugelfisch · 16 Sep. 2013

Das Problem ergibt sich durch die von dir verwendete absolute Positionierung mit fixen Positions- und Grössenangaben in Pixel. Ist die Schrift grösser, passen diese Angaben natürlich nicht mehr. Ausserdem ist dein Dokument nicht valide, wie du mittels eines Validators wie z.B. http://www.validome.org/ leicht feststellen kannst - insbesondere sind DOCTYPE-Deklaration, html-, head- und body-Elemente inmitten eines Dokuments deplatziert. Mutmasslich erzeugst du deine Seite über eine serverseitige Skriptsprache oder SSI und hast nicht beachtet, dass der Inhalt dann kein vollständiges HTML-Dokument, sondern ein HTML-Fragment sein muss.

nietaL · 17 Sep. 2013

Danke Kugelfisch! Die falschen tags entstanden durch einen include-Befehl, der Dokumente aufrief, die ebenfalls html, head und body tags beinhalteten. Die sind jetzt entfernt.

Könnte ich das Problem einfach lösen, indem ich die Pixel-Angaben durch Prozent-Angaben ersetze, so wie ich es auch bei der Positionierung der divs gemacht habe? Ich möchte vermeiden, alles noch einmal neu schreiben zu müssen :-(

PS: Mir ist gerade aufgefallen, dass nur Opera den Zoom nicht verkraftet. FF und IE Zoomen alle Elemente proportional. Mann, Mann, Mann, mir fällt es immer schwerer, Opera zu verteidigen.

Kugelfisch · 17 Sep. 2013

Ja, Firefox/Gecko und auch WebKit zoomen in der Standardkonfiguration nicht nur die Schrift, sondern sämtliche Elemente, insbesondere auch Grafiken und px-Längen. Allerdings führt in einigen Fällen auch zu unschönen Effekten, speziell wenn eine Webseite viele Pixelgrafiken nutzt, die skaliert werden müssen.

Du könntest die Grössenangaben von Elementen, welche Text enthalten, explizit auf die Schriftgrösse beziehen, um das Problem zu umgehen - dazu bietet sich die em-Einheit an. Eleganter wäre jedoch, die Elemente über die in CSS spezifizierten Layout-Mechanismen - speziell Floats - statt absolut zu positionieren. Auch darfst du an keiner Stelle Annahmen darüber treffen, dass ein bestimmtes Text-Element eine fixe Breite oder Höhe in Pixeln hat.

nietaL · 18 Sep. 2013

Ich danke die, Kugelfisch, für die schnellen Tips!

Zoom und andere Auflösungen zerschießen die HP

nietaL

NGBler

epiphora

aus Plastik

Kugelfisch

Nerd

nietaL

NGBler

Kugelfisch

Nerd

nietaL

NGBler

Kugelfisch

Nerd

nietaL

NGBler