Frage von ImCruz, 57

Zwei HTML Elemente nebeneinander?

Hallo und zwar möchte ich recht von einem div Container ein img platzieren, jedoch wird dieses nicht auf gleicher höhe angezeigt sondern verschiebt sich nach unten oder zwischen die Zeilen des Inhaltsverzeichnis. Ich habe jetzt schon viel über float nachgelesen, dies sagt mir jedoch nicht viel.

Code meines Inhaltsverzeichnis:

<div style="padding: 20px; margin: 5px; width: 300px; text-align: left; background-color: rgba(243, 243, 243, 0.498039);"><span style="font-size: medium;">
    <a href="#C1">1. Text</a>
    <a href="#C2">2. Text</a>
    <a href="#C3">3. Text</a>
    <a href="#C4">4. Text</a>
    <a href="#C5">Text</a>
    </span></div> 
Antwort
von medmonk, 27

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 

Kommentar von ImCruz ,

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. 

Kommentar von medmonk ,

Jedoch funktioniert es diesmal nicht. 

Eigentlich ganz einfach, du musst nicht das UL sonder die darin liegende Anker selektieren. Lediglich für den Hintergrund könntest du das LI nehmen:

.toc-nav li {background-color: red;}
.toc-nav a {color: blue; font-weight: bold;}

LG medmonk 

Kommentar von ImCruz ,

Danke, :-) darauf hätte ich eigentlich auch selber kommen können.  

Antwort
von webflexer, 34

Gebe deinem Div ein display: inline-block

http://codepen.io/anon/pen/jALwWr

Antwort
von nedi23, 31

Folgendes kannst du machen:

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

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

Keine passende Antwort gefunden?

Fragen Sie die Community