Zwei HTML Elemente nebeneinander?

... komplette Frage anzeigen

3 Antworten

Bevor du sich um die Positionierung kümmerst, erst einmal dein Markup aufräumen. Verwende für dein Inhaltsverzeichnis (deine Navigation) eine ungeordnete Liste (unordered list).

<section>
    <!--// table of content -->
    <ul class="toc-nav">
      <li><a href="#c1"></a><li>
      <li><a href="#c2"></a><li>
      <li><a href="#c3"></a><li>
    </ul> <!--// image -->
    <img src="assets/img/bild.jpg" />
</section>

Der ungeordneten Liste gibst du ein float: left. Dem Bild hingegen ein float: right. Dein CSS sollte dann wie folgt aussehen: 

section .toc-nav {float. left;};
section img {float: right;}

Wenn das Bild lediglich zum Layout gehört, kannst du dieses auch einfach als background-image dem Elternelement zuweisen. In meinem Beispiel wäre es section. Dazu auch nochmal Markup und CSS:

<section>
<!--// table of content -->
    <ul class="toc-nav">
      <li><a href="#c1"></a><li>
      <li><a href="#c2"></a><li>
      <li><a href="#c3"></a><li>
    </ul>
</section>
section {
    background: url(../img/bild.jpg) no-repeat top right;
    padding-right: 300px; /* Wert des Bildes */
}

Es gibt halt mehre Lösungswege. Welche für dich am besten ist, selber herausfinden musst bzw. von deiner Website abhängig ist. Neben dem CSS Box-Modell mit »floaten und clearen«, auch das Flex-Modell interessant sein könnte. Es jedoch mal bei dem oben gezeigten Beispielen belasse. 

LG medmonk 

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von ImCruz
07.07.2016, 23:06

Also, das war ja mal eine Antwort. Hat alles prima geklappt, vielen Dank. 

Die Seite wird jetzt richtig angezeigt. 

Jedoch hätte ich noch eine kleine frage, die Listen habe ich normalerweise zum Beispiel mit diesem CSS Code verändert:

ul {
font-weight: bold;
color: blue;
background:red;
}

Jedoch funktioniert es diesmal nicht. 

0

Folgendes kannst du machen:

div #imgContainer
{
    float: right;
    margin-right: 0px;
}

Dazu musst du beim div mit dem Inhaltsverzeichnis den Float auf left setzten.

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?