Text neben einem Bild darstellen
Lokros
- html
0 Jnnbo0 Der-Dennis0 Jnnbo
0 Der-Dennis
Hallo allerseits,
erstmal diese Seite ist super lehrreich sehr einfach zu lesen und zu verstehen. Großes Lob meinerseits!
Ich habe mich nun an HTML herangewagt und wollte einmal eine kleine News Frontpage machen und bin auf Probleme gestoßen auf die ich als Laie keine Antwort finde ....
Ich möchte das der Text am oberen Rand des Bildes anfängt und nicht erst unten, nur ich hab schon seit paar Stunden rumprobiert und bekomme es einfach nicht hin.
Code:
<html>
<head>
<style type="css/text">
#one {
color:#A22C1C;
font-weight:bold;
font-family:arial;
}
#two {
font-family:arial;
float:left;
font-height:15px;
}
#three {
color:#A22C1C;
font-weigth:bold;
family:arial;
}
#four {
float:left;
text-lign:justify;
}
#a:hover { font-weigth:bold; text-decoration:underline}
</style>
</head>
<body>
<h1 id="one">
Willkommen
</h1>
<div id="four">
<p id="two">
<h2 id="three">
News 1
</h2>
<img src="C:\Users\Markus\Downloads\images.jpg" align:"top" width:"100" heigth:"70">
PlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholder
PlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholder
PlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholder
</p>
<a href="placeholder">Mehr</a>
</div>
</hr>
<div id="four">
<h2 id="three">
News2
</h2>
<p id="two">
<img style="align:left" src="C:\Users\Markus\Downloads\images.jpg" width:"100" heigth:"70">
PlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholder
PlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholder
PlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholder
</p>
<a href="placeholder">Mehr</a>
</div>
</hr>
<h2 id="three">
News 1
</h2>
<div id="four">
<p id="two">
<img style="align:left" src="C:\Users\Markus\Downloads\images.jpg" width:"100" heigth:"70">
PlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholder
PlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholder
PlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholderPlacholder
</p>
<a href="placeholder">Mehr</a>
</div>
</body>
</html>
Wie oben erwähnt der Placeholder-Text fängt am unteren Rand an und ich hätte in gerne am oberen Rand. Nur egal wo ich align:top anführe es kommt nicht oben hin...
Vielleicht kann mir jemand helfen. :)
Vielen Dank im voraus.
Lokros
Hallo Lokros,
ich würde es so machen:
<section>
<article>
<h1>Titel für den Text</h1>
<figure> <img src="http://placehold.it/350x150" alt=""> </figure>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</article>
</section>
section {
max-width:600px;
margin:0 auto;
}
article h1 {
font-size:2em;
}
article figure {
margin:0;
padding-left:0;
padding-right:1em;
display:inline-block;
max-width:400px;
height:auto;
vertical-align:top;
}
article p {
display:inline-block;
max-width:200px;
vertical-align:top;
margin:0;
padding:0;
}
Bestimmt kann man es auch noch besser machen, da sind dann wieder die CSS Profis gefragt :) Online findest du das Beispiel hier http://jsfiddle.net/f4c6orn5/
Hey Jnnbo,
auch wenn das sicher eine gute Lösung ist: Ich denke, dass beim jetzigen Wissenstand des TO, Deine Antwort ohne jegliche Erklärung vielleicht ein bisschen zu viel auf einmal ist. Oder es vom TO ohne Verständnis einfach übernommen wird, was nicht das Ziel dieses Forums sein sollte.
Gruß, Dennis
Hallo Dennis,
auch wenn das sicher eine gute Lösung ist: Ich denke, dass beim jetzigen Wissenstand des TO, Deine Antwort ohne jegliche Erklärung vielleicht ein bisschen zu viel auf einmal ist. Oder es vom TO ohne Verständnis einfach übernommen wird, was nicht das Ziel dieses Forums sein sollte.
was gibt es daran nicht zu verstehen? Wenn jemand mit irgendwelchen Begriffe nichts anfangen kann, kann er ja gerne Google und Co. bzw. hier fragen.
Bitte überlasse es mir wie ich eine Frage beantworte!
Ich habe auch schon öfters nur etwas hingeworfen bekommen und musste dann schauen wie es weiter geht oder hab es einfach 1zu1 übernommen, denn nicht immer möchte man sich mit jeder Kleinigkeit befassen, sondern es muss funktionieren.
Hallo Jnnbo,
was gibt es daran nicht zu verstehen? Wenn jemand mit irgendwelchen Begriffe nichts anfangen kann, kann er ja gerne Google und Co. bzw. hier fragen.
ich denke, Deine Antwort ist schon relativ komplex. Da spielen schon ein paar Sachen zusammen. Das ist ja auch ok, aber ich weiß nicht, ob ein Anfänger direkt die Zusammenhänge erkennen kann.
Bitte überlasse es mir wie ich eine Frage beantworte!
Natürlich kannst und darfst Du antworten wie Du möchtest! Das will ich auch ganz Dir belassen. So sollte mein Post auch nicht verstanden werden. Ich wollte Dich nur freundlich darauf hinweisen, dass das aus _meiner Sicht_ für einen Anfänger _ohne Erklärung_ vielleicht ein bisschen viel auf einmal ist. Das ändert natürlich nichts daran, dass Du trotzdem so antworten darfst und die Lösung ist ja auch unbestritten gut.
Ich habe auch schon öfters nur etwas hingeworfen bekommen und musste dann schauen wie es weiter geht oder hab es einfach 1zu1 übernommen, denn nicht immer möchte man sich mit jeder Kleinigkeit befassen, sondern es muss funktionieren.
Ist ja alles richtig. Aber häufig holt man sich mit stupidem Copy-Paste noch mehr Probleme ins Haus, was man aber erst viel später merkt. Außerdem ist es doch auch schön, wenn man etwas verstanden und selbst gelöst hat.
Gruß, Dennis
Hallo Dennis,
ich denke, Deine Antwort ist schon relativ komplex. Da spielen schon ein paar Sachen zusammen. Das ist ja auch ok, aber ich weiß nicht, ob ein Anfänger direkt die Zusammenhänge erkennen kann.
Was sollte ich hier groß erklären? Was ein <section> Element ist? Oder was 1em ist? Wenn ich nämlich wie du schon selber richtig geschrieben hast nach dem Code gehen würde der im ersten Posting steht, müsste ich _jede_ Zeile erklären.
Natürlich kannst und darfst Du antworten wie Du möchtest! Das will ich auch ganz Dir belassen. So sollte mein Post auch nicht verstanden werden. Ich wollte Dich nur freundlich darauf hinweisen, dass das aus _meiner Sicht_ für einen Anfänger _ohne Erklärung_ vielleicht ein bisschen viel auf einmal ist. Das ändert natürlich nichts daran, dass Du trotzdem so antworten darfst und die Lösung ist ja auch unbestritten gut.
Ich würde auch einiges erklären oder so verlinken wie du es in deinem ersten Posting gemacht hast, allerdings komme ich mit dem Wiki einfach nicht zurecht und für _mich_ ist die Schrift zu klein um etwas zu suchen.
Ist ja alles richtig. Aber häufig holt man sich mit stupidem Copy-Paste noch mehr Probleme ins Haus, was man aber erst viel später merkt. Außerdem ist es doch auch schön, wenn man etwas verstanden und selbst gelöst hat.
Stimmt wenn man etwas einfach nur kopiert ohne zu hinterfragen dann hat man sehr oft Probleme, dieses musste ich leider oder zum Glück selber schon erleben, deshalb frage ich bevor ich etwas kopiere und mir nicht sicher bin, was dieser Code überhaupt macht bevor er irgendwelchen Schaden auf meiner Seite anrichtet.
Om nah hoo pez nyeetz, Jnnbo!
Ich würde auch einiges erklären oder so verlinken wie du es in deinem ersten Posting gemacht hast, allerdings komme ich mit dem Wiki einfach nicht zurecht und für _mich_ ist die Schrift zu klein um etwas zu suchen.
Wie kann ich dir helfen?
Welche Schrift?
Matthias
Hey Matthias,
Ich würde auch einiges erklären oder so verlinken wie du es in deinem ersten Posting gemacht hast, allerdings komme ich mit dem Wiki einfach nicht zurecht und für _mich_ ist die Schrift zu klein um etwas zu suchen.
wusst ich's doch. Sozusagen vorauseilender Gehorsam ;-)
Nochmal an dieser Stelle: Danke!
Gruß, Dennis
Hallo Matthias,
Wie kann ich dir helfen?
keine Ahnung :) Wenn ich die Seite http://wiki.selfhtml.org/wiki/Startseite aufrufe, werde ich erstmal erschlagen von Text. Warum gibt es nicht groß in der Mitte wie z.B. bei Google ein Suchfeld wo ich eingeben kann <section> dann bekomme ich direkt die Seite angezeigt. So muss ich erstmal die passende Kategorie finden. Wer sich mit HTML nicht auskennt, weiß nicht, dass <section> ein HTML Element ist.
Dann bin ich endlich auf einer Unterseite angekommen z.B. hier http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_pr%C3%A4sentieren habe ich wieder sehr viel Text und die "dicken" gelben Balken mit dieser Grauen Schrift darin tun einfach in den Augen weh. Oder bei machen ist "klein" unterhalb dem Beispiel ein Link "ansehen" mit weißer Schrift ebenfalls kaum zu lesen.
Hey Jnnbo,
Warum gibt es nicht groß in der Mitte wie z.B. bei Google ein Suchfeld wo ich eingeben kann <section> dann bekomme ich direkt die Seite angezeigt. So muss ich erstmal die passende Kategorie finden. Wer sich mit HTML nicht auskennt, weiß nicht, dass <section> ein HTML Element ist.
das Suchfeld ist zwar nicht wie bei Google mittendrin, aber oben rechts zu finden. So benutze ich die Doku auch immer. Da kannst Du z.B. "section" eingeben und kommst direkt zu der entsprechenden Seite. Hab gerade auch mal "<section>" ausprobiert, sogar so funktioniert die Suche.
Gruß, Dennis
Hey Dennis,
das Suchfeld ist zwar nicht wie bei Google mittendrin, aber oben rechts zu finden. So benutze ich die Doku auch immer. Da kannst Du z.B. "section" eingeben und kommst direkt zu der entsprechenden Seite. Hab gerade auch mal "<section>" ausprobiert, sogar so funktioniert die Suche.
ist mir überhaupt nicht aufgefallen mit dem Suchfeld rechts oben. Ich habe das Wort <section> eingetragen und hab auf „suchen“ geklickt (wie es wohl jeder vermuten würde), findet er viel aber nicht auf den ersten Blick was ich möchte. Klicke ich allerdings auf „Seiten“ kommt das passende zum Thema <section>. Sehr verwirrend der noch nie mit einem Wiki gearbeitet hat?
Hey Jnnbo,
ist mir überhaupt nicht aufgefallen mit dem Suchfeld rechts oben. Ich habe das Wort <section> eingetragen und hab auf „suchen“ geklickt (wie es wohl jeder vermuten würde), findet er viel aber nicht auf den ersten Blick was ich möchte. Klicke ich allerdings auf „Seiten“ kommt das passende zum Thema <section>.
stimmt, das ist mir noch gar nicht aufgefallen. Ich drück nach Eingabe immer die Eingabetaste (Return / Enter) und benutze die Buttons gar nicht.
Da ist mir bisher gar nicht aufgefallen, dass standardmäßig "Seiten" fokussiert ist und "Suchen" eine andere Bedeutung hat (um ehrlich zu sein, ich hab die Buttons bisher noch nicht mal wahrgenommen, vor allem nicht, dass das zwei sind, weil's für mich scheinbar so selbstverständlich ist, dass das Feld da oben rechts ne Suche ist).
Bei den meisten Wikis ist es so, dass die Software, wenn sie eine Seite findet, diese ausliefert (und evtl. oben zusätzlich auflistet, dass es noch andere Seiten zum gleichen Begriff gibt). Und wenn keine Seite gefunden wird, wird die Suchergebnis-Seite angezeigt.
Sehr verwirrend der noch nie mit einem Wiki gearbeitet hat?
Ernsthaft? Du hast noch nie etwas bei z.B. Wikipedia gesucht?
Gruß, Dennis
Hallo,
Sehr verwirrend der noch nie mit einem Wiki gearbeitet hat?
Ernsthaft? Du hast noch nie etwas bei z.B. Wikipedia gesucht?
also um mich da mal einzumischen: Klar hab ich schon öfter mal in Wikipedia gesucht. Aber das Such-Eingabefeld rechts oben ist mir auch noch nie aufgefallen. Ich mach das normalerweise so, dass ich
http://de.wikipedia.org/wiki/Suchschwein
direkt in die Adressleiste eingebe. Dann habe ich entweder Glück und das Schlagwort gibt's wirklich (das ist der häufigste Fall); oder ich komme erstmal auf eine Auswahlseite, weil der Begriff mehrdeutig ist; oder Wikipedia kann das Schlagwort gar nicht zuordnen und bietet mir an:
Suchschwein
Diese Seite existiert nicht
* Suche nach „Suchschwein“ in anderen Artikeln.
* Suche nach ähnlichen Schreibweisen im alphabetischen Index.
* Verfasse einen Artikel zum Thema (Anleitung).
So komme ich dann zur Wikipedia-Suche.
Ciao,
Martin
Om nah hoo pez nyeetz, Der Martin!
Ich mach das normalerweise so, dass ich
http://de.wikipedia.org/wiki/Suchschwein
direkt in die Adressleiste eingebe.
Dass man Wikipedia auch als Suchmaschine zu seinen Browsern hinzufügen kann, weißt du sicher.
Matthias
Hallo,
Ich mach das normalerweise so, dass ich
http://de.wikipedia.org/wiki/Suchschwein
direkt in die Adressleiste eingebe.
Dass man Wikipedia auch als Suchmaschine zu seinen Browsern hinzufügen kann, weißt du sicher.
natürlich weiß ich das. Aber das erschien mir noch nie sinnvoll. Auch Google benutze ich, indem ich einfach
http://www.google.de/search?q=suchbegriff
in die Adressleiste eingebe.
Ciao,
Martin
Om nah hoo pez nyeetz, Der Martin!
natürlich weiß ich das. Aber das erschien mir noch nie sinnvoll. Auch Google benutze ich, indem ich einfach
http://www.google.de/search?q=suchbegriff
in die Adressleiste eingebe.
Inzwischen brauchst du in der Adresszeile für deine eingestellte Standardsuchmaschine nur noch den Suchbegriff eingeben. Bei dir gabs da mal Problemchen, wie ich mich erinnere, weil du google manchmal auf deutsch und manchmal auf englisch nutzt.
Matthias
n'Abend!
Inzwischen brauchst du in der Adresszeile für deine eingestellte Standardsuchmaschine nur noch den Suchbegriff eingeben.
vorausgesetzt, ein solches Verhalten ist in der Browserkonfiguration (vor)eingestellt. Derartigen Schnickschnack habe ich aber, soweit es mir bewusst ist, in all meinen Browsern deaktiviert. Denn ich bin der Ansicht, die Adresszeile ist zur Eingabe einer Webadresse da. Wenn ich da etwas eingebe, was keine gültige Webadresse ist, möchte ich nicht, dass mein Browser nach eigenem Gutdünken irgendwas versucht, sondern eine klare, eindeutige Fehlermeldung.
Bei dir gabs da mal Problemchen, wie ich mich erinnere, weil du google manchmal auf deutsch und manchmal auf englisch nutzt.
Äh ... echt? Nein. Ich habe generell Englisch als bevorzugte Sprache in meinen Browsern eingestellt, weil mir die Sprache sympathischer ist als Deutsch. Und ja, das führt dazu, dass z.B. Google mir auch bevorzugt englischsprachige Treffer anbietet, was ich für übertriebenen Gehorsam halte - wenn ich eine Information suche, ist mir zunächst egal, in welcher Sprache mir diese Information angeboten wird, solange es eine Sprache ist, die ich verstehe.
Oder meinst du den Effekt, dass Google mich penetrant auf google.de umleitet, auch wenn ich eigentlich google.com eingegeben habe?
Ciao,
Martin
Om nah hoo pez nyeetz, Der Martin!
Bei dir gabs da mal Problemchen, wie ich mich erinnere, weil du google manchmal auf deutsch und manchmal auf englisch nutzt.
Äh ... echt? Nein. Ich habe generell Englisch als bevorzugte Sprache in meinen Browsern eingestellt, …
Oder meinst du den Effekt, dass Google mich penetrant auf google.de umleitet, auch wenn ich eigentlich google.com eingegeben habe?
Ja, den. http://forum.de.selfhtml.org/archiv/2014/1/t216151/#m1481527
Matthias
Hey Martin,
Ich mach das normalerweise so, dass ich http://de.wikipedia.org/wiki/Suchschwein direkt in die Adressleiste eingebe. Dann habe ich entweder Glück und das Schlagwort gibt's wirklich (das ist der häufigste Fall); oder ich komme erstmal auf eine Auswahlseite, weil der Begriff mehrdeutig ist
So komme ich dann zur Wikipedia-Suche.
ok, macht Sinn. An die Möglichkeit hab ich gar nicht gedacht, obwohl ich das eigentlich genauso mache. Statt die ganze Adresse einzugeben, hab ich halt nen Shortcut für verschiedene Suchen in der Adresszeile des Browsers, aber das kommt ja auf's gleiche raus.
Gruß, Dennis
Om nah hoo pez nyeetz, Jnnbo!
Wie kann ich dir helfen?
keine Ahnung :) Wenn ich die Seite http://wiki.selfhtml.org/wiki/Startseite aufrufe, werde ich erstmal erschlagen von Text. Warum gibt es nicht groß in der Mitte wie z.B. bei Google ein Suchfeld wo ich eingeben kann <section> dann bekomme ich direkt die Seite angezeigt. So muss ich erstmal die passende Kategorie finden. Wer sich mit HTML nicht auskennt, weiß nicht, dass <section> ein HTML Element ist.
Hm. Die Position der Suche lässt sich nicht so ohne weiteres ändern. Zumindest habe ich dafür keine Idee. Wenn du dich im Wiki anmelden würdest, könntest du unter „Einstellungen“, zu finden ganz oben rechts das „Aussehen“ (2. Reiter) nach deinen Wünschen verändern. Es gibt dort den Punkt „Benutzeroberfläche“ und dort kannst du z.B. in der Zeile
Selfhtml (Voreinstellung | Vorschau | Benutzerdefinierte CSS | Benutzerdefiniertes JavaScript)
Benutzerdefinierte CSS festlegen.
In deinem Fall vielleicht
html {
font-size: 1.2em;
color: black;
}
* {
color: inherit!important;
}
Wie die Suche selbst funktioniert, hat der Dennis ja schon erklärt.
Matthias
Hey Matthias,
im Vorposting natürlich das Zitat versaut. So sollte es sein:
Wie kann ich dir helfen?
Welche Schrift?
wusst ich's doch. Sozusagen vorauseilender Gehorsam ;-)
Nochmal an dieser Stelle: Danke!
Gruß, Dennis
Hey Jnnbo,
dann ist doch alles gut und wir sind uns einig. Dann schauen wir einfach mal, ob der TO sich noch meldet und wenn, können wir ihm ja vielleicht gemeinsam helfen. Wie das ja sonst hier im Forum auch immer läuft :-)
allerdings komme ich mit dem Wiki einfach nicht zurecht und für _mich_ ist die Schrift zu klein um etwas zu suchen.
Muss ja nicht das Wiki sein, gibt ja auch andere Quellen. Und die Verlinkungen müssen ja auch nicht immer der richtige Weg sein.
Aber unabhängig davon: Gibt's was Bestimmtes, womit Du im Wiki nicht zurecht kommst? Matthias ist ja, wie ich gelesen habe, sehr da hinter her, das noch weiter zu verbessern (andere natürlich auch). Vielleicht hast Du ja nen Tipp für ihn? Und auch mit der Schriftgröße fiele ihm bestimmt noch was ein.
Wo wir gerade dabei sind kurz Off-Topic @Matthias und alle anderen: Danke für Eure Arbeit!
Stimmt wenn man etwas einfach nur kopiert ohne zu hinterfragen dann hat man sehr oft Probleme, dieses musste ich leider oder zum Glück selber schon erleben, deshalb frage ich bevor ich etwas kopiere und mir nicht sicher bin, was dieser Code überhaupt macht bevor er irgendwelchen Schaden auf meiner Seite anrichtet.
Ich musste das auch so lernen. Aber wenn's auch (etwas) anders ginge, wär's doch sicherlich auch nicht schlecht.
Gruß, Dennis
Hallo Markus,
Wie oben erwähnt der Placeholder-Text fängt am unteren Rand an und ich hätte in gerne am oberen Rand. Nur egal wo ich align:top anführe es kommt nicht oben hin...
dafür gibt es wahrscheinlich mehrere Möglichkeiten, je nachdem, was Du vorhast. Du könntest dazu z.B. float (siehe dazu auch: Box-Modell) oder vertical-align verwenden. Schau Dir das einfach mal an. Wenn weitere Fragen sind, kannst Du Dich gerne nochmal melden.
Ach so, das hier z.B.
<img style="align:left" src="C:\Users\Markus\Downloads\images.jpg" width:"100" heigth:"70">
wird nicht funktionieren. Es gibt meines Wissens keine CSS-Eigenschaft "align", es gibt aber das oben verlinkte "vertical-align" und "text-align". Außerdem werden HTML-Attribute und deren Werte mit einem "="-Zeichen und nicht mit einem Doppelpunkt getrennt. width:"100"
müsste also width="100"
heißen. Das solltest Du unabhängig davon aber nicht verwenden, sondern dies lieber mit CSS (width, height) machen.
Gruß, Dennis