Beiträge von Noobie_Chan

Noobie_Chan · 27. Februar 2020

danke für die hilfe, werd es mir erst morgen anschauen können, arbeit ruf...

hmm... dann muss ich mich wohl irgentwo vertippt oder so haben weil die 2te möglichkeit auch nicht geklappt hat.

Noobie_Chan · 27. Februar 2020

Ja ich habe versucht außerhalb der function zuzugreifen und mit der ausgabe (log) sah ich das so nicht geht. Ich habe auch versucht in der funktion ein log zu machen bekomme zwar den namen der id raus aber beim weiterarbeiten in der function ist der wert "null".

die window.onload habe ich gemacht das alle listen zusammen ausgegben werden (wenn ich die seite aufrufe). der Rest viewClass[i] zeigen mir dann nur die sparte an die ich möchte (zb. ritter, krieger, priester, etc.)

in der function createKnights() werden die elemente erstellt (hier versuche ich greifen ohne erfolg)

Code

viewClass[1].onclick = function(){
        searchClassRemove();
        clearcontent('bgHeroes');
        createKnights();
        viewClass[1].classList.add('classActiv');        
}

function searchClassRemove () {
        for(let i = 0; i < viewClass.length; i++){
            viewClass[i].classList.remove('classActiv');
        }   
}

function clearcontent(elementID) {
        document.getElementById(elementID).innerHTML = ""; 
}

function createKnights() {
        const htmlFragment = document.createDocumentFragment();
            x = 0;   // X-Axis
            y = 0;   // Y-Axis
        for (let i = 0; i < knightsTotal; i++) {
            const image = document.createElement('section');
            image.classList.add('hero_img', 'class_knights');
            image.id = knightslist[i];
            htmlFragment.appendChild(image);
            image.style.backgroundPosition = x + '% ' + y + '%';
            console.log(image);
            moveAxis(x, y);
                                    // HIER ZUGREIFEN AUF DIE ID?             
        }
        bgHeroes.appendChild(htmlFragment);
}

function moveAxis(axisX, axisY) {
        axisX = axisX + 25;
        if(axisX > 100){
            axisX = 0;
            axisY = axisY + 25;
        }
        x = axisX;
        y = axisY;
}

Alles anzeigen

Wenn ich hier zugreifen möchte ka wie, wenn ich die mit getElementById hole und zuweise funktioniert auch nicht.

Mein Log Konsole (.log(image)):

Code

<section id="neraxis" class="hero_img class_knights" style="background-position: 0% 0%;">
heroes_Container.js:121:21
<section id="loman" class="hero_img class_knights" style="background-position: 25% 0%;">
heroes_Container.js:121:21
<section id="aselica" class="hero_img class_knights" style="background-position: 50% 0%;">
heroes_Container.js:121:21
<section id="clause" class="hero_img class_knights" style="background-position: 75% 0%;">
heroes_Container.js:121:21
<section id="demia" class="hero_img class_knights" style="background-position: 100% 0%;">
heroes_Container.js:121:21
<section id="jane" class="hero_img class_knights" style="background-position: 0% 25%;">
heroes_Container.js:121:21
<section id="morrah" class="hero_img class_knights" style="background-position: 25% 25%;">
heroes_Container.js:121:21
<section id="philop" class="hero_img class_knights" style="background-position: 50% 25%;">
heroes_Container.js:121:21
<section id="ricardo" class="hero_img class_knights" style="background-position: 75% 25%;">
heroes_Container.js:121:21
<section id="sonia" class="hero_img class_knights" style="background-position: 100% 25%;">
heroes_Container.js:121:21
<section id="glenwyn" class="hero_img class_knights" style="background-position: 0% 50%;">
heroes_Container.js:121:21
<section id="dosarta" class="hero_img class_knights" style="background-position: 25% 50%;">
heroes_Container.js:121:21
<section id="neraxis" class="hero_img class_knights" style="background-position: 0% 0%;">
heroes_Container.js:121:21
<section id="loman" class="hero_img class_knights" style="background-position: 25% 0%;">
heroes_Container.js:121:21
<section id="aselica" class="hero_img class_knights" style="background-position: 50% 0%;">
heroes_Container.js:121:21
<section id="clause" class="hero_img class_knights" style="background-position: 75% 0%;">
heroes_Container.js:121:21
<section id="demia" class="hero_img class_knights" style="background-position: 100% 0%;">

Alles anzeigen

kann man die Id nur so holen: getElementById('neraxis') oder kann ich auch so: getElementById(knightlist[i])?

Noobie_Chan · 27. Februar 2020

Hy,

ich möchte auf ein Element klicken mit .onclick ("das ich mit js erzeugt habe + id vergeben"), Beim klick soll das Element einen shadow bekommen und unterhalb soll dann das bild übernommen und der text usw. ersetzt werden.

zb. klick auf (rot) dummy 2, soll unten das bild angezeigt werden (rot) dummy 2 und Name, text ersetzt werden. Ich habe schon versucht irgentwie über die id zu zugreifen, bekomme immer "null". versuche ich direkt mit getELement('neraxis') bekomme ich auch "null". ALso irgentwie existiert es nicht.

https://codepen.io/Noobie_Chan/pen/MWwbyxV

Aber in der konsole sehe ich es:

Kann aber nicht zugreifen, wo liegt der fehler?

Noobie_Chan · 21. Februar 2020

ok, habe es in codepen nochmal aktualisiert. Mit einem testbild, zeigt immer noch die selbe position an.

https://codepen.io/Noobie_Chan/pen/MWwbyxV

________________________________________________________

Falsch:

image.style.backgroundPosition = '"' + x + '%' + y + '%' + '"';

Lösung:

image.style.backgroundPosition = x + '% ' + y + '%';

Noobie_Chan · 21. Februar 2020

Danke für deine hilfe,

es ist doch so einfach aber dennoch so schwer gewessen :D. jetzt muss ich mir überlegen wie ich dieser id die position des bild verschieben kann, die Positionen hab ich schon ausgerechnet.

Noobie_Chan · 21. Februar 2020

Jedes bild muss eine ID bekommen. Bin der meinung durch ein array könnte ich am besten verschiedene id-namen vergeben. (id sollen dann später dienen für ein onklick). Und es gibt nur 1 Bild datei. (sprites) Die muss dann später mit x-achse, y-achse verschoben werden. Das wäre dann mein 2tes problem wie ich die Position verschieben könnte.

Noobie_Chan · 21. Februar 2020

let knights = [ x, y, z, a, b, c ]; // x, y, etc. sind dann die namen von den chars

Noobie_Chan · 21. Februar 2020

Hy, ich habe folgendes problem,

ich möchte mit JS eine bilderreihe erstellen. Ich schaffe es, die anzahl der bilder darzustellen ( auch änderbar). Jedes erstelle "Quadrat" soll eine eine Id bekommen damit ich sie dann später nutzen kann. Classen hinzufügen funktioniert ohne probleme aber eine id hinzufügen keine chance. Ich möchte durch ein array: name = [ x, y, z, a, b, c ]; die namen verteilen. Im internet habe ich nichts gefunden das mir helfen könnte. Ich bitte euch um hilfe! (Ich bin noch ein anfänger in js und in jQuery hab ich kurz reingeschnuppert)

https://codepen.io/Noobie_Chan/pen/MWwbyxV

Mfg

Noobie_Chan · 6. Januar 2020

Moin,

ich habe mir mal erlaubt deinen code aufzuräumen. (ist nicht ganz fertig) Hoffe das man es jetzt besser lesen kann. Habe mich bemüht deinen code nicht all zu viel zu verändern. Für die zukunft trenne deinen code strikt: HTML und CSS. Denke das du auch probleme hast mit der "ordnung" (wo du was abspeicherst, pfad zum bild ist weit) zb.: Projekt -> Src -> img, css, js,... (Ordner). Habe dir alle div einen rahmen gegeben somit werden die div sichtbar.

Wie soll die Seite aussehen? Kann nicht ganz so nachvollziehen wo was positioniert werden soll.

Vorlage als hilfestellung beim coden (so mach ich es):

html-seminar.de/woltlab/attachment/2141/

TIPP:

#content löschen: margin-left: 300px;

#contenttext löschen: margin-left: 50px;

Dann solltest du noch so 1px links luft haben, denke das du: Groß box in der eine kleiner box ist, die kleine box größer formatiert hast als die kleine.

HTML:

HTML

<!DOCTYPE html>
<html lang="de">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Meine erste Website</title>
        <link rel="stylesheet" type="text/css" href="src/styles.css">
    </head>
    
    <body>

        <div id="website">
           
            <div id="header"></div>
            
            <div id="menuehorizontal">
                
                <img id="logo_textmarke" src="src/img/logo_textmarke.png" alt="Logo">

                <ul style="display:inline">
                    <li>Über uns</li>
                    <li>Unsere Leistungen</li>
                    <li>Unser Portfolio</li>     
                </ul>

            </div>

            <div id="menuevertical">

                <ul>
                    <li>Über uns</li>
                    <li>Leistungen</li>
                    <li>Referenzen</li>
                    <li>Impressum</li>
                </ul>

            </div>

        <div id="content">
            
            <div id="contenttext">
                <p>Vielen Dank für Ihr Interesse! Hier finden Sie <span>Inspiration</span> und Anregungen für Ihren Innovationspool. Möchten Sie mehr erfahren treten Sie gerne mit uns in Kontakt.</p>
            </div>       

            <div id="cta">
                <p>Jetzt kontaktieren!</p>
            </div>

        </div>

        <div id="footer">
            <p>Das ist der Footer</p>
        </div>

        </div> 
        
    </body>
    
</html>

Alles anzeigen

CSS:

Code

* { box-sizing: border-box; }

div { border: 1px solid black; }

#header {
    width: 90%;
    Height: 30px;
    background-color: #00FF80;
    border: 1px solid black;
}

#website { width: 90%; }

#menuehorizontal {
    width: 980px;
    height: 45px;
    background-color: white;
    border: 1px solid black;
    display: inline;
}

#menuevertical {
    width: 20%;
    height: 400px;
    background-color: indianred;
    display: block;
}

#logo_textmarke {
    height: 40px;
    float: left;
    margin-left: 50px;
}

#content {
    width: 70%;
    height: 400px;
    background-color: #00FF80;
    margin-left: 300px;
    display: inline;
    border: 1px solid black;
}

#contenttext {
    font: arial;
    width: 450px;
    height: 100px;
    margin-left: 50px;
    padding-top: 50px;
    font-family: Helvetica;
    font-size: 11px;
    display: inline-block;
    border: 1px solid black;
}

span {
    color: orange;
    font-weight: bold;
}

#cta {
    width:150px;
    height:40px;
    background-color:white;
    margin-left:50px;
    font-family: Helvetica;
    Text-Align: center;
    display: inline-block;
    border:1px solid black;
}

#footer {
    width:980px;
    height:200px;
    border:1px solid black;
}

ul { list-style-type: none; }

li {
    display: inline;
    padding: 18px;
    font-family: Helvetica;
}

Alles anzeigen

Ich würde dir empfehlen alles nochmal zu schreiben, step by step. (ein container nach dem anderen aufbauen)

Hoffe das ich etwas helfen konnte. Gn8 =)

Noobie_Chan · 5. Januar 2020

Hey,

ich weis nicht ob ich es richtig verstanden habe. Ich habe auch ein wenig herum experimentiert. Habe deinen Code etwas aufgeräumt und deine angaben so belassen (weis nicht was du genau möchtest). Ich habe eine fixe höhe für body gewählt um einen scroll zu erzingen (test halber).

Und bei .tg habe ich einfach position: fixed reingeschrieben. Denke sowas möchtest du haben?!? Denk Code könnte ma sicher noch verbessern, aber da fehlt mir noch die erfahrung, maybe basti1012 könnte mal drüber schauen und verbessern.

Razon5889 zum nachschlagen: https://wiki.selfhtml.org/wiki…Tabellen/Zellen_verbinden (habe auch was neues gelernt )

Vorschlag: https://codepen.io/Noobie_Chan/pen/YzPYqOJ

lg. Noobie

Noobie_Chan · 26. November 2019

Schaut gut aus, leider kann ich es noch nicht nachvollziehen. Aber ich arbeite fleißig daran!

Noobie_Chan · 25. November 2019

Mir ist klar das man mit Js was machen kann. (aber mit meinem aktuellen wissen, noch nicht ^^) Ich habe dir mal das bild hochgeladen: https://www.bilder-upload.eu/bild-31f2fa-1574706774.png.html / Namen von links nach rechts: Kaulah, Laias, Leo, Juno, Shea, Freya, Baudouin, Cassandra, May, Mediana, Rephy, Lavril, Lucias, Rehartna / Bereich der grau ist, ist ein platzhalter für neue chars.

Mein code "auf bereich beschränkt" (hoffe ich habe nix ausgelassen):

HTML:

Code

<!-- HELDEN-BEREICH -->
<div class="container">
  <div class="row">
    <div class="col-6">

      <div id="id_priests">
      
        <a class="baudouin class_priests hero_img"></a>
        <a class="cassandra class_priests hero_img"></a>
        <a class="frey class_priests hero_img"></a>
        <a class="juno class_priests hero_img"></a>
        <a class="kaulah class_priests hero_img"></a>
        <a class="laias class_priests hero_img"></a>
        <a class="lavril class_priests hero_img"></a>
        <a class="leo class_priests hero_img"></a>
        <a class="lucias class_priests hero_img"></a>
        <a class="may class_priests hero_img"></a>
        <a class="mediana class_priests hero_img"></a>
        <a class="rehartna class_priests hero_img"></a>
        <a class="rephy class_priests hero_img"></a>
        <a class="shea class_priests hero_img"></a>
                        
      </div>

    </div>
  </div>        
</div>

Alles anzeigen

CSS:

Code

/* === GLOBAL === */

html { font-size: 16px; }

body {
    margin: 0;
    background-color: #FAEBD7;
}

* { box-sizing: border-box; }

a { text-decoration: none; }

/* === GENERELLES === */

.clearfix::after {
    content: "";
    display: block;
    clear: both;    
}

/* === HELDEN-BEREICH === */

[id*='id_'] {
    background: #ebebeb;
    border: 1px solid #a3a3a3;
    height: 200px;
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
    padding-left: .2rem;
    padding-right: .2rem;
}

#id_all { display: default; }
#id_knights { display: none; }
#id_priests { display: none; }  /* später mit js ein und ausblenden, irgentwie */

.hero_img {
    height: 150px;
    width: 150px;
    display: inline-block;
    outline: 1px solid black;
    box-shadow: 0px 0px 0px 6px #F8F8FF, 5px 5px 1.5px 6px #d9d9d9;
    margin-left: .8rem;
    margin-right: .8rem;
    margin-top: 1rem;
}

[class*='class_'] {
    background-size: 500%;
    background-repeat: no-repeat;
}

.class_priests { background-image: url(../img/class_priests.png); }

.baudouin { background-position: 25% 25%; }
.cassandra { background-position: 50% 25%; }
.frey { background-position: 0 25%; }
.juno { background-position: 75% 0; }
.kaulah { background-position: 0 0; }
.laias { background-position: 25% 0; }
.lavril { background-position: 25% 50%; }
.leo { background-position: 50% 0; }
.lucias { background-position: 50% 50%; }
.may { background-position: 75% 25%; }
.mediana { background-position: 100% 25%; }
.rehartna { background-position: 75% 50%; }
.rephy { background-position: 0 50%; }
.shea { background-position: 100% 0; }

/* === GRID === */

.container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.col-1 { width: 16.666%;  }
.col-2 { width: 33.333%;  }
.col-3 { width: 50%;      }
.col-4 { width: 66.666%;  }
.col-6 { width: 100%;     }

/* === Clearfix-hack === */
.row::after {
    content: "";    /* after pseudo leer ist! */
    clear: both;    /* keine floats zulassen */
    display: block; /* element die ganze zeile einnimmt */
}

[class*='col-'] {
    float: left;
    min-height: 1px;
}

Alles anzeigen

bin gespannt auf js.

Noobie_Chan · 13. November 2019

habe mich jetzt auch angemeldet bei codepen. Ich hoffe das ich dir zeigen kann wie es aussehen soll.

https://codepen.io/Noobie_Chan/pen/dyyqLVG

Ich benutze ein GRID (contain, row, col-1). Die Bilder muss du dir so vorstellen: ein Gesamtbild wo mehrere kleinere bilder drauf sind (Schachbrett). Ich lade dann zb. 1x das bild und zeige nur einen kleinen bereiche. (genannt: Sprites; https://de.wikipedia.org/wiki/CSS-Sprites) Ich habe noch KEINE möglichkeit JAVASCRIPT zu verwenden (bin erst dabei mir die grundlagen anzueignen, so mathe formeln oder was das sein soll)

Noobie_Chan · 12. November 2019

Hy basti1012,

danke das du dir meinen code angeguckt hast. Hab mir das auf codepen.io angeguckt. Du verwendest max-height/width und flexboxen? ich hab jetzt auch eine lösung gefunden wie ich den code um 400 Zeilen gekürzt habe.

HTML:

Code

<div class="container">
  <div class="row">
    <div class="col-6">
      <div id="id_all">
        <a class="aisha class_wizards hero_img" href="index.html"></a>
        <a class="annette class_mechanics hero_img"></a>
        <a class="arch class_archers hero_img"></a>
        <a class="artemia class_wizards hero_img"></a>
        <a class="aselica class_knights hero_img"></a>
        <a class="baudouin class_priests hero_img"></a>
        <a class="bernheim class_warriors hero_img"></a>
        <a class="cain class_wizards hero_img"></a>
        <a class="cassandra class_priests hero_img"></a>
        <a class="cecilia class_mechanics hero_img"></a>
        <a class="chase class_warriors hero_img"></a>
        <a class="chrisha class_mechanics hero_img"></a>
        <a class="clause class_knightshero_img"></a>
        <a class="cleo class_wizards hero_img"></a>
        <a class="crow class_mechanics hero_img"></a>
        <a class="dakaris class_wizards hero_img"></a>
        <a class="demia class_knights hero_img"></a>
        <a class="dimael class_archers hero_img"></a>
        <a class="dosarta class_knights hero_img"></a>
        <a class="epis class_assassins hero_img"></a>
        <a class="erze class_assassins hero_img"></a>
        <a class="esker class_wizards hero_img"></a>
        <a class="ezekiel class_assassins hero_img"></a>
        <a class="fluss class_assassins hero_img"></a>
        <a class="frey class_priests hero_img"></a>
        <a class="gau class_warriors hero_img"></a>
        <a class="gladi class_assassins hero_img"></a>
        <a class="glenwyn class_knights hero_img"></a>
        <a class="hanus class_mechanics hero_img"></a>
        <a class="jane class_knights hero_img"></a>
        <a class="juno class_priests hero_img"></a>
        <a class="kara class_mechanics hero_img"></a>
        <a class="kasel class_warriors hero_img"></a>
        <a class="kaulah class_priests hero_img"></a>
        <a class="kirze class_warriors hero_img"></a>
        <a class="laias class_priests hero_img"></a>
        <a class="lakrak class_mechanics hero_img"></a>
        <a class="laudia class_assassins hero_img"></a>
        <a class="lavril class_priests hero_img"></a>
        <a class="leo class_priests hero_img"></a>
        <a class="lewisia class_wizards hero_img"></a>
        <a class="lilia class_wizards hero_img"></a>
        <a class="loman class_knights hero_img"></a>
        <a class="lorraine class_wizards hero_img"></a>
        <a class="lucias class_priests hero_img"></a>
        <a class="luna class_archers hero_img"></a>
        <a class="maria class_wizards hero_img"></a>
        <a class="may class_priests hero_img"></a>
        <a class="mediana class_priests hero_img"></a>
        <a class="mirianne class_assassins hero_img"></a>
        <a class="miruru class_mechanics hero_img"></a>
        <a class="mitra class_mechanics hero_img"></a>
        <a class="morrah class_knights hero_img"></a>
        <a class="naila class_warriors hero_img"></a>
        <a class="neraxis class_knights hero_img"></a>
        <a class="nia class_assassins hero_img"></a>
        <a class="nicky class_warriors hero_img"></a>
        <a class="nyx class_wizards hero_img"></a>
        <a class="oddy class_mechanics hero_img"></a>
        <a class="ophelia class_wizards hero_img"></a>
        <a class="pavel class_wizards hero_img"></a>
        <a class="philop class_knights hero_img"></a>
        <a class="priscilla class_warriors hero_img"></a>

      </div>
    </div>
  </div>        
</div>

Alles anzeigen

CSS:

Code

html {
    font-size: 16px;
}

body {
    margin: 0;
    background-color: #FAEBD7;
}

* {
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;    
}

[id*='id_'] {
    background: #ebebeb;
    border: 1px solid #a3a3a3;
    height: 200px;
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
    padding-left: .2rem;
    padding-right: .2rem;
}

#id_all {
    
}

#id_knights {
    display: none;
}

#id_warriors {
    display: none;
}

#id_assassins {
    display: none;
}

#id_archers {
    display: none;
}

#id_mechanics {
    display: none;
}

#id_wizards {
    display: none;
}

#id_priests {
    display: none;
}

.hero_img {
    height: 150px;
    width: 150px;
    display: inline-block;
    outline: 1px solid black;
    box-shadow: 0px 0px 0px 6px #F8F8FF, 5px 5px 1.5px 6px #d9d9d9;
    margin-left: .8rem;
    margin-right: .8rem;
    margin-top: 1rem;
}

.class_knights {
    background: url('https://sebastian1012.bplaced.net/bilder/2.jpg') no-repeat;
    background-size: 500%;
}

.class_warriors {
    background: url('https://sebastian1012.bplaced.net/bilder/3.jpg') no-repeat;
    background-size: 500%;
}

.class_assassins {
    background: url('https://sebastian1012.bplaced.net/bilder/4.jpg') no-repeat;
    background-size: 500%;
}

.class_archers {
    background: url('https://sebastian1012.bplaced.net/bilder/5.jpg') no-repeat;
    background-size: 500%;
}

.class_mechanics {
    background: url('https://sebastian1012.bplaced.net/bilder/2.jpg') no-repeat;
    background-size: 500%;
}

.class_wizards {
    background: url('https://sebastian1012.bplaced.net/bilder/3.jpg') no-repeat;
    background-size: 500%;
}

.class_priests {
    background: url('https://sebastian1012.bplaced.net/bilder/4.jpg') no-repeat;
    background-size: 500%;
}

.aisha { background-position: 75% 0; }
.annette { background-position: 75% 0; }
.arch { background-position: 100% 0; }
.artemia { background-position: 100% 0; }
.aselica { background-position: 50% 0; }
.baudouin { background-position: 25% 25%; }
.bernheim { background-position: 100% 25%; }
.cain { background-position: 25% 50%; }
.cassandra { background-position: 50% 25%; }
.cecilia { background-position: 75% 25%; }
.chase { background-position: 25% 0; }
.chrisha { background-position: 100% 25%; }
.clause { background-position: 75% 0; }
.cleo { background-position: 50% 0; }
.crow { background-position: 50% 0; }
.dakaris { background-position: 50% 50%; }
.demia { background-position: 100% 0; }
.dimael { background-position: 0 25%; }
.dosarta { background-position: 25% 50%; }
.epis { background-position: 50% 25%; }
.erze { background-position: 0 0; }
.esker { background-position: 75% 50%; }
.ezekiel { background-position: 75% 25%; }
.fluss { background-position: 50% 0; }
.frey { background-position: 0 25%; }
.gau { background-position: 75% 0; }
.gladi { background-position: 75% 0; }
.glenwyn { background-position: 0 50%; }
.hanus { background-position: 0 50%; }
.jane { background-position: 0 25%; }
.juno { background-position: 75% 0; }
.kara { background-position: 25% 0; }
.kasel { background-position: 50% 0; }
.kaulah { background-position: 0 0; }
.kirze { background-position: 25% 5 0%; }
.laias { background-position: 25% 0; }
.lakrak { background-position: 100% 0; }
.laudia { background-position: 25% 0; }
.lavril { background-position: 25% 50%; }
.leo { background-position: 50% 0; }
.lewisia { background-position: 0 25%; }
.lilia { background-position: 0 0; }
.loman { background-position: 25% 0; }
.lorraine { background-position: 25% 25%; }
.lucias { background-position: 50% 50%; }
.luna { background-position: 25% 25%; }
.maria { background-position: 50% 25%; }
.may { background-position: 75% 25%; }
.mediana { background-position: 100% 25%; }
.mirianne { background-position: 100% 0; }
.miruru { background-position: 0 25%; }
.mitra { background-position: 0 0; }
.morrah { background-position: 25% 25%; }
.naila { background-position: 100% 0; }
.neraxis { background-position: 0 0; }
.nia { background-position: 0 50%; }
.nicky { background-position: 0 50%; }
.nyx { background-position: 75% 25%; }
.oddy { background-position: 25% 25%; }
.ophelia { background-position: 25% 0; }
.pavel { background-position: 100% 25%; }
.philop { background-position: 50% 25%; }
.priscilla { background-position: 0 25%; }

.container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.row::after {
    content: "";    /* after pseudo leer ist! */
    clear: both;    /* keine floats zulassen */
    display: block; /* element die ganze zeile einnimmt */
}

[class*='col-'] {
    float: left;
    min-height: 1px;
}

.col-1 { width: 16.666%;  }
.col-2 { width: 33.333%;  }
.col-3 { width: 50%;      }
.col-4 { width: 66.666%;  }
.col-6 { width: 100%;     }

Alles anzeigen

bei codepen konnte ich hier kein link reinsetzten. Muss mir mal codepen angucken. Zu den bildern sie sind klein (sprites) bild ist 1000x1000px (in denen sind 200px bilder drinen) und muss einen 500% faktor benutzen zum ausfüllen.

Hier wie es aussieht: https://www.bilder-upload.eu/bild-1663c0-1573590033.png.html

Aber verstehen tue ich noch immer nicht warum das so sein muss =(

Noobie_Chan · 11. November 2019

Hy liebe community,

ich bin hier neu und brauche eure hilfe beim verständis beim coden. Ich lerne selbstständig (html5, css3, js,....) und möchte es auch beruflich ausüben. Einiges ist mir leider nicht ganz so klar, trotz Dr. Google. Ich habe leider keinen Mentor oder der gleichen der mich etwas leitet. Ich benutze brackets als editor und firefox. Mein wissen ist auf HTML5 und CSS3 begrenzt. (Bin aber dabei mir js anzueignen). Nun zu meinem problem/frage ist:

Ich habe eine bilderreihe die von links nach rechts geht. (ca. 100 bilder) und ich möchte in css den code kürzen, weil ich "background-size: 500%;" für jedes bild extra geschrieben habe. (muss theoretisch nicht sein, 1x sollte reichen) Problem ist wenn ich "background: url(); & background-size: 500%;" trenne (nicht in einer class oder id schreibe, funktioniert das nicht). Müssen die 2 teile immer zusammenstehen oder kann man das auch irgentwie anders zusammen fassen?

HTML:

Code

<div id="class_all">
    <a class="aisha hero_img" href="index.html"></a>
    <a class="annette hero_img"></a>
    <a class="arch hero_img"></a>
    <a class="artemia hero_img"></a>
    ......
</div>

CSS:

Code

.hero_img {
    height: 150px;
    width: 150px;
    display: inline-block;
    outline: 1px solid black;
    box-shadow: 0px 0px 0px 6px #F8F8FF, 5px 5px 1.5px 6px #d9d9d9;
    margin-left: .8rem;
    margin-right: .8rem;
    margin-top: 1rem;
}

.aisha {
    background: url(../img/class_wizards.png) no-repeat 75% 0;
    background-size: 500%;
}

.annette {
    background: url(../img/class_mechanics.png) no-repeat 75% 0;
    background-size: 500%;
}

.arch {
    background: url(../img/class_archers.png) no-repeat 100% 0;
    background-size: 500%;
}

.artemia {
    background: url(../img/class_wizards.png) 100% 0;
    background-size: 500%;
}
.....

Alles anzeigen

Wäre super wenn ich das kürzen könnte. Meine Idee Wäre folgende (aber die rechnung geht nicht auf sobald ich background trenne):

CSS:

Code

.class_wizards {
    background-image: url(../img/class_wizards.png) no-repeat;
    background-size: 500%;
}

.class_mechanics {
    background-image: url(../img/class_mechanics.png) no-repeat;
    background-size: 500%;
}

.aisha {
    background-position: 75% 0;
}

.annette {
    background-position: 75% 0;
}
....

Alles anzeigen

Ich hoffe das es verständlich ist. Sollte ich es irgendwie unverständlich geschrieben habe, werde ich mich bemühen es verständlich zu schreiben. Bitte jetzt um eure hilfe wie ich das am besten schreiben kann damit der code kürzer wird (400 Zeile sind es die sich theoretisch wiederholen)

PS: (tipps zum nachlesen, wichtige lexis, nach schlagwerke, gern gesehen)

Ich danke im vorraus

Beiträge von Noobie_Chan

Erstellte id zugreifen, wie?

Erstellte id zugreifen, wie?

Erstellte id zugreifen, wie?

Eine id hinzufügen, wie?

Eine id hinzufügen, wie?

Eine id hinzufügen, wie?

Eine id hinzufügen, wie?

Eine id hinzufügen, wie?

Positionierung von DIVs

Position Sticky bei Tabellen

Hilfe: background (code kürzen!)

Hilfe: background (code kürzen!)

Hilfe: background (code kürzen!)

Hilfe: background (code kürzen!)

Hilfe: background (code kürzen!)