Verschiebung einer Div über CCS

Bennyaa

Lieutenant
Registriert
März 2007
Beiträge
828
Hallo, das ist meine bescheidene Seite:
Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Leitungsberechnung</title>
        <link rel="stylesheet" href="css/main.css"/>
    </head>
    <body>
        <div id="Navigation">
            <a id="LinkStromwandler" href="CurrentTransformers/CurrentTransformers.html">
                <image src="Images/Stromwandler.png"/>
            </a>   
            <a id="Link2" href="index.html">
                <image src="Images/NichtBelegt.png"/>
            </a>                       
        </div>
    </body>
</html>

Das hier die css:
Code:
body
{
  font-family: 'Press Start 2P', cursive;
}

#Navigation
{
  position: absolute;
  top: 20%;
  left: 50%;
}

#Link2
{
  position: relative;
  top: 60px;
  left: -400px 
}

#Navigation a:hover
{
  position: relative;
  top: -10px;
}

1.Frage, warum kann ich #Navigation nicht relativ verschieben? --- egal was ich eintrage, es geht nur mit absolut.
2. Frage ich möchte jeden Link (image) beim hover hervorheben... habe das nicht hin bekommen und verschiebe es jetzt einfach.
aber das relativ bezieht sich nicht auf die aktuelle position, sondern irgendwie auf die des #Navigation
Wie kann man ein solches "hervorheben" in der css realisieren?
 
Das äußere Element muss relativ sein, damit das innere absolut positioniert werden kann.
Wenn sich deine beiden relativen Links also irgendwie bewegen sollen brauchen sie einen relativen Rahmen und müssen selbst absolut sein.
 
  • Gefällt mir
Reaktionen: kim88
Es ist einfacher, wenn du ein Bild hinzufügst, welches zeigt, was du erreichen möchtest.

Willst du, dass es in etwa so aussieht?
Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>

    <style>
        .navigation {
            display: flex;
            justify-content: center;
            margin-top: 20vh;
        }

        .link2 {
            margin-top: 60px;
        }

        .navigation a:hover {
            transform: translateY(-10px);
            transition: all .18s ease-in-out;
        }
    </style>
</head>
<body>
<div class="navigation">
    <a href="#">
        <img src="http://lorempixel.com/400/200/" alt="">
    </a>
    <a class="link2" href="#">
        <img src="http://lorempixel.com/400/200/" alt="">
    </a>
</div>
</body>
</html>
 
  • Gefällt mir
Reaktionen: SFFox
imRa schrieb:
Es ist einfacher, wenn du ein Bild hinzufügst, welches zeigt, was du erreichen möchtest.

Willst du, dass es in etwa so aussieht?
Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>

    <style>
        .navigation {
            display: flex;
            justify-content: center;
            margin-top: 20vh;
        }

        .link2 {
            margin-top: 60px;
        }

        .navigation a:hover {
            transform: translateY(-10px);
            transition: all .18s ease-in-out;
        }
    </style>
</head>
<body>
<div class="navigation">
    <a href="#">
        <img src="http://lorempixel.com/400/200/" alt="">
    </a>
    <a class="link2" href="#">
        <img src="http://lorempixel.com/400/200/" alt="">
    </a>
</div>
</body>
</html>
Ja so in etwa, die bilder könnten auch an ihrem platz bleiben und einfach nur minimal größer werden, oder einen schatten bekommen, oder sonstiges.
Ichhabe allerdings mal gelesen, dass man die styl und anodernung mit css machen solle, nicht im html. was ist denn nun richtig?
 
Du willst doch nur eine HTML Datei, die deine Kollegen einfach ausführen können....wie so ein Tool, oder so. Dann wäre es doch gut, wenn sich alles in einer Datei befindet, oder? Nicht das mal jemand das Tool verschiebt und dann geht die CSS Datei verloren :-)

Kommt ein bisschen drauf an wie groß dein gesamtes Projekt wird, aber ich würde sagen Style im Header ist angebracht.
 
Bennyaa schrieb:
Ichhabe allerdings mal gelesen, dass man die styl und anodernung mit css machen solle, nicht im html. was ist denn nun richtig?

html, css & js bitte jeweils in einzelnen Dateien (bis auf wenige Ausnahmen) - habe es nur so gemacht, weil es zur Verdeutlichung einfach ist.
 
Falls wirklich Interesse besteht, dann würde ich mal nachschauen, wie position: relative; und position: absolute; definiert sind (z.B. hier: MDN - Web Docs: position), denn ohne das Grundwissen wird es hier immer wieder Probleme mit der Positionierung geben.

Bennyaa schrieb:
1.Frage, warum kann ich #Navigation nicht relativ verschieben? --- egal was ich eintrage, es geht nur mit absolut.
Nur zum Verständnis: Das Element kann man mit position: relative; verschieben.

Das Problem bei #navigation ist, dass du die Angaben position: relative; und top:20%; gemacht hast.

Die Frage ist dann: 20 Prozent von was?

Die prozentuale Angabe bezieht sich auf die Höhe des umschließenden Blocks. Die Prozentangabe wird nur berücksichtig, wenn der umschließende Block eine Höhe definiert hat (Quelle: MDN - Web Docs: Top).

Einfacher Test, dass das wirklich der Fall ist: Gib den Elementen html, body { height: 100% } oder nutze feste Pixelwerte für top und die Navigation verschiebt sich.
 
imRa schrieb:
html, css & js bitte jeweils in einzelnen Dateien (bis auf wenige Ausnahmen) - habe es nur so gemacht, weil es zur Verdeutlichung einfach ist.
Ah, habe es erst jetzt geschnallt, dass ich den Style teil in die css packen muss.
Was hat es denn mit den einzelnen "Befehlen" auf sich? Also bspw. mit "
margin-top: 20vh;"???

Hier jetzt meine CSS
Code:
body
{
  font-family: 'Press Start 2P', cursive;
}

#Navigation
{
  display: flex;
  justify-content: center;
  margin-top: 20vh;
}

#Link2
{
  margin-top: 60px;
}

#Navigation a:hover
{
  transform: translateY(-10px);
  transition: all .18s ease-in-out;
}

die Translation jetzt doch im px?
Ergänzung ()

Janush schrieb:
Du willst doch nur eine HTML Datei, die deine Kollegen einfach ausführen können....wie so ein Tool, oder so. Dann wäre es doch gut, wenn sich alles in einer Datei befindet, oder? Nicht das mal jemand das Tool verschiebt und dann geht die CSS Datei verloren :-)

Kommt ein bisschen drauf an wie groß dein gesamtes Projekt wird, aber ich würde sagen Style im Header ist angebracht.
Möchte was kreieren, was erweiterbar ist. Deshalb auf der ersten Seite sowas wie ne Auswahl (Dann brauche ich auch auf den anderen Seiten keine Navigation mehr, außer zurück zur Auswahl.
Ergänzung ()

Darrel schrieb:
Falls wirklich Interesse besteht, dann würde ich mal nachschauen, wie position: relative; und position: absolute; definiert sind (z.B. hier: MDN - Web Docs: position), denn ohne das Grundwissen wird es hier immer wieder Probleme mit der Positionierung geben.


Nur zum Verständnis: Das Element kann man mit position: relative; verschieben.

Das Problem bei #navigation ist, dass du die Angaben position: relative; und top:20%; gemacht hast.

Die Frage ist dann: 20 Prozent von was?

Die prozentuale Angabe bezieht sich auf die Höhe des umschließenden Blocks. Die Prozentangabe wird nur berücksichtig, wenn der umschließende Block eine Höhe definiert hat (Quelle: MDN - Web Docs: Top).

Einfacher Test, dass das wirklich der Fall ist: Gib den Elementen html, body { height: 100% } oder nutze feste Pixelwerte für top und die Navigation verschiebt sich.
Danke für die Info. Hatte es mit festen werten probiert und wurde in einem anderen Thread darauf aufmerksam gemacht, dass man sowas nicht machen würde.
Ergänzung ()

SFFox schrieb:
Das äußere Element muss relativ sein, damit das innere absolut positioniert werden kann.
Wenn sich deine beiden relativen Links also irgendwie bewegen sollen brauchen sie einen relativen Rahmen und müssen selbst absolut sein.
Das hätte ich jetzt von der Logik her genau anders herum erwartet.
Das äußere absolut positioniert und die inneren dazu relativ.

Spiele jetzt schon damit rum und komme irgendwie nicht hinter die logik.
ergibt irgendwie keinen Sinn für mich, wie sich das verhält.
 
Zuletzt bearbeitet:
Zu dem letzten Punkt:

Die Logik ergibt für dich wahrscheinlich keinen Sinn, da die Aussage aus Post #2 nicht ganz korrekt ist.

Relativ positionieren bedeutet, dass ein Element mit den Werten top, right, bottom, left von seiner ursprünglichen Position im Dokumentenfluss verschoben wird. Das Element wird also nicht relativ zu einem Eltern-Element verschoben.

Absolut positionieren bedeutet, dass ein Element aus dem normalen Dokumentenfluss genommen wird und man sich am nächst höherem Eltern-Element orientiert, welches nicht den Wert position: static; besitzt.

Man gibt dem direkten Eltern-Element von absolut positionierten Elementen die Eigenschaft position: relative;, weil man Elemente häufig relativ zu ihrem Eltern-Element positionieren möchte. Im gewissen Sinne ist die Bezeichnung absolut irreführend, denn mit dieser Eigenschaft positioniert man Elemente immer relativ zu einem anderen Element.


Dennoch würde ich aber auch dazu raten, dass du dich an der Lösung von @imRa orientierst und Dinge wie display: flex / display:grid oder margins zum Positionieren und "Verschieben" der Elemente nutzt.

Die absolute Positionierung wird meistens erst dann gewählt, wenn man etwas explizit aus dem Dokumentenfluss herausnehmen möchte.
 
  • Gefällt mir
Reaktionen: SFFox
Ich habe es soweit hin bekommen:

HTML:
Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Leitungsberechnung</title>
        <link rel="stylesheet" href="css/main.css"/>
    </head>
    <body>
        <div id="Navigation">
            <a id="LinkStromwandler" href="CurrentTransformers/CurrentTransformers.html">
                <image src="Images/Stromwandler.png"/>
            </a>
            <a id="Link2" href="#">
                <image src="Images/NichtBelegt.png"/>
            </a>
            <a id="Link3" href="#">
                <image src="Images/NichtBelegt.png"/>
            </a>
            <a id="Link4" href="#">
                <image src="Images/NichtBelegt.png"/>
            </a>
            <a id="Link5" href="#">
                <image src="Images/NichtBelegt.png"/>
            </a>
            <a id="Link6" href="#">
                <image src="Images/NichtBelegt.png"/>
            </a>
            <a id="Link7" href="#">
                <image src="Images/NichtBelegt.png"/>
            </a>
            <a id="Link8" href="#">
                <image src="Images/NichtBelegt.png"/>
            </a>                  
        </div>
    </body>
</html>

CSS:
Code:
body
{
  font-family: 'Press Start 2P', cursive;
}

#Navigation
{
  display: flex;
  justify-content: center;
  margin-top: 15vh;
  position: relative;
  height: 156px;
  width: 156px;
  left: 45%;
}

#Link2
{
  position: absolute;
  top: 100%;
  left: -100%;
}

#Link3
{
  position: absolute;
  top: 100%;
  left: 100%;
}

#Link4
{
  position: absolute;
  top: 200%;
  left: -200%;
}

#Link5
{
  position: absolute;
  top: 200%;
  left: 200%;
}

#Link6
{
  position: absolute;
  top: 300%;
  left: -100%;
}

#Link7
{
  position: absolute;
  top: 300%;
  left: 100%;
}

#Link8
{
  position: absolute;
  top: 400%;
}

#Navigation a:hover
{
  transform: translateY(-10%);
  transition: all .18s ease-in-out;
}

Sieht dann so aus:

1627689083320.png
 
Bennyaa schrieb:
Ah, habe es erst jetzt geschnallt, dass ich den Style teil in die css packen muss.
Was hat es denn mit den einzelnen "Befehlen" auf sich? Also bspw. mit "
margin-top: 20vh;"???
[...]
die Translation jetzt doch im px?
Weil die Werte deinem Ausgangspost wohl am nächsten kommen dürften.

Hier kannst du nachlesen, was die einzelne Einheiten bedeuten.

Ein Forum ist geeignet, um Probleme zu lösen bzw. Lösungsvorschläge zu diskutieren. Was dir fehlt, ist ein elementares Grundverständnis. Daher lese dich bitte in html & css ein, es gibt mehr als genügend gute Quellen (z.B. die verlinkten).
 
imRa schrieb:
Weil die Werte deinem Ausgangspost wohl am nächsten kommen dürften.

Hier kannst du nachlesen, was die einzelne Einheiten bedeuten.

Ein Forum ist geeignet, um Probleme zu lösen bzw. Lösungsvorschläge zu diskutieren. Was dir fehlt, ist ein elementares Grundverständnis. Daher lese dich bitte in html & css ein, es gibt mehr als genügend gute Quellen (z.B. die verlinkten).
OK, aber denkst Du meine Lösung ist ein gut gangbarer Weg?
 
@Bennyaa ehrlich gesagt nein.

Gut das das jetzt so funktioniert. Du wirst da aber in massive Probleme kommen, wenn jemand ein kleines Display hat oder es auf einem Tablet oder Smartphone anschaut.

Alle Elemente "absolute" zu positionieren ist ein Albtraum bei solchen Geschichten. Wenn es nur was kleines sein soll und dien Bildschirmgrösse vorher bekannt ist kann man es so machen -> aber wirklich "gut" und "gangbar" ist das nicht.

Die Tipps für Grid / Flexbox wurden dir schon gegeben.
 
kim88 schrieb:
@Bennyaa ehrlich gesagt nein.

Gut das das jetzt so funktioniert. Du wirst da aber in massive Probleme kommen, wenn jemand ein kleines Display hat oder es auf einem Tablet oder Smartphone anschaut.

Alle Elemente "absolute" zu positionieren ist ein Albtraum bei solchen Geschichten. Wenn es nur was kleines sein soll und dien Bildschirmgrösse vorher bekannt ist kann man es so machen -> aber wirklich "gut" und "gangbar" ist das nicht.

Die Tipps für Grid / Flexbox wurden dir schon gegeben.
OK, danke für dein Feedback, aber verstehen kann ich es nicht so ganz, helf mir auf die sprünge.
Ich positioniere ja nur absolut innerhalb der navigations dif und dass nicht mit px, sondern mit %. Also sollte es sich doch anpassen, oder? Ich bräuchte halt nur noch svg images, damit es wirklich anpassbar ist.
 
Falls die Lösung für dich jetzt so passt, dann ist es doch gut. Aber wenn du fragst, ob deine Lösung gut und gangbar ist, dann kann ich das wie @kim88 auch nur verneinen.

Deine Lösung ist nicht flexibel und deine Navigationslinks sind (bis auf deinen ersten Link) auch nicht in deinem div namens #Navigation, sondern außerhalb positioniert. Ein kurzer Check mit dem Inspektor oder auch einfach mal dem div eine Hintergrundfarbe geben hätten das verraten. Hier zeigt sich, dass die Grundprinzipien von position und flexbox nicht verstanden wurden.

Außerdem:
  • Wenn die Links wirklich nur aus einem schwarzen Quadrat mit zentriertem Text bestehen sollen, dann braucht man dafür gar kein Bild (egal ob png oder svg), dafür reichen HTML und CSS völlig aus.
  • Das HTML-Tag für Bilder ist <img> und nicht <image> (siehe bereits die Verbesserung in Post #3)
 
Habe noch ne Navi Vorlage bei Material Design light gefunden.
(Muss man ja dann zwar in jede Seite Infofenstern, aber sieht gut aus.
Oder würdet ihr besser Bootshaus oder so empfehlen?
 
Warum hat das <br> hier keine Auswirkungen?
Der Bezeichnungstext steht direkt hinter dem Inner html "Stromwandlerdaten".
dachte das <br> soll einen Zeilenumbruch erzeugen.
Code:
    <div id="Stromwandlerdaten">Stromwandlerdaten
      <br>
      <p id="Bezeichnungstext">Bezeichnung:</p>
    </div>
 
Das <p> Element hat die Eigenschaft display:block. Der Zeilenumbruch wird also automatisch erzeugt. Wenn du ein zweites <br> hinzufügst, kommt deine leere Zeile.
 
iDOCxz schrieb:
Das <p> Element hat die Eigenschaft display:block. Der Zeilenumbruch wird also automatisch erzeugt. Wenn du ein zweites <br> hinzufügst, kommt deine leere Zeile.
Habe das Problem gefunden.
Es war innerhalb einer Div diese stand auf
Code:
  justify-content: center;
  display: flex;
jetzt habe ich das heraus genommen, aber jetzt steht das input feld, welches hinter dem Lable stehen soll untendrunter:

(Sieht zwar garnicht mal so schlecht aus, aber wie bekommt man das standardmäßig, ohne css anpacken zu müssen dahinter?

hier der Code:
Code:
<label id="BezeichnungLable">Bezeichnung: </label>
<Input id="BezeichnungInput" type="text" class="form-control" readonly>
 

Anhänge

  • 1627902784131.png
    1627902784131.png
    1,7 KB · Aufrufe: 196
Zuletzt bearbeitet:
Sorry, lag wohlan der class von Bootstrap. Ohne die klasse im input tag funktioneirt es.
 
Zurück
Oben