Auf Thema antworten

Beitrag

[QUOTE="Fallenzer, post: 11736, member: 3273"]
Guten Tag, verehrte Community,
ich programmiere gerade eine Website, wo auf der linken Seite (50%) ein Logo vorhanden sein soll und auf der rechten Seite (ebenfalls 50%) das inhaltsverzeichnis existiert.
Zunächst sah dies sehr gut aus, aber nach der Veränderung der Fenstergröße verschiebt sich der Inhalt der rechten Seite, und nicht der linken Seite mit dem Logo...
Hier der HTML-Code:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link type="text/css" rel="stylesheet" href="[URL]https://fonts.googleapis.com/css?family=Press[/URL] Start 2P">
        <link type="text/css" rel="stylesheet" href="[URL]https://fonts.googleapis.com/css?family=Kelly[/URL] Slab">
        <link type="text/css" rel="stylesheet" media="only screen and (orientation:landscape)" href="style.css" />
    </head>
    <body>
        <div id="container">
            <div id="logodiv">
                <img id="logoimage" src="Logo1.jpg"/>
            </div>
            <div id="sidebar">
                <h1>Mein Titel</h1>
                ...
            </div>
        </div>
    </body>
</html>

Hier der CSS-Code:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: black;
    overflow: hidden;
}

/*---Full Website Container----*/

#container {
    margin:auto;
    width:100%;
}

/*---Logo Container------------*/

#logodivfull {
    float: left;
    width: 33%;
    margin-top: -1%;
    margin-left: -1%;
}

#logodiv {
    /*position: relative;*/
    float:left;
    width:50%; 
    height:100%;
    object-fit: cover;    
}

#logodiv img {
    height: 100%;
    width: auto;
    margin-top: -1%;
    margin-left: -1%;
    object-fit: cover;
}

/*---Actionbar container*/

#sidebar {
    float:right;
    width:50%;
    background:black;
    height:auto;
}

/*---Kind of Text--------------*/

h1 {
    height: 0vw;
    text-align: left;
    font-family: "Press Start 2P";
    font-size: 4vw;
    color: #FF6A00;
}

/*---Full Website Container----*/

#container {
    clear: both;
}

Ich würde mich für schnelle Rückmeldung freuen... Optimierungen wären gegebenenfalls auch hilfreich...
PS: Relative Größenangaben wären bei der Website passender, so wäre meine Meinung.

Vielen Dank.
[/QUOTE]

Authentifizierung