Text neben Bild anzeigen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antworten
beispiel
bild
code
design
eigenschaft
element
entwicklung
gutem beispiel
http
leute
mangelnder hilfe
pfad
position
sinn
tabelle
tun
url
versuchen
weglassen
-
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! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hajajai ;)
Musst ja nicht wegen jeder Kleinigkeit einen neuen Thread eröffnen ;)
Dein Screenshot ist leider nicht zu sehen 404. -
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 á laWARUM HILFT MIR DENN KEINER!!!
(Großbuchstaben sind absichtlich!) selbst nicht ausstehen kann, will ich mit gutem Beispiel voran gehen.
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. -
ich kann deinen screen leider nicht sehen, da kommt ein error ;O
-
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 -
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... -
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 -
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! -
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 ? -
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. -
biolauri schrieb:
WARUM HILFT MIR DENN KEINER!!!
(Großbuchstaben sind absichtlich!) selbst nicht ausstehen kann, will ich mit gutem Beispiel voran gehen.
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... -
sneppa schrieb:
biolauri schrieb:
WARUM HILFT MIR DENN KEINER!!!
(Großbuchstaben sind absichtlich!) selbst nicht ausstehen kann, will ich mit gutem Beispiel voran gehen.
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!
Nur kurz zum Verstädnis (?):
ist die Schriftgrößemargin-top: -14px;
Das hab ich verstanden. Das andere?
Magst du mir das noch kurz erklären?
-
biolauri schrieb:
Vielen Dank! Das ist das, was ich suchte!
Nur kurz zum Verstädnis (?):
ist die Schriftgrößemargin-top: -14px;
Das hab ich verstanden. Das andere?
Magst du mir das noch kurz erklären?
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 -
sneppa schrieb:
biolauri schrieb:
Vielen Dank! Das ist das, was ich suchte!
Nur kurz zum Verstädnis (?):
ist die Schriftgrößemargin-top: -14px;
Das hab ich verstanden. Das andere?
Magst du mir das noch kurz erklären?
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
Wenn ich es weglasse, dann wird es falsch angezeigt. Aber wieso? Magst du mir das noch erklären?float:left;
-
biolauri schrieb:
Danke für die Erklärung. Eine Frage hab ich noch, wozu das
Wenn ich es weglasse, dann wird es falsch angezeigt. Aber wieso? Magst du mir das noch erklären?float:left;
<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. -
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! :-) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
