| Autor |
Nachricht |
stifler_wob
Threadersteller
Dabei seit: 28.04.2010
Ort: Wolfsburg
Alter: 32
Geschlecht: 
|
Verfasst Di 11.01.2011 10:05
Titel Layout verschiebt sich beim skalieren des Browers |
  |
|
Guten Morgen liebe Community,
ich habe ein Problem:
Ich hatte ja einen Auftrag für eine Intranetseite und bin zum neuen Jahr damit live gegangen.
Gestern habe ich eine neue Mail bekomm: Grund des anliegends war, das die Seite, bzw. das Layout sich verschiebt, sobald man den browser skaliert.
Ich habe links eine Navigation & rechts ein iFrame. Skalier ich nun den Browser, verschiebt sich das Frame unter die Navigation.
Kann mir jemand sagen, wie ich es umgehen kann?
Hier mal der Code der Seite:
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<script language="JavaScript">
<!--
function showSubNav(id)
{
if(document.getElementById)
{
var anzahl = anzahl;
document.getElementById(id).style.display = document.getElementById(id).style.display? "":"block";
var loop = true;
var i = 0;
while(loop)
{
var pruef = 'u' + i;
if(id != pruef && document.getElementById(pruef))
{
document.getElementById(pruef).style.display = "";
}
else if (!document.getElementById(pruef))
{
loop = false;
}
i++;
}
}
}
var bild1 = "images/arbeitsschutz.jpg";
var bild2 = "images/gefahrstoffe.jpg";
function ChangePic()
{
if(document.getElementById('bild').src = bild1)
document.getElementById('bild').src = bild2;
else
document.getElementById('bild').src = bild1;
}
function ChangePicback()
{
if(document.getElementById('bild').src = bild1)
document.getElementById('bild').src = bild1;
else
document.getElementById('bild').src = bild1;
}
var bild3 = "images/pfeil2.jpg";
var bild4 = "images/pfeil2_down.jpg";
function Pfeil()
{
if(document.getElementById('pfeil').src = bild3)
document.getElementById('pfeil').src = bild4;
else
document.getElementById('pfeil').src = bild3;
}
function Pfeilback()
{
if(document.getElementById('pfeil').src = bild3)
document.getElementById('pfeil').src = bild3;
else
document.getElementById('pfeil').src = bild3;
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Willkommen beim Arbeitsschutz</title>
<link href="styles/portal.css" rel="stylesheet" type="text/css">
</head>
<body scroll="no">
<div style="margin-top:0px; border-right:1pt solid #CCCCD1; height:80px;padding-left:43px;padding-top: 30px;"><img src="images/vw_logo.gif" width="48" height="48" />
<img id="head" src="images/headline_neu.gif" class="headline" width="304" height="43" /></div>
<div style="height:20px; width:1035px; padding-left:5px; padding-top:4px" class="subheadline">Arbeitsschutz im Mitarbeiter-Portal
</div>
<div style="line-height: 10px; color: #000; font-size: 11px; font-family: Arial; margin-top:5px; float:left; height:600px; width:240px"><img src="images/arbeitsschutz.jpg" id="bild" width="240" height="96" />
<p>
<p class="abstand">
<img class="pic" src="images/pfeil2.jpg"><a href="sites/willkommen_beim_arbeitsschutz.html" class="navi" target="iframe" onclick="showSubNav('u0'); ChangePicback(); Pfeilback()"> Willkommen beim Arbeitsschutz</a>
<ul id="u0">
</ul>
<p class="abstand">
<img class="pic" id="pfeil" src="images/pfeil2.jpg"><a href="sites/betriebs_und_wegeunfaelle.html" target="iframe" class="navi"
onclick="showSubNav('u1'); ChangePicback(); Pfeil()"> Betriebs- und Wegeunfälle</a>
<ul id="u1">
<img class="pic" src="images/pfeil2.jpg"> <a href="sites/verhalten_bei_unfaellen.html" onClick="ChangePicback()" target="iframe" class="klasse" > Verhalten bei Unfällen</a>
</ul>
<p class="abstand">
<img class="pic" src="images/pfeil2.jpg"><a href="sites/laerm_und_strahlenschutz.html" target="iframe" class="navi" onclick="showSubNav('u2'); ChangePicback(); Pfeilback()"> Lärm- und Strahlenschutz</a>
<ul id="u2">
</ul>
<p class="abstand">
<img class="pic" src="images/pfeil2.jpg"><a href="sites/gefahrstoffe.html" target="iframe" class="navi"
onclick="showSubNav('u3'); ChangePic(); Pfeilback()"> Gefahrstoffe</a>
<ul id="u3">
</ul>
<p class="abstand">
<img class="pic" src="images/pfeil2.jpg"><a href="sites/fahrsicherheitstraining.html" target="iframe" class="navi" onclick="showSubNav('u4'); ChangePicback(); Pfeilback()"> Fahrsicherheitstraining</a>
<ul id="u4">
</ul>
<p class="abstand">
<img class="pic" src="images/pfeil2.jpg"><a href="sites/links.html" target="iframe" title="Links" class="navi" onclick="showSubNav('u5'); ChangePicback(); Pfeilback()"> Links</a>
<ul id="u5">
</ul>
<br />
</p>
<hr style="height: 1px" />
<span class="impressum"><b>Verantwortlich</b><br />
<span class="impressum">K-SG-A<br />
<span class="impressum">Joerg Nothdurft<br />
<span class="impressum">Telefon: +49-05361-9-22951<br />
<span class="impressum">Fax: +49-05361-9-75779<br />
<span class="impressum"><img border="0" src="images/mail.gif"><a class="mail" href="mailto:joerg.nothdurft@volkswagen.de">Joerg.Nothdurft@volkswagen.de</a><br />
<span class="impressum">Letzte Änderung: 22.11.2010<br>
<hr style="height: 1px" />
<img src="images/drucken1.gif" border="0"><a class="mail" href="javascript:window.print()">Seite drucken</a>
</div>
<div style="border-left:1pt solid #CCCCD1; margin-top:40px; float:left; height:620px; width:780px; font-size: 15px;">
<iframe class="standard" frameborder="0" src="sites/willkommen_beim_arbeitsschutz.html" name="iframe" style="margin-top:0px; border:0px;" width="800px" height="620"></iframe> </div>
</div>
</body>
</html>
|
und die CSS
| Code: |
/*CSS Klasse für den Fließtext & Ansprechpartner*/
.fließtext {
font-family: Arial;
font-size: 11px;
line-height: 16px;
}
/*CSS Klasse für Tabellen*/
table { font-family: Arial;
font-size: 11px;
line-height: 16px;
}
/*Subheadline im grauen Balken*/
.subheadline {
background-color:#999999;
font-family: Arial;
font-size: 11px;
line-height: 15px;
color: #ffffff;
font-weight:bold;
}
/*CSS Klasse für das Impressum*/
.impressum {
font-family: Arial;
font-size: 11px;
margin-left: 20px;
line-height:15px;
}
/*CSS Klasse für eine horizontale Linie*/
hr { color: #C6CBC1;
height: 0,1px;
width: 100%;
}
/*CSS Klasse für die Navigation*/
li {
margin-left: 15px;
line-height:15px;
}
ul#u0 {
display:none;
margin:0px;
padding-left:6px;
}
ul#u1 {
display:none;
margin:0px;
padding-left:6px;
}
ul#u2 {
display:none;
margin: 0px;
padding-left:6px;
}
ul#u3 {
display:none;
margin: 0px;
padding-left:10px;
}
ul#u4 {
display:none;
margin: 0px;
padding-left:10px;
}
ul#u5 {
display:none;
margin: 0px;
padding-left:10px;
}
/*CSS Klasse für die Links*/
a.navi:link { color:black; text-decoration:none; }
a.navi:visited { color:black; text-decoration:none; }
a.navi:hover { color:black; text-decoration:none; }
a.navi:active { color:black; text-decoration:none; }
a.klasse:link { color:#666666; text-decoration:none; }
a.klasse:visited { color:#666666; text-decoration:none;}
a.klasse:hover { color:#666666; text-decoration:none;}
a.klasse:active { color:#666666; text-decoration:none;}
a.mail:link { color:black; text-decoration:underline; }
a.mail:visited { color:black; text-decoration:none; }
a.mail:hover { color:black; text-decoration:none; }
a.mail:active { color:black; text-decoration:underline; }
/*CSS Klasse für den Pfeil der Navigation*/
img.pic {margin-left:5px;}
/*CSS Klasse für die Grafik der Headline "Willkommen beim Arbeitsschutz"*/
.headline {margin-left: 240px;}
/*CSS Klasse für die headline im Fließtext*/
.headline_1 {
font-family: Arial;
font-size: 11px;
line-height:15px;
font-weight:bold;
}
/*CSS Klasse für den Absatz*/
p.abstand {margin-top:5px; margin-bottom:5px}
|
|
|
| |
  |
 |
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 11.01.2011 11:07
Titel
|
|
|
 
Gestern habe ich meine Webseiten, mit denen ich vor über 9 Jahren angefangen hatte, angesehen. So ungefähr wie hier sah damals mein HTML aus... puh!
Zur Sache:
| Code: | <div style="border-left:1pt solid #CCCCD1; margin-top:40px; float:left; height:620px; width:780px; font-size: 15px;">
<iframe class="standard" frameborder="0" src="sites/willkommen_beim_arbeitsschutz.html" name="iframe" style="margin-top:0px; border:0px;" width="800px" height="620"></iframe> </div>
</div>
|
Dein Div hat eine kleinere Breite als der iframe. Das kann nicht stimmen.
Weiter.
Du hast links eine Navigation, die (nicht geguckt) ca 200px Breite hat. Nun hast du eine Gesamtbreite von 1000px (+1pt=?!?px/em Rahmen?!). Klar, dass das irgendwo nicht klappt. Du müsstest einen Gesamt-Div mit 1000px Festbreite anlegen, damit es sich nicht nach unten verschiebt.
Richtiger wäre es aber, das ganze Layout schön in % aufzubauen und mit min-width / max-width etc zu arbeiten.
|
|
| |
 |
|
|
Anzeige
|
|
|
snuwie
Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 11.01.2011 11:25
Titel
|
|
|
auserdem hast du ein totales wirr warr mit deinen listen  du solltest den code auch mal validieren
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Bild verschiebt Layout (html, css)
CSS Layout - Problem - Div verschiebt sich bei längerem Text
Website mit festen Layout in dynamisches Layout umbauen
<p> mit Abstandswerten verschiebt div
{erledigt} template verschiebt dtd
Illustrator verschiebt diagonal
|
|
Willkommen auf dem Portal für Mediengestalter
