Auf Thema antworten

Beitrag

[QUOTE="Mirko, post: 8037, member: 1593"]
Hallo zusammen,

ich arbeite zurzeit an meiner ersten selbst programmierten Website und bis jetz lief alles problemfrei.
Nun ist mir allerdings aufgefallen, dass sich der gesamte  Content-Bereich nach oben verschiebt, wenn ich das Browserfenster  verkleinere bzw. in die Smartphoneansicht wechsle.
Die Navigation und das Logo verschwinden sogar komplett aus dem Sichtbereich.

Das hier ist mein Code vielleicht fällt ja jemandem auf was ich falsch gemacht oder vergessen habe.

[CODE]
<!DOCTYPE HTML>

<html>
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="expires" content="0">
        <meta name="robots" content="index, follow">
        <meta name="author" content="xxxxxxxx">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,">
        <title>xxxxxxxxxxxx</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
        
        <div id="wrapperoutside">
        
        <img id="imgHeader" src="Images/Header_1.jpg">
        
        <div id="wrapper">
            
            <header>
                <div id="logo">
                    <a href="index2.html" title="xxxxxxxxxxxx">
                    <img src="Images/Logo.jpg">
                </div>
                
                <nav class="nav">
                    <ul>
                        <li><a href="index2.html" id="active">xxxxxxxxxxxx</a></li>
                        <li><a href="index2.html">xxxxxxxxxxxx</a></li>
                        <li><a href="index2.html">xxxxxxxxxxxx</a></li>
                        <li><a href="index2.html">xxxxxxxxxxxx</a></li>
                    </ul>
                </nav>
                <h2>xxxxxxxxxxxx</h2>
            </header>
            
            <article class="row">
                <div class="col-6">
                    <img class="imgarticle" src="Images/Article_1.jpg">
                    <h3>xxxxxxxxxxxx</h3>
                    <hr>
                    <p>xxxxxxxxxxxx</p>
                    <h5>Weitere Informationen >><a href="index2.html" title="weitere Informationen"></a></h5>
                </div>
                <div class="col-6">
                    <img class="imgarticle" src="Images/Article_2.jpg">
                    <h3>xxxxxxxxxxxx</h3>
                    <hr>
                    <p>xxxxxxxxxxxx</p>
                    <h5>Weitere Informationen >><a href="index2.html" title="weitere Informationen"></a></h5>
                </div>
            </article>
            
            <article class="row">
                <div class="col-6">
                    <img class="imgarticle" src="Images/Article_3.jpg">
                    <h3>xxxxxxxxxxxx</h3>
                    <hr>
                    <p>xxxxxxxxxxxx</p>
                    <h5>Weitere Informationen >><a href="index2.html" title="weitere Informationen"></a></h5>
                </div>
                <div class="col-6">
                    <img class="imgarticle" src="Images/Article_4.jpg">
                    <h3>xxxxxxxxxxxx</h3>
                    <hr>
                    <p>xxxxxxxxxxxx</p>
                    <h5>Weitere Informationen >><a href="index2.html" title="weitere Informationen"></a></h5>
                </div>
            </article>
            
            <footer>
                <div id="footerbg">
                <hr class="hrfooter">
                <section class="row">
                    <div class="col-4">
                        <h4>xxxxxxxxxxxx</h4>
                        <br>
                        <p>xxxxxxxxxxxx
                        <br>xxxxxxxxxxxx
                        <br>
                        <br>xxxxxxxxxxxx
                        <br>xxxxxxxxxxxx
                        <br>xxxxxxxxxxxx</p>
                    </div>
                    <div class="col-4">
                        <br>
                        <br>
                        <br>
                        <br>
                        <p>xxxxxxxxxxxx
                        <br>xxxxxxxxxxxx
                        <br>
                        <br>xxxxxxxxxxxx
                        <br>xxxxxxxxxxxx
                        <br>xxxxxxxxxxxx</p>
                    </div>
                    <div class="col-4">
                    </div>
                </section>
                <hr class="hrfooter">
                KONTAKT | IMPRESSUM
                </div>
            </footer>
            
        </div>
        </div>      
    </body>
    
</html>
[/CODE][CODE]

/* General Style */

body    {
        background: #f0f0f0;
        font-size: 100%;
        margin: 0em;
        padding: 0em;
        }
#wrapperoutside {
        max-width: auto;
        height: 100%;
        margin: 0px auto;
        position: relative;
        z-index: 0;
        display: block;
        }
#wrapper    {
        max-width: 80em;
        margin: 0px auto;
        background-color: #ffffff;
        position: relative;
        z-index: 30;
        display: block;
        }
h1      {
        font-size: ;
        line-height: ;
        font-family: ;
        font-weight: ;
        color: ;
        text-align: ;
        margin-top: ;
        z-index: ; 
        position: ;
        }
h2      {
        font-size: 1.8em;
        line-height: 1em;
        font-family: Times;
        font-weight: 300;
        color: #000000;
        background-color: #ffffff;
        padding-top: 40px;
        padding-bottom: 100px;
        margin-top: 0px;
        text-align: center;
        position: relative;
        z-index: 8;
        }
h3      {
        font-size: 1.5em;
        line-height: 1em;
        font-family: Times;
        font-weight: 200;
        color: #000000;
        }
h4      {
        font-size: 1.1em;
        line-height: 1em;
        font-family: Helvetica;
        font-weight: 500;
        color: #000000;
        margin-top: -10px;
        }
h5      {
        font-size: 0.8em;
        line-height: 1em;
        font-family: Helvetica;
        font-weight: 400;
        color: #99cccc;
        }
p       {
        font-size: 16px;
        line-height: 1.2em;
        font-family: Helvetica;
        font-weight: 300;
        color: #000000;
        margin: 0 auto;
        text-align: justify;
        }
ul      {
        margin: 0px;
        padding: 0px;
        }
li      {
        list-style: square;
        font-size: 1em;
        line-height: 2em;
        font-family: Helvetica;
        font-weight: 400;
        color: #000000;
        margin: 1.4em;
        }
a       {
        text-decoration: none;
        }
hr      {
        margin-top: 0px;
        margin-bottom: 20px;
        height: 3px;
        background-color: #000000;
        }
.col-1 {
        width: 8.33%;
        }
.col-2 {
        width: 16.66%;
        }
.col-3 {
        width: 25%;
        }
.col-4 {
        width: 33.33%;
        }
.col-5 {
        width: 41.66%;
        }
.col-6 {
        width: 50%;
        }
.col-7 {
        width: 58.33%;
        }
.col-8 {
        width: 66.66%;
        }
.col-9 {
        width: 75%;
        }
.col-10 {
        width: 83.33%;
        }
.col-11 {
        width: 91.66%;
        }
.col-12 {
        width: 100%;
        }

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

/* Header */

#logo   {
        top: -800px;
        width: 230px;
        height: 170px;
        background-color: #ffffff;
        position: relative;
        z-index: 6;
        }
#imgHeader {
        width: 100%;
        height: auto;
        max-width: 100%;
        position: relative;
        z-index: 5;
        }

/* Navigation */

nav     {
        display: block;
        width: 100%;
        height: auto;
        background-color: #ffffff;
        text-align: center;
        margin: 0 auto;
        margin-top: -460px;
        margin-bottom: ;
        padding-bottom: 50px;
        position: relative;
        z-index: 10;
        }
nav ul  {
        display: block;
        }
nav ul li   {
        display: inline;
        margin: 0em 4.6em 0em 4.6em;
        }
nav ul li a {
        color: #000000;
        font-size: 1.5em;
        line-height: 3em;
        padding: 1em 1em 0.2em 1em;
        transition: background 0,2s;
        -webkit-transition: background 0,2s;
        }
nav ul li a: hover  {
        background: #f3f3f3;
        border-bottom: 0.15em solid #000000;
        }
#active {
        border-bottom: 0.15em solid #000000;
        }

[/CODE]Falls jemandem noch andere Fehler auffallen bin ich auch für Korrekturen offen [IMG]https://webdesign-forum.net/images/smilies/biggrin.gif[/IMG]  ist wie gesagt meine erste Website.

Danke schonmal im vorraus!
[/QUOTE]

Authentifizierung