Hi,

ich habe mich seit einiger Zeit ein bisschen in die Materie Web-Publishing eingearbeitet, weil ich für einen Musikverein eine Internetpräsenz erstellen soll - Hierfür habe ich bereits ein Layout erstellt, welches ich euch momentan allerdings leider nur als Screenie verhältnismäßig klein vorstellen kann (Siehe Pic). Sobald ich die Site mal testweise on habe, gibts natürlich nen Link, eh klar.

Ich hab folgende Probleme:

Wie ihr seht, ist die Seite nicht zentriert. Wie kann ich sie unter Verwendung des aktuellen Quelltexts, also mit div-Containern, zentrieren? Die Frage hat sich allerdings erledigt, wenn sich folgendes nicht realisieren lässt:

Alle Angaben sind absolut. Ich will allerdings Rücksicht nehmen auf Anwender mit kleineren Auflösungen, da die Site "gerade noch so im Vollbildmodus bei ner 1024er" dargestellt wird. Bekanntlich ergibt sich das Prob ja auch schon, wenn jemand die Site nicht im Vollbildmodus betrachtet und dadurch horizontale Scrollbalken entstehen

--> Kann ich die Angaben relativ in diesem Quellcode mit Div-Containern angeben?

Ich hab mir das vielleicht auch so vorgestellt, dass sich die Seite "zusammenschiebt". Ich versuchs zu erkären,

Ihr seht oben den "Balken" in der Navi - also die obere Leiste zwischen den zwei roten Grafiken - bei einem Zusammenschieben des Fensters könnte sich doch, rein theoretisch, dieser Balken zusammenschieben und der Inhalt, der unten im "Content"-Fenster angezeigt wird, würde sich dann ja eh nach unten "Strecken"

Wäre das vielleicht auch möglich?

Außerdem wird oben, wie auf dem Screenie ersichtlich, vom IE zumindest, immer so ne kleine Icon-Leiste eingeblendet, zum Speichern des Bildes - kann man das wie unterdrücken? (Nachtrag: Pasiert übrigens nur bei gifs im IE, durch Zufall rausgefunden)

Info:
Ich tu mir grad schwer die Problemchen hier sinnvoll zu dokumentieren, deshalb fragt bitte, wenn was unklar ist ^^"

Hier noch der Code - ich hab übrigens bewusst bisher die große Grafik nur in zwei Slices geteilt. Der komplette Inhalt fehlt noch und die Navi ist auch nur "obligatorisch" unvollständig platziert.

Ist übrigens mein erstes Layout und meine erste Page, daher können auch grobe, fahrlässige Fehler im Quelltext selbst vorliegen, bitte dies zu entschuldigen und hoffe auf Korrekturvorschläge, thx ^^

Weitere Info: Dieser Threat existiert in dieser Form auch schon in einem anderen Board, von mir selbst erstellt

Was das Zentrieren angeht hab ich auch ein Biespiel im Web gefunden, bei dem eine Box horizontal mit CSS zentriert wird. Bei mir ist die Struktur ja etwas komplizierter und ich habs nicht geschafft, mit Hilfe des Quelltexts auf dieser Page zum Ziel zu kommen.

Genau das ist aber die Lösung zum Zentrieren der Seite und das läßt sich auch in Deinem Fall problemlos umsetzen. Wo genau hakt es denn? Von der absoluten Positionierung des äußeren Containers müßtest Du Dich dann allerdings trennen - ist aber eh besser und sicherlich auch nicht nötig!


Gute Idee und auch machbar! - mach einen Streifen des Balkens (1px-Breite reicht schon) und pack den als Hintergrund mit background: url(streifen.gif) repeat-x top; einfach in den Inhaltsdiv.

Das ist die Image-Toolbar, kommt bei gifs und jpgs ab 150 x 150px Größe oder so was - bei sehr kleinen jedenfalls nicht. Kann man mit folgendem meta-tag abstellen: <meta http-equiv="imagetoolbar" content="no">

Allgemeiner Tipp: beschäftige Dich mal mit den Positionierungsmöglichkeiten mit CSS und versuche, die absolute Positionierung eher zu vermeiden. Hier mal ein Versuch von mir, das verständlich darzustellen: http://home.arcor.de/terrikay/tutori...ionierung.html
hier noch ein weiteres deutsches Tutorial dazu: http://www.webwriting-magazin.de/sog...ssebenen.shtml

Verbindlichsten Dank für die schnelle und kompetente Antwort. Folgende "Probleme", konnten durch dein vielversprechendes Reply auf Anhieb gelöst werden:

1. Image-Toolbar: Ganz einfach mit Meta-Tag entfernt.

2. Zentrierter Div-Container: Problem lag eben daran, dass mein Quelltext in sich widersprüchlich war durch position:absolute eben

Was noch aussteht:

Die Sache mit dem grafischen Balken oben.

Kannst du die Sache näher erläutern? Am besten oben in den Quelltext einfügen? Ich bin mir nämlich nicht ganz im Klaren, ob du damit nun meinst, dass der obere Balken quasi durch den gestreckten 1px breiten Hintergrundbalken ersetzt wird oder wie genau. Und was für einen Div-Container meinst du genau? Muss ich vielleicht einen neuen definieren, für den oberen Balken?

Mein Ansatz wäre folgender:

- 1 div, der alles umschließt und zentriert wird - bekommt eine Breitenangabe, z.B. 80%, ist damit auch flexibel. Dieser erhält den Hintergrund wie oben beschrieben.

- Dann zwei weitere Container - einer links, einer rechts innerhalb des äußeren (z.B. mit float positioniert). Beide haben die seitlichen Streifen als Hintergrund (ebenfalls gekachelt und mit repeat-y versehen.

- Die beiden Logos im ersten Container oben mit float:left und right und mit negativem margin ausrichten, z.B. sowas: float:left; margin-top: - 5px; margin-left: -5px; für den linken - damit bekommst Du sie über die Grenzen des äußeren Containers . Die genauen Werte mußt Du natürlich austüfteln (und clearen nicht vergessen!)
Diese Konstruktion ist dann flexibel und paßt sich jeder Monitorgröße an - außerdem sind die Grafiken sehr klein und die Ladezeit bleibt gering.

Versuch mal, das umzusetzen - ich wollte Dir das jetzt nicht komplett vorkauen. -> bei Problemen halt fragen.

Okay, super.

Muss mir dann halt Gedanken über die genauen Slices machen, aber ich denk das wird.

Werd mich heut Nachmittag mal dransetzen - nur was ist mit clearen gemeint?

Thx
Fladdy

Bitte lies aufmerksam die beiden oben verlinkten Artikel über die Positionierung der Elemente -> danach sollte das eigentlich klar sein!

Sorry, Sache mit Clean hab ich in deinem Tut komplett überlesen.

Ich komm nur mit deinem Gedankengang net ganz mit - ich soll ein Div erstellen, das alles umfasst <--- wie ist das gemeint? Das komplette Layout? Dann bekäme ja dieser "große" Div als Hintergrund den "Pixel-Balken" hinterlegt

Nachtrag: Der Tag von dir oben hatte ja auch noch wo die Angabe "top" drinne, ich werds schnell nommal veruschen

Genau! -> Probiers einfach mal aus!

Irgendwie stell ich mich grad wieder total behämmert an. Irgendwo steckt hier n Fehler ~.~'

Ich würde folgende Dinge ändern:

1. statt Klasse bigdiv würde ich id="bigdiv" vergeben - speziell Opera macht sonst evtl. Probleme und Du hast dieses Div ja auch nur einmal auf jeder Seite.

2. margin:10% rundum definieren - was soll das "inherit"? Du brauchst ja auch noch einen Platz zu beiden Seiten.
Oder auch z.B. margin:5% 10% 0 10%; - also rundum definieren in dieser Reihenfolge: oben, rechts, unten, links

3.background:url (http://mitglied.lycos.de/blackfladder/Streifen.gif) repeat-x top; ist die Kurzschreibweise (dann ohne -image!)
Langform wäre so:
background-color:#fff;
background-image: url (http://mitglied.lycos.de/blackfladder/Streifen.gif) ;
background-repeat: repeat-x;
background-position: top;

Das hab ich nur zusammengefaßt, ganz einfach. Du solltest auch besser noch die Hintergrundfarbe definieren.

Und noch was zum Doctype: bei diesem Doctype sind alle Browser im Quirksmode. Da finde ich persönlich es schwieriger, die Renderunterschiede bezüglich des Boxmodells auszugleichen (dank toscho weiß ich nun, wie das geht) - aber ich würde trotzdem eher einen Doctype wählen, bei dem die Browser im Standard-Modus rendern. Aber das mußt Du selbst wissen.