Supportnet / Forum / Webseiten/HTML
Textlayer und Grafiken positionieren
Frage
Hallo, ich habe versucht einen Textlayer in mein Web einzubinden
#inhalt {
position:absolute;
left:280px; top:140px; width:600px; height:420px;
background: #C0C0C0;
}
wenn man das Browserfenster verkleinert oder vergrößert, wird leider der textlayer verschoben, wie kann ich die genaue position bestimmen, damit dieser immer an der gleichen stelle bleibt. Bei Grafiken habe ich es auch versucht, eine funzt ohne Probleme, aber sobald eine zweite eingefügt wird, dann verschiebt sich das Ganze, schau mal unter:"auf Userwunsch gelöscht."
Antwort 1 von DerWahreDenny
hallo.
bring erstmal deine css-datei in ordnung:
bottom anstatt buttom;
keine leerzeichen nach dem doppelpunkt oder nach dem komma;
bei vielen werten wurde px vergessen;
das semikolon nicht vergessen;
mfg
bring erstmal deine css-datei in ordnung:
bottom anstatt buttom;
keine leerzeichen nach dem doppelpunkt oder nach dem komma;
bei vielen werten wurde px vergessen;
das semikolon nicht vergessen;
mfg
Antwort 2 von DerWahreDenny
manchmal schreibst du in der css-datei klein, manchmal groß, manchmal beides.
das geht leider auch nicht.
manche browser oder server sind da empfindlich.
das geht leider auch nicht.
manche browser oder server sind da empfindlich.
Antwort 3 von MoRe99
Zitat:
bring erstmal deine css-datei in ordnung
bring erstmal deine css-datei in ordnung
Bei der Gelegenheit bring auch mal deinen HTML-Code auf Vordermann:
- kein Doctype angegeben
- Tags nicht geschlossen
- "verlorene" Tags
- Verwendung des font-Tags
- font-Tag einmal nicht geschlossen, dafür danach der dann doppelt
Sprich: alles aus dem HTML-Code raus, was raus kann, und ab damit in die CSS-Datei. Mach das am besten gleich von Anfang an so. Der Aufwand, das alles wieder auszulagern, ist deutlich höher.
Dazu dann noch die Tipps von DerWahreDenny beachten und es sollte schon etwas übersichtlicher werden.
Zum eigentlichen Problem: u. U. klärt sich das, wenn du die ganzen Tipps beachtest. Ansonsten schau mal hier rein:
css4you - Positionierung
SelfHTML - Positionierung
Jendryschik - feste Positionierung
Antwort 4 von bravo
danke für eure hilfe, aber wenn ich das fenster mit dem pfeil klein oder großziehe habe ich immer noch das problem, dass die bilder und layer stehen bleiben und die tabelle sich dem fenster anpasst, kann man die bilder und layer nicht so positionieren, das sich alles dem fenster anpasst oder muss man die tabelle absolute positionieren?
Antwort 5 von MoRe99
Uiui, entweder hast du das erst gestern/heute gemacht oder ich habe das total übersehen. Dein Quelltext enthält etliches, was du dir nochmal genau anschauen solltest.
Du erstellst z. B. eine Tabelle, um darin Elemente zu positionieren. Allein das solltest du schon mal überdenken. ;-) Dann aber stellst du in die Tabellenzellen <div> ein. Das macht keinen Sinn. Nochmals: die Ausrichtung mit
orientiert sich an der Position des Elternelements, und damit nicht zwangsläufig an der Position auf deiner Seite. Schau dir dazu nochmals eine der Links (oder alle) an, die ich oben bereits gepostet habe.
Nochwas, was mir beim schnellen Drübersehen auffällt: in der CSS-Datei gibst du für die Breite von #navi eine Breite von 180px an, im Quellcode packst du dann einen Style rein mit 150px Breite. Entschiede dich! ;-)
Weiterhin kannst du deine CSS-Datei schlanker machen, wenn du z. B. die font-family für alle Überschriften gemeinsam definierst und nur das bei h1, h2, etc. rein schreibst, was unterschiedlich ist zu den anderen Überschriften. Z. B. so:
Lässt sich durchaus noch mehr zusammenfassen, z. B. hast du bei drei oder vier Überschriften die selbe Farbe; könntest du auch in eine Zeile analog zu der ersten im von mir geposteten Code zusammenfassen.
Ansonsten könntest du dich mal mit dem Artikel "Tabelleformatierung mit CSS" auf thestyleworks.de beschäftigen. Dort gibt es auch sinnvolle Hinweise zum Thema Praxisgerechter Aufbau von StyleSheets, die ebenfalls sehr lesenswert sind.
Aber zum Schluss nochmal eine Frage: was verschiebt sich denn da, wenn man das Browserfenster verkleinert? Bei mir bleiben sämtliche Elemente an ihrem Platz ...
Du erstellst z. B. eine Tabelle, um darin Elemente zu positionieren. Allein das solltest du schon mal überdenken. ;-) Dann aber stellst du in die Tabellenzellen <div> ein. Das macht keinen Sinn. Nochmals: die Ausrichtung mit
position: absolute;orientiert sich an der Position des Elternelements, und damit nicht zwangsläufig an der Position auf deiner Seite. Schau dir dazu nochmals eine der Links (oder alle) an, die ich oben bereits gepostet habe.
Nochwas, was mir beim schnellen Drübersehen auffällt: in der CSS-Datei gibst du für die Breite von #navi eine Breite von 180px an, im Quellcode packst du dann einen Style rein mit 150px Breite. Entschiede dich! ;-)
Weiterhin kannst du deine CSS-Datei schlanker machen, wenn du z. B. die font-family für alle Überschriften gemeinsam definierst und nur das bei h1, h2, etc. rein schreibst, was unterschiedlich ist zu den anderen Überschriften. Z. B. so:
h1, h2, h3, h4, h5, h6 {
font-family:verdana,arial,helvetica;
font-size:10px;
word-spacing:0px;
}
h1 {
color:#005A9C;
text-align:left;
margin-top:20px;
margin-left:30px;
margin-right:30px;
}
usw.
Lässt sich durchaus noch mehr zusammenfassen, z. B. hast du bei drei oder vier Überschriften die selbe Farbe; könntest du auch in eine Zeile analog zu der ersten im von mir geposteten Code zusammenfassen.
Ansonsten könntest du dich mal mit dem Artikel "Tabelleformatierung mit CSS" auf thestyleworks.de beschäftigen. Dort gibt es auch sinnvolle Hinweise zum Thema Praxisgerechter Aufbau von StyleSheets, die ebenfalls sehr lesenswert sind.
Aber zum Schluss nochmal eine Frage: was verschiebt sich denn da, wenn man das Browserfenster verkleinert? Bei mir bleiben sämtliche Elemente an ihrem Platz ...
Antwort 6 von MoRe99
Ahh, noch was: Sinn und Zweck der Tags <h1>, <h2> etc. ist es, dein Dokument zu strukturieren. Dies geschieht bei dir nahezu ausschließlich über Farbe und Position der Überschrift. Damit der Besucher auch dahinter kommt, welche Überschrift nun übergeordnet ist, muss er deinen Farb- und Positionierungscode kennen. Sprich, er muss sich deine CSS-Datei anschauen und deinen Quellcode. Wieviele werden das wohl machen?
Viel sinnvoller ist es, die unterschiedlichen Überschriften auch unterschiedlich groß zu machen. Z. B. <h1> mit 18px, <h2> mit 16px, <h3> mit 14px etc.. Eventuell noch mit dem font-weight was machen.
Tipp in dem Zusammenhang: schau dir dein Dokument mal mit abgeschalteten Stylesheets an. Wenn du dann immer noch die Struktur deines Dokuments leicht erfassen kannst (besser wäre es, du lässt jemanden das beurteilen, der die Seite mit Stylesheets nicht kennt) hast du wirklich gut gearbeitet.
Viel sinnvoller ist es, die unterschiedlichen Überschriften auch unterschiedlich groß zu machen. Z. B. <h1> mit 18px, <h2> mit 16px, <h3> mit 14px etc.. Eventuell noch mit dem font-weight was machen.
Tipp in dem Zusammenhang: schau dir dein Dokument mal mit abgeschalteten Stylesheets an. Wenn du dann immer noch die Struktur deines Dokuments leicht erfassen kannst (besser wäre es, du lässt jemanden das beurteilen, der die Seite mit Stylesheets nicht kennt) hast du wirklich gut gearbeitet.
Antwort 7 von bravo
danke für die vielen tipps, werd sie mir mal in ruhe durchlesen und zu herzen nehmen, ich bin nunmal kein profi was webseiten programmierung angeht, allzu lange beschäftige ich mich auch noch nicht damit, aber ich bin noch lernfähig ;-) und bin für jeden ratschlag dankbar...ich wollte eigentlich versuchen die seite ohne tabellen aufzubauen, nur mit div elementen, is das keine gute idee? nun hab ich auch schon wieder ein problem, gerne würde ich mir eine bildergalerie einbauen, aber ohne tabellen is das schon mal nicht möglich oder?
Antwort 8 von rfb
Tabellen dienen zur Darstellung tabellarischer Daten!
Natürlich kannst du eine Tabelle mit
als Bildergalerie nutzen.
Alles andere kannst du mit CSS gestalten. Und oben sind zahlreiche Links zum Thema genannt. Weitere Infos findest du auch hier: http://barrierefrei.e-workers.de/index.php
Natürlich kannst du eine Tabelle mit
Bild / Beschreibung / erstellt am / vonals Bildergalerie nutzen.
Alles andere kannst du mit CSS gestalten. Und oben sind zahlreiche Links zum Thema genannt. Weitere Infos findest du auch hier: http://barrierefrei.e-workers.de/index.php

