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>