CSS: Ich brauch mal Eure Erfahrung [Archiv]

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS: Ich brauch mal Eure Erfahrung

WhiteVelvet

2006-07-03, 17:40:29

Ich will ja meine neue Website W3C konform machen und dazu endlich mal CSS einsetzen, was ich bisher nie benutzt habe. Bin noch am Anfang beim Tabellenaufbau mit Hintergrundgrafiken und irgendwie schliesst er eine Lücke nicht richtig. Schaut selbst bitte mal nach:

http://www.ditonovia.de/jpselter/table.php
http://www.ditonovia.de/jpselter/jpselter.css

Kann man hier auch schon was optimieren? Müssen diese margin-Befehle da überhaupt hin? Vielen Dank für Eure Hilfe!

DanMan

2006-07-03, 18:12:21

Ist normal im standardkonformen Modus. Das einfachste wäre die Browser in den Quirksmodus zu schicken. Also den Doctype rausschmeißen.

http://developer.mozilla.org/en/docs/Images%2C_Tables%2C_and_Mysterious_Gaps

margin:0; tuts auch, anstatt jeden rand einzeln anzusprechen.

<edit> Wie wärs denn damit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>:: jpselter.de :: creative media design & software engineering ::</title>
<style type="text/css" media="screen"></style>
</head>

<body>
<div id="layer1">
<div id="layer2"></div>
<div id="layer3"></div>
</div>
</body>

</html>
Das Bild für links besteht aus beiden für die linke Hälfte. Mehr braucht man an HTML dafür nicht.
Weil ich gerade ganz guter Laune bin noch ne Erläuterung:

Ein Container um die maximale Breite festzulegen, und um alles insgesamt auf der Seite zentrieren zu können.
Dann 2 schwebende (damit sie nebeneinander stehen) Container innerhalb des 1. Containers, für den eigentlichen Inhalt.
Dann jeweils die Hintergrundpilder per Stylesheet platziert.

Yay! 2400. Beitrag! :ugly:

WhiteVelvet

2006-07-03, 18:59:54

Danke für die Tips :) Probiere ich gleich nach dem Abendessen mal aus.
Congratz zum 2400. Bei mir dauerts noch 30 Posts ;)

WhiteVelvet

2006-07-03, 19:47:28

So, habs eingebaut. Ich sollte wirklich aufhören, das Tabellenlayout zu benutzen. So gehts ja auch wunderbar. Bloss wieso sieht nun derselbe Code auf IE und Firefox unterschiedlich aus? Und wo ist die vertikale Zentrierung hin?

DanMan

2006-07-03, 19:59:49

WhiteVelvet[/POST]']So, habs eingebaut. Ich sollte wirklich aufhören, das Tabellenlayout zu benutzen. So gehts ja auch wunderbar. Bloss wieso sieht nun derselbe Code auf IE und Firefox unterschiedlich aus? Und wo ist die vertikale Zentrierung hin?
Was meinst du? Bei mir siehts im IE6 und Ff1.5.0.4 gleich aus, und vertikal zentriert wars bei mir vorher auch nicht. :confused:
Mal abwarten, was die anderen sagen.

hyperterminal

2006-07-03, 20:06:15

DanMan[/POST]']Was meinst du? Bei mir siehts im IE6 und Ff1.5.0.4 gleich aus, und vertikal zentriert wars bei mir vorher auch nicht. :confused:
Mal abwarten, was die anderen sagen.
Bei mir sieht die Seite mit dem IE6 ganz anders aus als mit Firefox:

http://img189.imageshack.us/img189/648/previewie3iv.th.jpg (http://img189.imageshack.us/my.php?image=previewie3iv.jpg)

WhiteVelvet

2006-07-03, 20:18:13

In meinem IE6 siehts hier nochmal anders aus, insgesamt alles nach links gesetzt und bg_main ist völlig ineinander geschoben hmmmm

DanMan

2006-07-03, 23:31:45

Das ist sehr seltsam. Bei mir siehts, wie gesagt, in beiden Browsern gleich aus - so wie's sein soll. Opera9 beschwert sich auch nicht.
Pack mal nur das Minimum in das Stylesheet:body {
font-size: 0.88em;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #999999;
margin: 0;
padding:0;
}

#layer1 {
background-image: url("images/bg_top.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: auto;
margin-left: auto;
width: 848px;
height: 110px
}

#layer2 {
background-image: url("images/bg_left.jpg");
background-repeat: no-repeat;
background-position: left top;
width: 148px;
height: 670px;
float: left
}

#layer3 {
background-image: url("images/bg_main.jpg");
background-repeat: no-repeat;
background-position: 0 110px;
padding-top: 120px;
padding-left: 15px;
width: 685px;
height: 550px;
float: left
}
Kannst ja auch mal nen strikten Doctype testen.

Was habt ihr für Betriebssysteme? Ich hab WinXP pro. Ich werds mir am Rechner auf der Arbeit auch mal angucken.

edit: Auf der Arbeit siehts im IE6 unter Win2k auch aus wie's sein soll. Keine Ahnung also, warum es bei euch nicht stimmt. :confused:

WhiteVelvet

2006-07-04, 10:35:38

Bin grad auf der Arbeit und hier läuft leider der IE nicht (irgendwie kaputt)... ich teste es heute Nachmittag wenn ich zu Hause bin, melde mich dann wieder.

Btw. ist es hier im Firefox in Ordnung, bloss dass ich hier nur 1024x768 habe und ich nach unten scrollen muss. Ich sollte das Design vertikal etwas verkürzen...

WhiteVelvet

2006-07-04, 16:18:10

So, auch nochmal mit dem minimalen Code getestet. Beim Firefox fehlt die vertikale Zentrierung (oder sollte die noch fehlen?) und ich sollte dazu sagen, dass ich hier IE5 (nicht IE6) einsetze, vielleicht sehen wir deshalb unterschiedliche Ergebnisse. Aber IE5-kompatibel wollte ich schon sein. Bloss was muss ich nun ändern, um mit dem IE5 das gewünschte Ergebnis zu sehen?

hyperterminal

2006-07-04, 17:09:26

WhiteVelvet[/POST]']Bloss was muss ich nun ändern, um mit dem IE5 das gewünschte Ergebnis zu sehen?
Kann ich dir jetzt spontan auch nicht sagen. Probieren geht ueber studieren. Am besten du machst das Hauptstylesheet erstmal so, dass es im Firefox wie gewuenscht aussieht (mit vertikaler Zentrierung). Dann kannst du fuer die verschiedenen IE Versionen kleine Anpassungen in extra Stylesheets auslagern. Einbinden tust du diese dann mit Conditional Comments (http://www.drweb.de/html/conditional_comments.shtml).

WhiteVelvet

2006-07-04, 17:19:29

Guter Tip, danke, hoffentlich ist das auch W3C-konform ;)

EDIT: ist es, und es klappt wunderbar. Muss ich nur mal sehen wie ich das ganze zentriert bekomme, sollte ja nicht schwer sein.

WhiteVelvet

2006-07-04, 17:41:11

Noch eine Verständnisfrage: Wir haben oben immer nur <div id="layer2"> benutzt, was ist mit <layer id=...>? Ist das dasselbe oder sollter ich besser <layer> benutzen statt <div>? Stolpere nämlich gerade bei selfhtml.de darüber...

EDIT: Also jetzt probiere ich schon viel mit margin und so, aber ich bekomme layer1 nicht zentriert. Das wäre das letzte Ziel, danach steht das Basis-Design. Ich hab schon überlegt einen layer0 zu erstellen, aber ich weiss dann nicht weiter, es müsste auch nur mit layer1 gehen, dass der zentriert ist.

DanMan

2006-07-04, 18:15:53

Nene, was du meinst ist das alte Netscape <layer> Element. Das ist obsolet. Was da bei mir "layer1" usw. heißt könnte genausogut Heinz, Apfel, oder Jürgen heißen. Das ist lediglich der Bezeichner (die ID eben), auf den du duch dann im CSS beziehst.

Was die vertikale Zentrierung angeht, das ist garnicht einfach, wenn man auf Tabellen verzichten will. Das ist nämlich im Prinzip garnicht so vorgesehen, weshalb man da tricksen muss. Ich bin aber i.M. ziemlich kaputt, also probiers doch mal aus. Vielleicht hat einer der anderen ja auch noch einen Tip parat. Wenn nicht, dann guck ich morgen mal, was ich tun kann.

Allerding solltest du dich trotzdem mal fragen: muss das überhaupt vertikal zentriert sein?

WhiteVelvet

2006-07-04, 18:58:39

OK, wenn es am Ende nur mit einer 1x1 Tabelle geht, dann wird es halt so gemacht. Najo, es sollte schon vertikal zentriert sein, irgendwie find ich das schöner, ist eben geschmackssache. Mache aber erst morgen weiter, fahre jetzt noch einkaufen und dann Fussball ;) olé!

DanMan

2006-07-05, 15:41:46

Kurz gesagt: ohne Tabellen geht das z.B. so: http://www.waxpad.com/articles/vcexample.html

Das ist aber auch wieder so eine div-Suppe, dass man auch gleich Tabellen nehmen könnte...

Ich habs auf eine meiner Seiten mal so gemacht, dass ich als äußerstes Element eine Tabelle genommen hab, um dadurch alle weiteren Elemente vertikal zu zentrieren. Dann brauchst du nur eine einzige Tabelle. Nur die Höhenangabe von 100% muss ins CSS, wenn du validen Code haben möchtest. Der Doctype muss glaube ich auch HTML 4 Transitional sein.

hyperterminal

2006-07-05, 18:37:23

DanMan[/POST]']Kurz gesagt: ohne Tabellen geht das z.B. so: http://www.waxpad.com/articles/vcexample.html

Das ist aber auch wieder so eine div-Suppe, dass man auch gleich Tabellen nehmen könnte...
Hinzu kommt, dass man auf absolute Groessenangaben angewiesen ist. Somit kann die Seite in der Groesse nicht beliebig skaliert werden.