• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Position korrigieren!

Gartoon

Gartoon

Neues Mitglied
Abend,

ich versuche was zu basteln aber manchmal ist es nicht so was ich erwartet hab. Ich hab einmal ein Top Navigator wo man rumklicken kann und einmal body. Was ich leider nicht hin bekomme ist meine Top-Navigator auf vordergrund legen! Also es ist auf Vordergrund aber wenn man Top Navigator guckt ist hintergrund grau, wobei ich das hintergrund direkt bild zusammen.
HTML: 
<?php

?>
<script>

</script>
<link rel="stylesheet" href="css/alternatereality.css">
<html>
    <head>
        <title>Alternate Reality</title>
    </head>
    <body>
        <div class=top-nav>
            <li><p>About us</p></li>
            <li><p>Members</p></li>
            <li><p>Progress</p></li>
            <li><p>Application form</p></li>
            <li style="float: right;"><p>Raider.io</p></li>
            <li style="float: right;"><p>WoWProgress</p></li>
            <li style="float: right;"><p>Discord</p></li>
        </div>
        <div>
            <div class=seite>
                <img src="pictures/background.jpg" alt="background" class=seite></img>
            </div>
            <div class=seite>
                <h>about us</h>
            </div>
            <div class=seite>
                <h>Members</h>
            </div>
            <div class=seite>
                <h>progress</h>
            </div>
            <div class=seite>
                <h>Application Form</h>
            </div>
        </div>
    </body>
</html>
CSS
CSS: 
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
p,h{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-transform: uppercase;
}
li{
    list-style: none;
    display: inline-block;
    margin: 10px;
    padding: 3px;
}
.top-nav li p:hover{
    color: orange;
    cursor: pointer;
    transition-duration: 0.2s;
}
body{
    background-color: #353535;
    padding: 0;
    margin: 0;
}
.seite{
    width: 100%;
    height: 100%;
}
.top-nav{
    position: sticky;
    top: 0;
    opacity: 0.2;
}
.top-nav:hover{
    background-color: black;
    transition-duration: 0.5s;
    opacity: 1;
}
Hier nochmal in Bilder, falls jemand nicht richtig verstanden hat o_O
Erwartung:
1534022946528.png
Wirklichkeit:
unknown.png


**UPDATE**

Ich hab mal rumgespielt und hab es beinah hingegrickt. Nur das Problem, warum ist das Bild enger geworden?
Bild:
1534024557683.pngHTML:
HTML: 
<?php

?>
<script>

</script>
<link rel="stylesheet" href="css/alternatereality.css">
<html>
    <head>
        <title>Alternate Reality</title>
    </head>
    <body>
        <div class=top-nav>
            <li><p>About us</p></li>
            <li><p>Members</p></li>
            <li><p>Progress</p></li>
            <li><p>Application form</p></li>
            <li style="float: right;"><p>Raider.io</p></li>
            <li style="float: right;"><p>WoWProgress</p></li>
            <li style="float: right;"><p>Discord</p></li>
        </div>
        <div style="position:absolute;top:0px;z-index:-1;">
            <img src="pictures/background.jpg" alt="background" class=seite></img>
        </div>
    </body>
</html>
CSS
CSS: 
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
p,h{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-transform: uppercase;
}
li{
    list-style: none;
    display: inline-block;
    margin: 10px;
    padding: 3px;
}
.top-nav li p:hover{
    color: orange;
    cursor: pointer;
    transition-duration: 0.2s;
}
body{
    background-color: #353535;
    padding: 0;
    margin: 0;
}
.seite{
    width: 100%;
    height: 100%;
}
.top-nav{
    position: sticky;
    top: 0;
    opacity: 0.5;
}
.top-nav:hover{
    background-color: black;
    transition-duration: 0.5s;
    opacity: 1;
}

@media screen and (min-width: 1000px) {
    body {
    }
}
 
Zuletzt bearbeitet:
Werbung:
Naja,du könntest aber noch paar sachen ändern.
Zb class Seite ,brauchst du nicht .Mach das Bild als Background url in Body rein.
Das Element "h" gibt es meines wissens nicht.Obwohl man bei html5 sich ja eigene bauen darf.

Warum nutzt du Inline styls wenn du doch nee Css nutzt ?
body margin und padding 0 kann auch weg weil du es ganz am Anfang auf alle Elemente angewendet hast.
Das Element <li> bekommt eigentlich noch das parent <ul>
Zum Schluß sollte man wissen das ein <img> Kein Block Element ist
Immer wenn Sie ein Bild einfügen, nimmt es nur die Breite, die das Bild ursprünglich hatte.Sie können jedes andere html Element daneben hinzufügen und Sie werden sehen, dass es das erlaubt. Das macht das Bild zu einem Inline-Element.
Zum Vergrößern anklicken....
und desween auch kein </img> brauch weil img ist ein selbst schliesendes Element.
Es kommt drauf an welchen doctyp du nutzt ?
In XHTML müssen alle Elemente geschlossen sein. In HTML sind einige (wie <img> ) optional.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben