• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text auf Hintergrund

Status
Für weitere Antworten geschlossen.
V

vita

Neues Mitglied
Hallo zusammen,

Ich bin noch recht neu hier in der Community, lese aber schon seit geraumer Zeit mit. Hab mich dann heute doch mal dazu entschieden mich hier anzumelden, da ich mit meiner Seite ein Problem habe.

Ich hab nen Div-Layer mit nem Hintergrundbild. AUF diesem Hintergrundbild soll ein Text erscheinen, der allerdings auch nur auf diesem Div-Layer bleibt und nicht darüber hinaus geht.
So wie ich es jetzt gemacht habe, ist der Text allerdings UNTER den Hintergrundbild dieses Div-Layers und er springt auch noch über den Layer Boden hinaus.

Hier ist das Beispiel: High Society

Dazugehöriger Text in der CSS Datei:
Code: 
.content #forum_box {
   background-image: url(images/forum_box.png);
   background-repeat: no-repeat;
   position: absolute;
   width: 478px;
   height: 330px;
   margin-left: 1px;
}

.content #forumtext {
   position: absolute;
   color: #000000;
   width: 460px;
   height: 310px;
   text-decoration: none;
   font-family: tahoma;
   font-size: 10px;
   margin-top: 25px;
   margin-left: 10px;
}
Der Text soll eigentlich komplett schwarz dargestellt werden, wird aber grau dargestellt, weil das Hintergrundbild (Terms of conduct) weiß und durchsichtig ist. Ich denke die Namensgebung ist eindeutig :).

Schonmal danke im Voraus.
 
Wieso nutzt Du überhaupt absolute Positionierung? Wenn du das verwendest solltest Du dir mal die Eigenschaft z-index genauer anschauen.
 
Hab den Text nun auf dem Hintergrundbild, allerdings sprengt er immernoch den unteren Rahmen des Div-Layers.
Mir wäre es am liebsten wenn es das nicht tun würde und an der seite vllt ein kleiner Scrollbalken erscheinen würde.

Edit: Absolute Positionierungen weil sich durch relative Positionierungen irgendwie Verschiebungen zwischen IE und FF ergeben.
Der einzige "Nachteil", der dadurch entsteht ist, dass die Navigation über den linken Bildschirmrand hinaus geht, falls man an der Browsergröße herumspielt.
 
Für einen Scrollbalken im div müsstest du die CSS-Eigenschaften overflow auf scroll stellen.

Absolute Positionierung zu verwenden, weil sonst die Browser etwas falsch anzeigen ist auch keine Lösung. Es gibt immer einen Grund wieso sie es machen.
 
Damit sollte es klappen:

.content #forumtext {
position: absolute;
color: #000000;
width: 450px;
height: 300px;
overflow: scroll;
text-decoration: none;
font-family: tahoma;
font-size: 10px;
margin-top: 25px;
margin-left: 10px;
}
Zum Vergrößern anklicken....

Unabhängig davon sind die vielen absoluten Positionierungen absolut unnötig. Das kannst du alles viel besser mit float und margin-Angaben lösen.
 
Das ist perfekt. Jetzt muss ich nur noch den horizontalen Scrollbalken entfernen.
Danke euch für die Hilfe :).

Naja... Jetzt nochmal die komplette CSS-Datei umzuschreiben ist mir ehrlich gesagt etwas zu aufwendig. Es hat anfangs mit float und margin allein nicht hingehauen, also bin ich auf absolute gegangen. Damit ging es.
Wenn die Seite mal fertiggestellt ist, dann werd ich mal versuchen etwas an der CSS rumzuschrauben.
 
Dann kannst Du auch nochmal an der Semantik "schrauben". Das ist nämlich auch noch nix.

Navigation als div-Suppe statt Liste.
Und Deine mehreren Textabsätze zeichnest Du als einen einzigen aus und setzt <br> dazwischen, wo eigentlich der Absatz zu Ende wäre.
Überschriften gibts nicht.
alt-Attribute sind leer.

Das nur mal so schon zur Anregung...
 
Dass die alt-Attribute leer sind, ist Absicht, weil XHTML will das so.
Die Navi Leiste als Liste einzubauen, daran hab ich gar nicht gedacht, aber werd ich dann auch im Nachhinein ändern.

Mal was anderes: Hier wurde ja gesagt, dass es an manchen Stellen weniger optimal ist mit absoluten Positionierungen zu arbeiten. Warum ist das so?
Und um mal ganz konkret zu werden: Inwiefern würde das am Design, bzw eher am "Verhalten" der Homepage etwas ändern?
 
vita schrieb:
Dass die alt-Attribute leer sind, ist Absicht, weil XHTML will das so.
Zum Vergrößern anklicken....

Mit Sicherheit nicht. Nach xhtml ist das alt-Attribut notwendig. Ob dort etwas drinne steht oder nicht ist völlig egal, aber es ist (wie schon gesagt) empfehlenswert etwas rein zu schreiben damit Suchmaschinen und menschliche Besucher ohne Bildanzeige auch erkennen können was sich da "versteckt".

Mal was anderes: Hier wurde ja gesagt, dass es an manchen Stellen weniger optimal ist mit absoluten Positionierungen zu arbeiten. Warum ist das so?
Zum Vergrößern anklicken....

Kommt immer auf den Anwendungsfall an. Es ist allerdings wenig ratsam die gesamte Seite irgendwie absolut zu positionieren. Viele Browser (vor allem ältere und der IE) zeigen die Seiten dann mitunter auch anders an als andere Browser. Das endet nur in einer grausamen Bastelei um das hinzubiegen.

Und um mal ganz konkret zu werden: Inwiefern würde das am Design, bzw eher am "Verhalten" der Homepage etwas ändern?
Zum Vergrößern anklicken....

Mit dem "Verhalten" denkst du schon in die richtige Richtung denke ich. Jede Maschine (Browser wie Suchmaschine) liest den HTML-Quellcode von oben nach unten ein. Dadurch ergibt sich aus der Reihenfolge des Codes eine gewisse Wertigkeit für die Inhalte. Ist dann ein Element absolut an einer anderen Stelle positioniert als im HTML-Code ersichtlich täuscht man den Suchmaschinen etwas vor. Solange diese nicht unbedingt jede CSS-Eigenschaft kennen und werten kann dies vielleicht von Vorteil sein, aber auf lange Sicht gesehen und aus o.g. Gründen ist das eher hinderlich.
 
threadi schrieb:
Mit Sicherheit nicht. Nach xhtml ist das alt-Attribut notwendig. Ob dort etwas drinne steht oder nicht ist völlig egal, aber es ist (wie schon gesagt) empfehlenswert etwas rein zu schreiben damit Suchmaschinen und menschliche Besucher ohne Bildanzeige auch erkennen können was sich da "versteckt".
Zum Vergrößern anklicken....
Versteh ich nicht.
Dem Text, den ich diesbezüglich gelesen habe, habe ich entnommen, dass ich entweder:
<img src='asdf.jpg' alt='asdf' />
oder
<img src='asdf.jpg' alt='' />
machen kann. Wenn ich es bei w3.org validieren lasse, wird der Code auch als valid angezeigt. Entferne ich das alt-Attribut allerdings komplett entferne oder irgendwie anders hinschreibe, wird der Text nicht mehr als valid angezeigt.
Ich nehme an, ihr versucht mir zu sagen, dass ich in das alt-Attribut etwas eintragen soll, allerdings möchte ich das nicht, denn ich finde diesen automatischen MouseOver-Effekt davon nicht so schön, deswegen leer.


Zur statischen positionierung: Ich denke bei so einer kleinen Seite mit vergleichsweise wenig HTML-Code ist es noch vertretbar die Positionen fix zu setzen. Der einzige Nachteil, den ich bis jetzt dadurch erfahren habe ist der, dass ich alles relativ zum Main Content positionieren muss und somit die Navigationsleiste so aus dem Bildschirmrand rutscht, dass man nicht mehr auf sie zurück scrollen kann, sollte man eine Auflösung von 640 x 480 benutzen. Ich bin aber einfach davon ausgegangen, dass die Leute, die diese Seite besuchen eine Auflösung von mindestens 800 x 600 haben (wobei mein Fokus eher auf der Breite als auf der Höhe lag), da diese Leute alles Gamer sind und große Bildschirme brauchen :P.
 
Astrein :).
Naja, vielen Dank für die Hinweise. Werds mir zu Herzen nehmen, nur leider gehts halt etwas langsam voran, weil Stress auf Arbeit und Motivationsmangel.
 
vita schrieb:
Dass die alt-Attribute leer sind, ist Absicht, weil XHTML will das so.
Zum Vergrößern anklicken....
Das ist ja nur die eine Seite der Medaille. Nur die Syntax.
Wenn Du ein Bild per <img>-Tag einbindest, dann ist es Inhalt, weil HTML ist Inhalt. Das eißt, es ist ein Bild, das für den Inhalt wichtig ist. Für so ein Bild gibt es eigentlich immer auch einen sinnvollen Wert, den man bei alt einträgt.

Beispielsweise ein Logo, da kommt ins alt dann das, was auf dem Logo steht oder der Name der Firma oder sowas.

Wenn Du ein Image hast, wo es nicht schlimm ist, wenn es nicht angezeigt wird, oder Du keinen Text für alt findest, dann ist es wahrscheinlich kein Content, sondern nur Zierde. Und Design wird mit CSS gemacht, daher solltest Du so ein Bild per background-image einbinden.

Trennung von Inhalt und Layout.
 
Das Problem ist, dass diese Bilder per Random-Verfahren eingespeist werden. Es sind insgesamt 15 verschiedene Bilder, glaub ich und ich weis nicht wirklich wie ich PHP-Code in eine CSS Datei packe, bzw. ob das überhaupt möglich ist. Ansonsten wäre das auch kein Problem das als Hintergrund einzubinden.
 
Lass .css-Dateien von PHP parsen.

AddHandler application/x-httpd-php .php .css

Oder um zu vermeiden, dass alle Stylesheets durch PHP geschleust werden, erfinde eine eigene Endung und parse nur die und schreib die variablen Dinge im Stylesheet in so eine Datei

AddHandler application/x-httpd-php .php .pcss
 
Mir ist gerade noch ne Idee gekommen, wo ich auch schon vorher drauf kommen hätte können:

PHP: 
echo "<link rel='stylesheet' type='text/css' href='style.php' />";

Wird die Datei dann nicht automatisch geparst?
Bzw. würde es gehen, wenn ich die Stylesheet Datei per Include einbinde?

Die Datei würde dann natürlich auch so aussehen:
PHP: 
<?php
//Ganz viel toller Text
?>

Habe gerade hier keine Möglichkeit das zu testen, aber theoretisch sollte das doch so möglich sein, oder?
 
Ja, das geht sogar. Ich habs gerade ausprobiert.
Was in Deine PHP-Stylesheet-Datei am Anfang nur noch rein muss (egal welche Endung Du nun verwendest), ist
PHP: 
header("Content-Type: text/css");
Sonst geht es nicht.

Gruß,
-Efchen
 
Astrein. Verbindlichsten Dank :D.

Nun noch etwas (irgendwas is ja immer):
Wenn ich die CSS Datei validieren lassen möchte, erhalte ich folgende Meldung:
Code: 
Die Eigenschaft overflow-x existiert nicht in CSS level 2.1, aber in [css3] : hidden
, weil ich halt manchmal den Scrollbalken vertikalen Scrollbalken brauche, den horizontalen aber nicht.

Liegt das daran, dass CSS Level 3 von w3c noch spezifiziert wird (weis es nicht genau), oder gibt es wie bei HTML auch in CSS die Möglichkeit eine Art "Doctype" zu definieren?
 
overflow-x und overflow-y werden imho von allen aktuellen Browsern und sogar dem IE6 unterstützt. Das es CSS3-Eigenschaften sind hindert dich höchstens beim Validieren, aber die Anzeige im Browser sollte immer korrekt sein.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben