Profil von MrMurphy

Frage

15.05.2017, 07:00

HTML und CSS webseite soll auf jedem Bildschirm gleich aussehen?

Hallo, ich bin dabei eine Webseite zu programmieren und habe meine webeseite nun auf einem Laptop offen. Nun würde ich aber gerne wissen wie der Code dafür lautete das meine Internetseite auf meinem 12 Zoll laptop genau so aussieht wie auf meinem 24 zoll Bildschirm. auf meinem Laptop ist alles zusammengedrückt. Im internet finde ich dazu leider nichts.

...zur Frage

Antwort

von MrMurphy

15.05.2017, 12:41

Hallo

Nur weil ich schon viele Fragen erlebt habe:

Falls du

"soll auf jedem Bildschirm gleich aussehen"

wörtlich meinst: Das funktioniert praktisch nicht.

Das die Anordnung der Inhalte sich verschiedenen Fenstergrößen anpasst ist vollkommen normal und sinnvoll. Dieses Verhalten kannst und solltest du nur etwas anpassen, so dass deine Besucher die Inhalte problemlos lesen können und sich auf der Seite zurechtfinden.

Gruss

MrMurphy

...zur Antwort

Frage

von ThomasEich

08.05.2017, 21:44

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zur Frage

Antwort

von MrMurphy

08.05.2017, 22:35

Hallo

Du verwendest die float-Anweisung falsch. Siehe

http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

und

http://www.thestyleworks.de/basics/float-rule.shtml

Float ist dafür gedacht damit Text andere Elemente (meist Bilder) umfließen kann. Float ist nicht zum Layouten gedacht, zum Beispiel um Elemente nach links oder rechts auszurichten.

Früher ist Float häufig zum Layouten mißbraucht worden, da es nichts besseres gab.

Diese Zeiten sind aber lange (seit der Einführung von CSS3) vorbei. Zum Layouten wird heute Flexbox verwendet, das auch genau dafür entwickelt wurde.

Gruss

MrMurphy

...zur Antwort

Frage

von DerAnalphabet

12.02.2017, 14:35

Nicht transparentes Bild auf transparentem Hintergrund in HTML einfügen?

Ich habe folgendes Problem:

Ich habe bei meiner HTML-Seite einen transparenten DIV-Kontainer und möchte dadrin ein nicht transparentes Bild einfügen. Egal was ich mache, das Bild wird auch immer transparent. Mit einem DIV-Kontainer bei dem Bild habe ich es auch schon probiert.

Um den Hintergrund transparent zu machen, habe ich opacity verwendet.

...zur Frage

Antwort

von MrMurphy

12.02.2017, 14:41

Hallo

Und genau opacity ist das Problem, da opacity sich gnadenlos auf alle Kindelemente auswirkt.

Statt dessen kannst du der Hintergrundfarbe (background-color) den Wert transparent zu weisen.

Oder du wählst für die Hintergrundfarbe einen Farbwert mit Transparenz wie rgba oder hsla, falls du doch etwas Farbe wünscht.

Gruss

MrMurphy

...zur Antwort

Frage

von Lacadio

29.12.2016, 15:26

Wie kann man bei HTML einen Hover Effekt für Bilder erstellen wo der Text hervorscheint?

Hallo, Ich bin grade dabei ein Portfolio zu Programmieren und habe Probleme damit Hover Effekte zu erstellen. Meine Frage ist wie kann man bei HTML einen Hover Effekt für Bilder erstellen so dass wenn man über das Bild hovert das der Text zum Vorscheinen kommt.?

So wie auf dieser Seite: http://themes.pixelwars.org/responsy-wp/portfolio/#prettyPhoto

Vielen dank schon mal im voraus. LG. Lacadio

...zur Frage

Antwort

von MrMurphy

29.12.2016, 16:02

Hallo

Auf der Seite wurde das mit JavaScript gemacht.

Bei einem Portfolio solltest du aber auf hover-Effekte verzichten, da Touchscreens die nicht kennen. Und somit alle Besucher mit Touchscreens die dahinter versteckten Informationen verborgen bleiben.

Gleiches gilt für Besucher, die bei ihrem Browser JavaScript blockiert haben.

Und für Besucher, die nicht mit ihrem Mauszeiger auf Webseiten sinnfrei hin- und herwedeln.

Gruss

MrMurphy

...zur Antwort

Frage

von Nindane

22.12.2016, 13:09

z-index der über alle steht?

Gibt es einen z-index befehlt oder irgendwas ähnliches im CSS was mir einfach unabhängig von allem anderen das element das ich möchte in den vordergrund schiebt?

...zur Frage

Antwort

von MrMurphy

22.12.2016, 17:42

Hallo

Nein, so eine Universal-Anweisung gibt es nicht. Auch keinen Zusatz wie !important.

Auf der z-Achse können nur sogenannte positionierte Elemente verschoben werden.

Das Positionieren kann auf unterschiedliche Arten erfolgen. Meiner Kenntnis nach neben der Anweisung position zum Beispiel auch mittels float. Eventuell gibt es noch weitere Möglichkeiten, zum Beispiel Flexbox.

Ob und wie die Elemente auf der z-Achse verschoben werden können hängt einerseits von der Reihenfolge der Elemente im Quelltext und anderseits von anderen positionierten Elementen ab.

Deshalb kann nicht jedes Element beliebig auf der z-Achse positioniert werden.

Wenn ein Element ganz vorne zum Betrachter hin positioniert werden soll muss es also passend im Quelltext stehen und andere Positionierungen dürfen nicht stören.

Gruss

MrMurphy

...zur Antwort

Frage

von Irgendwer1501

21.12.2016, 01:08

Bilder tabellarisch anordnen?

Hallo,

wie ordne ich Bilder (die ich über einen externen Link bekomme) tabellarisch an, dass ich immer z.B. 5 in einer Reihe habe? Mache ich das über HTML oder CSS und wenn ja, wie lauten die Befehle dafür? Eine Tabelle anlegen über HTML bringt ja nicht viel oder? Oder kann ich da den Link von dem ich die Bilder bekomme einbeziehen?

Danke schon mal im voraus

Liebe Grüße Irgendwer1501

...zur Frage

Antwort

von MrMurphy

21.12.2016, 14:23

Hallo

Das table-Element ist nur für Tabellendaten gedacht. Bilder sind keine Tabellendaten.

Von daher sollten die Bilder jeweils von geeigneten Containern umschlossen werden, meist dem figure-Element.

Diese umschließenden Elemente bekommen unter Beachtung des Box-Modells eine Breite von 20%.

Die Anordnung der Bilder geschieht dann mittels Flexbox ( display: flex; ).

So kann bei schmaleren Bildschirmen die Anzahl der Bilder in einer Reihe auch problemlos verringert werden. 25% ergeben vier Bilder, 33.33% drei Bilder und so weiter.

Gruss

MrMurphy

...zur Antwort