3 "simple" Html/css Fragen

weirdo61 · 02/21/2014, 15:38

Hallo ich habe eine Aufgabe in HTML die ich für die Schule machen muss.
Ich kann eigentlich alles davon außer 3 sachen:

"2 Bilder sollen hintereinander liegen und beim anklicken soll jeweils das andere erscheinen"
da steht "tipp CSS"

Dann brauche ich noch eine Menüleiste, ich persöhnlich würde das mit einem <div> machen aber die menüleiste soll auch beim runterscrollen mit gehen.
Ich hab keine Ahnung wie das gehen soll :/

Ich soll auch ein Bild das beim anklicken vergrößert wird (und dann beim erneuten anklicken wieder verkleinert wird) in die Seite einfügen.
Hab das mal so versucht

Spoiler

Hab das obige durch googeln gefunden, also habs nicht selbst gemacht.
ich hoffe ihr könnt mir helfen

.StarSplash · 02/21/2014, 16:34

Frage 1 verstehe ich nicht so recht, für die zweite solltest du dir mal die CSS-Angaben für "position" ansehen. Genauer gesagt ist "position:fixed" das was du suchst. Für die dritte Aufgabe müsste man wissen, ob ihr Javascript in der Schule schon hattet.

// Wenn Frage 1 so ist wie ich mir das denke, dann solltest du die beiden Bilder mit CSS übereinander legen und bei einem Klick mit Javascript den z-index (Achtung, Stichwort

) ändern. Das ist zwar weder elegant noch schön, funktioniert aber.

weirdo61 · 02/21/2014, 16:40

Zu Frage 1: Genau so steht es halt auf dem Blatt ^^
wahrscheinlich einfach 2 Bilder so einstellen, dass das eine jeweils das andere verdeckt.
nur ich weiß halt nicht wie das gehen soll

Zu Frage 2: Ich hab ein <div> auf Position:fixed definiert, in css, jedoch macht es keinen optischen unterschied zu Position:absolute (so ist ein div daneben definiert)
also es bleibt beim runterscroll an seiner position

Zu Frage 3: Nein noch kein Javascript, php auch nicht

.StarSplash · 02/21/2014, 16:48

position:fixer sollte eigentlich dafür sorgen, dass das Element beim Scrollen an seinem Platz bleibt. Schick mir mal bitte den Code.

2 Bilder überlagern kannst du, indem du ihnen mit CSS die selben Positionen zuweist

Wie man Aufgaben ohne Javascript mit Html und CSS lösen soll ist mir ein wenig schleierhaft. Die Funktion onClick bietet nur Javascript, mit CSS kannst du mit einer pseudo-Angabe (:active) zwar auch Dinge ändern, allerdings betrifft :active nur die Zeit in der die Maustaste gedrückt ist.

weirdo61 · 02/21/2014, 16:52

Das ist meine CSS Formatierung für die Menüleiste

Spoiler

Und die Aufgabe mit dem vergrößern:
Ich hatte es schonmal soweit, dass sich das Bild vergrößert hat, jedoch ist beim nächsten klick immer das Bild verschwunden.

Wenn ich 2 Bilder an die Selbe Stelle definiere, dann kann ich aber nicht zwischen den Bildern per Klick wechseln ?

.StarSplash · 02/21/2014, 17:03

Wechseln kannst du nur mittels Javascript. So wie im dritten Beispiel, das ist auch Javascript. Probier mal das 'Bild.jpg' klein zu schreiben, so wie die anderen auch sind, ausserdem ist hinterm einem this ein Leerzeichen, das darf nicht sein.

weirdo61 · 02/21/2014, 17:16

Okey dann vergiss mal das wechseln, das bekomme ich schon irgendwie hin

Kannst du mir noch einen tipp zur Menüleiste geben oder das obige Script zur Vergrößerung eines bildes versollständigen?
Die entfernung vom leerzeichen hat leider nichts gebracht, wenn ich aufr das Bild klicke, sagt mir mein HTML-Editor (phase 5) "Diese Webseite kann nicht angezeigt werden".

Wenn du es hinkriegst, dass die 2 sachen bei mir funktionieren, bekommst du 50 elite*gold

.StarSplash · 02/21/2014, 22:27

HTML Code:

<html>
	<body>
		<img src="bild.jpg" width="250px" onclick="this.width=500" ondblclick="this.width=250"/>
	</body>
</html>

Bitteschön, bei einem Klick wird's groß gemacht, bei einem Doppelklick klein.

weirdo61 · 02/22/2014, 03:31

Mein Html editor Browser sagt "Diese Seite ist nicht verfügbar"

.StarSplash · 02/22/2014, 04:24

Was hast du denn genau gemacht?

weirdo61 · 02/22/2014, 22:42

Quote:

Originally Posted by .StarSplash

Was hast du denn genau gemacht?

Ich hab deinen Code eingefügt, und die BildUrl angepasst.
Anschließend die Seite gestestet.

Aber ich hab das Problem auf eine "unsaubere" Weise jetzt gelöst.
Mein Bild ist jetzt ein verweis auf eine Internetseite, auf der das Bild Größer dargestellt wird ^^

Das gleiche ungefähr hab ich auch mit den hintereinanderliegenden bildern gemacht.

-TaZzy- · 02/23/2014, 18:58

Baller alles mal rein da, damit man sich das mal ansehen kann.

xXKimariXx · 02/24/2014, 10:29

Du kannst ein Bild auch mit CSS3 vergrößern verkleinern, hier ein beispiel.

in die CSS datei kommt z.b sowas :

PHP Code:


			

.bild {
background-image:url(test.png);
width:139px;
height:119px;
transition:transform 0.5s;
-webkit-transition:transform 0.5s;
-moz-transition:transform 0.5s;
}

.bild:active {
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
}

Oder:

.bild:focus {
transform:scale(1.5);
}

Wenn du jetzt das Bild gedrückt hälst vergrößert es sich, lässt du die maus los verkleinert es sich. Bei transform 0.5s kannst du die Zeit einstellen wie schnell es sich vergrößern/verkleinern soll. Du kannst es auch mit .bild:focus machen, wenn du das Bild anklickst vergrößert es sich, klickst du woanders verkleinert es sich wieder. Du kannst es ja einmal ausprobieren, und CSS3 macht sich eigentlich immer gut solang man kein veralteten Browser hat .

Naja das wars dann auch,

mfg xXKimariXx

kangar00 · 02/26/2014, 12:13

Ich wollte mich mal zu deiner Frage mit den Bildern äußern.

Dies ist ganz einfach und elegant in CSS zulösen.

Anleitung:

Du setzt eine DIV:

HTML Code:

<div id="klickeffect"></div>

diese bearbeitest du in CSS:

PHP Code:


			
div#klickeffect {

    height: x;

    width: x;

    background: url("pfadzumgeweünschtenbild") no-repeat center;

}



div#klickeffect:active {

    height: x;

    width: x;

    background: url("pfadzumgewünschtenbild") no-repeat center;

}

ParkerJason · 03/26/2014, 10:57

Well i think in order to be solving the problem without java scripting and HTML i think you should probably use PHP instead.