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 17: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 18:07

Hallo,

soll die Seite nur unter Chrome und Opera funktionieren?

Gruss

MrMurphy

DjBepy 09.05.2015 18:10

Nein, eigentlich unter allen Browsern, wieso?

MrMurphy 09.05.2015 18: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 18: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 18:25

Hallo,

und was ist mit den Besuchern die JavaScript blockieren haben?

Gruss

MrMurphy

DjBepy 09.05.2015 18:42

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

MrMurphy 09.05.2015 18: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 19: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 20: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

DjBepy 09.05.2015 20:46

Danke für dein Input :)

Jedoch sorgt das ja dafür, dass das Bild immer rechts klebt & nur die Listen-Punkte je nach Anzahl weniger oder mehr Platz dazwischen haben.

Wenn Du z.B. mal auf Leleli - Dein Shop für Stoffe und Nähzubehör in der Schweiz guckst, da ist oben die Top Navigation. Diese varriert, je nach Benutzergruppe in der Anzahl & damit auch in der "länge"/breite.

Mein Ziel ist es, ein Bild so zu setzen, dass es immer Rechtsbündig mit dem Warenkorb ist, egal wie viele Elemente davor sind (und egal ob der Warenkorb das letzte Element ist). Daher war meine Idee, ich packe die Navigation selber noch Mal um ein DIV, dass nur so breit ist wie die Liste "breit" ist & klebe dann mit dem div float: right & width: 100% das Bild eben rechts an. Und irgendwoe da scheint ja mein Denkfehler zu sein :)

axelf 10.05.2015 13:39

Hi,

du kannst es doch mittels Hintergrundbild lösen oder mit absoluter Positionierung. Dann schließt das Bild immer rechtsbündig mit dem letzen Element in der Navi ab.

DjBepy 25.05.2015 14:15

Habs geschafft . . . das Image musste direkt nach dem UL-Tag im DIV eingebettet gesetzt werden und schon wandert es brav mit dem letzten LI-Element mit :)


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:12 Uhr.

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

© Dirk H. 2003 - 2023