Antworten auf deine Fragen:
Neues Thema erstellen

text über bild html +css

maddhie

Künstler, Designer

hallo

ich hab ein liquides html-css design

nun hab ich noch das problem dass der text unter dem bild liegt

hab schon versucht mit bild als background , und mit layers

aber hab's nicht hingegriegt

--
das bild wurde jetzt "normal" eingefügt und soll mit text überschrieben werden

Code:
<div id="imgzentriert">
               <img src="bild.png"     style="border: 0px;"
                style="margin:0 auto;width:50%" />
                          </div>


wie funktioniert denn die zindex überlappung
könnte das funktionieren?
 
Zuletzt bearbeitet:

randacek_pro

Mod | Forum

AW: text über bild html +css

Hmm, aber wenn du halt
HTML:
<div id="imgzentriert">
 <h2>Überschrift1</h2>
    <p>Zeile1<br />
      Zeile2</p>
                </div>
machst und dann im CSS definierst:
Code:
#imgzentriert { background-image:  url('bild.png'); }
, sollte es doch gehen, oder?
Da kommst du ohne z-index aus.

Was mir aber in deinem Code auffällt, du gibst zwei style-Tags für das Bild an. Das solltest du wenn dann alles in einen schreiben. Bzw. sehe ich da auch nicht durch, welche Eigenschaft du für das Bild, oder das div meintest, deshalb nur mal im CSS die Angabe der URL zum HG.
 

mwxx

Nicht mehr ganz neu hier

AW: text über bild html +css

z-index wirkt sich nur bei absolut positionierten divs aus (mein' ich).
Aber:
Wenn Du ein floatendes Div relativ positionierst, wird dessen float-Eigenschaft nicht in Mitleidenschaft gezogen und dieses als Elterncontainer für alle darin liegenden, dann absolut zu positionierenden Elemente genommen.
Das bedeutet, Du kannst das Gesamtgerüst floaten, jedoch jeden Container, der kompliziertere Elemente, auch mit Überlappungen etc., in sich tragen soll per zusätzlicher Relativpositionierung in einen "Elementestapel" verwandeln.
Ich hoffe, das ist es, was Du meintest ?!
 

Myhar

Hat es drauf

AW: text über bild html +css

Dieser Schatten ist dein Bild? Das heißt, du willst im Prinzip einen Schatteneffekt erzielen? Dann gehst du das Problem komplett falsch an. Für dieses Problem gibt es das CSS-Attribut box-shadow, damit erzielst du deinen gewünschten Effekt ohne Bild.

Um auch gleich die Falschinformation aus dem vorigen Post richtig zu stellen: z-index , es geht nicht zwingend nur mit absoluter Position.

Auch frage ich mich, was du unter liquidem CSS-HTML Design verstehst? Im t3n war da gestern ein guter Beitrag diesbezüglich.
 

cythux

Aktives Mitglied

AW: text über bild html +css

Dieser Schatten ist dein Bild? Das heißt, du willst im Prinzip einen Schatteneffekt erzielen? Dann gehst du das Problem komplett falsch an. Für dieses Problem gibt es das CSS-Attribut box-shadow, damit erzielst du deinen gewünschten Effekt ohne Bild.

Um auch gleich die Falschinformation aus dem vorigen Post richtig zu stellen: z-index , es geht nicht zwingend nur mit absoluter Position.

Auch frage ich mich, was du unter liquidem CSS-HTML Design verstehst? Im t3n war da gestern ein guter Beitrag diesbezüglich.

Kann mich da nur anschliessen, zudem ist es nicht so gut deinen img tag voll mit inline styles zu füllen, dies kannst du ebenso gut in deiner style.css machen
 

maddhie

Künstler, Designer

AW: text über bild html +css

Hmm, aber wenn du halt
HTML:
<div id="imgzentriert">
 <h2>Überschrift1</h2>
    <p>Zeile1<br />
      Zeile2</p>
                </div>
machst und dann im CSS definierst:
Code:
#imgzentriert { background-image:  url('bild.png'); }
, sollte es doch gehen, oder?
Da kommst du ohne z-index aus.

Was mir aber in deinem Code auffällt, du gibst zwei style-Tags für das Bild an. Das solltest du wenn dann alles in einen schreiben. Bzw. sehe ich da auch nicht durch, welche Eigenschaft du für das Bild, oder das div meintest, deshalb nur mal im CSS die Angabe der URL zum HG.

so hätte ich es schon einmal gehabt,
jedoch wird das bild so nicht angezeigt

bild liegt im selben ordner wie html datei
 

cebito

undefined

AW: text über bild html +css

das mit der box- shadow habe ich versucht,
jedoch keine runden ecken hinbekommen

gibt es da noch mehr ?
Was ist so schwer daran mal "" zu googeln? :rolleyes: Kann ja nicht sein, das du jetzt seit zweieinhalb Wochen nicht einen Schritt weiter gekommen bist. btw. wenn du solange für so ein "Problemchen" brauchst, wann willste denn dann fertig werden?

http://jsfiddle.net/ENj54/
 
Zuletzt bearbeitet:

cythux

Aktives Mitglied

AW: text über bild html +css

Caniuse ist welche Browser diese Css Funktion unterstützen
da hat nicht mit java oder flash zu tun

der Editor wurde glaube ich nicht mehr weiter entwickelt
 

maddhie

Künstler, Designer

AW: text über bild html +css

Was ist so schwer daran mal "" zu googeln? :rolleyes: Kann ja nicht sein, das du jetzt seit zweieinhalb Wochen nicht einen Schritt weiter gekommen bist. btw. wenn du solange für so ein "Problemchen" brauchst, wann willste denn dann fertig werden?

http://jsfiddle.net/ENj54/

für cebito mal mein fortschritt:

weiß aber dass ich noch einiges zu tun habe:

1.Navigation: muss noch mittig, und anpassbar(responsive) sein, probieren ob sich die festen px durch % werte tauschen lassen
ebenso das bild "start" soll ein wenig nach unten (mittig) geschoben werden

2.die box muss auch in der höhe eingestellt werden, z.b. 80% von bildschirm ausfüllen(breite 70%)

3. sidebar: text unter dem logo muss nach unten verschoben werden
(padding ?) text-align: Center zum zentrieren nutzt nix

4.Trennlinie sowie haupttext nach oben schieben (mit padding oder margin probieren )

5.kursiver text ganz unten soll mit bild eine kante haben (text ein wenig nach unten) padding hat nix gebracht

ach ja und die letzte senkrechte nach kontakt entfernen! wie geht das ?

muss ja erst im märz 2014 laufen xD
 
Zuletzt bearbeitet:

maddhie

Künstler, Designer

AW: text über bild html +css

würde zudem dieses Logo nicht nutzen

Diei Links leiten nur zur blaced error Seite

für die Sidebar kannst du <aside></aside> nutzen

http://pxtoem.com/

vielen dank für den link

em bei schriften funktioniert bei mir noch nicht ganz

das mit dem aside in einer fixen breite habe ich bereits gelöst
jedoch ist der umbruch bei kleineren bildschirm noch nicht schön
 
Zuletzt bearbeitet:
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

Keine Mitglieder online.

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.526
Neuestes Mitglied
Winfriedtesmer
Oben