Zerschossenes Design

**Clausgrm** · 25-04-2003, 15:45

hallo

ich habe ein Problem mit meinem Design:

hier habe ich mal meinem quelltext:

[QUOTE<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><?php print $title; ?></title>
<meta http-equiv="Content-Type" content="text/xml; charset=ISO-8859-1">
<meta name="keywords" content="Claus Gronemeier, Software Engineering, Projektmanagement, PHP, XML, HTML, MYSQL, JAVA, ABAP, Informatik, Wirtschaftsinformatik, Methoden">
<link rel="stylesheet" type="text/css" href="/assist/main.css">
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="892">
<tr valign="top">
<td id="px10"></td>
<td id="px11"></td>
<td id="px12"></td>
<td id="px13"></td>
<td id="px14"></td>
<td id="px15"></td>
<td id="px16"></td>
<td id="px17"></td>
</tr>
<tr>
<td colspan="3"><a href="http://www.Clausgrm.com"><img name="images_r1_c1" src="/home/images/images_r1_c1.gif" width="431" height="75" border="0" alt="home"></a></td>
<td rowspan="2" colspan="4" id="dev2"></td>
<td id="px1"></td>
</tr>
<tr>
<td colspan="3" id="dev3"></td>
<td id="px2"></td>
</tr>
<tr>
<td rowspan="2" colspan="2" id="dev4"></td>
<td colspan="2" width="467" height="54" valign="top"><?php include $navigation_oben ?></td>
<td rowspan="3" colspan="3" id="dev5"></td>
<td id="px3"></td>
</tr>
<tr>
<td colspan="2" id="dev6"></td>
<td id="px4"></td>
</tr>
<tr>
<td rowspan="3" id="dev7" ></td>
<td rowspan="3" colspan="3" width="520" height="501" valign="top"><?php include $content ?></td>
<td id="px5"></td>
</tr>
<tr valign="top">
<td rowspan="2" id="dev8"></td>
<td id="dev11"><?php include $navigation_rechts ?></td>
<td rowspan="2" id="dev9"></td>
<td id="px6"></td>
</tr>
<tr>
<td id="dev10"><?php include $banner ?></td>
<td id="px7"></td>
</tr>
</table>
</body>
</html>
[/QUOTE]

ebenfalls noch ein auszug aus meinem css:

body, td, p {font-family: tahoma, verdana, arial;
font-size: 11px;
font-weight:normal;
background-repeat:no-repeat;
background-attachment:fixed;
}

hr {color:#A6B0D3;
width:100%;
size:2;
}

#topic {background-color:#A6B0D3;
color:#000000;
font-family:tahoma;
font-size:8pt;
font-style:normal;
border:groove 1px;
}

table {border-color:#336699;
}

td {border-color:#000000;
font-family:tahoma;
color:#000000;
font-size:8pt;
font-weight:normal;
font-style:normal;
background-position : top;
background-repeat : no-repeat;
valign:middel;
}

a:link {color:black; text-decoration: none}
a:visited {color:black; text-decoration: none}
a:hover {color:#6E7994; text-decoration: none}
a:active {color:#6E7994; text-decoration: none}
a:focus {color:#6E7994; text-decoration: none}

#dev2 {background:url(http://www.clausgrm.com//home/images/images_r1_c4.gif);
width: 461px;
height: 134px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#dev3 {background:url(http://www.clausgrm.com//home/images/images_r2_c1.gif);
width: 431px;
height: 59px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#dev4 {background:url(http://www.clausgrm.com//home/images/images_r3_c1.gif);
width: 247px;
height: 59px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#dev5 {background:url(http://www.clausgrm.com/home/images/images_r3_c5.gif);
width: 178px;
height: 206px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#dev6 {background:url(http://www.clausgrm.com//home/images/images_r4_c3.gif);
width: 467px;
height: 5px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#dev7 {background:url(http://www.clausgrm.com/home/images/images_r5_c1.gif);
width: 194px;
height: 501px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#dev8 {background:url(http://www.clausgrm.com//home/images/images_r6_c5.gif);
WIDTH: 55px;
HEIGHT: 354px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#dev9 {background:url(http://www.clausgrm.com//home/images/images_r6_c7.gif);
background-attachment:fixed;
width: 12px;
height: 345px;
background-position: top;
background-repeat:no-repeat;
}

#dev10 {background:url(http://www.clausgrm.com//home/images/images_r7_c6.gif);
WIDTH: 111;
HEIGHT: 98;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#dev11 {background:url(http://www.clausgrm.com//home/images...ion_rechts.gif);
WIDTH: 111px;
HEIGHT: 256px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px1 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 1px;
HEIGHT: 75px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px2 {background:url(http://www.clausgrm.com/home/images/spacer.gif) ;
WIDTH: 1px;
HEIGHT: 59px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px3 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 1px;
HEIGHT: 54px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px4 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 1px;
HEIGHT: 5px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px5 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 1px;
HEIGHT: 147px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px6 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 1px;
HEIGHT: 256px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px7 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 1px;
HEIGHT: 98px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px10 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 194px;
HEIGHT: 1px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px11 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 53px;
HEIGHT: 1px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px12 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 184px;
HEIGHT: 1px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px13 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 283px;
HEIGHT: 1px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px14 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 55px;
HEIGHT: 1px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px15 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 111px;
HEIGHT: 1px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px16 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 12px;
HEIGHT: 1px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

#px17 {background:url(http://www.clausgrm.com/home/images/spacer.gif);
WIDTH: 1px;
HEIGHT: 1px;
background-attachment:fixed;
background-position: top;
background-repeat:no-repeat;
}

ich würde mich sehr freuen, falls mir da jemand helfen könnte.

schönen gruß

Claus

**Guido** · 25-04-2003, 16:04

Ich höre den mo gerade weinen ... bei soviel Bild und Text in einem Posting.
Fürs nächste Mal: pack alles (außer deinen Fragen

)in eine zip und hänge sie an dein Posting an.

*drüberflieg*
Der Quelltext sieht so ganz gut aus.
Gib doch mal den Quelltext der geparsten Seite, vielleicht sieht man dort mehr.

Wieso funktionierts eigentlich hier?
http://www.clausgrm.com/home/index.php?section=home

Ade
Guido

BTW: E. Badu macht fette Beats!

**Clausgrm** · 25-04-2003, 16:49

tut mir leid, beim nächstenmal mache ich eine kleine seite und hoste sie :-)

hier hab ich nochmal den quelltext, der im browser zu sehen ist:

<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="892">
<tr valign="top">
<td id="px10"></td>
<td id="px11"></td>
<td id="px12"></td>
<td id="px13"></td>
<td id="px14"></td>
<td id="px15"></td>
<td id="px16"></td>
<td id="px17"></td>
</tr>
<tr>
<td colspan="3"><a href="http://www.Clausgrm.com"><img name="images_r1_c1" src="/home/images/images_r1_c1.gif" width="431" height="75" border="0" alt="home"></a></td>
<td rowspan="2" colspan="4" id="dev2"></td>
<td id="px1"></td>
</tr>
<tr>
<td colspan="3" id="dev3"></td>
<td id="px2"></td>
</tr>
<tr>
<td rowspan="2" colspan="2" id="dev4"></td>
<td colspan="2" width="467" height="54" valign="top"></td>
<td rowspan="3" colspan="3" id="dev5"></td>
<td id="px3"></td>
</tr>
<tr>
<td colspan="2" id="dev6"></td>
<td id="px4"></td>
</tr>
<tr>
<td rowspan="3" id="dev7" ></td>
<td rowspan="3" colspan="3" width="520" height="501" valign="top">

<table align="center" width="82%" border="0">
<tr>
<td>
<a href="/home/index.php?section=home">Home</a> > 
<a href="/home/index.php?section=beschreibungen">Beschreibungen</a> > <br><br><br></td>
</tr>
</table>

<table align="center" width="82%">
<tr valign="top">
<td id="topic">| Beschreibung </td>
</tr>
<tr>
<td><br><br>Diese Seite befindet sich leider noch im Aufbau ... Bitte haben Sie dafür Verständnis.<br><br>
Vielen Dank</td>
</tr>
</table></td>
<td id="px5"></td>
</tr>
<tr valign="top">
<td rowspan="2" id="dev8"></td>
<td id="dev11"><table border="0" cellpadding="0" cellspacing="0" width="100" align="center">
<tr valign="top">
<td width="100"><br>|  <a href="/home/index.php?section=beschreibungen">Beschreibungen</a>
<br>  - <a href="/home/index.php?section=engineering">Engineering</a><br>  - <a href="/home/index.php?section=management">Management</a><br>  - <a href="/home/index.php?section=sprachen">Sprachen</a><br>  - <a href="/home/index.php?section=definitionen">Definitionen</a></td>
</tr>
<tr valign="top">
<td width="100"><br>|  <a href="/home/index.php?section=links">Links</a>
</td>
</tr>
<tr valign="top">
<td width="100" ><br>|  <a href="/home/index.php?section=sonstiges">Sonstiges</a>
</td>
</tr>
</table></td>
<td rowspan="2" id="dev9"></td>
<td id="px6"></td>
</tr>
<tr>
<td id="dev10"></td>
<td id="px7"></td>
</tr>
</table>
</body>
</html>

auf der seite ist im mom. nichts zerschossen, da der contentbereich nicht zu groß ist. je länger er wird, desto weiter zieht die rechte seite nach unten.

könnte das evtl. damit zusammenhängen, dass ich im contentbereich kein background bild habe ?

**kasimir83** · 25-04-2003, 17:01

Richte die Grafik doch mal oben aus...

**Clausgrm** · 25-04-2003, 17:04

welche meinst du? mit valign="top" ?

**Guido** · 25-04-2003, 17:38

Ich meine dass kasi meint du solltest seiner Meinung nach die images_r7_c6.gif in der Tabelle nach oben ausrichten.
Probier mal (auch wenn die Formatierung schon in der CSS steht!):
<td rowspan="2" id="dev9" valign="top"></td>

[edit]Tippfehler[/edit]

**Clausgrm** · 25-04-2003, 17:43

leider passiert nichts.

http://www.clausgrm.com/home/index.php?section=home

habt ihr evtl. noch andere ideen?

**René** · 26-04-2003, 11:43

hi Claus,

probier mal damit:

**René** · 26-04-2003, 11:52

ops

**Toxictype** · 26-04-2003, 12:50

Hi,

Deine Seite schreit, meiner Meinung nach, nach ein super Lösung!
Hilf Ihr doch!

(Steh schon wieder unter Drogen)

Also, wie wär´s, wenn Du Dir eine Tabelle auf Deiner Seite erstellst (z.B. 5 Zeilen, 3 Spalten), die Grafiken stückelst und sie dann in die entsprechenden Zellen einfügst, die natürlich keinen Rand, cellpadding, etc. haben dürfen, da die Grafiken genau aneinander gesetztwerden sollen.
Jetzt paßt Du dir auf der rechten Seite eine Zelle und Grafik für die Navigation an!
Und jetzt die eigentlich Idee:
In der Mitte der Tabelle fügst Du so viele Zellen zusammen, wie Dü für Deine wechselnden Seiten brauchst und setzt einen Iframe ein!!!

Und!?

Toxic

**René** · 26-04-2003, 13:31

hi Toxic,

schau dir doch erstmal die index.txt an!

**Clausgrm** · 26-04-2003, 13:52

René´s Lösung klappt

Ich bedanke mich recht herzlich

könnte ich denn bitte noch erfahren, woran es im endeffekt gelegen hat?

Gruß

Claus

**René** · 26-04-2003, 13:53

hi Claus,

an der rechten Tabellenzelle(n). Vergleiche einfach mal beide Seiten/Code.

**René** · 26-04-2003, 14:00

hi Claus,

rechtes Menü ( drei Links ) korrigiere das nach meinem Code (Tabelle width="100%")!!!

**Clausgrm** · 26-04-2003, 14:02

habe ich schon :-) ich habe meine navigation includiert, nur war sie 100px lang :-) ich habe % raus gemacht und nun klappt es

Thema: Zerschossenes Design

LinkBack

Themen-Optionen

Anzeige

Zerschossenes Design

Lesezeichen

Lesezeichen

Berechtigungen

Mithilfe einer jQuery Methode ein...

Anfänger hat click + touchstart...

json Datei mit Javascript erstellen

dynamische Tabelle im JS erstellen.

attachEvent Variablen übergeben

Veränderung eines Java script über...

Veränderung eines Java script über...

Mithilfe einer jQuery Methode ein...

Mithilfe einer jQuery Methode ein...

Mithilfe einer jQuery Methode ein...