Beiträge von EADMRW

EADMRW · 6. Dezember 2016

Zitat

Konnte ich mir schon denken, dass die Aufgabe nicht von Deinem Kumpel ist.

Aso nene da bist du echt auf dem falschen Pferd oder wie das Sprichwort heißt.

Ich bin nicht auf der Schule, kann ich mir nicht leisten, muss Geld verdienen

mache es aus reinen Interesse, finde es sehr spannend sowas zu lernen und mit der ganzen Hilfe im Internet weiter zu kommen.
Wie gesagt, wenn die die Aufgabe abgeschlossen haben möchte ich mein Code mal hier hoch laden wegen der Struktur des codes.
Ich kann ja leider nicht zu den seinen Lehrer an die Schule gehen und sagen: Gucken Sie sich das bitte mal an
Bin nicht auf der Schule, ich habe keinen "nutzen" außer dem das ich was lerne

Nochmal vielen dank an MrMurphy für deine Hilfe. Ich denke aber man findet das Forum leicht und den Beitrag. trz danke das du es rausgenommen hast

Lg Alex

EADMRW · 6. Dezember 2016

Hey vielen dank für die Hilfe und das Beispiel.

hab aber eine bitte an dich, auch wenn es nicht schwer ist, das Beispiel vllt doch raus zu nehmen, da die Aufgabe an der Schule aktuell noch nicht gelöst ist.
Wir möchten ja nicht das sich ein paar schlaue Schüler hier ein teil der Lösung abgucken können

Ja nachdem klar war das mehrere Seiten gemeint sind, ist es kein Problem. Verlinkung und alles klappt wunderbar und mit bisschen google benutzung findet man auch sehr leicht wie ein hover für den Info text funzt.

Hab persönlich noch keine Ahnung wie das Ausblenden des Menüs klappen soll aber denke mit ein bisschen suche bekommt man das schon raus, sobald die Aufgabe an der Schule abgeschlossen ist werde ich mein Erarbeitetes Beispiel als Code mal hochladen. Wäre super wenn du mit mir dann den Aufbau des Codes überarbeiten kannst da ich momentan einfach alles so rein schreibe wie ich es "lerne" und ich den schon gerne Sauber dort stehen hätte.

Ok nochmal vielen dank für deine Hilfe und wie gesagt, wenn die Aufgabe an der Schule durch ist, lad ich meinen Code mal hoch.

Lg Alex

EADMRW · 3. Dezember 2016

So hab nun Screenshots von Ihm bekommen und diese noch fix zusammen gesetzt.
Jetzt kann man die Aufgabe, Bonus Aufgabe und das Beispiel komplett sehen.

Gruß Alex

EADMRW · 3. Dezember 2016

So hab jetzt hier mal mein Ergebnis wie ich mir die den Aufbau nach Anleitung vorstelle, Farben sind nur damit ich besser sehe wie sich was wo verhält wenn ich was änder.

HTML

<!DOCTYPE html>
<html>
<head>




<link rel="stylesheet" href="testfile.css" type="text/css">
<meta http-equiv="Content-Style-Type" content="text/html; charset=utf-8">










</head>




<body>
<div class="wh">
Autos
</div>




<div class="l">
Automarken
<div class="l1">
<ul>
<li>Mercedes
</li>
<li>Volkswagen</li>




</ul>







</div>
</div>




<div class="m">
Bild
<p><img src="automarken-logos-uberblick.jpg" width="600" height="680" </p>
</div>







<div class="r">
Infobox
<p>Klicken Sie auf eine Marke Ihrer Wahl um weitere Informationen zu erhalten.</p>
</div>










</body>
</html>

Alles anzeigen

und die CSS Datei:

CSS

body {
	margin: 1%;
	text-align: center;
	background: red;
	font-size: 2em;
}







.l {
background: blue;
width: 20%;
float: left;
margin: 0.5%;
}




.m {
background: Pink;
width: 50%;
float: left;
margin: 0.5%;

}




.r {
background: green;
width: 25%;
float: left;
margin: 0.5%;




}

Alles anzeigen

Soweit bin ich nun mit dem ersten tut von Youtube gekommen. Jedoch finde ich keine Möglichkeit links einen Punkt auszuwählen bzw per Mouseover Funktion das Bild und rechts den Text zu ändern.
Dachte an sowas wie ein If oder ähnliches. If MouseOver="Mercedes" then Bild="Mercedes Logo" Text="Mercedes wurde dann und dann gegründet... ect"
Aber leider finde ich nichts was mir direkt helfen würde.

EADMRW · 3. Dezember 2016

Guten Morgen Leute,

bin durch einen Freund der momentan auf einer Fachschule ist auf eine seiner Aufgaben gestoßen.

Die Aufgabe:
Ziel ist die Darstellung von Informationsseiten zu einem Thema, das mehrere Unterthemen hat. Das Thema ist einem Überlassen.

Das Layout soll jedoch dreispaltig sein, links die Navigation in der Mitte ein Bereich für eine Abbildung zum grade dargestellten Unterpunkt, rechts eine detaillierterer informations-Text zum dargestellten Objekt.

Die einzusetzenden Techniken sind HTML5 und CSS3. Diese müssen getrennt notiert werden, also keine Direktformatierung in HTML-Code.

Die Navigation hat keine Aufzählungspunkte wird aber dennoch durch eine unsortierte Liste realisiert.

Das ist die Standard Aufgabe, jetzt noch die Extras für die schlauen:

Die Informationen rechts werden nur eingeblendet wenn man mit der Maus über einem Link ist.
Die Navigation wird ebenfalls ausgeblendet und ist nur sichtbar, wenn der Maus Zeiger am linken Bildschirmrand ist.
Die Navigation hat eine feste Breite, die verbleibende Breite wird immer 60 zu 40 aufgeteilt.
Erst ab einer bestimmten Breite des Viewports werden die Elemente nebeneinander dargestellt, bei kleineren Breiten untereinander.
Einbau von CSS-Animationen.

Ich habe so gut wie keine Vorkenntnisse in diesem Berreich, habe vorhin mit hilfe von tuts schon sowas dreispaltiges mit punkten hinbekommen.
Jedoch fehlt mir das Wissen wie ich zb. aus der linken Spalte ein Punkt auswähle, in der mittleren Spalte ein Bild und in der rechten Spalte ein Text dazu einfüge.
Vorallem mit den Extra-Aufgaben mit dem Hover (wenn ich das richtig verstanden habe) gehen soll.

Ich möchte das sehr gerne lernen, vllt hat hier jmd Lust und Zeit mir paar Dinge zu erklären bzw weis wo ich gute tuts dafür finden kann ?
Bin für jede Hilfe offen und dankbar
Würde ja meinem Freund fragen, doch er versteht das selbst nicht so ganz. :-/

Lg Alex

Beiträge von EADMRW

Aufgabe zur Erstellung einer Informationsseite zu einem Thema HTML5 & CSS3 [Neuling]

Aufgabe zur Erstellung einer Informationsseite zu einem Thema HTML5 & CSS3 [Neuling]

Aufgabe zur Erstellung einer Informationsseite zu einem Thema HTML5 & CSS3 [Neuling]

Aufgabe zur Erstellung einer Informationsseite zu einem Thema HTML5 & CSS3 [Neuling]

Aufgabe zur Erstellung einer Informationsseite zu einem Thema HTML5 & CSS3 [Neuling]