text über bild html +css

maddhie · 30.10.2013

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?

randacek_pro · 30.10.2013

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 · 31.10.2013

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 · 31.10.2013

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

Bitte kostenlos registrieren, damit du die Links siehst.

, 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

Bitte kostenlos registrieren, damit du die Links siehst.

diesbezüglich.

cythux · 31.10.2013

AW: text über bild html +css

Myhar schrieb:
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
Bitte kostenlos registrieren, damit du die Links siehst.
, 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
Bitte kostenlos registrieren, damit du die Links siehst.
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 · 02.11.2013

AW: text über bild html +css

randacek_pro schrieb:
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

Myhar · 04.11.2013

AW: text über bild html +css

Meinen Hinweis, bzw. Lösungsvorschlag hast du auch gelesen?

maddhie · 17.11.2013

AW: text über bild html +css

Myhar schrieb:
Meinen Hinweis, bzw. Lösungsvorschlag hast du auch gelesen?

ja habe deinen link zum t3n gelesen

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

gibt es da noch mehr ?

vielen dank

cythux · 17.11.2013

AW: text über bild html +css

maddhie schrieb:
ja habe deinen link zum t3n gelesen

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

gibt es da noch mehr ?

vielen dank

Bei welchem Browser?

cebito · 17.11.2013

AW: text über bild html +css

maddhie schrieb:
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?

Bitte kostenlos registrieren, damit du die Links siehst.

maddhie · 18.11.2013

AW: text über bild html +css

cebito schrieb:
Was ist so schwer daran mal "" zu googeln? 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?

Bitte kostenlos registrieren, damit du die Links siehst.

hab keine zeit gehabt
werd am wochenende probieren

@cythux:

hab opera,firefox

und verwende scriptly

cythux · 18.11.2013

AW: text über bild html +css

Also diese beide Browser haben keine Problem mit border-radius oder box-shadow

Bitte kostenlos registrieren, damit du die Links siehst.

war ein guter Editor damals

maddhie · 19.11.2013

AW: text über bild html +css

cythux schrieb:
Also diese beide Browser haben keine Problem mit border-radius oder box-shadow

Bitte kostenlos registrieren, damit du die Links siehst.

Bitte kostenlos registrieren, damit du die Links siehst.

war ein guter Editor damals

es geht mir ja nicht darum das ich es sehe,

sondern möglichst viele

daher will ich möglichst von java, flash und co unabhängig sein

was heißt war ein guter editor ??

cythux · 19.11.2013

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 · 20.11.2013

AW: text über bild html +css

cythux schrieb:
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

habs schon gesehen

aso, ist für mich noch immer gut genung

dann werd ichs mal probieren

maddhie · 29.11.2013

AW: text über bild html +css

cebito schrieb:
Was ist so schwer daran mal "" zu googeln? 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?

Bitte kostenlos registrieren, damit du die Links siehst.

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

cythux · 29.11.2013

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

Bitte kostenlos registrieren, damit du die Links siehst.

maddhie · 29.11.2013

AW: text über bild html +css

cythux schrieb:
würde zudem dieses Logo nicht nutzen

Diei Links leiten nur zur blaced error Seite

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

Bitte kostenlos registrieren, damit du die Links siehst.

1. logo ist noch ein beispiellogo von google

2. links wurden noch nicht definiert, erst diese seite

3. die 2 textbereiche sind noch eine schwäche, werd deinen link mal ansehen

danke

maddhie · 30.11.2013

AW: text über bild html +css

cythux schrieb:
würde zudem dieses Logo nicht nutzen

Diei Links leiten nur zur blaced error Seite

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

Bitte kostenlos registrieren, damit du die Links siehst.

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