XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Text auf zentrierten Hintergrundbild positionieren (http://xhtmlforum.de/showthread.php?t=66050)

zonkifail 26.10.2011 15:46

Text auf zentrierten Hintergrundbild positionieren
 
Hallo liebe Forenmitglieder :D

Ich wende mich an euch, weil ich (als CSS-Neuling) ein kleines Problem habe, wo ihr mir bestimmt helfen könnt.

Und zwar möchte ich ein Text an der Stelle angezeigt bekommen, wo mein zentriertes Hintergrundbild eingefügt wurde. Hier erstmal der kleine Quelltext:

HTML-Code:

<html>
        <head>
                <title>Test</title>
                <style type="text/css">
                        #leiste{
                        background-image:url("bild.png");
                        background-position: center;
                        background-repeat: no-repeat;
                        height: 34px;
                        }
                </style>
        </head>
        <body>
        <div id="leiste">
                Text
        </div>
        </body>
</html>

Wie man vielleicht jetzt vermuten kann, wird der Text ganz links auf der Website angezeigt, so wie hier. Leider weiß ich jetzt nicht, wie man den Text jetzt genau dort positionieren kann, wo das Bild anfängt.

Ich kann hier leider nicht einfach ganz stumpf irgendwelche padding-Werte eingeben, weil der Text dann, abhängig von der Bildschirmbreite, immer wo anders anfängt.

Ich hoffe, dass ihr mir bei diesem Problemchen helfen könnt.

MfG

Zonkifail

TimD 26.10.2011 16:28

Hey,

so sollte es gehen....
Code:

<html>
        <head>
                <title>Test</title>
                <style type="text/css">
                        #leiste{
                        background-image:url("bild.png");
                        background-position: center;
                        background-repeat: no-repeat;
                        height: 34px;
                        }
                </style>
        </head>
        <body>
        <div id="leiste">
                <p align="center">Text </p>
        </div>
        </body>
</html>


zonkifail 26.10.2011 16:48

Nene,

ich möchte, dass der Text dort anfängt, wo auch die Grafik anfängt, so wie hier in der Beispielgrafik :)

fricca 26.10.2011 16:56

Dieses eine Element steht doch bestimmt nicht im luftleeren Raum, oder? Da gibt's doch mehr in deinem Code.
Man kann schlecht völlig losgelöst von allem über ein Darstellungsproblem reden. Bitte poste einen Link zu deiner Seite, die du bearbeiten willst.
Und informier dich über die Bedeutung der Doctype-Angabe (Google: "Doctype Switch"). Diese fehlt in deinem Beispiel.


@TimD: Das align-Attribut ist veraltet. Für Gestaltung nimmt man CSS. text-align heißt die Eigenschaft.

zonkifail 26.10.2011 17:07

Da muss ich dich leider enttäuschen:

Mehr Code kann ich dir zur Zeit nicht geben, da ich sozusagen zuerst etwas rumexperimentieren will, bevor ich richtig anfange, meine Website zu programmieren. Deswegen halt dieser kleiner Codeschnippsel ;)

Ich glaube auch nicht, dass es später im Code irgendwelche Zeilen gibt, die große Einflüsse auf die Leiste mit dem Text haben (ich weiß nicht, ob du letztendich darauf hinauswolltest).

Ach ja, mein Browser (Firefox 7.0) liefert den Wert "BackCompat", sobald ich den Modus mit
Code:

<script type="text/javascript">
alert(document.compatMode);
</script>

abfrage.

fricca 26.10.2011 17:17

Zitat:

Zitat von zonkifail (Beitrag 504546)
Da muss ich dich leider enttäuschen:

Mehr Code kann ich dir zur Zeit nicht geben, da ich sozusagen zuerst etwas rumexperimentieren will, bevor ich richtig anfange, meine Website zu programmieren. Deswegen halt dieser kleiner Codeschnippsel ;)

Dann muss ich dich auch enttäuschen, denn anhand dieses Schnipsels hat es keinen Sinn, über Gestaltung zu reden.
Man muss erst sinnvolles HTML haben ehe man über die Gestaltung mit CSS nachdenken kann.

Zitat:

Ich glaube auch nicht, dass es später im Code irgendwelche Zeilen gibt, die große Einflüsse auf die Leiste mit dem Text haben (ich weiß nicht, ob du letztendich darauf hinauswolltest).
Ich will darauf hinaus, dass es sehr wahrscheinlich ist, dass deine "Leiste" -- was auch immer das mal werden soll (eine Überschrift vielleicht?) -- später in einer Umgebung eingebunden ist, die nicht die volle Breite des Viewports einnimmt. Und schon löst sich dein Problem in Luft auf, denn dann kannst du mit Padding einrücken.

An Darstellungsproblemen herumzubasteln, ohne eine HTML-Grundlage zu haben, ist ein typischer Anfängerfehler. Ich empfehle dir Little Boxes für den Einstieg.

Zitat:

Ach ja, mein Browser (Firefox 7.0) liefert den Wert "BackCompat", sobald ich den Modus mit
Code:

<script type="text/javascript">
alert(document.compatMode);
</script>

abfrage.
Du hast dich ja jetzt sicher informiert und weißt, warum es absolut keine gute Idee ist, es dabei zu belassen.

Sinokle 26.10.2011 18:47

Schrumpfe die Div auf die Größe der Hintergrundgrafik und zentriere dann die Div statt dem Hintergrund.

Code:

#leiste {
    width:800px;
    height:34px;
    margin:0 auto;
    background:url('bild.png') no-repeat;
}

Wenn es eine Überschrift werden sollte, gib dem verwendeten h-Tag (h1, h2, usw.) das Hintergrundbild.

zonkifail 26.10.2011 18:55

Gut ich kann dir zumindest sagen, wie ich meine Homepage letztendlich aufbauen will (was ich auch vorhin hätte machen sollen, sorry).

HTML-Code:

<html>
        <head>
                <title>Test</title>
                <style type="text/css">
                        #leiste{
                        background-image:url("bild.png");
                        background-position: center;
                        background-repeat: no-repeat;
                        height: 34px;
                        }
                        /*weitere Anpassungen, für die anderen id's*/
                </style>
        </head>
        <body>
        <img src="logo.png"/>
        <div id="leiste"><!--Hier sollen künftig dann die Buttons (rechtsbündig) und der Willkommenstext (linksbündig) eingefügt werden--></div>
        <div id="hauptteil"><!--Hier wird dann der Inhalt angezeigt--></div>
        <div id="footer"><!--Hier werden Sachen, wie Partnerseiten, Impressum usw verlinkt--></div>
        </body>
</html>

Halt ein ziemlich simpler Seitenaufbau (oben das Logo, dann dadrunter die Buttonleiste, dann nochmal dadrunter der Hauptteil und dann ganz unten Footer) :)

Ich weiß nicht, ob es euch jetzt groß weiterhilft und ob ich jetzt wirklich alles Notwendige erläutert habe, damit ihr mir auch richtig Helfen könnt. Für große Umstände will ich hier ja auch nicht sorgen, versteht mich da bitte nicht falsch :S

Ich werde mir auch jedenfalls friccas Ratschlag zu Herzen nehmen und das LittlebOxes Online Buch lesen. Wenn ihr im diesen Fall dennoch die Lösung für mein Problem einfällt, würde ich mich auf eine Antwort freuen :lol:

Nachtrag:

@Sinokle

cool, dankeschön :D

Ich denke das dürfte mich einen großen Schritt weiter bringen.

Ich bedanke mich hiermit nochmals an alle User hier für ihre Ratschläge.

Gruß,

Zonki

fricca 26.10.2011 19:01

Da liegen jetzt drei leere Divs rum. Das hat nichts mit sinnvollem HTML zu tun.
[Und der Doctype fehlt noch immer. Lernresistent?]

Nochmal: Sehr wahrscheinlich willst du die Breite deines Layouts insgesamt auf ein bestimmtes Maß beschränken -- und damit erledigt sich dein Problem! Jedes Element einzeln mit einer Breite zu versehen -- wie Sinokles Vorschlag glauben machen könnte -- wird nicht nötig sein. Das reicht sehr wahrscheinlich einmal für ein umgebendes Element.
Und auch nochmal:
1. Inhalt aufschreiben
2. Inhalt mit HTML sinnvoll auszeichnen.
3. Layout mit CSS.
Bei dir fehlen Schritt eins und zwei. Das hat keinen Sinn!

Zitat:

Wenn ihr im diesen Fall dennoch die Lösung für mein Problem einfällt, würde ich mich auf eine Antwort freuen
Die Lösung lautet: Arbeite in sinnvollen Schritten. Beginne am Anfang -- nicht am Ende.


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:45 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023