Antworten auf deine Fragen:
Neues Thema erstellen

Text auf Hintergrundbild ausrichten ? für ganz Dumme

N

Nutellahexe

Guest

Hallo Ihr,
ich muss mich beruflich mit HTML und CSS beschäftigen und fand es anfangs ganz interessant. Jetzt kämpfe ich mich durch Fluten von schrecklich schlechten HTML-Hilfeseiten und werde immer deprimierter.

Ich habe folgendes vor:
  • Eine winzig kleine Seite ohne irgendwelche Highlights oder so, also eigentlich ganz einfach.
  • Im Hintergrund soll ein Bild liegen und darauf sollen ein paar Zeilen Text stehen.
  • Das Hintergrundbild ist drin, auch positioniert.
  • Der Text ist drin, auch fein formatiert.

Aber jetzt geht?s los: das Bild ist zwar schön zentriert (rechts und links), aber in der Höhe schaffe ich das nicht. Damit könnte ich ja noch leben, mein größtes Problem ist, dass ich den Text nicht vom Seitenrand aus positionieren will, sondern vom Hintergrundbild aus. Der Text soll genau auf dem Bild stehen. Aber auch nach stundenlanger Suche finde ich dazu nichts, auf jeden Fall nichts, was ich verstehe.

Hier mal mein Code (nicht lachen!)

<html>
<head>
<title>doreen seite</title>
<link href="stylesheets/main.css" type="text/css" rel="stylesheet" />
<meta name="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div id="main">
<p>
xxxxxx
</p>
<img src="images/doreen_signatur_1.gif"width="110" height="30" />
</div>

</body>
</html>

CSS
body {
font-family: sans-serif;
font-size: 10pt;
color: #343737;
line-height: 1.8em;
}

a {
color: inherit;
}

#main {
background-image:url(../images/banner06.gif);
background-repeat:no-repeat;
background-position:center;
margin:15% 0% 0% 0%;
padding:15% 0% 0% 0%;
}

Ich bin für jede Hilfe dankbar.
 

stb_87

Web-Sheriff - ohne Bild

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

<div id="main">hier der text...</div>

und der id#main das Bild als Hintergrund zuweisen.

Das ist das einfachste. Falls du da 2 Bilder übereinander legen möchtest, einfach noch ein verschachteltes div erstellen und dem das Hintergrundbild zuweisen.


Falls du vernünftige Seiten zum Lernen suchst, kannst dir ja mal den Link in meiner Sig angucken.
 
N

Nutellahexe

Guest

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Vielen lieben Dank für die schnelle Antwort, aber genauso habe ich es doch . . .

xxx steht für meinen Text, der in mehreren Absätzen formatiert ist (wollte nicht alles hinschreiben) und die id main hat das Bild (#main {
background-image:url(../images/banner06.gif).

Das mit dem Bild klappt auch, nur ist das meinem Text völlig egal . . . :'(
 

stb_87

Web-Sheriff - ohne Bild

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Vielen lieben Dank für die schnelle Antwort, aber genauso habe ich es doch . . .

xxx steht für meinen Text, der in mehreren Absätzen formatiert ist (wollte nicht alles hinschreiben) und die id main hat das Bild (#main {
background-image:url(../images/banner06.gif).

Das mit dem Bild klappt auch, nur ist das meinem Text völlig egal . . . :'(

Aso ;) Ich hatte mich jetzt hierdrauf konzentriert:
HTML:
<img src="images/doreen_signatur_1.gif"width="110" height="30" />

Gib dem main doch mal eine Höhen- und Breitenangabe:

HTML:
 width: 500px; height: 500px; z. B.
 

r3nt5ch3r

~ Allround pG ~

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Könntest du die Seite irgendwo hochladen, sodass wir auch "sehen" können was du genau vor hast?
 
A

Akano

Guest

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Also, um den text zuerst mal in die mitte zu rücken kannst Du über "text-align:center;" gehen.

Das andere was Du machen kannst ist das Du den text über margin zentrieren läst.

Code:
<div style="margin:20px auto; width:300px;">
text text text
</div>

Die width vom div sollte der Breite vom Hintergrund entsprechen, so das die "textbox" genau über dem hintergrung steht.
 
N

Nutellahexe

Guest

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Hallo, danke, dass Ihr mir helfen wollt. Ich hänge Euch mal ein Bildchen an, oben seht Ihr,wie es aussehen soll, und unten ist mein Versuch.
 
N

Nutellahexe

Guest

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Hallo,
ich habe des Bild mit dem Bildupload hochgeladen, komisch . . . ich probiere es noch einmal.
 
C

cana_da

Guest

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Schau dir einfach mal den Quelltext an.
 

Schattenspringer

Noch nicht viel geschrieben

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

also,
du hast das einen grossen container "main" für das hintergrundbild samt inhalt(in dem fall text, also p element) ...
diesem container hast du nach oben hin eine margin udn padding gegeben - ansonsten hast du jedoch nicht positioniert ....
du solltest in der css das p-element positionieren entweder mit einer margin-left oder auch mit text-align:center;
ansonsten ist es klar, dass das p immer dahingeht, wo es eben grad noch hinpasst - in dem fall durch das padding und margin top vom main-container halt ganz links und eben 15% +15% also 30% nach unten ... .
es ist ein "verdrängungswettbewerb" sozusagen ... alle elemente wollen sich eigentlich in die linke obere ecke setzen und nur wenn du andere angaben machst, setzen sie sich woanders hin ....

gruss
schattenspringer
 
Zuletzt bearbeitet:

o0Andy0o

Teetrinker

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

versuchs mal mit folgendem:

div#main {
margin: 15% auto auto auto;
width: [ka, zu faul zum messen];
height: [siehe oben];
min-height: [wie height];
padding-top: 15%;
background-image:url(../images/banner06.gif);
background-repeat:no-repeat;
background-position:center;
}
 
A

aikon

Guest

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Hallo,
also ich finde der Code-Aufbau ist nicht sehr gut.
Es wäre hilfreich zu wissen wie es genau aussehen soll.
1. Du möchtest ein Hintergrundbild (ähnlich wie ein Banner) Balken inkl. den Foto von Dir?
2. Dann soll rechts vom Foto der Text stehen?
3. Wie soll der ausgerichtet sein? Mittig in dem Rest des Banners? Oder gesamt mittig inkl. Foto?
4. Es wäre hilfreich zu wissen wie breit soll das Gesamtbild sein in "px" wie hoch in "px", wie breit ist das Foto und wieviele Pixel soll es auf der linken Seite vom Rand des Bannerbildes enfernt sein.

- Vom Aufbau würde ich ein DIV für den Hintergrund erstellen, da drin wird das Bild plaziert.
- Dann noch ein DIV welches den Text umschließt, und dieses dann im anderen Zentrieren.

Naja wäre klasse wenn ich mehr infos bekommen würde dann bau ich den Code schnell zusammen.

Lg @ikon
 
N

Nutellahexe

Guest

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Hallo aikon,
danke für Deine Nachricht.

Ich guck mal, dass ich Deine Fragen gut beantworte.

1. genau, das Banner inkl. Foto (beide Elemente sind ein einziges gif) kommt aus dem Fotoshop und dient als eine Art Hintergrund
2. genau, rechts neben dem Foto soll der Text hin
3. der Text soll nach oben, unten und links die gleichen Abstände zum Rand des Banners haben. Also so, wie auf dem oberem Screenshot.
4. Das gesamte Banner ist 860 px breit und 206 px hoch und soll zentriert auf der Seite stehen. Das ist ja mein Problem, hätte ich es an einer bestimmten Stelle fixiert, könnte ich auch eine genaue Position für den Text angeben, aber der muss ja auch "mitwandern", wenn sich die fentergröße ändert.

Hach, ich weiß, ich stell mich blöd an. Aber ich komme aus dem Satzbereich und da ist alles ganz anders. Pixel und Codes sagen mir gar nichts . . . und nur mit Infos aus dem Netz zu lernen, ist auch nicht so einfach. V.a., weil mein Informatik.Kollege sich das immer anguckt und meint, es sei alles falsch . . .

Viele Grüße
 
N

Nutellahexe

Guest

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Hallo,
danke für Deine Hilfe. Aber ich kann doch dem Text keine fixe Positionierung geben, der muss doch mit dem Banner, das zentriert ist, mitwandern. Bei "text-align:center" steht doch der Text zentriert, oder? Der soll aber linksbündig sein. Bei der Positionierung geht man immer von der oberen linken Ecke aus, oder? Am Banner könnte man das nicht ausrichten?

Viele verzweifelte Grüße
 

leohh

CSS verliebt

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Was spricht denn gegen ein p-Element innerhalb deines wrappers, in dass du dein image setzt, per margin den Abstand einzurichten?
 
N

Nutellahexe

Guest

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

äh, danke, aber was ist denn ein Wrapper?
 

leohh

CSS verliebt

AW: Text auf Hintergrundbild ausrichten ? für ganz Dumme

Ein wrapper, ist der umschliessende Container. In deinem Fall, dieses #main
Jetzt mal was Grundsaetzliches. Dein Bild von dir oder der Person, ist in dem Sinne zwar ein Schmuckbild aber dennoch sollte es per img-Tag reingeflanscht werden, nicht ueber background-image. Hast du glaub ich auch so gemacht.

Code:
#main{ text-align: left; width: 550px; margin: 5% auto; padding: 2em; background: red; }
   #main img { background: green; margin-right: 1em; width: 10em; height: 10em; float: left; }

---------------------

<div id="main">
         <img src="#" alt="Dein Bild" /> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

So in etwa eben. Ich weiss nicht genau, wo du jetzt da dein Problem siehst.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben