Beiträge von Dropthemike

Zitat von Sailor

So ziemlich alles!

Ja... ich habe es komplett übersehen dass ich da noch nen inline style drinnen hatte.... bzw ises mir nicht aufgefallen... jetzt funktiniert es 1a dankeschön

Hallo ich hab mal wieder ein Problem für das mir grad der Durchblick fehlt... zwar binde ich 3 Bilder auf einer Seite vor dem Footer einm soweit so gut aufn Desktop... nur auf mobil wird das hässlich gestaucht... sieht dann so aus :

https://www.bilder-upload.eu/bild-ececc3-1575454092.png.html

das ist der zugehörige Code dafür..

<div class="col-lg-4 col-sm-12">
                    <img src="img/*****_img/******/axes.jpg "style="height:622px;width:830px;display:inline;padding-bottom: 20px;padding-top: 60px;" class="img-fluid">
                </div>

und das hier dann in CSS

.img-fluid{
  max-width: 100%;
  height: auto;
}

Was mache ich falsch ? :O

Ja das könnte hinhauen danke

Hi, ich hab mal wieder ne Frage... ich habe schonmal nen Code gesehen wo das Bild angegeben war und dann eine Alternative die dann benutzt wird wenn es zB auf nem Smartphone angeschaut wird... das war eindeutig im HTML enthalten und ohne Media Query leider habe ich diesen Code Schnipsel nichtmehr vorliegen, weiß jemand wie das gehen könnte ?

Hey, ich tu mich wahnsinnig schwer mit den Bildschirmgrößen in Chrome oder in Safari unter Mac... ich bekomme für die Responsivität iPhones und iPads angezeigt schön und gut, aber wie finde ich denn genau heraus welche Maße ich zB brauche für ein 13 Zoll/Macbook, 15/ZollMacbook, 21.5 Zoll/iMac und 27 Zoll/iMac... was muss ich da verwenden die Displayauflösungen wie vom Händler vorgegeben oder was ganz anderes ? Ich hab das Problem dass sehr oft 13 Zoll Macbook stark differenziert zum 27 Zoll iMac darstellt und dem wollte ich mal entgegen wirken Ich habe gesehen dass vor einiger Zeit eine ähnliche Frage aufgekommen ist, diese ist jedoch ein wenig anders... Kurz gefasst ich möchte in Chrome zumindest ein 13,15,21.5/27 Zoll Gerät angezeigt bekommen bzw selbst einstellen... und suche welche Maße ich dafür benötigte... zB sowas wie 200x300px (nur aus Beispiel)

grüße

Mike

Gut okay, illegal war jetzt vielleicht das falsche Wort ich dachte dass man bei zB Gemeindeseiten ziemlich bös eins verbraten bekommen kann, wegen der Integration von Sehbehinderten... ich hab noch die Frage offen, wie ich denn am besten Bilder austausche über Media Queries.. wär noch ein echt wichtiges Ding.. :O

Zitat von basti1012

Ganz oben ist doch eine Navigation.

Links Dashbord und daneben Forum.

Klick mal darauf

Ja ich weiß, aber aus Gewohnheit klicke ich da drauf, war nur ein Vorschlag

Hallo, ich hab vor kurzem mal ein Thema erstellt aber dann wieder gelöscht weil es sich erledigt hatte, dachte ich..

Zwar will ich ein paar Bilder über Media Queries austauschen, so dass andere Bilder am Handy angezeigt werden und am Tablet usw... ich habe mir da ausgedacht Span elemente zu schreiben denen ich eine Klasse zuweise in der Klasse steht das Hintergrundbild und ja... dann könnte ich ja zB einem Span ein Bild zuweisen und das Hintergrundbild dann einfach per Media ändern... aber Bilder müssen doch ein alt-tag haben oder ? Gibt es da noch andere Möglichkeiten dies zu erreichen ohne dass ich Ärger bekomme ? Und dass es so funktioniert... Kann ich Texte per Media Queries auch ändern oder geht das dann nur über JS ? Gibt es JS Alternativen für Media Queries ?

freue mich sehr über Antworten

Hallo, heut mal ein Vorschlag von mir, wenn ich mich im Forum befinde und oben im Header auf das Logo "HTML-seminar.de" klicke gelange ich immer auf die Hauptseite obwohl ich schnell aus dem Forenbereich rausmöchte und auf die Startseite des Forums.. kann man das denn ändern ? Dass man eben auf die Startseite des Forums gelangt und eventuell eine zweite verklinkung auf die Hauptseite dazunimmt ? Nur mal so als Vorschlag, weil es mir ständig passiert :O

Hallo mal ne allgemeine Frage, wenn man sich so nach templates umsieht oder plugins findet mal viele wordpress geschichten, gibt es eine möglichkeit diese mit allen funktionen usw in normales html umzuwandeln ? würd mich freuen über antworten

Ich soll jedenfalls so doppelt und dreifach dinger vermeiden... jquery schau ich mir demnächst an... wenn ich das mit den forschleifen und noch paar kleinigkeiten in js drauf hab, dann geb ich mir jquery ich darf auch jquery in der prüfung verwenden

Ups mein Fehler mit minimieren meinte ich dass ich den code noch kleiner machen kann als er jetzt schon ist (allein wegen der Abschlussprüfung die ich mitte nächsten Jahres schreibe) ich bin von 125 zeilen auf 16 und Sempervivum ist auf 12 gekommen ich kann dann in einer for schleife mehrere funktionen schreiben ...

Zitat von basti1012

du möchtest also das wenn du eins hoverst dann alles klassen sich bewegen ?

Nein es sind 10 bilder die die gleiche klasse haben, jedes einzelne soll hovern wenn ich drüber fahre.. so wie ich das geschrieben hab funktioniert es tatsächlich.. anfänglich hab ich es ja per id gemacht und jedem einzelnen der 10 eine funktion für ausschalten und einschalten gegeben... in mein letzten posting steht da der code drinnen der es machbar gemacht hat

Hmm... das mit dem Queryselector bekomme ich irgendwie noch nicht so hin... ich habe jetzt :

const hoverballs = document.querySelectorAll(".hoverball")
console.log(hoverballs)
for(hoverball of hoverballs){
    hoverball.addEventListener("mouseover", function(e){
        hoverball.classList.remove("hoveranimationoff")
        hoverball.classList.add("hoveranimationon")
    })
    
}
for(hoverball of hoverballs){
    hoverball.addEventListener("mouseout", function(e){
        hoverball.classList.remove("hoveranimationon")
        hoverball.classList.add("hoveranimationoff")
    })
    
}

Lustiger weise wirkt es sich nur auf ein einzelnes Element aus es soll sich aber bekanntlich auf alle auswirken... alle haben die gleiche klasse..

basti1012 gibt es von da aus Möglichkeiten ? Das was Du am Mittwoch gepostet hast, hab ich schon wahrgenommen jedoch ises ziemlich komplex ich bin doch noch n Anfänger..

Edit: Ich habe jetzt ein let in der forschleife vor der einzelvariable geschrieben jetzt funktioniert es :O... gibt es dennoch möglichkeiten weiter zu minimieren ??

const hoverballs = document.querySelectorAll("img.hoverball ")
console.log(hoverballs)
for( let hoverball of hoverballs){
    hoverball.addEventListener("mouseover", function einschalten(e){
        hoverball.classList.remove("hoveranimationoff")
        hoverball.classList.add("hoveranimationon")
    })
    
}
for( let hoverball of hoverballs){
    hoverball.addEventListener("mouseout", function ausschalten(e){
        hoverball.classList.remove("hoveranimationon")
        hoverball.classList.add("hoveranimationoff")
    })
    
}

Ja es müsste jedesmal ein keyframe sein, da es langsam größer werden soll beim mouseover und beim mouseout langsam klein werden soll :O aber dann wirklich nur über das mouse over... vielleicht nimmt man das dann tatsächlich nicht wahr sollte die animation abgespielt werden beim betreten der seite wegen dem preloader

edit: jetzt habe ich es selbt hinbekommen mit ;

<script>

let hover1 = document.getElementById("lol")


hover1.addEventListener("mouseover", function einschlaten(e){
    hover1.classList.remove("hoveranimationoff");
    hover1.classList.toggle("hoveranimationon");
    
})
hover1.addEventListener("mouseout", function ausschalten(e){
    hover1.classList.remove("hoveranimationon");
    hover1.classList.toggle("hoveranimationoff");

    
})

aber jetzt ne andere frage... es gibt da ungefähr 7 oder 9 Bilder die die gleiche klasse haben... wie mache ich es dass es auf alle klassen wirksam ist ? getelementsbyclassname geht nicht ...also wenn ich nur das getelementsbyid austausche dagegen... brauche ich dafür noch weiteres unterfangen ?

Zitat von basti1012

das sollte aber auch ohne js gehen, oder macht das js da noch mehr als das was man da jetzt sehen kann ?

Ich hab es nicht hinbekommen einen effekt einzuspielen wenn ich den hover wieder verlasse.. ich hab mich informiert und habe nichts gegenteiliges zu hover gefunden

Hallo, hab ein kleines Problem (mal wieder haha...) zwar habe ich eine Art hovereffekt geschrieben der auch einen effekt abfeuern soll wenn ich wieder mit der maus runter gehe deswegen überhaupt javascript.. aber ich habe das problem dass es nur bei jedem zweiten mal drüber hovern erst funktioniert... warum ist das so und wie kann ich es lösen ?

es sind bilder in kreisform... sie sollen aufblenden dies geschieht mit einer css animation in einer klasse.. und eine gegenteiige klasse die dann ausgelöst werden soll wenn ich mit der maus wieder runter gehe... hier die klassen :

.hoveranimationon { 
  width: 70px; 
  height: auto; 
  border-radius: inherit; 
  animation: hovimation 1s  ;
  animation-iteration-count: 1 ;
  animation-fill-mode: forwards ;
  
}

@keyframes hovimation{
  0%{width: 70px;}
  30%{width: 95px;}
  
  100%{width: 95px;}
}


.hoveranimationoff { 
  width: 95px; 
  height: auto; 
  border-radius: inherit; 
  animation: hovimation2 1s  ;
  animation-iteration-count: 1 ;
  animation-fill-mode: backwards ;
  
}

@keyframes hovimation2{
  0%{width: 95px;}
  30%{width: 70px;}
  
  100%{width: 70px;}
}

und hier das Script dazu

<script>

let hover1 = document.getElementById("lol")

hover1.addEventListener("mouseover", function(e){
   
    hover1.classList.toggle("hoveranimationon");
    
})
hover1.addEventListener("mouseout", function(e){
    
    hover1.classList.toggle("hoveranimationoff");

    
})


</script>

würd mich sehr freuen

Du bist mein Held.. ^^... ich muss es nochmal genau durchschauen, das mit der umgedrehten Reihenfolge hab ich verstanden, das delay habe ich hauptsächlich drinnen dass man die Animation sieht... auf den fertigen Seiten dann sollte es kein festes Delay geben

Edit: @basti1012 dankenochmal... jetzt hab ichs geschnallt... es war quasi dass die border dann von rechts ausfaded... eigentlich so einfach... aber ich habe jetzt die animation weggelassen...also die mit dem gradient und dann habe ich dem grey den gradient zugewiesen... da macht die animation dann auch kein sinn mehr

https://codepen.io/Webdevinspe/pen/KKKdrwa

Gut.. soweit hab ich mal nen Pen zusammen gebastelt... ich bekomme es zudem nicht hin dass der gradient der ladestand ist... jetzt ist ja das grau der ladestand... anders herum so wie ich es will bekomme ich es einfach nicht hin -.-

edit: die hr's dienen nur dass bisschen content auf der seite ist und ich sehen konnte dass ich noch scrollen kann

https://codepen.io/Webdevinspe/pen/YzzyGZZ

Okay.. jetzt ist die frage wie binde ich dann den preloader ein ohne javascript ?