Hallo,
ich sehe da keine Chance. Bilder können nur unter bestimmten Voraussetzungen teilweise, oder in ganz seltenen Fällen auch ganz, wiederhergestellt werden, die hier aber nicht vorliegen.
Gruss
MrMurphy
Hallo,
ich sehe da keine Chance. Bilder können nur unter bestimmten Voraussetzungen teilweise, oder in ganz seltenen Fällen auch ganz, wiederhergestellt werden, die hier aber nicht vorliegen.
Gruss
MrMurphy
Hallo
ZitatGibt es nicht einen bestimmten Tag oder so? z.B wie <strong> oder <a>?
Nein. Inline-Elemente sind dafür aber grundsätzlich nicht geeignet.
Gruss
MrMurphy
Hallo
"geeignetetes Element mit Inhalt blabla" "geeignetetes Element mit Inhalt blabla"
Rest mit CSS
Zitatwie lauten diese Elemente?
Das hängt vom Inhalt ab, den du uns vorenthälst.
Gruss
MrMurphy
Hallo,
gar nicht. Die müssen halt über geeignete Elemente und Breitenangaben nachgebaut werden.
Gruss
MrMurphy
Hallo
ZitatIch muss die 2 Bilder und die Überschrift in div1 machen.
Das ist die sinnvollste Lösung - wenn es denn unbedingt ein div sein soll.
Allerdings ist dein Quelltext recht unstrukturiert und enthält sinnfreie Angaben. So willst du zum Beispiel ein Bild mit einer Höhe von 150px in ein div mit einer Höhe von 130px quetschen. Das kann nur Probleme geben.
Ich tendiere zur folgenden Lösung:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Bilder neben Text 01</title>
<style>
body {
margin: 0;
}
#div1 {
background-color: yellow;
border: 5px solid orange;
display: flex;
justify-content: space-between;
align-items: center;
}
figure {
max-width: 100%;
margin: 0;
}
img {
display: block;
width: 100%;
}
#div1 h1 {
white-space: nowrap;
}
#div1 figure:nth-child(2) {
order: -1;
}
</style>
</head>
<body>
<div id="div1">
<h1>New York</h1>
<figure>
<img src="http://lorempixel.com/100/100/nature" alt="Beispielbild">
</figure>
<figure>
<img src="http://lorempixel.com/200/150/technics" alt="Beispielbild">
</figure>
</div>
</body>
</html>
Alles anzeigen
Gruss
MrMurphy
Hallo,
Zitates geht mir um das Verständnis
Das scheint dein Problem zu sein.
ZitatJe nach Breite des Bildschirms
und
Zitatz.B. 1024 hat die Hintergrundfarbe blau wenn die Seite gewechselt wird, 760 hat die Farbe Gelb.
deuten darauf hin, dass du die Funktion vom Responsive Design mit Media Queries falsch verstanden hast.
Es ist unmöglich für jedes Gerät bzw. für jede Pixelanzahl Webseiten zu erstellen. Smartphones haben heutzutage teilweise bereits höhere Pixeldichten als Desktop-Bildschirme. Zusätzlich muss die Webseite noch auf Hoch- und Querformat reagieren. Außerdem hat es sich als besucherfreundlich erwiesen wenn Webseiten nicht seitwärts gescrollt werden müssen.
Deshalb hat es sich als praktikabel erwiesen, wenn Webseiten nicht nach Geräten oder Fensterbreiten erstellt werden, sondern auf ihren Inhalt reagieren. Dann entstehen viele deiner Probleme erst gar nicht.
Mit einem Link zu deiner Seite kann dir das eventuell praktischer erläutert werden. Natürlich nur, wenn deine Seite auch bereits Inhalt enthält, auf den sie reagieren kann.
Gruss
MrMurphy
Hallo
ZitatBei welchen Elementen
Zeige bitte deinen Quellcode in beiden Zuständen.
Gruss
MrMurphy
Hallo
dann zeig' mal den Quelltext (HTML und CSS) vor und nach den Änderungen.
Entweder sind im Quelltext Fehler oder du verwendest Elemente, bei denen ein Zeilenumbruch ausnahmsweise die Darstellung im Browser beeinflußt.
Oder der Beautifier ist Schrott.
Gruss
MrMurphy
Hallo
Deine Angaben sind leider nicht sehr aussagekräftig.
Zitatwie kann ich sowas mit html/css machen?
Dazu fehlen leider noch einige Angaben. Wie soll sich die Grafik bei hochkanten Fenstern verhalten, zum Beispiel bei Smartphones oder Tablets? Wenn sie das ganze Fenster ausfüllt wird der Papagei doch arg verzerrt.
Zitatich habe jetzt mal testweise dieses layout mit einem webtool erstellt
Mit welchem Webtool? Nur als Grafik?
Zitatstretcht der header nicht über die gesamte seite
Du musst ihm 100% Breite geben und das padding und margin vom body auf 0 setzen. Hintergrund: Der Body wird von den Browsern standardmäßig mit etwas margin ausgeliefert. Die Vorgabe vom padding sollte zwar bereits 0 sein, aber es gibt Webtools die von sich aus padding vergeben.
Natürlich darf der header sich auch nicht in weiteren Containern befinden, die weniger als 100% Breite haben.
Zitattext soll auch unterm header durchscrollen
Dann muss der header mittels "position: absolute" oder "position: fixed" aus dem Textfluss genommen werden und der restliche Inhalt benötigt einen Abstand nach oben (margin-top) in Höhe des headers.
Zitatder hintergrund fix sein
Meinst du das Bild mit dem Papageien? Das geschieht mittels CSS "background-position" und "background-attachment", siehe zum Beispiel
http://wiki.selfhtml.org/wiki/CSS/Eigen…ben_und_-bilder
Der Bitte meiner Vorschreiber Groß- und Kleinschreibung zu verwenden kann ich mich nur anschließen. Texte nur mit kleinen oder großen Buchstaben sind einfach schwerer zu lesen. Deshalb gilt das in Foren als unhöflich. Wie würdest du dich fühlen wenn du jemandem helfen willst und der dich unhöflich und arrogant behandelt?
Gruss
MrMurphy
Hallo,
deine hr-Elemente sich sachlich schlicht falsch. Sie sollten also gelöscht werden.
In HTML5 haben alle Elemente, also auch das hr-Element, eine semantische Bedeutung und sollten deshalb nicht verwendet werden um zum Beispiel Abstände zu schaffen. Dafür ist das CSS zuständig, zum Beispiel mit dem margin-Attribut.
Wenn du ein Framework wie Bootstrap (?) benutzt solltest du auch dessen Möglichkeiten nutzen und nicht mit Eigenkreationen herumpfuschen, speziell wenn dir offensichtlich das dafür notwendige Hintergrundwissen fehlt.
Erst wenn die Möglichkeiten des Frameworks nicht mehr weiterhelfen sollte mittels eigenem CSS sanft und sachgerecht eingegriffen werden.
ZitatKannst du mir ein Tipp geben wie ich das anders umsetzen soll?
Dem body die blaue Hintergrundfarbe geben und den anderen Elementen einen Abstand geben, wenn die blaue Hintergrundfarbe sichtbar sein soll.
Gruss
MrMurphy
Hallo,
Zitatklappt es ja auch...
Dabei handelt es sich auch um p-Elemente, die zudem andere Anweisungen erhalten als dein select-Element.
Ich kann auch nicht nachvollziehen, warum in einer Select-Box seitwärts gescrollt werden soll, zumal das benutzerunfreundlich ist.
Dein Quelltext läßt leider auch keine eigenen Prüfungen zu. Wenn Quelltext, dann vollständig, ohne php-Angaben oder besser noch ein Link zu der Datei.
Angaben wie
sollten zudem nicht mehr verwendet werden, sie gelten offiziell als veraltet.
ZitatDa er sonst bei langen Zeilen den Text abschneidet
Nein, nur wenn du die Voreinstellungen überschreibst. Die Voreinstellungen sind doch so, dass die Select-Box die Breite des breitesten Eintrags annimmt.
Gruss
MrMurphy
Hallo
ZitatDa meiner Meinung nach alle 4 Eigenschaften Bilder einsparen...
Das sehe ich genau so. Eigentlich ist keine der vier Antworten korrekt.
Somit ist Frage auf jeden Fall nicht eindeutig lösbar.
Wahrscheinlich sollen die Antworten transform und transition richtig sein.
Einerseits haben die einige Eigenschaften, die (bewegte) Grafiken nicht bieten können. Andererseits wurden viele Effekte von transform und transition in gif- oder flash-Animationen dargestellt, wenn halt auch schlichter. Tatsache ist aber das sie bewegte Grafiken ersetzen und damit einsparen können.
Gruss
MrMurphy
Hallo,
entweder ist dein Firefox beschädigt oder enthält ein störendes AddOn oder du hast an anderer Stelle im Quelltext problematische Angaben gemacht.
Gruss
MrMurphy
Hallo
Zitatwäre das dann nicht eine lange Reihe nach unten auf einem Smartphone bis der eigentliche Inhalt kommt?
Ich denke
Zitatmöchte ich eine neue Homepage
dass du die Homepage erstellen willst? Dann bestimmst du die Anzahl der Seiten und ihren Inhalt. Damit kann sich das Problem überhaupt nicht stellen.
Außer du bist süchtig nach einem Aufklappmenü und kannst nicht davon lassen.
Wenn du wirklich viele Seiten benötigen solltest erstelle besser mehrere kleine Menüs die dann nur auf den relevanten Seiten auftauchen, dann aber auch dauerhaft sichtbar sind.
Gruss
MrMurphy
Hallo,
wenn du eine benutzerfreundliche Seite erstellen willst sollten grundsätzlich immer alle Menüeinträge sichtbar sein, egal bei welcher Fensterbreite. Deshalb solltest du synaptics Vorschlag
Zitatmach die unterpunkte auch direkt sichtbar
folgen.
Gruss
MrMurphy
Hallo
Zitatumwandeln in Text
Ja.
Zitatgibt es andere gute Lösungen
Nein. pdf und HTML basieren auf vollkommen unterschiedlichen Grundlagen. pdf-Seiten haben so zum Beispiel eine bestimmte Größe, HTML-Seiten sind jedoch im Prinzip unendlich groß und haben keine Grenzen.
ZitatSticky Footer - gibt es da brauchbare Ansätze?
Es ist immer wieder lustig wie wichtig Sticky Footer genommen werden. Dabei sind sie ziemlich überflüssig. Seiten ohne Inhalt will eh' niemand lesen.
Und ja, Flexbox bietet brauchbare Ansätze für Sticky Footer.
ZitatHabe Bildergalerien bei denen ich min. 250 px breite habe (ist noch übernommen vom alten Design)
480px. Es mögen noch vereinzelt einige mit weniger Breite herumschwirren, aber die haben dann in der Regel auch keine auch nur halbwegs brauchbaren Browser. Einspaltige Seiten mit weniger als 480px werden bei einem vernünftigen HTML-Grundgerüst im Regelfall auch auf schmaleren Viewpoints sinnvoll dargestellt.
Gruss
MrMurphy
Hallo,
eventuell werden die anderen Schriftarten anders eingebunden. Um das beurteilen zu können müsstest du die Seite online stellen und uns den Link zu ihr geben.
Gruss
MrMurphy
Hallo,
als Hilfe kann ich dir nur mitteilen dass das Verhalten normal ist.
Die Schriftarten benötigen JavaScript und das wird durch NoScript blockiert. Das musst du halt berücksichtigen und kannst noch ein, zwei Standardschriftarten im CSS angeben. Ob deine Besucher JavaScript blockiert haben kannst du schließlich nicht beeinflussen.
Gruss
MrMurphy