text über bild html +css

[maddhie]

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

<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]

AW: text über bild html +css

Hmm, aber wenn du halt

<div id="imgzentriert">
 <h2>Überschrift1</h2>
    <p>Zeile1<br />
      Zeile2</p>
                </div>

machst und dann im CSS definierst:

#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]

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]

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]

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]

AW: text über bild html +css

Hmm, aber wenn du halt

<div id="imgzentriert">
 <h2>Überschrift1</h2>
    <p>Zeile1<br />
      Zeile2</p>
                </div>

machst und dann im CSS definierst:

#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]

AW: text über bild html +css

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

 

[maddhie]

AW: text über bild html +css

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]

AW: text über bild html +css

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]

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? 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/

 

[maddhie]

AW: text über bild html +css

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?

http://jsfiddle.net/ENj54/

hab keine zeit gehabt
werd am wochenende probieren

@cythux:

hab opera,firefox

und verwende scriptly

 

[cythux]

AW: text über bild html +css

Also diese beide Browser haben keine Problem mit border-radius oder box-shadow
http://caniuse.com/border-radius
http://caniuse.com/css-boxshadow

war ein guter Editor damals

 

[maddhie]

AW: text über bild html +css

Also diese beide Browser haben keine Problem mit border-radius oder box-shadow
http://caniuse.com/border-radius
http://caniuse.com/css-boxshadow

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]

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]

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

habs schon gesehen


aso, ist für mich noch immer gut genung

dann werd ichs mal probieren

 

[maddhie]

AW: text über bild html +css

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?

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

 

[cythux]

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/

 

[maddhie]

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/

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]

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