3 "simple" Html/css Fragen

Page 1 of 2 1 2
02/21/2014 15:38 weirdo61#1
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
Hab das obige durch googeln gefunden, also habs nicht selbst gemacht.
ich hoffe ihr könnt mir helfen
02/21/2014 16:34 .StarSplash#2
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.
02/21/2014 16:40 weirdo61#3
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 :D

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
02/21/2014 16:48 .StarSplash#4
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.
02/21/2014 16:52 weirdo61#5
Das ist meine CSS Formatierung für die Menüleiste

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 ?
02/21/2014 17:03 .StarSplash#6
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.
02/21/2014 17:16 weirdo61#7
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 :)
02/21/2014 22:27 .StarSplash#8
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.
02/22/2014 03:31 weirdo61#9
Mein Html editor Browser sagt "Diese Seite ist nicht verfügbar"
02/22/2014 04:24 .StarSplash#10
Was hast du denn genau gemacht?
02/22/2014 22:42 weirdo61#11
Quote:
Originally Posted by .StarSplash View Post
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.
02/23/2014 18:58 -TaZzy-#12
[Only registered and activated users can see links. Click Here To Register...]

Baller alles mal rein da, damit man sich das mal ansehen kann.
02/24/2014 10:29 xXKimariXx#13
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
02/26/2014 12:13 kangar00#14
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;
} 
03/26/2014 10:57 ParkerJason#15
Well i think in order to be solving the problem without java scripting and HTML i think you should probably use PHP instead.
Page 1 of 2 1 2