div des Menüs reagiert nicht auf position

webdesignversuch

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

<!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>

Alles anzeigen

Zitat

* {
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;
}

Alles anzeigen

MrMurphy

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.

Zitat

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.

Zitat

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

Tags