PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Design anpassen mit css

Yan-13
2006-04-01, 16:35:43
Ich verstehe es einfach nicht:

Css code:

td.main
{
vertical-align:top;
background-image:url("Bilder/blackdevil2_18.jpg");
color:#000000;
}
td.lastwar
{
vertical-align:top;
background-image:url("Bilder/blackdevil2_15");
color:#000000;
}
td.boxrechts
{
vertical-align:top;
background-image:url("Bilder/blackdevil2_20");
color:#000000;
}
td.boxrechts2
{
vertical-align:top;
background-image:url("Bilder/blackdevil2_22");
color:#000000;
}




Html Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Blackdevil multigaming Clan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (blackdevil2.psd) -->
<table id="Tabelle_01" width="1000" height="801" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="10">
<img src="Bilder/blackdevil2_01.jpg" width="1000" height="16" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="Bilder/blackdevil2_02.jpg" width="971" height="1" alt=""></td>
<td rowspan="3">
<img src="Bilder/blackdevil2_03.jpg" width="17" height="16" alt=""></td>
<td rowspan="10">
<img src="Bilder/blackdevil2_04.jpg" width="12" height="784" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="Bilder/blackdevil2_05.jpg" width="774" height="155" alt=""></td>
<td colspan="3" rowspan="2">
<img src="Bilder/blackdevil2_06.jpg" width="89" height="15" alt=""></td>
<td colspan="3">
<img src="Bilder/blackdevil2_07.jpg" width="108" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="Bilder/blackdevil2_08.jpg" width="12" height="181" alt=""></td>
<td>
<img src="Bilder/blackdevil2_09.jpg" width="84" height="14" alt=""></td>
<td rowspan="4">
<img src="Bilder/blackdevil2_10.jpg" width="12" height="181" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="Bilder/blackdevil2_11.jpg" width="89" height="140" alt=""></td>
<td rowspan="3">
<img src="Bilder/blackdevil2_12.jpg" width="84" height="167" alt=""></td>
<td rowspan="3">
<img src="Bilder/blackdevil2_13.jpg" width="17" height="167" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="Bilder/blackdevil2_14.jpg" width="213" height="628" alt=""></td>
<td colspan="2" class="lastwar">


</td>
<td colspan="2" rowspan="2">
<img src="Bilder/blackdevil2_16.jpg" width="58" height="27" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="Bilder/blackdevil2_17.jpg" width="592" height="11" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3" class="main">


</td>
<td rowspan="4">
<img src="Bilder/blackdevil2_19.jpg" width="16" height="601" alt=""></td>
<td colspan="5" class="boxrechts">


</td>
</tr>
<tr>
<td colspan="5">
<img src="Bilder/blackdevil2_21.jpg" width="167" height="35" alt=""></td>
</tr>
<tr>
<td colspan="5" class="boxrechts2">


</td>
</tr>
<tr>
<td colspan="2">
<img src="Bilder/blackdevil2_23.jpg" width="592" height="81" alt=""></td>
<td colspan="5">
<img src="Bilder/blackdevil2_24.jpg" width="167" height="81" alt=""></td>
</tr>
<tr>
<td>
<img src="Bilder/spacer.gif" width="213" height="1" alt=""></td>
<td>
<img src="Bilder/spacer.gif" width="561" height="1" alt=""></td>
<td>
<img src="Bilder/spacer.gif" width="31" height="1" alt=""></td>
<td>
<img src="Bilder/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="Bilder/spacer.gif" width="42" height="1" alt=""></td>
<td>
<img src="Bilder/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="Bilder/spacer.gif" width="84" height="1" alt=""></td>
<td>
<img src="Bilder/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="Bilder/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="Bilder/spacer.gif" width="12" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


Ergrbnis:

http://web96.server104.rhs-it.de/test/blackdevil2.html

Wieso verdammig wird die Seite zerstückelt ?
Unfug
2006-04-01, 16:43:22
da wird mit sicherheit was buggy im html code sein.

allein schon das width="1000" bei table find ich irgendwie komisch
huha
2006-04-01, 16:44:10
Ich würde dir mal empfehlen, dich in vernünftiges Layout einzuarbeiten, so wird das nämlich wohl nichts. Dazu gehört auch, möglichst viel in CSS auszulagern und nicht über Bilder mit HTML 3 zu machen, sondern eben mit CSS-- bei deinem Code blickt man nämlich nicht, was nun letztendlich zu was führt, was unter anderem dem Tabellenlayout geschuldet ist.

-huha
Yan-13
2006-04-01, 16:59:36
Versuche mal mit css so ein Design hinzubekommen. Richtig unmöglich !! Was ich gemaht habe NUR die Geslicten bilder con photoshop als Background gelegt das wars.

Edit. hab mal die bilder + Code hochgeladen:

http://web96.server104.rhs-it.de/download/blackdevil2.rar
huha
2006-04-01, 17:04:25
Versuche mal mit css so ein Design hinzubekommen. Richtig unmöglich !! Was ich gemaht habe NUR die Geslicten bilder con photoshop als Background gelegt das wars.

Och, das würde ich nicht sagen, daß das unmöglich ist. Mit viel weniger Bildern, Slices uswusf. kann man da ein sehr ansprechendes CSS-Design basteln.
Photoshop mag zwar gut sein, um die Dinge zu entwerfen, bei Webseiten versagt es allerdings total.
Nimm dir dein Design und überlege dir, wie du es in logische Elemente untergliedern kannst (z.B. der Header oben-- warum muß der zerschnitten werden? Einfach ein großes div o.ä. und den _ganzen_ Header als Hintergrund, fertig). Schneide dann diese aus, speichere sie als neue Dateien ab und setze deine Homepage zusammen; geht nicht nur schneller, sondern ist auch wesentlich leichter zu coden und zu warten.
Lasse deine Seiten nicht erzeugen, erzeuge sie selber, denn nur dann geht's wirklich gut.

-huha

edit: Es wäre Hilfreich, wenn du das ganze Seitendesign hochladen könntest, z.B. als 24-bit-PNG, dann müßte man sich nämlich nicht mit den vorgeschnittenen Slices rumärgern.
Yan-13
2006-04-01, 17:17:42
also oben ist jetzt einmal geslicet mit dem ganzen Kram und hier das Ganze als ein bild:

http://img127.imageshack.us/img127/9955/blackdevil2kopie1hi.th.jpg (http://img127.imageshack.us/my.php?image=blackdevil2kopie1hi.jpg)

Edit. gibt es denn ne möglichkeit es so zu machen wie ich es erst angefangen habe ?
Henrik
2006-04-08, 19:21:40
Das Design mit CSS Layout ist absolut gar kein Problem.

Die Headergrafik wird in einem Stück gesliced, die Loginbox wird hinterher zb. über Z-Index drübergelegt.

Der Rest sollte einfach sein, einfach je Typ Hintergrundgrafik ein Slice und hinterher die Schrift darüber.

Hier kannst du dich orientieren:
http://www.css4you.de/wslayout1/ex0010.html
Yan-13
2006-04-08, 21:23:17
Nur wo direkt liegt denn das Problem an Tabellen Layouts ? Sie werden doch ganz normal angezeigt und funktionieren genauso. Den user der auf eine Seite geht interessiert doch eigentlich net ob es nun nen tabellen oder css Layout ist oder ?
Henrik
2006-04-09, 00:41:47
Es bietet schon eine Reihe von Vorteilen.
Lies dir bitte das mal durch: http://www.css4you.de/wslayout1/index.html


Glaub mir: hast du einmal das Prinzip aus Layern und floaten verstanden, willst du nie mehr ein Tabellenlayout.
huha
2006-04-09, 01:00:29
Dein Tabellenlayout hat den Nachteil, daß es nicht tut. Da der Code unübersichtlich ist, hat auch niemand so recht Lust darauf, zu gucken, an was es letztendlich liegen könnte.

Der Wartungsaufwand eines CSS-Layouts ist, bedingt durch den viel geringeren Codeumfang, auch kleiner, was nur zuträglich sein kann.

-huha
Yan-13
2006-04-09, 11:45:40
Naja ich habe ehrlichgesagt erst 1 mal probiert nen layout mit css zu machen da habe ich das Hintergrundbild nicht geslicet und die einzelnen textelement per css an die richtige position gelegt. Das dumme war nur jeder der ne andere Moniauflösung hatte als ich hatte die Texte an einer komplett anderen stelle :|
DanMan
2006-04-09, 17:34:57
Was man mit CSS alles so anstellen kann: www.csszengarden.com

Folgich stellt auch deine Seite kein Problem mit CSS dar, wenn man weiß wie es geht. ;)

Jede Tabelle wird vom Browser in 2 Durchgängen gerendert (Spalten und Zeilen). Alleine dadurch werden Seiten mit zig verschachtelten Tabellen langsamer geladen. Die Textgrößen gibt man übrigens am besten in em an. Was das heißt? http://de.selfhtml.org/

Da du offenbar mit Imageready arbeitest: das kann auch CSS Layouts ausspucken. In den "Output settings" die "Slices" auf "Generate CSS" einstellen (arbeite mit der engl. Version). Erstellt viel unnötigen Code, aber wenigstens verschwinden die "Spacer.gif" - das ist so 90er. ;p

Noch'n Tip fürs Menü links: benutz die Exotenschrift für die Überschrift, und die serifenlose für die einzelnen Menüpunkte. Erleichtert das Lesen erheblich.
Gast
2006-04-09, 20:06:27
Naja ich habe ehrlichgesagt erst 1 mal probiert nen layout mit css zu machen da habe ich das Hintergrundbild nicht geslicet und die einzelnen textelement per css an die richtige position gelegt. Das dumme war nur jeder der ne andere Moniauflösung hatte als ich hatte die Texte an einer komplett anderen stelle :|
Dann bist du einfach „schlecht“ - wie jeder am Anfang. Probiers nochmal, und lies dir Artikel (drweb, css4you, etc) durch, und machs gscheit.