• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Elemente neu anordnen über den CSS Bereich

K

kaysiebke

Mitglied
Guten Tag an die Gemeinde!

Ich möchte gerne mein Dropdown-Menü (Switch Language) und mein Info Icon SVG (tippy Tooltip)
im CSS Bereich neu anordnen, ohne dabei den HTML-Bereich umzustellen. Und zwar möchte ich gerne beide Elemente nach oben versetzen, sodass es oberhalb vom weißen Kasten ist

Code: 
<body>
    <div class="flex-aside">
        <!-- <label for="barcodelabels">Barcode Labels:</label> -->
        <aside class="barcode-label">
            <span id="label-sku"></span>
            <span id="label-size-color"></span>
            <span id="label-description"></span>
            <svg id="barcode"></svg>
        </aside>
        <main class="form">
            <div class="container-lng-info">
                <label for="language">Language:</label>
                <select name="language" id="language">
                    <option value="EN">EN</option>
                    <option value="DE" selected>DE</option>
                    <option value="PL">PL</option>
                </select>
                <svg class="tt-icon" data-template="ttGlobalInfo" enable-background="new 0 0 48 48" height="25px"...
                    </g>
                </svg>
            </div>
Bildschirmfoto vom 2024-10-03 11-33-07.png
 
Ich habe es damit versucht, das ganze neu zu positionieren, ist mir aber nicht geglückt.
Sorry, mit dem cod wollte ich nur zeigen um welschen teil in meinem HTML es geht .
Da meine HTML-Datei ziemlich umfangreich ist vom Inhalt, hier mal mein Link


Code: 
<div class="container">
  <div class="form"></div>
  <div class="tt-icon"></div>
  <div class="flex-aside"></div>
</div>

Code: 
.container {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "form tt-icon"
    "flex-aside flex-aside";
}

.form { grid-area: form; }

.tt-icon { grid-area: tt-icon; }

.flex-aside { grid-area: flex-aside; }

Code: 
<div class="container">
 <div class="flex-aside">
<div class="flex-aside">
        <!-- <label for="barcodelabels">Barcode Labels:</label> -->
        <aside class="barcode-label">
            <span id="label-sku"></span>
            <span id="label-size-color"></span>
            <span id="label-description"></span>
            <svg id="barcode"></svg>
        </aside>
        </div>

<div class="form">
        <main class="form">
            <div class="container-lng-info">
                <label for="language">Language:</label>
                <select name="language" id="language">
                    <option value="EN">EN</option>
                    <option value="DE" selected>DE</option>
                    <option value="PL">PL</option>
                </select>
                </div>
  <div class="tt-icon">
                <svg class="tt-icon" data-template="ttGlobalInfo" enable-background="new 0 0 48 48" height="25px"
                    id="Layer_1" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve"
                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g>
                        <g>
                            <path fill="white"
                                d="M23.945,15.774c1.26,0,2.053-0.864,2.016-1.944c0-1.115-0.756-1.979-1.943-1.979c-1.151,0-1.979,0.863-1.979,1.979 C22.039,14.91,22.83,15.774,23.945,15.774z" />
                            <path fill="white"
                                d="M25.602,34.941V20.145c0-1.303-1.053-1.413-1.351-1.418h-0.566c0,0-1.251,0.012-1.251,1.152v15.303 c0.023,0.346,0.175,0.967,1.001,0.967h1.181C24.967,36.121,25.602,35.938,25.602,34.941z" />
                        </g>
                        <path fill="white"
                            d="M24,0C10.746,0,0,10.744,0,24c0,13.254,10.745,24,24,24c13.256,0,24-10.746,24-24C48,10.744,37.256,0,24,0z M24,44 C12.955,44,4,35.045,4,24C4,12.953,12.955,4,24,4c11.047,0,20,8.954,20,20C44,35.045,35.047,44,24,44z" />
                    </g>
                </svg>
            </div>
</div>
 
Zuletzt bearbeitet:
kaysiebke schrieb:
Sorry ich dachte es funktioniert wen ich den Link von GitHub einsetze, sorry noch mal.
Ich hoffe dieser Hir Funktionierte
Zum Vergrößern anklicken....
Nein. In deinem Account gibt es nur ein öffentliches Repository (»k-siebke86«) welches aber keinen Inhalt hat. Ein Repository »Barcode-Generator-« gibt es nicht bzw. dieses ist nicht öffentlich - wenn du die Seite aufrufst und bei GitHub angemeldet bist, siehst du sie natürlich, aber wir halt nicht …
 
kaysiebke schrieb:
So ich habe das ganze mal auf CodePen hinterlegt in der Hoffnung das der Link funktioniert
Zum Vergrößern anklicken....
So ganz blicke ich da nicht durch was du eigentlich vor hast bzw. wo das Problem ist (dafür ist da auch viel zu viel Code drin, kürze den Code soweit dass das Problem gerade noch nachvollziehbar ist). Ein Problem dürfte aber sein dass es (mindestens) zwei div.container gibt die beide display:grid bekommen - allerdings passen beim zweiten dann die template-areas nicht mehr zu den areas in denen die Elemente liegen sollen. Auch falsch ist wohl das doppelte, ineinander verschachtelte div.flex-aside - du solltest erstmal den Code aufräumen, mit der div-Suppe wird das wohl schwierig.

Übrigens: bei CodePen gehört in das HTML-Feld nur alles innerhalb von body, nicht die komplette HTML-Seite.
 
Ich habe die Datei so weit wie möglich komprimiert und die SVG-Skripte aus meinem Tippy Container entfernt, um eine bessere Übersichtlichkeit zu gewährleisten. Wie bereits in der Einleitung meines Beitrags erwähnt, beabsichtige ich, mein Dropdown-Menü (Sprache wechseln) sowie mein Informations-Icon (Tippy Tooltip) neu anzuordnen. Beide sollten sich oberhalb des weißen Kastens (Barcode Labels) befinden und nicht darunter. Dies beabsichtige ich durch CSS umzusetzen, ohne den HTML-Bereich umzustellen.

(Wenn der HTML-Bereich verändert wird, könnte dies dazu führen, dass ein Teil meiner Funktion zum Drucken fehlerhaft arbeitet. In diesem Fall würde der Inhalt, den ich ausdrucken will, im Druckdialog fehlen – was ich auf jeden Fall vermeiden möchte.)

Ja, das haben Sie richtig erkannt. Ich habe einen div-Container für die Buttons erstellt und zusätzlich einen zweiten div-Container im Grid-Format für die Buttons verwendet.

https://codepen.io/Kay-Siebke/pen/VwomogP

das Bild ist nachbearbeitet zum bessen verständnies
Bildschirmfoto vom 2024-10-11 20-00-35.png
 
Das habe ich schon versucht, ohne Erfolg, den leider verschwindet dann die
body und asied aus der Drucker Ansicht
Code: 
</style>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>
</head>
        <main class="form">
            <div class="container-lng-info">
                <label for="language">Language:</label>
                <select name="language" id="language">
                    <option value="EN">EN</option>
                    <option value="DE" selected>DE</option>
                    <option value="PL">PL</option>
                </select>
                <svg class="tt-icon" data-template="ttGlobalInfo" enable-background="new 0 0 48 48"             height="25px"
                    id="Layer_1" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve"
                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">.......
                    </g>
                </svg>
            </div>
            
    <div class="flex-aside">
        <!-- <label for="barcodelabels">Barcode Labels:</label> -->
        <aside class="barcode-label">
            <span id="label-sku"></span>
            <span id="label-size-color"></span>
            <span id="label-description"></span>
            <svg id="barcode"></svg>
        </aside>
</div>
 
kaysiebke schrieb:
Wie bereits in der Einleitung meines Beitrags erwähnt, beabsichtige ich, mein Dropdown-Menü (Sprache wechseln) sowie mein Informations-Icon (Tippy Tooltip) neu anzuordnen. Beide sollten sich oberhalb des weißen Kastens (Barcode Labels) befinden und nicht darunter. Dies beabsichtige ich durch CSS umzusetzen, ohne den HTML-Bereich umzustellen.
Zum Vergrößern anklicken....
Ohne das HTML zu reparieren wird das ganze nicht funktionieren. Deine Elemente sind immer noch völlig durcheinander und du versuchst zum Teil Elemente in bestimmte grid-Bereiche zu schieben was allerdings daran scheitert dass diese Elemente keine Kindelemente des grid-Elements sind. Auch haben nicht alle Kindelemente der grid-Elemente eine grid-area zugewiesen und es gibt div.container immernoch zweimal (es gibt zwei verschiedene Definitionen im CSS wobei die zweite natürlich die erste überschreibt). Schau dir das ganze in den Entwicklertools an, dort meldet dir der Browser wenn und warum er Eigenschaften nicht anwendet.
Du kannst zwar direkte Kindelemente eines Elements per grid-Layout umsortieren - sinnvoll ist das aber eher nicht, das erschwert u.U. die Bedienung der Seite.

kaysiebke schrieb:
(Wenn der HTML-Bereich verändert wird, könnte dies dazu führen, dass ein Teil meiner Funktion zum Drucken fehlerhaft arbeitet. In diesem Fall würde der Inhalt, den ich ausdrucken will, im Druckdialog fehlen – was ich auf jeden Fall vermeiden möchte.)

Ja, das haben Sie richtig erkannt. Ich habe einen div-Container für die Buttons erstellt und zusätzlich einen zweiten div-Container im Grid-Format für die Buttons verwendet.
Zum Vergrößern anklicken....
Bahnhof. Keine Ahnung was der farbige Satz in Klammern bzw. Text dahinter bedeuten soll bzw. was du damit sagen willst und was sie mit dem Problem zu tun haben.
kaysiebke schrieb:
das Bild ist nachbearbeitet zum bessen verständnies
Zum Vergrößern anklicken....
Das macht das Verständnis nicht besser: das Bild hat nichts mit dem auf Codepen gezeigten Code zu tun.
 
tk1234 schrieb:
Ohne das HTML zu reparieren wird das ganze nicht funktionieren. Deine Elemente sind immer noch völlig durcheinander und du versuchst zum Teil Elemente in bestimmte grid-Bereiche zu schieben was allerdings daran scheitert dass diese Elemente keine Kindelemente des grid-Elements sind. Auch haben nicht alle Kindelemente der grid-Elemente eine grid-area zugewiesen und es gibt div.container immernoch zweimal (es gibt zwei verschiedene Definitionen im CSS wobei die zweite natürlich die erste überschreibt). Schau dir das ganze in den Entwicklertools an, dort meldet dir der Browser wenn und warum er Eigenschaften nicht anwendet.
Du kannst zwar direkte Kindelemente eines Elements per grid-Layout umsortieren - sinnvoll ist das aber eher nicht, das erschwert u.U. die Bedienung der Seite.


Bahnhof. Keine Ahnung was der farbige Satz in Klammern bzw. Text dahinter bedeuten soll bzw. was du damit sagen willst und was sie mit dem Problem zu tun haben.

Das macht das Verständnis nicht besser: das Bild hat nichts mit dem auf Codepen gezeigten Code zu tun.
Zum Vergrößern anklicken....
Ich wollte damit sagen, dass ich durch das Entfernen des Bildes den Inhalt meiner Datei verschlanken wollte, damit es übersichtlicher ist, da dieser Teil sehr lang war. Ich bin damit ihren Empfehlungen so gut es geht gefolgt, Ich bin kein Profi daher können sie mir zeigen, wo die Fehler in meiner Datei sind ?

​

 
Zuletzt bearbeitet:
kaysiebke schrieb:
Ich wollte damit sagen, dass ich durch das Entfernen des Bildes den Inhalt meiner Datei verschlanken wollte, damit es übersichtlicher ist, da dieser Teil sehr lang war.
Zum Vergrößern anklicken....
Du musst schon richtig zitieren und nicht einfach unter ein Vollzitat auf irgendeine Aussage ändern - so weiß (außer dir) keiner worauf du dich beziehst.
kaysiebke schrieb:
Ich bin damit ihren Empfehlungen so gut es geht gefolgt, Ich bin kein Profi daher können sie mir zeigen, wo die Fehler in meiner Datei sind ?
Zum Vergrößern anklicken....
Wenn ich mir das CodePen aus #10 anschaue ist der Code jetzt ein ganz anderer und die Seite sieht wohl so aus wie gewünscht?
 
tk1234 schrieb:
Ohne das HTML zu reparieren wird das ganze nicht funktionieren. Deine Elemente sind immer noch völlig durcheinander und du versuchst zum Teil Elemente in bestimmte grid-Bereiche zu schieben was allerdings daran scheitert dass diese Elemente keine Kindelemente des grid-Elements sind. Auch haben nicht alle Kindelemente der grid-Elemente eine grid-area zugewiesen und es gibt div.container immernoch zweimal (es gibt zwei verschiedene Definitionen im CSS wobei die zweite natürlich die erste überschreibt). Schau dir das ganze in den Entwicklertools an, dort meldet dir der Browser wenn und warum er Eigenschaften nicht anwendet.
Du kannst zwar direkte Kindelemente eines Elements per grid-Layout umsortieren - sinnvoll ist das aber eher nicht, das erschwert u.U. die Bedienung der Seite.


Bahnhof. Keine Ahnung was der farbige Satz in Klammern bzw. Text dahinter bedeuten soll bzw. was du damit sagen willst und was sie mit dem Problem zu tun haben.

Das macht das Verständnis nicht besser: das Bild hat nichts mit dem auf Codepen gezeigten Code zu tun.
Zum Vergrößern anklicken....
So habe mir mal ihre ehrliche Meinung zu Herzen genommen und mein CSS Anweisungen über bohrt geworfen und angefangen alle bzw. fast alle Elemente in ein Grit Container zu packen, um so eine klare Struktur hinzubekommen
https://codepen.io/Kay-Siebke/pen/VwomogP
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben