zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS- Ein paar Fragen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.12.2017, 22:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.12.2017
Beiträge: 8
anfänger2 befindet sich auf einem aufstrebenden Ast
Standard CSS- Ein paar Fragen

Hallo,
ich beschäftige mich gerade mit Webentwicklung und bin gerade an einem Punkt gelangt, wo ich nicht weiterkomme.
Über Hilfe bin ich euch sehr dankbar.


1) Was ist mit dieser Aussage gemeint?

"Wenn man padding-top in Prozent angibt, dann bezieht sich diese Prozentangabe nicht etwa auf die Höhe der Seite, sondern auf die Breite. D.h. mit padding-top in Prozent haben wir plötzlich etwas, das eine Höhe erzeugt.
Diese Höhe aber in Abhängigkeit von der Breite erzeugt. => Wir haben eine skalierbare Höhe."

2) Wird der Clearfix Hack immer dann verwendet, wenn ein Element größer ist als das Element, das es umschließt?

3) Diese eine Zeile HTML-Code sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät.
Was ist aber mit "korrekter Skalierung" gemeint?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4) Was ist, wenn man mehrere Container hat, die miteinander verschachtelt sind (4 oder mehr). Wie sollte, da die position (relative oder absolute) sein?

5) Mir ist noch nicht ganz klar, wann man relative und wann man absolute verwenden soll.
Wenn das äußeres Element relative und das inneres Element relative ist, dann erhält man das gleiche Ergebnis.
Hier ein Beispiel:


HTML-Code:
<html>
    <head>
    <style>
		.relative1{
			background-color:red;
			width: 50px;
			height: 50px;
			position:relative;
			top:100px;
			left:100px;
		}
		.relative2{
			background-color:yellow;
			width: 15px;
			height: 15px;
			position:relative;
			top:30px;
			left:30px;
		}
		.absolute1{
			background-color:green;
			width: 20px;
			height: 20px;
			position:absolute;
			top:20px;
			left:20px;
		}
		.absolute2{
			background-color:black;
			width: 20px;
			height: 20px;
			position:absolute;
			top:30px;
			left:30px;
		}
	</style>
    </head>
    <body>
    
    	<div class="relative1">
        	<div class="absolute1"></div>
        </div>
        
        <br />
        
        <div class="relative1">
        	<div class="relative2"></div>
        </div>
        
    </body>
<html>

6) Was bedeutet der : bei z.B. a:hover


7) Ich lerne neben HTML und CSS auch JavaScript. Allerdings finde ich in meinem Buch nichts zu Nichtsymmetrische Grid-Systeme.
Kennt ihr Tutorials, wo das erklärt wird?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.12.2017, 23:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

1) Am sinnvollsten erstellst du eine einfache Beispielseite.

padding-Angaben in Prozent nehmen als Grundlage grundsätzlich die Breite. Wenn für padding-top und / oder padding-bottom Prozentwerte angegeben werden ändern die Werte sich immer und nur bei Veränderung der Breite. Wenn die Höhe geändert wird ändert sich jedoch nichts.

Für Prozentangaben gibt es im CSS jede Menge Grundlagen. Und das sind häufig nicht die von Webseitenerstellern erwarteten. Die musst du halt lernen und beachten.

2) Der Clearfix-Hack ist ein inoffizieller Oberbegriff, hinter dem unterschiedliche technische Lösungen stehen können. Es gibt also nicht nur den einen Clearfix-Hack sondern verschiedene. Welcher verwendet werden sollte hängt vom Quelltext und anderen CSS-Angaben ab.

Ein Clearfix-Hack hat nichts mit Elementgrößen zu tun sondern hat die Aufgabe Floats zu beenden oder einzuschließen. Neben der clear-Anweisung sind es die einzigen Möglichkeiten unerwünschte Auswirkungen von Float zu verhinden.

3) Korrekte Skalierung heißt nur, dass die Größenanpassung auf hochauflösenden Displays so erfolgt wie es von den meisten Webseitenerstellern erwartet wird. Also immer, wenn die Auflösung umgerechnet werden muss, weil sonst zum Beispiel die Schrift viel zu klein angezeigt werden würde.

Die Viewport-Anpassung gehört offiziell überhaupt nicht zum CSS, sondern wurde von Apple eingeführt. Da sie sich bewährt hat haben alle anderen Browserhersteller die Anpassung in ihre Browser eingebaut.

4) Position absolute sollte von Anfängern absolut nicht verwendet werden. Für resposive Design ist Position absolute in der Regel hinderlich. Mit Einführung von HTML5 und CSS3 sind fast alle Position-Angaben (also auch relative) in der Regel überflüssig geworden.

Also einfach weglassen. Anleitungen, die sich noch ausführlich mit Position-Angaben beschäftigen sind in der Regel veraltet.

5) Siehe 4: Lass es bleiben.

6) Irgendwie gräbst du veraltetes HTML und CSS aus. Hover-Angaben lösen Aktionen aus wenn der Mouszeiger über einem Element schwebt. Problem: Die heute in der Mehrzahl von Besuchern verwendeten Touchscreens kennen keine Hover-Effekte.

Also auch einfach weglassen. Oder halt für aufwendige Fallbacks sorgen.

7) Den Begriff kenne ich nicht. Auf JavaScript sollte so weit wie möglich verzichtet werden. Zum einen sind JavaScript-Lösungen um das 10fache oder noch langsamer als gleichwertige CSS-Lösungen. Zum anderen haben viele Besucher JavaScript in ihren Browsern blockiert, zum Beispiel um unerwünschte Werbung zu blockieren. Also sollten auch für JavaScript-Anweisungen immer Fallbacks erstellt werden.

Auch andere Lösungen solltest du am besten von Beginn an vermeiden.

Zum Beispiel das br-Element verwenden wenn Abstände mit CSS erstellt werden können.

Oder leere Container mittels width und height Größen geben. Die verhalten sich anderes als mit Inhalt erstellte Container. Grundsatz: Die Größe von Containern soll sich immer nach ihrem Inhalt richten.

Statt div-Elementen sollten so weit möglich dafür andere HTML5-Container verwendet werden. Das ist in den HTML-Regeln festgeschrieben und verbessert die Übersichtlichkeit von Quelltexten enorm.

Und verwende immer komplette HTML-Seiten mit sinnvollem Inhalt, da du sonst schlicht nicht siehst was für einen Unsinn du grade erstellst. Also im HTML-Quelltext zumindest header, main und footer.

Verwende zudem bei der Erstellung von Versuchsseiten Rahmen und / oder poppige, unterschiedliche Hintergrundfarben.

Gruss

MrMurphy

Geändert von MrMurphy (27.12.2017 um 23:56 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.12.2017, 00:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.12.2017
Beiträge: 8
anfänger2 befindet sich auf einem aufstrebenden Ast
Standard

Zu 4) Wenn absolute und relative überflüssig sind. Wie soll ich sonst meine Elemente positionieren?

Zu 7) Mit assymetrische Grid Systeme meine ich so eins, welches im Anhang ist.
Angehängte Grafiken
Dateityp: png Unbenannt.png (13,5 KB, 4x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 28.12.2017, 01:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

4) Zunächst nach Möglichkeit dem normalen Dokumentenfluß folgen. Dann Flexbox, CSS-Grid, display: [block inline-block inline]. Es kommt halt darauf an was du erreichen willst.

7) Durch verschiedene Inhalte und / oder Breitenangaben.

Zuerst solltest aber immer den HTML-Quelltext mit Inhalten erzeugen. Mit deinem Vorgehen erzeugst du nur praxisfremde unbenutzbare Beispiele, mit denen du nichts lernst.

Ich habe mal eine Beispielseite mit dem von dir erwünschten Layout erstellt:

Beispielseite

Gruss

MrMurphy

Geändert von MrMurphy (28.12.2017 um 02:20 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 28.12.2017, 02:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.12.2017
Beiträge: 8
anfänger2 befindet sich auf einem aufstrebenden Ast
Standard

Hallo MrMurphy,
welche Quelle sollte ich verwenden um "richtiges" HTML/CSS zu lernen und kein veraltetes?
Von Flexbox und CSS-Grid steht nämlich nichts in meinem Buch. Würde es aber gerne lernen.
Kannst du mir da etwas empfehlen?



Zwar sagst du, dass man auf JavaScript weitestgehend verzichten soll, aber würde es trotzdem gerne lernen. Kannst du mir da auch etwas empfehlen?
Mit Zitat antworten
  #6 (permalink)  
Alt 28.12.2017, 03:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Gute aktuelle Lehrquellen (Bücher, Videotrainings) sind schwierig zu finden. Zumal es immer wieder Autoren gibt, die zwar aktuelle Bücher rausbringen, aber selbst nicht auf dem aktuellen Stand sind was HTML und CSS angeht.

Aktuelle Lehrquellen sollten sich intensiv mit Flexbox und CSS-Grid beschäftigen. Wenn die komplett fehlen: Finger weg.

Gleiches gilt für Pseudoklassen und Pseudoelemente beziehungsweise CSS-Selektoren, deren Anwendungsmöglichkeiten in den letzten Jahren mit CSS3 stark erweitert wurden und weiterhin werden. Die sind wichtig um HTML und CSS möglichst zu trennen, was wiederum die Einrichtung von Responsive Designs erleichtert.

Lehrquellen, deren Erstausgabe älter als drei, vier Jahre sind, sind der in Regel veraltet.

Ich selbst habe gute Erfahrungen mit den aktuellen Büchern von Peter Müller (manchmal auch unter Peter M. Müller) gemacht.

Mit JavaScript kenne ich mich kaum aus.

Gruss

MrMurphy
Mit Zitat antworten
  #7 (permalink)  
Alt 28.12.2017, 04:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.12.2017
Beiträge: 8
anfänger2 befindet sich auf einem aufstrebenden Ast
Standard

Also Einstieg in CSS: Webseiten gestalten mit HTML und CSS?
Mit Zitat antworten
  #8 (permalink)  
Alt 28.12.2017, 09:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Die heute in der Mehrzahl von Besuchern verwendeten Touchscreens kennen keine Hover-Effekte
Das heißt aber im Umkehrschluss nicht, dass man User mit Mausgeräten nicht berücksichtigen soll. Es dürfen sehr wohl :hover Effekte eingebaut werden, auf einem Desktop-Gerät mit Maus erwarte ich die auch. Ich erwarte aber auch, dass Buttons/Links etc. auch ohne diese Effekte gut erkennbar sind, auch auf einem Smartphone/Tablet Gerät funktionieren und sofort sichtbar sind.

Zitat:
Zitat von anfänger2 Beitrag anzeigen
Zwar sagst du, dass man auf JavaScript weitestgehend verzichten soll, aber würde es trotzdem gerne lernen. Kannst du mir da auch etwas empfehlen?
Zu 100% kann ich diese Aussage nicht unterschreiben, Javascript darf ruhig eingesetzt werden. Aber auch nur dafür, wofür es gedacht ist. Also nicht, um ein Layout zu erstellen.
Es stimmt, Javascript kann die Website sehr langsam machen. Man kann es aber auch so schreiben, dass es performant bleibt. Auch können Screenreader, Suchmaschinen etc. heutzutage Javascript soweit ausführen, dass es nicht sinnvoll ist auf JS komplett zu verzichten.
Es ist auch heute schwer, Javascript zu deaktivieren, wenn es jemand deaktiviert, dann weiß derjenige das auch (und sollte auch wissen, wie er es wieder aktiviert wenn etwas auf einer Seite nicht funktioniert)
Was stimmt: Eine Seite sollte aber prinzipiell auch ohne JS funktionieren und bedienbar sein. Als Anfänger reicht es auch erst einmal aus, eher HTML & CSS zu lernen. Kann man einfache, statische HTML Seiten aufbauen, kann man anfangen, diese mit JS zu erweitern.
Mit Zitat antworten
  #9 (permalink)  
Alt 28.12.2017, 12:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Also Einstieg in CSS: Webseiten gestalten mit HTML und CSS?
Das kenne ich nicht, hört sich der Beschreibung nach aber sinnvoll an.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.01.2018, 03:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.12.2017
Beiträge: 8
anfänger2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Hallo

1) Am sinnvollsten erstellst du eine einfache Beispielseite.

padding-Angaben in Prozent nehmen als Grundlage grundsätzlich die Breite. Wenn für padding-top und / oder padding-bottom Prozentwerte angegeben werden ändern die Werte sich immer und nur bei Veränderung der Breite. Wenn die Höhe geändert wird ändert sich jedoch nichts.

Ich habe eine Beipielseite erstellt, allerdings verändert sich beim verkleinern/vergrößern der Website gar nichts. Deswegen weiß ich immer noch nicht, was mit der aussage gemeint ist.

HTML-Code:
<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="test.css">
		<style>
			html, body{
				height:100%;
				width:100%;
			}
			#div1{
				width: 500px;
				height: 400px;
				background-color: orange;
				color:white;
				font-size: 20px;
			}
			#div2{
				width: 500px;
				height: 200px;
				background-color: yellow;
				color:white;
				font-size: 20px;
				padding-top: 10%;
			}
		</style>
	</head>
	<body>
            <div id="div1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
							<div id="div2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</div>
						</div>


	</body>
</html>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Clearfix / CSS Reset / CSS Hacks 2016 Elma CSS 7 14.08.2016 03:12
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
Dynamsiches Menü mit CSS - Fragen Kurby CSS 2 13.09.2009 23:35
Grundlegende Fragen zu CSS Asparagus CSS 7 17.02.2009 01:11
2 kleinere CSS Fragen, float und ul (?) img-media CSS 5 12.03.2006 22:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:07 Uhr.