XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Image über ul dynamisch oben rechts, wie? (http://xhtmlforum.de/showthread.php?t=72017)

DjBepy 09.05.2015 16:57

Image über ul dynamisch oben rechts, wie?
 
Hoi zäme,

ich haben eine Navigations-Liste (ul) horizontal ganz oben auf meiner Seite. Diese varriert, da je nach Benutzer da Punkte hinzu kommen.

Nun möchte ich ein Bild über die Liste drüber, das immer rechts bündig mit dem letzten Punkt in der Liste ist. Aber entweder habe ich ein Denkfehler oder nicht den richtigen Befehl, aber es entweder immer links oder rechts daneben:

HTML-Code:

<div style="float: left; width: auto">
        <div style="float: right; width: 100%">
                <picture>
                                                <!--[if IE 9]><video style="display: none;"><![endif]-->
                                                <source srcset="templates/IndivCandy_Violet/img/sn/schlafend_boden.png" media="(min-width: 768px)">
                                                <source srcset="templates/IndivCandy_Violet/img/sn/schlafend_boden_klein.png" media="(min-width: 480px)">
                                                <!--[if IE 9]></video><![endif]-->
                                                <img srcset="none.png" alt="Leleli - Dein online Shop für Stoffe und Nähzubehör in der Schweiz (Logo)">
                                </picture>
                        </div>       
               

                <ul class="nav navbar-nav-oben">
                        <li....>
</ul>
</div>

Viele Grüsse,
Benny

P.S. Ich benutze zur dynamischen Anzeige des zur Auflösung passenden Bild ein js -> <picture>

MrMurphy 09.05.2015 17:07

Hallo,

soll die Seite nur unter Chrome und Opera funktionieren?

Gruss

MrMurphy

DjBepy 09.05.2015 17:10

Nein, eigentlich unter allen Browsern, wieso?

MrMurphy 09.05.2015 17:14

Hallo,

weil nur Chrome und Opera das picture-Element kennen.

Can I use... Support tables for HTML5, CSS3, etc

Gruss

MrMurphy

DjBepy 09.05.2015 17:21

Wie schon erwähnt, nutze ich dafür eine javascript, weil ich weiss, dass das Picture-Element oft noch theorie ist.

MrMurphy 09.05.2015 17:25

Hallo,

und was ist mit den Besuchern die JavaScript blockieren haben?

Gruss

MrMurphy

DjBepy 09.05.2015 17:42

Spielt das für meine gestellt Frage bzw. das Thema eine Rolle?

MrMurphy 09.05.2015 17:58

Hallo,

da du uns die entscheidenden Informationen zur Klärung des eigentlichen Problems vorenthälst kann ich dir leider nur bei den erkennbaren Problemen weiterhelfen. Und da scheinst du noch Defizite bei der besucherfreundlichkeit deiner Seite zu haben.

Erstelle doch mal bitte aus deinem Quellcodeschnipsel eine HTML-Datei. Dann erkannst du vielleicht was du uns zur Verfügung stellst. Nämlich nix. Wir kennen weder die Bilder noch das Javascript noch den Aufbau der Seite noch das weitere CSS noch ...

Gruss

MrMurphy

DjBepy 09.05.2015 18:47

Aber das spielt doch gar keine Rolle . . . ersetze in Gedanken das <picture> durch ein effes <img src""> . . . und dennoch ist mein Problem das Gleiche, ich bekomme es nicht hin, dass es rechts bündig mit dem letzten List-Eintrag ist.

Das ist aus einer Datei, die includiert wird, da kann ich Dir keine ganze HTML Datei liefern, da die nur aus dem Div mit der Liste besteht & ich jetzt eben das Bild entsprechend dynamisch positioniert haben will. Aber auch da kannste Dir in Gedanken gerne <head> tags und Co dazu denken ;)

Und das Du mich über "eingeschränkte" Benutzerfreundlichkeit meiner Seite hinweist ist zwar löblich, aber an der Stelle doch irrelevant. Wer hat denn gesagt, dass ich ich da nicht noch ein <noscript> drum packe? Aber was soll ich denn hier den Thread voll hauen mit Code, der zum Problem nichts beiträgt?

Machen wir es so:
HTML-Code:

<html>
<head>
<title> Test</title>
</head
<body>

<div style="width: auto">
                        <div style="float: right; width: 100%">
                                <img src="templates/IndivCandy_Violet/img/sn/Snoopy_schlafend_boden.png">
                        </div>       
               

                <ul>
                        <li>Eins</li>
                        <li>Zwei</li>
                </ul>
</div>
</bod>
</html>

Hoffe, damit ist die DIskussion über meine JS-Verwendung sussen vor ;)

MrMurphy 09.05.2015 19:29

Hallo,

mangels eines Bildes von dir musste ich ein anderes einfügen.

Zitat:

Nun möchte ich ein Bild über die Liste drüber, das immer rechts bündig mit dem letzten Punkt in der Liste ist.
Ich würde das folgendermaßen lösen:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Bild anordnen</title>
  <style>
      * {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      html {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        border: 2px solid red;
        margin: 0;
      }
      body {
        border: 2px solid blue;
      }
      body>div {
        display: flex;
        flex-direction: column;
      }
      body>div>div {
        text-align: right;
      }
      img {
      }
      ul {
        display: flex;
        justify-content: space-between;
      }
      li {
        display: block;
        }
  </style>
</head>
<body>
<div>
  <div>
      <img src="http://upload.wikimedia.org/wikipedia/commons/8/8a/CTB-CTW_Port_of_Hamburg-Waltershof.jpg">
  </div> 
  <ul>
      <li>Eins</li>
      <li>Zwei</li>
  </ul>
</div>
</body>
</html>

Gruss

MrMurphy


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:05 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022