Zerschossenes Design

**Clausgrm** · 25-04-2003 14: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 15: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 15: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 16:01

Richte die Grafik doch mal oben aus...

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

welche meinst du? mit valign="top" ?

**Guido** · 25-04-2003 16: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 16:43

leider passiert nichts.

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

habt ihr evtl. noch andere ideen?

**René** · 26-04-2003 10:43

hi Claus,

probier mal damit:

**René** · 26-04-2003 10:52

ops

**Toxictype** · 26-04-2003 11: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 12:31

hi Toxic,

schau dir doch erstmal die index.txt an!

**Clausgrm** · 26-04-2003 12: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 12:53

hi Claus,

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

**René** · 26-04-2003 13:00

hi Claus,

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

**Clausgrm** · 26-04-2003 13: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

Empfehlenswerte Literatur von unserem Partner Terrashop

Lesezeichen

Lesezeichen

Berechtigungen