kostenloser Webspace werbefrei: lima-city


Text neben Bild anzeigen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    biolauri

    biolauri hat kostenlosen Webspace.

    Hallo liebes Forum,

    ich habe vor einiger Zeit schon ein ähnliches Thema eröffnet (https://www.lima-city.de/thread/div-wird-ausserhalb-des-elternelements-angezeigt).
    Mein Problem ist, dass die Pfadangabe über dem Bild angezeigt wird. Ich möchte aber, dass sie neben dem Bild angezeigt wird. Realisiert ist das mittels position-Attributen, sowie bottom, damit der Pfad unten angezeigt wird. Wenn ich das position-Attribut weglassen, dann ist es zwar neben dem Bild, aber leider auch am oberen Rand.
    Hier die Test-Seite: http://biolauri.12hp.de
    Das Logo ist als Platzhalter schwarz.
    Hier das Ergebnis, wie es sein sollte: http://biolauri.12hp.de/vorlage.gif
    Der graue Strich ist Screenshot bedingt.

    Ich hoffe, ihr versteht, was ich meine.

    Für jeden Denkanstoß bin ich dankbar!
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hajajai ;)
    Musst ja nicht wegen jeder Kleinigkeit einen neuen Thread eröffnen ;)

    Dein Screenshot ist leider nicht zu sehen 404.
  4. Autor dieses Themas

    biolauri

    biolauri hat kostenlosen Webspace.

    sneppa schrieb: Hajajai ;)
    Musst ja nicht wegen jeder Kleinigkeit einen neuen Thread eröffnen ;)

    Das liegt daran, dass ich ein paar Tage gewartet habe, in denen sich allerdings niemand mehr gemeldet habe. Und da ich Antworten auf den eigenen Post á la
    WARUM HILFT MIR DENN KEINER!!!
    (Großbuchstaben sind absichtlich!) selbst nicht ausstehen kann, will ich mit gutem Beispiel voran gehen. :wink:
    Achja, das Beispiel war sinngemäß. Ich meinte damit generell ähnliche Antworten auf eigene Threads aufgrund von mangelnder Hilfe anderer Leute.
    Es hat außerdem nicht zwingend etwas miteinander zu tun.

    Dein Screenshot ist leider nicht zu sehen 404.

    Komisch, wenn ich ihn bei mir aufrufe, wird das Bild einwandfrei geladen. Auch ein neuladen ohne Browsercache zeigt das Bild an. Laut ftp ist es auch noch unter dem Namen "vorlage.gif" vorhanden.
  5. ich kann deinen screen leider nicht sehen, da kommt ein error ;O
  6. k*********h

    Denkanstoß:

    position:absolute ist hierfür ja schon zu viel.
    natürlich gehts wenn du sowohl logo als auch den behälter für den pfad zusammen in einen container mit definierten abmessungen (also halt breiter als das logo) setzt und diesen mit position:relative ausstattest - den pfad-behälter dann mit position:absolute; left:300px(oder halt breite des logos); bottom:0px;

    aber du deinen wunsch kannst du auch viel einfacher mittels einer tabelle (vertical-align)

    oder float:left; für das logo, dann den pfadbehälter und dann das nächste mit clear:left


    Beitrag zuletzt geändert: 28.2.2011 20:33:47 von kleines-ich
  7. Autor dieses Themas

    biolauri

    biolauri hat kostenlosen Webspace.

    emerica-blog schrieb: ich kann deinen screen leider nicht sehen, da kommt ein error ;O

    Erstaunlich, erstaunlich...Bekommt ihr nen 404er von Lima? Oder wie sieht der aus?

    kleines-ich schrieb: Denkanstoß:

    position:absolute ist hierfür ja schon zu viel.
    natürlich gehts wenn du sowohl logo als auch den behälter für den pfad zusammen in einen container mit definierten abmessungen (also halt breiter als das logo) setzt und diesen mit position:relative ausstattest - den pfad-behälter dann mit position:absolute; left:300px(oder halt breite des logos); bottom:0px;

    Das wäre ein Lösung, aber ich bin eigentlich dagegen, weil ich den Quellcode eigentlich nicht komplizierter & verschachtelter gestalten will, als es unbedingt sein muss. Ich werde es aber gleich/nachher mal ausprobieren und posten!

    aber du deinen wunsch kannst du auch viel einfacher mittels einer tabelle (vertical-align)

    Das will ich nicht. Design mit Tabellen ist nicht der gute Stil...

    oder float:left; für das logo, dann den pfadbehälter und dann das nächste mit clear:left

    Dann ist aber der Pfad nicht mehr an der Unterkante...
  8. k*********h


    blinde tabellen gehören zum repertoir eines webdesigners. wenn sie sich am besten eignen sollte man sie einsetzen...

    zum float:

    setze logo und pfadhalter in einen <p> und dessen line-height so hoch wie das logo
  9. Autor dieses Themas

    biolauri

    biolauri hat kostenlosen Webspace.

    kleines-ich schrieb:

    blinde tabellen gehören zum repertoir eines webdesigners. wenn sie sich am besten eignen sollte man sie einsetzen...

    Sehe ich anders! Tabellen sind dafür da, eine tabellarische Übersicht zu geben, nicht jedoch für Designs! Dazu werden sie jedoch teilweise leider immernoch von vielen Leuten missbraucht. Ich weiß, es ist verlockend, weil einfacher, aber es belastet den Quellcode, was Bandbreite kostet und hat einen ganz anderen Sinn (Im Sinne der Accessability).
    Daher versuche ich es mir gar nicht erst anzugewöhnen.


    zum float:

    setze logo und pfadhalter in einen <p> und dessen line-height so hoch wie das logo

    Gleicher Punkt wie oben: ein <p>-Element ist ein Absatzelement und nicht für das Design zuständig...

    Wirklich vielen Dank für deine Hilfe! Ich weiß sie zu schätzen, aber es ist eben nicht die Lösung, die ich suche...Tut mir Leid!
  10. k*********h

    nun wenn du die heuristik wahren willst kannst du natürlich auch eine div-suppe kochen und diese entsprechend der tabellen bzw float elemente formatieren :P

    ...ein <p> stellt im sinne der html entwicklung doch wohl eher ein strukturelement als einen reinen textabsatz dar oder ?
  11. Autor dieses Themas

    biolauri

    biolauri hat kostenlosen Webspace.

    kleines-ich schrieb:
    nun wenn du die heuristik wahren willst kannst du natürlich auch eine div-suppe kochen und diese entsprechend der tabellen bzw float elemente formatieren :P

    Da hast du recht! Das ist genauso kontraproduktiv und nicht sinnvoll. Daher habe ich es auch mehr oder weniger abgelehnt, die zwei extra <div>-Bereiche im header einzubauen, wie du es vorgeschlagen hattest.

    ...ein <p> stellt im sinne der html entwicklung doch wohl eher ein strukturelement als einen reinen textabsatz dar oder ?

    Teils a, teils nein! Es ist klar ein Strukturelement für html. Allerdings auch nur - und so ist meine Auffassung (kann richtig sein, muss aber nicht) - für Textabsätze. Nicht fürs Design. Und ich finde, dass das eher ins Design passt, da ja nicht innerhalb von Fließtext. Dafür spricht auch, dass laut W3C nur Inline-Elemente enthalten sein dürfen.
  12. biolauri schrieb:
    WARUM HILFT MIR DENN KEINER!!!
    (Großbuchstaben sind absichtlich!) selbst nicht ausstehen kann, will ich mit gutem Beispiel voran gehen. :wink:
    Achja, das Beispiel war sinngemäß. Ich meinte damit generell ähnliche Antworten auf eigene Threads aufgrund von mangelnder Hilfe anderer Leute.
    Es hat außerdem nicht zwingend etwas miteinander zu tun.

    Sorry, hab da nicht mehr rein geschaut ;)
    Mittlerweile geht das Bild auch, merkwürdig.

    Versuche es mal mit dem hier:
    .pfad {
        float: left;
        margin-top: -14px;
        position: relative;
        top: 100%;
    }

    Wäre ein Ansatz...
  13. Autor dieses Themas

    biolauri

    biolauri hat kostenlosen Webspace.

    sneppa schrieb:
    biolauri schrieb:
    WARUM HILFT MIR DENN KEINER!!!
    (Großbuchstaben sind absichtlich!) selbst nicht ausstehen kann, will ich mit gutem Beispiel voran gehen. :wink:
    Achja, das Beispiel war sinngemäß. Ich meinte damit generell ähnliche Antworten auf eigene Threads aufgrund von mangelnder Hilfe anderer Leute.
    Es hat außerdem nicht zwingend etwas miteinander zu tun.

    Sorry, hab da nicht mehr rein geschaut ;)
    Mittlerweile geht das Bild auch, merkwürdig.

    Kein Problem. Ja, finde ich auch..

    Versuche es mal mit dem hier:
    .pfad {
        float: left;
        margin-top: -14px;
        position: relative;
        top: 100%;
    }

    Wäre ein Ansatz...

    Vielen Dank! Das ist das, was ich suchte!:thumb:
    Nur kurz zum Verstädnis (?):
    margin-top: -14px;
    ist die Schriftgröße
    Das hab ich verstanden. Das andere?
    Magst du mir das noch kurz erklären?:smile:
  14. biolauri schrieb:
    Vielen Dank! Das ist das, was ich suchte!:thumb:
    Nur kurz zum Verstädnis (?):
    margin-top: -14px;
    ist die Schriftgröße
    Das hab ich verstanden. Das andere?
    Magst du mir das noch kurz erklären?:smile:

    margin-top ist nicht die Schriftgröße,
    wahrscheinlich meintest du eher, dass die 14px die Schriftgröße sind ;)
    Das ist richtig.

    Kurze Erklärung:
    Ich positioniere das div auf die 100% des Bildes:
    top: 100%;

    Dann bin ich ja darüber.
    Da ich aber sowieso absolut positioniere,
    kann ich mit Hilfe von
    margin-top: -14px;

    wieder die 14px der Schriftgröße nach oben, dann ist der Text dort, wo du ihn hin haben möchtest :)

    Vielleicht hilft dir das noch weiter:
    http://de.selfhtml.org/css/eigenschaften/randabstand.htm

    Beitrag zuletzt geändert: 1.3.2011 15:44:51 von sneppa
  15. Autor dieses Themas

    biolauri

    biolauri hat kostenlosen Webspace.

    sneppa schrieb:
    biolauri schrieb:
    Vielen Dank! Das ist das, was ich suchte!:thumb:
    Nur kurz zum Verstädnis (?):
    margin-top: -14px;
    ist die Schriftgröße
    Das hab ich verstanden. Das andere?
    Magst du mir das noch kurz erklären?:smile:

    margin-top ist nicht die Schriftgröße,
    wahrscheinlich meintest du eher, dass die 14px die Schriftgröße sind ;)
    Das ist richtig.

    Genau so meint ich es. War etwas falsch ausgedrückt.

    Danke für die Erklärung. Eine Frage hab ich noch, wozu das
    float:left;
    Wenn ich es weglasse, dann wird es falsch angezeigt. Aber wieso? Magst du mir das noch erklären? :smile:
  16. biolauri schrieb:
    Danke für die Erklärung. Eine Frage hab ich noch, wozu das
    float:left;
    Wenn ich es weglasse, dann wird es falsch angezeigt. Aber wieso? Magst du mir das noch erklären? :smile:

    <div>'s haben die Eigenschaft, dass sie nicht gerne nebeneinander sein möchten.
    Mit float: left; werden sie quasi nach links ausgerichtet :)
    Wahrscheinlich könntest du das bei einem <span> weglassen.
  17. Autor dieses Themas

    biolauri

    biolauri hat kostenlosen Webspace.

    sneppa schrieb:
    <div>'s haben die Eigenschaft, dass sie nicht gerne nebeneinander sein möchten.
    Mit float: left; werden sie quasi nach links ausgerichtet :)
    Wahrscheinlich könntest du das bei einem <span> weglassen.

    Ah, Okay. Vielen Dank noch einmal für deine Mühe! :-)
  18. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!