Content-DIV soll Größe beim Fensterresize nicht ändern

Fallenzer · 14.05.2021

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="https://fonts.googleapis.com/css?family=Press Start 2P">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kelly 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.

basti1012 · 15.05.2021

Mach dich mal mit Flexbox vertraut.
Vergiss Float
Poste nächstes Mal bitte ein Link oder erstelle ein Beispiel bei codepen.io mit den original Logo (Bild).

Auf de schnelle könnte es dann so aussehen

Link zur Lösung

Fallenzer · 15.05.2021

Guten Tag,
@basti1012: Vielen Dank, ich werde es austesten... Eine kleine Frage noch, sind px-Angaben tatsächlich notwendig, weil ich arbeite eigentlich meist nur mit % und vw bzw. vh...
Wie ist die px-Einheit denn dann definiert? Als jeder Pixel des Bildschirms? Also wenn das der Fall wäre, sei bei einer Auflösung von 3200x1800 1px der 3200ste Bruchteil von der Länge oder der 1800ste bruchteil von der Höhe? Oder verstehe ich es komplett falsch?

scatello · 15.05.2021

Fallenzer schrieb:
Oder verstehe ich es komplett falsch?

Leider ja. Beispiel:

width: 100px;

Damit wird eine Breite von 100 Pixel angegeben, völlig unabhängig von der Bildschirmauflösung oder Fenstergröße des Browsers. Es bleiben immer 100px.

Fallenzer · 15.05.2021

Gut, ich gebe zu, ich erscheine mit den Fragen etwas dämlich... Aber orientiert sich die Pixelgröße immer an dem ursprünglichen Pixel (also Bildpunkt)? Ich weiß nur, dass px eine Grundeinheit ist und ebenfalls zu den absoluten Größenangaben in CSS gehört...

scatello · 15.05.2021

Fallenzer schrieb:
Aber orientiert sich die Pixelgröße immer an dem ursprünglichen Pixel (also Bildpunkt)?

Woran sonst?

Fallenzer · 15.05.2021

Gut, ich habe jetzt ein Codepen erstellt: https://codepen.io/Fallenzer/pen/yLMJNGR

jetzt treten folgende Probleme auf:
- das image wird zwar kleiner, überschneidet aber die rechte Spalte
- das Image kann nur in eine Richtung verkleinert werden (wenn ich das Fenster nach oben verkleinere)
- der Text auf der rechten Seite erscheint nicht unter-, sondern nebeneinander

könnt ihr mir einen Ausweg zeigen, gegebenenfalls mit Codebeispiel? Vielen Dank...

basti1012 · 16.05.2021

Kannst du mal eine Grafik zeichnen wie das aussehen soll?
Ich probier es trotzdem mal.
Ersten was ist das

Code:

            <div id="left">
                <img class="fadeinlogo" src="https://i.ibb.co/72f7pGS/Logo-not-original.jpg"></a>
onmousedown="alert('This image is copyrighted!'); return false;"/>
            </div>

Fällt dir da was auf?
Wenn du so ein Schwachsinn einbauen willst (meine Meinung) dann mach es gleich richtig.

Javascript:

<script>
var nocopy=document.querySelectorAll('.nocopy');
nocopy.forEach(function(d){
d.addEventListener('click',function(){
alert(d.alt+' \nThis image is copyrighted!');
})
})
</script>

So haben jetzt alle Bilder mit der Klasse "nocopy" den Hinweis.
Denk dran , jedes <img brauch ein alt="" Attribute.
Das hier

Code:

h1 {
    height: 0vw;
    }

Ist Blödsinn, da gibst du mir hoffentlich recht
Ich weiß nicht, was du da genau animieren willst , deswegen habe ich da nichts dran gemacht .
Ich habe aber deine CSS gekürzt , weil den ganzen Webkit Mist brauch kein Mensch.
Link zur Lösung

Guck mal, ob das ungefähr so hinkommt wie du es haben wolltest