0
Ich habe Probleme mit den wahrscheinlich einfachen Floats. Ich habe drei nebeneinander liegende Formulare aneinandergereiht (ich muss noch eine Möglichkeit finden, sie relativ zur Auflösung eines anderen zu skalieren) und jeder zeigt den Text einmal erweitert an. Das Problem besteht darin, dass der Inhaltsbereich der Seite nur die Floats enthält, also nicht bis zum Ende der Seite expandiert. Wie ist der beste Weg, dies zu erreichen? Es kann nützlich sein, die Seite here zu betrachten.Erweiterter Inhaltsbereich mit nur schwebenden Elementen
Hoffentlich hilft dieser Code mein Problem zu erklären:
HTML + Javascript:
<!DOCTYPE html>
<html lang=eng>
<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Slabo+27px">
<link href="../normal.css" rel="stylesheet" type="text/css" title="normal" />
<link rel="alternate stylesheet" type="text/css" href="../nightview.css" title="nightview">
<title>CLIO</title>
</head>
<body>
<div id="wrap">
<div style="text-align: center;">
<button type="submit" onclick="switch_style('normal');return false;" name="theme" value="Standard View" class="btnNormal">Standard View</button>
<button type="submit" onclick="switch_style('nightview');return false;" name="theme" value="Night View" class="btnNightview">Night View</button>
</div>
<header id="header">
<div class="container">
<a href="../index.html"><h1>Chrysostomus Latinus in Iohannem Online (CLIO)</h1></a>
<nav id="nav">
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../about.html">ABOUT</a></li>
<li><a href="../transcriptions.html">TRANSCRIPTIONS</a></li>
<li><a href="../contact.html">CONTACT</a></li>
<li><a href="../login.html">LOGIN</a></li>
</ul>
</nav>
</div>
</header>
<div class="content">
<div class="ex">
<form action="#" method="post" id="demoForm">
<fieldset>
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="TEXT">Montfaucon</option>
</select>
<br>
<p>
<input type="button" id="showTxt" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
</div>
<div class="ey">
<form action="#" method="post" id="demoForm2">
<fieldset>
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="TEXT">Montfaucon</option>
</select>
<br>
<p>
<input type="button" id="showTxt" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
</div>
<div class="ez">
<form action="#" method="post" id="demoForm3">
<fieldset>
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="TEXT">Burgundio</option>
<option value="text">Montfaucon</option>
</select>
<br>
<p>
<input type="button" id="doLoop" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
</div>
<div class="im">
<img src="greek.jpg" alt="Greek Translation" height="400" width="400">
</div>
</div>
<div class="compfooter"><br>
<a href="homily2.html">NEXT</a>
<br>
<br>
</div>
</div>
</body>
<script>
(function() {
// get references to select list and display text box
var sel = document.querySelectorAll('#scripts');
var el = document.querySelectorAll('#display');
var buttons = document.querySelectorAll('input[type="button"');
sel.forEach(function(elem, i){
buttons[i].onclick = function(e){
el[i].value = elem.value;
};
})
}());
</script>
CSS:
.content {
height:relative;
width: 96.9%;
background: white;
background:rgba(255, 255, 255, 0.99);
padding: 1.56%;
font-family: 'Slabo 27px', serif;
font-size: 1.675em;
font-size: 1.5vw;
line-height: 100%;
margin-bottom: 0.9em;
}
.ex
{
display:inline-block;
font-family: 'Slabo 27px', serif;
float: left;
}
.ey
{
display:inline-block;
font-family: 'Slabo 27px', serif;
float: left;
}
.ez
{
display:inline-block;
font-family: 'Slabo 27px', serif;
float: left;
}
.im
{
float: left;
}
form{
display:inline-block;
width: 350px;
font-family: 'Slabo 27px', serif;
font-size: 0.575em;
float: left;
}
.compfooter {
position: relative;
right: 0;
bottom: 0;
left: 0;
margin-top: -3 em;
padding: 0%;
background-color: #222438;
text-align: center;
color: white;
margin: 0 auto;
width: 100%;
font-size: 1.5vw;
clear: both;
z-index: 10;
height: 30%;
}
.compfooter a:link {
text-decoration: none;
color: white;
}
.compfooter a:visited {
text-decoration: none;
color: white;
}
.compfooter a:hover {
text-decoration: none;
color: white;
}
.compfooter a:active {
text-decoration: none;
color: white;
}
select
{
display:auto;
cursor:pointer;
font-family: 'Slabo 27px', serif;
}
#close {
float:right;
display:inline-block;
padding:0px 2px;
background:#fff;
cursor:pointer;
}
#close:hover {
float:right;
display:inline-block;
padding:0px 5px;
background:#ccc;
color:#fff;
}
IDs müssen eindeutig sein, ich empfehle dringend, IDs wie '# display',' # close' und '# scripts' in Klassen zu ändern. Außerdem fehlt eine Klammer 'var buttons = document.querySelectorAll ('input [type =" button "];' Niemals gesehen oder gehört von einem solchen Wert 'height: relative;' – zer00ne
'font-family:' Slabo 27px ' , Serif; '? versuchen Sie: 'font: 27px Slabo, serif;' Dadurch: 'font-size: 1.675em; font-size: 1.5vw; 'die zweite Eigenschaft überschreibt die erste ... Btw funktioniert vw Einheiten gut mit Schriftarten? Ich habe es nie in Erwägung gezogen. – zer00ne
'display: auto' existiert nicht. Ich habe dieses Kaninchenloch schon einmal im Stich gelassen. Mein Rat ist, dass Sie mit CSS beginnen und keine Floats verwenden, sie sind alt und empfindlich. Benutze flexbox es ist dein Freund. – zer00ne