Ergebnis 1 bis 2 von 2

Thema: div des Menüs reagiert nicht auf position

  1. #1
    HTML Newbie
    Registriert seit
    18.12.2015
    Ort
    Wien
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard div des Menüs reagiert nicht auf position

    Hallo werte Designer!

    "div id="navigation"" (blauer Hintergrund) macht zwei Probleme.
    Verstehe den Abstand vor dem ersten Button (Home) nicht und bei "position: relative" reagiert right-Position wie links. Pickt nie bei "right:0px;" am rechten Rand (müsste vom "div id="wrapper"" kommen)
    Bitte um Hilfe!
    Danke!
    HTML-Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    
    <title>Artist Marina Marina</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/lightbox.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    
    <body>
    
    <div id="wrapper">
    
        <div id="puffer"></div>
    
        <div id="logo">
            <img src="fotos/logo.jpg" alt=""/>
        </div>
    
        <div id="navigation">
            <ul id="navi">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Thema 1</a></li>
                <li><a href="#">Thema 2</a></li>
                <li><a href="#">Termine</a></li>
                <li><a href="#">AGB</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </div>
    
        
    
        <div id="fotos">
            <div class="image-set">
                <a class="example-image-link, gal" href="fotos/foto_1o.jpg" data-lightbox="example-set" data-title="Wild flowers. 42cm x 31cm "><img class="example-image" src="fotos/foto_1m.jpg" alt="Foto1"></a>
                <a class="example-image-link, gal" href="fotos/foto_2o.jpg" data-lightbox="example-set" data-title="Summer harmony. 74xm x 57cm"><img class="example-image" src="fotos/foto_2m.jpg" alt="Foto2"></a>
                <a class="example-image-link, gal" href="fotos/foto_3o.jpg" data-lightbox="example-set" data-title="Lonely tree. 104cm x 79cm"><img class="example-image" src="fotos/foto_3m.jpg" alt="Foto3"></a>
                <a class="example-image-link, gal" href="fotos/foto_4o.jpg" data-lightbox="example-set" data-title="Landscape. 42cm x 31cm"><img class="example-image" src="fotos/foto_4m.jpg" alt="Foto1"></a>
            </div>   
        </div>
    
    </div>
        
        <script src="css/lightbox-plus-jquery.js"></script>
    </body>
    </html>
    * {
    margin: 0;
    padding: 0;
    }

    html {
    font-size: 100%;
    }

    body {
    background-color: #000000;
    color: #FFFFFF;
    }

    #wrapper {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    }

    #puffer {
    height: 1.5rem;
    width: 100%;
    }

    #logo {
    width: 150px;
    height: 112px;
    }

    #navigation {
    background-color: blue;
    width: 50rem;
    /* height: 1.3rem; */
    position: relative;
    /* bottom: 0px; */
    right: 0px;
    }

    .loeschen {
    clear: both;
    }


    #navi {
    text-align: right; /* Die Menüleiste wird zentriert */
    }


    #navi li {
    list-style-type: none; /* Entfernen der Punkte der Listenelemente */
    width: 6rem; /* Breite der Listenelemente */
    text-align: center; /* Text wird im Block zentriert */
    display: inline-block; /* Damit sich die Menüs wie Inline-Elemente verhalten können, für horizontale Menüs */
    border-radius: 10px; /* Abrunden der Schaltflächen */
    }

    #navi li a {
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none; /* Unterstrich der Links wird weggenommen */
    font-weight: bold; /* In Fettschrift */
    display: block; /* Damit nicht nur der Text anklickbar ist, sondern die ganze Fläche = Schaltfläche */
    }

    #navi li:hover {
    background-color: #DBDCDC;
    }

    #navi a:hover {
    color: #000000;
    }


    .loeschen {
    clear: both;
    }

    #fotos {
    background-color: red;
    width: 100%;
    height: 20rem;
    margin-top: 1rem;
    }


    .gal {
    width: 23%; /* Dieser Kern wird mit 35% fürs Bild links reserviert */
    float: left;
    min-width: 200px;
    margin: 0 1% 0 1%;
    }

    .gal img { /* Das Bild umfasst den kompletten Platz des Platzhalters */
    width: 100%;
    height: auto;
    border: 4px solid #FFFFFF;
    }

    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: div des Menüs reagiert nicht auf position

    Hallo,

    dein HTML- und CSS-Code ist leider antik, um es mal freundlich auszudrücken. Den solltest du insgesamt aufräumen und überarbeiten. Meine Erklärungen werden dir deshalb wahrscheinlich nur bedingt weiterhelfen.

    Verstehe den Abstand vor dem ersten Button (Home) nicht
    Das li-Element ist bereiter als sein Inhalt. Durch das Zentrieren des Textes ( text-align: center ) hat er rechts und links jeweils innerhalb des li-Elements den gleichen Abstand, also auch links. Heißt: Das li-Element befindet sich links, sein Inhalt durch die Zentrierung hingegen nicht.

    bei "position: relative" reagiert right-Position wie links. Pickt nie bei "right:0px;" am rechten Rand (müsste vom "div id="wrapper"" kommen)
    Hier fehlt dir Grundlagenwissen. Bei position:absolute reagiert right anders als bei position:relative, da die betroffenen Elemente sich unterschiedlich verhalten.

    Bei position:relative geht right von der aktuellen Position aus. Gib mal right:-10rem ein und dann auch andere Werte. Dann solltest du das Verhalten erkennen. Zum Ausrichten am rechten Rand beziehungsweise rechts ist das weder gedacht noch geeignet. Dafür sind float oder aktuell Flexbox erdacht worden.

    Gruss

    MrMurphy

Ähnliche Themen

  1. Submit reagiert nicht
    Von Julian Rüßmann im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 11
    Letzter Beitrag: 13.04.2012, 17:45
  2. Maus reagiert manchmal nicht
    Von Kralle im Forum Off Topic und Quasselbox
    Antworten: 5
    Letzter Beitrag: 28.11.2008, 17:58
  3. Iframe reagiert nicht auf Größenänderung
    Von Scenic im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 25.09.2007, 12:46
  4. HP Scanner reagiert nicht
    Von Simple Plan im Forum Computer - Internet Forum
    Antworten: 0
    Letzter Beitrag: 26.08.2007, 13:57
  5. SVG-Bild reagiert nicht als Link
    Von SVG im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 4
    Letzter Beitrag: 14.12.2005, 18:50

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •