R
rechords25
New member
- Beiträge
- 2
- Punkte Reaktionen
- 0
Hallo!
Ich bin ziemlicher HTML/CSS-Anfänger und möchte in meinem HTML-Dokument ein DIV-Element auf der rechten Bildschirmseite quadratisch haben, d.h. es soll die in Prozent angegebene Höhe in Pixeln per JS abfragen und die Breite dann auf die passende Pixelzahl einstellen. Das klappt auch soweit. Jetzt soll aber der zweite DIV-Bereich den Rest des Bildschirms links (die margin's der beiden DIVs beachtend, also nicht mitgezählt) ausfüllen. Ich habe schon sehr lange dran getüftelt, aber die Lösung nicht gefunden. Wäre schön, wenn ihr mir helfen könntet!
Hier die HTML und style-Datei:
Ich bin ziemlicher HTML/CSS-Anfänger und möchte in meinem HTML-Dokument ein DIV-Element auf der rechten Bildschirmseite quadratisch haben, d.h. es soll die in Prozent angegebene Höhe in Pixeln per JS abfragen und die Breite dann auf die passende Pixelzahl einstellen. Das klappt auch soweit. Jetzt soll aber der zweite DIV-Bereich den Rest des Bildschirms links (die margin's der beiden DIVs beachtend, also nicht mitgezählt) ausfüllen. Ich habe schon sehr lange dran getüftelt, aber die Lösung nicht gefunden. Wäre schön, wenn ihr mir helfen könntet!
Hier die HTML und style-Datei:
HTML:
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="w2.jpg">
<link href='stylee.css' rel='stylesheet' type='text/css'>
<title> Toller Titel </title>
</head>
<body onload="resizerL(); resizerR()" onresize="resizerL(); resizerR()">
<div class="top_box">
</div>
<div class="bott_box">
<div class="sq_box" id="left1">
</div>
<div class="rest_box" id="right1">
</div>
</div>
<script type="text/javascript">
function resizerL() {
left1 = document.getElementById('left1');
var hoeheL1 = document.getElementById("left1").offsetHeight;
var breiteL1 = hoeheL1;
left1.style.width = breiteL1+'px';
}
</script>
<!-- Bis hier funktioniert alles...-->
<script>
function resizerR() {
right1 = document.getElementById('right1');
left1 = document.getElementById('left1');
var bildschirmbreite = screen.width;
var l1_ml = left1.style.marginLeft;
var l1_h = left1.style.width;
var l1_mr = left1.style.marginRight;
var r1_ml = right1.style.marginLeft;
var r1_h = right1.style.width;
var r1_mr = right1.style.marginRight;
var rechnung = bildschirmbreite - l1_ml - l1_h - l1_mr - r1_ml - r1_h - r1_mr;
right1.style.width = rechnung +'px';
}
</script>
<!--Das 2. Script-Abteil macht Probleme-->
</body>
</html>
--CSS-Datei--
html {
overflow-y:scroll;
}
head {
height:100%;
}
body {
position:relative;
height:100%;
font-family:Arial;
background-color:#181818;
}
.top_box {
height:15%;
width:100%;
background-color:#fb3344;
}
.bott_box {
height:85%;
min-width:100%;
bottom:0%;
position:relative;
}
.sq_box {
position:relative;
height:90%;
width:41%;
top:5%;
margin-left:1.5%;
margin-right:1.5%;
background-color:#252525;
float:left;
}
.rest_box {
position:relative;
height:90%;
width:50%;
top:5%;
margin-left:1.5%;
margin-right:1.5%;
background-color:#404040;
float:right;
}
p, h1, a, ul {
color:#FFFFFF;
}