nicht angemeldet
Text einrücken - Browserkompatibilität?
Hallo zusammen,
ich arbeite gerade an der Internetseite unserer Firma,
ich habe mehrere div container eingebaut, die dann mit Text und Bilder
gefüllt werden sollen.
Mein erstes Problem: die erste erstellte HTML-Seite wird bei mir nur im Firefox angezeit, Safari und Inetexplorer zeigen eine komplett leere Site an:
www.alischdruck.de/index2.html
Mein zweites Probel: schaut man sich mein code an und hier den bereich:
#mainframe {
background-image:url(layout_13.png);
margin-left:0 auto;
width: 630px;
height: 420px;
float:left;
text-align:left;
text-indent:20px;
padding-top:20px;
}
dann sieht man denke ich, dass ich versuche den Inhalt 20px vom linken und oberen Rand weg platzieren will und nicht direkt am Rande des Containers.
soweit so gut, in der Browseransicht kommt dann das dabei raus:
www.alischdruck.de/index3.html
er verschiebt wohl mit dem Befehl padding-top:20px; den kompletten Container nach unten und überdeckt somit die untere rote Leiste!
Wie kann ich all diese Probleme beheben, bin am verzweifeln!?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alisch Offsetdruck - Willkommen bei Ihrer Druckerei in Saarbrücken!</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 10px;
text-align: left;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(background.png);
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CA0000;
}
a:visited {
color: #FF5E5E;
text-decoration: underline;
}
a:link {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: underline;
}
h1,h2,h3,h4,h5,h6 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font-size: 12px;
color: #C40000;
}
#topframe1 {
background-image:url(layout_02.png);
margin:0 auto;
width: 800px;
height: 100px;
}
#topframe2 {
background-image:url(layout_12.png);
margin:0 auto;
width: 800px;
height: 20px;
}
#zusammen {
margin:0 auto;
width: 800px;
height: 420px;
}
#mainframe {
background-image:url(layout_13.png);
margin-left:0 auto;
width: 630px;
height: 420px;
float:left;
text-align:left;
text-indent:20px;
}
#rightframe1 {
background-image:url(layout_14.png);
margin-left:0 auto;
width: 170px;
height: 170px;
float: right;
}
#rightframe2 {
background-image:url(layout_15.png);
margin-left:0 auto;
width: 170px;
height: 250px;
float: right;
}
#bottomframe {
background-image:url(layout_16.png);
margin:0 auto;
width: 800px;
height: 20px;
}
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('start_2.png','unternehmen_2.png','leistungen_2.png','produkte_2.png','kontakt_2.png','information_2.png')">
<div id="topframe1"></div>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<!--DWLayoutTable-->
<tr>
<td width="58" height="40" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="58" height="40" background="layout_04.png"></td>
</tr>
</table></td>
<td width="73" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="73" height="40" background="start_1.png"><a href="index.html" target="_self" onmouseover="MM_swapImage('start','','start_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="start_1.png" alt="start" name="start" width="73" height="40" border="0" id="start" /></a></td>
</tr>
</table></td>
<td width="113" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="113" height="40" background="unternehmen_1.png"><a href="unternehmen.html" target="_self" onmouseover="MM_swapImage('unternehmen','','unternehmen_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="unternehmen_1.png" alt="unternehmen" name="unternehmen" width="113" height="40" border="0" id="unternehmen" /></a></td>
</tr>
</table></td>
<td width="100" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="100" height="40" background="leistungen_1.png"><a href="leistungen.html" target="_self" onmouseover="MM_swapImage('leistungen','','leistungen_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="leistungen_1.png" alt="leistungen" name="leistungen" width="100" height="40" border="0" id="leistungen" /></a></td>
</tr>
</table></td>
<td width="92" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="92" height="40" background="produkte_1.png"><a href="produkte.html" target="_self" onmouseover="MM_swapImage('produkte','','produkte_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="produkte_1.png" alt="produkte" name="produkte" width="92" height="40" border="0" id="produkte" /></a></td>
</tr>
</table></td>
<td width="86" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="86" height="40" background="kontakt_1.png"><a href="kontakt.html" target="_self" onmouseover="MM_swapImage('kontakt','','kontakt_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="kontakt_1.png" alt="kontakt" name="kontakt" width="86" height="40" border="0" id="kontakt" /></a></td>
</tr>
</table></td>
<td width="108" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="108" height="40" background="information_1.png"><a href="information.html" target="_self" onmouseover="MM_swapImage('information','','information_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="information_1.png" alt="information" name="information" width="108" height="40" border="0" id="information" /></a></td>
</tr>
</table></td>
<td width="170" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="170" height="40" background="layout_11.png"> </td>
</tr>
</table></td>
</tr>
</table>
<div id="topframe2"></div>
<div id="zusammen">
<div id="mainframe">test !</div>
<div id="rightframe1"></div>
<div id="rightframe2"></div>
</div>
<div id="bottomframe"></div>
</body>
</html>
-
okei das Browserproblem konnte ich lösen,
irgendwie stimmte was nicht im CSS-Bereich vor den Containern,
jetzt klappts, siehe www.alischdruck.de/index2.htmldas Problem mit dem Einrücken im main-container habe ich weiterhin!
bitte um Hilfe
-
Yerf!
er verschiebt wohl mit dem Befehl padding-top:20px; den kompletten Container nach unten und überdeckt somit die untere rote Leiste!
Richtig. Das padding ändert nichts an der inhaltshöhe des Containers, damit geht er nun weiter nach unten. Wenn das nicht gewünscht ist musst du die angegebene Höhe um den Wert des Paddings verringern.
Wie kann ich all diese Probleme beheben, bin am verzweifeln!?
Ich wär auch fast verzweifelt, könnte an Dreamweaver liegen... der Code ist nicht wirklich schön und übersichtlich. Einer der vielen Nachteile von Layout-Tabellen.
Da du scheinbar dabei bist die Seite neu zu machen, möchte ich dir http://de.selfhtml.org/css/layouts/index.htm@title=CSS-Layouts ans Herz legen. Das ganze braucht zwar etwas Einarbeitungszeit, aber dafür wird man mit mehr Möglichkeiten und übersichtlicherem Code belohnt.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]--> -
Hi,
dann sieht man denke ich, dass ich versuche den Inhalt 20px vom linken und oberen Rand weg platzieren will und nicht direkt am Rande des Containers.
er verschiebt wohl mit dem Befehl padding-top:20px; den kompletten Container nach unten und überdeckt somit die untere rote Leiste!
Padding "verschiebt" das Element, auf das du es anwendest, nicht - es ist ein Innenabstand.
Allerdings wird es nach der Definition des Box Model zur Breite/Höhe hinzugerechnet - vermutlich hast du damit (Verständnis-)Probleme?MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.