Problem mit
Ole Blumenau
- css
- seitenbewertung
- webdesign
Hallo, Ich wollte heute mal eine Bildergalerie für meine Website nur aus Testzwecken machen.Doch ich komm nicht weiter : ich hab das ganze CSS für Großansicht und das davor benutzt.Habe ich da was falsch gemacht? Hier zum nachlesen: Seite
Danke im Voraus LG Ole
Hallo Ole Blumenau,
deine Angaben sind viel zu ungenau, um dazu etwas zu sagen. Ja, ich vermute sogar, dass du nur trollen möchtest.
Bis demnächst
Matthias
Was soll ich denn genau angeben?
Hallo,
Was soll ich denn genau angeben?
vielleicht einen Link zu einer Seite, die deine Versuche zeigt.
Und eine genaue Beschreibung, was schiefgeht, und was du stattdessen erwartest.
"Funktioniert nicht" funktioniert nämlich nicht als Fehlerbeschreibung.
Live long and pros healthy,
Martin
Die Website ist https://ole.blumenaus.info/inhalt.html Und laut Selfhtml sollte eine Vergrößerte Ansicht kommen die Kommt aber nicht und stattdessen wird es Blau umrahmt und nicht vergrößert
Hallo Ole Blumenau,
dann musst du schauen, was du anders machst.
Bis demnächst
Matthias
Hallo Ole,
ich hab das ganze CSS für Großansicht und das davor benutzt
https://ole.blumenaus.info/css/galerie.css
Nein. Hast Du nicht. Zumindest hast Du es nicht auf deinen Server geladen. Oder an die falsche Stelle. Sowas ist doch das erste, was man überprüft, wenn etwas nicht wie erwartet funktioniert.
Die Taste F12 ist dein Freund - die Entwicklertools im Browser verraten Dir alles.
Rolf
Ich hab es in ein Galerie.css geschrieben und als Stylesheet gemacht
Hallo Ole,
Nein, hast Du nicht.
https://ole.blumenaus.info/Galerie.css
- not found
https://ole.blumenaus.info/galerie.css
- not found
https://ole.blumenaus.info/css/Galerie.css
- not found
https://ole.blumenaus.info/css/galerie.css
- die gibt es und die wird auch verwendet. Aber wie ich schon schrieb, steht nicht drin, was drin stehen soll. Was Du an diese Stelle geladen ist, ist falsch.
Es ist auch kein Caching-Problem. Das habe ich überprüft.
Stelle den richtigen Inhalt her. Lade ihn an die richtige Stelle. Bevor Du nochmal fragst, überprüfe vorher selbst, ob deine Annahmen und die Realität identisch sind.
Wie Du das tun kannst, habe ich Dir geschrieben. Versuche bitte, mitzudenken. Selbstständig agieren kannst Du offenbar. Du konntest ja auch selbstständig die Bilder aus unserem Wiki klauen, ohne die Quelle oder die Lizenz zu nennen. Verwende eigene Bilder und beachte ggf. die Lizenzbedingungen.
Und schalte auf dem Server ab, dass man die Verzeichnisse auflisten kann. Auf öffentlich zugänglichen Servern ist das zu gefährlich.
Rolf
Hallo Ole,
Doch ich komm nicht weiter
Ich auch nicht
Habe ich da was falsch gemacht?
Ja
Rolf
Servus Ole,
Hallo, Ich wollte heute mal eine Bildergalerie für meine Website nur aus Testzwecken machen.Doch ich komm nicht weiter : ich hab das ganze CSS für Großansicht und das davor benutzt.Habe ich da was falsch gemacht? Hier zum nachlesen: Seite
Auf der verlinkten Seite gibt es das Kapitel HTML/Tutorials/Bilder_im_Internet/Bilder_präsentieren#Großansicht
Diese CSS-Regeln musst du noch in deine Seite integrieren!
Herzliche Grüße
Matthias Scharwies
OK also soll ich es in das Haupt CSS machen jetzt habe ich es als Galerie.css extra LG Ole
Hallo Ole,
zuerst noch einmal nachträgleich Herzlich willkommen bei SELFHTML!
OK also soll ich es in das Haupt CSS machen jetzt habe ich es als Galerie.css extra
Das ist egal.
Lies mal: CSS/Tutorials/Einstieg/Stylesheets_einbinden
Zum Testen lass ich es immer oben im head und achte drauf, dass auf meiner testseite nur die zu testende Sache (hier die Bilder und keine anderen Sachen wie Navi, ....) zu finden ist.
Wenn was nicht funktioniert, schau ich mit F12 in den Seiteninspekor und untersuche, ob alle CSS-Eigenschaften das tun was sie sollen.
Lies mal: HTML/Tutorials/HTML_&_CSS_mit_dem_Seiteninspektor_untersuchen
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
was muss Ole tun, um unsere Bilder verwenden zu dürfen? Er hat sie derzeit einach ohne Attributierung kopiert.
Rolf
Hallo Rolf B,
was muss Ole tun, um unsere Bilder verwenden zu dürfen? Er hat sie derzeit einach ohne Attributierung kopiert.
Er muss die Lizenzbedingungen beachten.
Bis demnächst
Matthias
Ich würde auch andere Fotos verwenden
Also muss ich das machen:
#galerie
/* Mobile first - für schmale Viewports */
li {
display: inline-block;
list-style-type: none;
width: 45%;
}
img {
padding: 0;
margin: 0;
width: 100%; /* Bild passt sich an verfügbaren Raum im li an */
}
button {
padding: 0.1em;
}
/* Large screens */
@media all and (min-width: 35em) {
li {
width: 10em;
}
button:focus,
button:hover {
background: #09c;
}
@media all and (min-width: 35em) {
button {
padding: 0.1em;
width: 10em;
height: 7.5em;
position: relative;
}
button img {
border: 0;
position: absolute;
left: 0%;
top: 0%;
z-index: 1;
box-shadow: 0;
width: 10em;
transition: all 1s;
}
button:focus img,
button:hover img {
border: 2em solid #eee;
border-radius: 1em;
box-shadow: 1px 1px 5px #333;
width: 300%;
position: absolute;
left: -4%;
top: -4%;
z-index: 5;
transition: all 1s;
}
}
`
Servus!
Also muss ich das machen:
...
Die Live-Beispiele im SELF-Wiki sind hauptsächlich Beispiele, die zeigen wie man etwas machen könnte.
button:focus img,
button:hover img {
...
}
Schau Dir einfach mal an was der Unterschied zum „Normalzustand“ ist:
border: 2em solid #eee;
Das Bild erhält einen 2em breiten, hellgrauen Randborder-radius: 1em;
der abgerundet wirdbox-shadow: 1px 1px 5px #333;
nen Schatten drum rumwidth: 300%;
vorher war's 10em → jetzt mal 3left: -4%;
top: -4%;
ein bisschen nach links und oben gezogen. (Dort ist die Mauer, sonst würden die Bilder zu weit nach rechts ragen, was beim letzten Bild der Reihe tödlich wäre -> es würde über den rechten Rand ragen.)z-index: 5;
Das gehoverte Bild liegt über den anderen.Versuch mal weg vom ersten Schritt des "Copy 'n Paste" hin zum "Trial and Error" zu kommen. Probier eine Eigenschaft oder andere Werte aus und beobachte was passiert. Du kannst dir ja immer funktionierende Versionen unter anderen Namen speichern, sodass nix kaputt geht!
Herzliche Grüße
Matthias Scharwies
Ach danke LG Ole
Es funkioniert danke an alle die mir geholfen haben