Tutorial HTML, CSS u. PHP - Forum

von **Fredl45** » Sonntag 15. Januar 2012, 16:01

Ich habe folgendes Problem auf meiner Homepage http://www.wbv-donau-iller.de. Unter Historie sind Tabellen hinterlegt, die bei mir in der Browseransicht (Webocton-scriptly) korrekt eingebunden sind, aber auf anderen PC's nach rechts verschoben sind. Wo liegt das >Problem wer kann mir da helfen ?
Folgende Cods habe ich:
HTML -Datei:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="de">
<head>
<title> Produkte </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css;">
<link rel="stylesheet" href="vorschau_g.css" type="text/css" media="screen,projection,print"> 
<link rel="stylesheet" href="geschichte_p.css" type="text/css" media="screen,projection,print"> 
</head>

<body>
<div id="page">
<span id="e26" class="header_box"></span>
<div id="e25" class="panel_box"></div>
<div id="e24" class="page_box"></div>
<h3 id="e23" class="heading3"><span class="sly">
Bezirk Donau Iller
</span></h3>
<span id="e22"></span>
<div id="e21" class="navigation">
<a class="navigation" href="index.html">
Startseite</a>
</div>
<span id="e20"></span>
<span id="e19"></span>
<span id="e18"></span>
<span id="e17"></span>
<span id="e171"></span>
<span id="e172"></span>
<div id="e16" class="navigation">
<a class="navigation" href="wir.htm">
Wir über uns</a>
</div>
<div id="e15" class="navigation">
<a class="navigation" href="kegel.htm">
Kegeln</a>
</div>
<div id="e14" class="navigation">
<a class="navigation" href="tt.htm">
Tischtennis</a>
</div>
<div id="e13" class="navigation">
<a class="navigation" href="link.htm">
Links</a>
</div>
<div id="e131" class="navigation">
<a class="navigation" href="nutz.htm">
Nützliches</a>
</div>
<div id="e132" class="navigation">
<a class="navigation" href="geschichte.htm">
Historie</a>
</div>
<span id="e1001"></span>
<span id="e101"></span>
<div id="e11" class="navigation">
<a class="navigation" href="kgesch.htm">
Kegeln</a>
</div>
<div id="e111" class="navigation">
<a class="navigation" href="ttgesch.htm">
Tischtennis</a>
</div>

<h1 id="e7" class="header"><span class="sly">
Baden Württembergischer
Betriebssportverband
</span></h1>
<span id="e6"></span>
<span id="e5"></span>
<span id="e40"> <a href="kgesch.htm">Punkterunde</a><br>
<a href="kgesch2.htm">Paarkampfrunde</a><br>
<a href="kgesch3.htm">Paarkampfpokal</a><br>
<a href="kgesch4.htm">Bezirksmeisterschaft - Einzel</a>
</span>
<div id="e401">
<h1>Punkterunde A-Gruppe</h1>
</div>
<span id="e402">
<a href="kgesch6.htm">Bezirksmeisterschaft - Mannschaft</a><br>
<a href="kgesch7.htm">Schnittlisten</a><br>
<a href="kgesch5.htm">Preiskegeln</a>
</span>

<span id="e403">
<a href="kgesch11.htm">Punkterunde B-Gruppe </a>

</span>
<span id="e404"></span>
</div>

<div id="e2">
<table border="1" cellpadding="1" cellspacing="1" bgcolor="#7F7F99" summary="">
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h5>Jahr</h5></td>
<td style="text-align: center; vertical-align: middle; width: 84px;"><h5>1.Platz</h5></td>
<td style="text-align: center; vertical-align: middle; width: 84px;"><h5>2.Platz</h5></td>
<td style="text-align: center; vertical-align: middle; width: 84px;"><h5>3.Platz</h5></td>
<td style="text-align: center; vertical-align: middle; width: 84px;"><h5>4.Platz</h5></td>
<td style="text-align: center; vertical-align: middle; width: 84px;"><h5>5.Platz</h5></td>
<td style="text-align: center; vertical-align: middle; width: 84px;"><h5>6.Platz</h5></td>
<td style="text-align: center; vertical-align: middle; width: 84px;"><h5>7. Platz</h5></td>
<td style="text-align: center; vertical-align: middle; width: 84px;"><h5>8.Platz</h5></td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="0" bgcolor="#E5E5D9" summary="">
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h6>2001</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Straub</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Airpur II</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Mohren I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h6>2002</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Mohren I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Straub</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Airpur II</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>SWP</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Boehringer I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Cemicals</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Volksbank</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Immergrün</h6></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h6>2003</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Volksbank</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Etimex</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Straub</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Airpur I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Mohren I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Boehringer I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Airpur II</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h6>2004</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Volksbank</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Straub</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Etimex</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Airpur I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Immergrün I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Airpur II</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Boehringer I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h6>2005</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Volksbank</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Straub</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Etimex</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>ODAiT I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Airpur I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Immergrün I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Airpur II</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h6>2006</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Straub</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Volksbank</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Merkle I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Boehringer I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Immergrün I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Etimex</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>ODAiT I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h6>2007</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Holzwurm</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Straub</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Etimex</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Merkle I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Volksbank</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Boehringer</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Immergrün I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h6>2008</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Straub</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Merkle I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Holzwurm</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Etimex</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Volksbank</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Boehringer</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>BakeMark</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h6>2009</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Straub</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Merkle I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Etimex</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Volksbank</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>ODAiT I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Holzwurm</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Boehringer</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h6>2010</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>ODAiT I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Straub</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Volksbank</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Merkle I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Holzwurm I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>BakeMark</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Etimex</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; width: 50px;"><h6>2011</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>ODAiT I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Straub</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Holzwurm I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Volksbank</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Merkle I</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>Boehringer</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
<td style="text-align: center; vertical-align: middle; width: 85px;"><h6>-</h6></td>
</tr>
</table>
</div>

</body>
</html>

CSS-Datei:
/*--- Avanquest WebEasy Page Style ---*/

.cc01 { /* Common */
font : 16px 'Arial', Helvetica, sans-serif;
color : #000000;
}
.cc02 { /* Common */
border : 0px solid #000000;
clip : rect(0px,1px,4px,0px);
}
span#e26 { /* images/vorschau001006.jp... */
background : transparent url(images/vorschau001006.jpg) no-repeat top left;
position : absolute;
left : 0px;
top : 0px;
width :1024px;
height : 182px;
}
div#e25 {
font : 13px 'Times New Roman', Book, Georgia, serif;
text-align : left;
background-color: transparent;
background-image: url(images/shadow_box2.jpg);
position : absolute;
left : 0px;
top : 182px;
width : 260px;
height : 589px;
}
div#e24 {
font : 16px 'Arial', Helvetica, sans-serif;
text-align : left;
background-color: transparent;
background-image: url(images/hatch_y4.jpg);
position : absolute;
left : 130px;
top : 182px;
width : 889px;
height : 585px;
}
h3#e23 { /* Bezirk Donau Iller\ */
background : transparent url(images/vorschau001005.gif) no-repeat top left;
position : absolute;
left : 25px;
top : 105px;
width : 465px;
height : 59px;
}
span#e22 { /* images/tabr_r.gif */
background : transparent url(images/tabn_r.gif) no-repeat top left;
position : absolute;
left : 294px;
top : 149px;
width : 104px;
height : 33px;
}
div#e21 { /* Home */
padding-top : 4px;
position : absolute;
left : 294px;
top : 154px;
width : 101px;
height : 21px;
}
span#e20 { /* images/tabn_p.gif */
background : transparent url(images/tabn_p.gif) no-repeat top left;
position : absolute;
left : 396px;
top : 149px;
width : 104px;
height : 33px;
}
span#e19 { /* images/tabn_v.gif */
background : transparent url(images/tabn_v.gif) no-repeat top left;
position : absolute;
left : 498px;
top : 149px;
width : 104px;
height : 33px;
}
span#e18 { /* images/tabn_g.gif */
background : transparent url(images/tabn_g.gif) no-repeat top left;
position : absolute;
left : 600px;
top : 149px;
width : 104px;
height : 33px;
}
span#e17 { /* images/tabn_b.gif */
background : transparent url(images/tabn_b.gif) no-repeat top left;
position : absolute;
left : 702px;
top : 149px;
width : 104px;
height : 33px;
}

span#e171 { /* images/tabn_b.gif */
background : transparent url(images/tabn_w.gif) no-repeat top left;
position : absolute;
left : 804px;
top : 149px;
width : 104px;
height : 33px;
}
span#e172 { /* images/tabn_b.gif */
background : transparent url(images/tabr_y.gif) no-repeat top left;
position : absolute;
left : 906px;
top : 149px;
width : 104px;
height : 35px;
}

div#e16 { /* Wir über uns */
padding-top : 4px;
position : absolute;
left : 398px;
top : 154px;
width : 101px;
height : 21px;
}
div#e15 { /* Kegeln */
padding-top : 4px;
position : absolute;
left : 501px;
top : 153px;
width : 101px;
height : 21px;
}
div#e14 { /* Tischtennis */
padding-top : 4px;
position : absolute;
left : 604px;
top : 154px;
width : 101px;
height : 21px;
}
div#e13 { /* Links */
padding-top : 4px;
position : absolute;
left : 707px;
top : 154px;
width : 101px;
height : 21px;
}
div#e131 { /* Links */
padding-top : 4px;
position : absolute;
left : 810px;
top : 154px;
width : 101px;
height : 21px;
}
div#e132 { /* Links */
padding-top : 4px;
position : absolute;
left : 913px;
top : 154px;
width : 101px;
height : 21px;
}

span#e10 { /* Wir */
background : transparent url(images/button9.jpg) no-repeat top left;
text-align : left;
position : absolute;
left : 154px;
top : 225px;
width : 156px;
height : 29px;
}
span#e101 { /* Wir */
background : transparent url(images/button9.jpg) no-repeat top left;
text-align : left;
position : absolute;
left : 154px;
top : 271px;
width : 156px;
height : 29px;
}
span#e1001 { /* Wir */
background : transparent url(images/button5.jpg) no-repeat top left;
text-align : left;
position : absolute;
left : 154px;
top : 225px;
width : 156px;
height : 29px;
}
span#e1002 { /* Wir */
background : transparent url(images/button5.jpg) no-repeat top left;
text-align : left;
position : absolute;
left : 154px;
top : 271px;
width : 156px;
height : 29px;
}
span#e102 { /* Wir */
background : transparent url(images/button9.jpg) no-repeat top left;
text-align : left;
position : absolute;
left : 154px;
top : 317px;
width : 156px;
height : 29px;
}
span#e103 { /* Wir */
background : transparent url(images/button9.jpg) no-repeat top left;
text-align : left;
position : absolute;
left : 154px;
top : 363px;
width : 156px;
height : 29px;
}
span#e104 { /* Wir */
background : transparent url(images/button9.jpg) no-repeat top left;
text-align : left;
position : absolute;
left : 154px;
top : 409px;
width : 156px;
height : 29px;
}
span#e105 { /* Wir */
background : transparent url(images/button9.jpg) no-repeat top left;
text-align : left;
position : absolute;
left : 154px;
top : 455px;
width : 156px;
height : 29px;
}

div#e11 { /* Links */
padding-top : 4px;
position : absolute;
left : 154px;
top : 225px;
width : 156px;
height : 29px;
}
div#e111 { /* Links */
padding-top : 4px;
position : absolute;
left : 154px;
top : 271px;
width : 156px;
height : 29px;
}
div#e112 { /* Links */
padding-top : 4px;
position : absolute;
left : 154px;
top : 317px;
width : 156px;
height : 29px;
}
div#e113 { /* Links */
padding-top : 4px;
position : absolute;
left : 154px;
top : 363px;
width : 156px;
height : 29px;
}
div#e114 { /* Links */
padding-top : 4px;
position : absolute;
left : 154px;
top : 409px;
width : 156px;
height : 29px;
}

div#e115 { /* Links */
padding-top : 4px;
position : absolute;
left : 154px;
top : 455px;
width : 156px;
height : 29px;
}

h1#e7 { /* Baden Württembergischer ... */
background : transparent url(images/vorschau001004.gif) no-repeat top left;
position : absolute;
left : 25px;
top : 24px;
width : 401px;
height : 91px;
}
span#e6 { /* images/vorschau001003.jp... */
background : transparent url(images/vorschau001003.jpg) no-repeat top left;
position : absolute;
left : 806px;
top : 13px;
width : 91px;
height : 103px;
}
span#e5 { /* images/vorschau001002.gi... */
background : transparent url(images/vorschau001002.gif) no-repeat top left;
position : absolute;
left : 919px;
top : 13px;
width : 87px;
height : 104px;
}

span#e3 { /* images/vorschau001001.gi... */
background : transparent url(images/vorschau001001.gif) no-repeat top left;
position : absolute;
border : 1px solid Blue;
left : 324px;
top : 531px;
width : 1px;
height : 4px;
}

div#e408 { /* <TABLE class="ct16" cell... */
position : absolute;
left : 480px;
top : 480px;
width : 700px;
height : 450px;
}
span#e4 { /* Bild. */
background : transparent url(images/gesch.png) no-repeat top left;
position : absolute;
left : 560px;
top : 270px;
width : 140px;
height : 160px;
}
span#e40 { /* Bild. */
position : absolute;
left : 380px;
top : 220px;
width : 250px;
height : 160px;
}
div#e401 { /* Bild. */
position : absolute;
left : 210px;
top : 340px;
width : 700px;
height : 560px;
}
span#e402 { /* Bild. */
position : absolute;
left : 700px;
top : 220px;
width : 270px;
height : 160px;
}
span#e403 { /* Bild. */
position : absolute;
left : 800px;
top : 720px;
width : 180px;
height : 60px;
}
span#e404 { /* Bild. */
background : transparent url(images/pfeil.jpg) no-repeat top left;
position : absolute;
left : 780px;
top : 720px;
width : 16px;
height : 23px;
}
span#e405 { /* Bild. */
position : absolute;
left : 840px;
top : 270px;
width : 180px;
height : 360px;
}
span#e406 { /* Bild. */
background : transparent url(images/pfeil.jpg) no-repeat top left;
position : absolute;
left : 820px;
top : 300px;
width : 16px;
height : 23px;
}
div#e2 { /* <TABLE class="ct16" cell... */
position : absolute;
left : 473px;
top : 421px;
width : 740px;
height : 260px;
}
span#e1 { /* <TABLE class="ct01" cell... */
position : absolute;
border: 1px solid blue;
left : 2px;
top : 693px;
width : 140px;
height : 29px;
}
div#page { /* Page Holder */
background : transparent url(images/schwarz.jpg) no-repeat top left;
position : relative;
width : 1024px;
height : 768px;
text-align : left;
margin-left : auto;
margin-right : auto;
}
body { /* Page Body */
text-align : center;
background : transparent url(images/schwarz.jpg) no-repeat top left;
}

/*--- EndOfFile ---*/

Das Problem ist vermutlich die PC-Auflösung oder kann ich mit einem anderen Code irgendetwas ausrichten. Jemand sagte mir ich soll das in die div-page reinbringen aber wie ?? bin lieder
nicht so fit mit der Sache.

Gruß Fred

von **drPHIP132** » Sonntag 15. Januar 2012, 16:32

Willkommen im Forum.
Bitte nutze BB-code für deine Codes.

Code: Alles auswählen: [code]Hier kommt der Code rein...[/code]

Einfach mal die Tabellen reseten?
padding:0; margin:0; ??

von **Basiii** » Sonntag 15. Januar 2012, 17:47

Hallo, herzlich Willkommen im Forum,

ich würde dir sehr gerne helfen, allerdings hast du bei deine Registration diese Regeln akzeptiert und dich nicht daran gehalten.

von **Fredl45** » Dienstag 17. Januar 2012, 09:45

tut mir furchtbar leid aber hab darauf nicht so geachtet muss ich ehrlich gestehen, gelobe aber besserung.
ers wäre schön wenn du mir helfen könntest denke ich hab den fehler weiß aber nicht wie ich ihn abstelle.
Denn ich hab die HP bei einer auflösung von 1600x983 gemacht und bei 1200x1024 kommt alles verschoben.
doch wie lös ich das ?
Gruß Fred

von **Sören** » Dienstag 17. Januar 2012, 14:17

Du kannst deine Beiträge auch editieren und den Foren-Regeln anpassen. Anscheinend hast du sie aber immer noch nicht richtig gelesen.

Zu deinem Problem, einfach die Breiten der Tabelle anpassen? (Hab mir deinen Code nicht angeschaut, ist mir ehrlich gesagt so zu umständlich)

von **Basiii** » Mittwoch 18. Januar 2012, 08:14

Ich muss meinem Vorredner zustimmen, so ist dein Code einfach furchtbar schwer zu lesen, also noch mal der direkte Hinweis:

Nutze bitte die Code Funktion:

Code: Alles auswählen: [code] DEIN CODE [/code] [code=php] DEIN PHP CODE[/code]

Zu deinem Problem:

Code: Alles auswählen: div#e2 { position: absolute; left: 273px; top: 421px; width: 740px; height: 260px; }

position: absolute; bewirkt hierbei das sich das Element am äußersten Browserrand bewegt und von da aus verschoben wird, versuche mal position: relative;, damit orientiert sich das Ganze am Elternelement.

Im Scriptly sah das sicher gut aus weil das Browserfenster da schmaler war, wenn du jetzt mal probierst das Browserfenster einfach schmaler zu machen, siehst du, dass sich deine Tabelle weiter zur Mitte deiner Seite verschiebt.

von **Fredl45** » Mittwoch 18. Januar 2012, 10:26

ok mit relative ist die tabelle ganz weg... aber sonst wenn ich die einstellung runter fahr am 1200x1024 gehts... wenn jemand allerdings eine 1600er einstellung hat ist die tabelle nach links verschoben
muss doch was geben wo die tabelle bei jeder einstellung gleich bleibt ?

PS: zum code war mein Fehler gelobe besserung

von **Basiii** » Mittwoch 18. Januar 2012, 12:09

Wenn du relative setzt ist deine Tabelle einfach ganz weit unten (scrollen), das liegt an deinem verqueren Aufbau der irgendwie vorne und hinten nicht stimmt.

Immer gleich anzeigen kannst du deine Tabelle so:

Code: Alles auswählen: div#e2 { position: fixed; left: 50%; top: 50%; margin-left: -370px; /* halbe Breite des Objektes */ margin-top: -130px; /* halbe Höhe des Objektes */ width: 740px; height: 260px; }

Aber ich glaube das ist nicht was du möchtest, du willst sie wohl immer an der selben Stelle in deinem Design haben, dazu musst den Code der Tabelle einfach passend im Div mit der ID page unterbringen, ansonsten ist es klar das die Tabelle irgendwo außerhalb deines Designs ist, nur nicht da wo sie hin soll.

von **Fredl45** » Freitag 20. Januar 2012, 04:58

und wie soll ich sie da reinbringen in die ID page ? ich glaub ich binzu dumm dazu

von **SilverLion** » Donnerstag 26. Januar 2012, 13:10

Hallo Fredl,

ich habe mich jetzt die letzten Tage mit Deinem Quellcode beschäftigt.

Bevor ich von meinen Ergebnissen berichte, gestatte mir bitte mal eine Frage: Hast Du diesen Quellcode selbst geschrieben? Oder von einem Layout übernommen? (Oder vielleicht sogar Software wie Dreamweaver oder gar Frontpage genommen?

Selbst wenn: Das ist nicht schlimm ;) (selbst ich verwende immer mal wieder solche WYSIWYG-Editoren ;) )

Zunächst einmal frage ich mich, wie Du in dem Durcheinander (nimm es mir bitte nicht übel!) zurechtfindest! Daher ein kleiner Tipp meinerseits: Wenn Du Sektionen kommentierst, hast Du das bei solch großen Dateien einfacher!

Darüber hinaus muss ich sagen, dass ich selbst kein Freund von der CSS Eigenschaft "position: absolute" bin. Wenn Du Tabellen verwenden möchtest, sollte sich - und hier bitte ich die alten Hasen hier im Falle eines Irrtums meinerseits um Korrektur (!!) - das ganze einfach als <div style="text-align:center;"> HIER KOMMT DEINE TABELLE REIN </div> lösen lassen.

Mein Vorschlag: Schau Dir Deinen Quellcode noch einmal ganz genau an in dem Du den gesamten Quellcode auskommentierst (damit Du quasi wieder eine weiße Seite hast) und dann Stück für Stück den Quellcode überprüfst.
Des Weiteren empfehle ich Dir die Lektüre der Positionierungshilfe von SelfHTML, die mir selbst auch beim Verständnis der Positionierung innerhalb eines Layouts geholfen hat.

LG vom Löwen

von **Basiii** » Donnerstag 26. Januar 2012, 14:01

SilverLion hat geschrieben:und hier bitte ich die alten Hasen hier im Falle eines Irrtums meinerseits um Korrektur (!!)

Gerne

(aber alt bin ich nicht

)

Das DIV Element wäre sinnlos, eine Tabelle ist sowieso schon ein Block Element. In diesem Fall wäre position: ; sowieso komplett sinnlos, weil die Tabelle gar nicht unabhängig von anderen Elementen verschoben werden muss, sie liegt direkt im Content und muss also auch nur genau da rein gepackt werden (wie ich weiter oben bereits sagte).

Wo genau die Tabelle hin muss kann ich nicht sagen, da mir der Code leider doch zu wüst ist :evil:

von **SilverLion** » Donnerstag 26. Januar 2012, 23:28

Basiii hat geschrieben:
SilverLion hat geschrieben:und hier bitte ich die alten Hasen hier im Falle eines Irrtums meinerseits um Korrektur (!!)

Gerne (aber alt bin ich nicht )
...

Thx Basiiii

P.S.: Ich bin gerade dabei mich mal durch den Quellcode zu wurschteln.. vielleicht finde ich ja was, was Dir hilft ;)

von **Fredl45** » Freitag 27. Januar 2012, 09:05

das wäre nett von dir

von **Fredl45** » Freitag 27. Januar 2012, 09:54

Sache ist erledigt, hab den Fehler gefunden, danke an alle

von **webmaster3000** » Samstag 28. Januar 2012, 18:07

Fredl45 hat geschrieben:[...] hab den Fehler gefunden [...]

Dürften wir die Lösung bitte auch erfahren? Sonst muss, wenn der Fehler das nächste Mal passiert (vielleicht sogar bei dir), wieder hier gefragt werden.

Tutorial HTML, CSS u. PHP - Forum

Hilfe

Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Re: Hilfe

Wer ist online?