• 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
 
Werbung:
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; }
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben