Gilles
Blogger
Hallo Leute,
Ich habe ein Problem mit dem Design einer Website.
jedoch ist das CSS schon recht komplex und die Verschachtelung auch. Jedoch denke ich, kann man das problem auf die gruppierungen beschränken.
Ich habe unter meiner eigentlichen Seite noch einmal einen "Kasten" der in etwa 52em groß ist. Wenn ich das Min-height aus dem Div mit der Klasse content rausnehme ist der kasten auch weg. Jedoch ist dann auch das Design kaputt, da der Content Bereich zu kurz ist.
Schaut es euch am besten mal selber an.
Vielelicht findet jemand von euch ja den Fehler. Würde mich sehr da rüber freuen :)
(Empfehle den Quelltext abzuspeichern und lokal damit rumzuprobieren. Denn alles auf einem Blick zu erfassen wird ein wenig schwer sein)
Vielen dank schon mal :)
Ich habe ein Problem mit dem Design einer Website.
jedoch ist das CSS schon recht komplex und die Verschachtelung auch. Jedoch denke ich, kann man das problem auf die gruppierungen beschränken.
Ich habe unter meiner eigentlichen Seite noch einmal einen "Kasten" der in etwa 52em groß ist. Wenn ich das Min-height aus dem Div mit der Klasse content rausnehme ist der kasten auch weg. Jedoch ist dann auch das Design kaputt, da der Content Bereich zu kurz ist.
Schaut es euch am besten mal selber an.
Vielelicht findet jemand von euch ja den Fehler. Würde mich sehr da rüber freuen :)
(Empfehle den Quelltext abzuspeichern und lokal damit rumzuprobieren. Denn alles auf einem Blick zu erfassen wird ein wenig schwer sein)
Vielen dank schon mal :)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tool</title>
</head>
<body>
<!-- Wrapper -->
<div class="main">
<!-- Head -->
<a class="headerLink" href="index.php"><h1 class="header">Tool</h1></a>
<form id="myForm" action="dahin.php" method="post">
<!-- List-Items -->
<div class="sidebar">
<h2>Head:</h2>
<ul id="liste" class="listeClass">
<li class='listeClass'><input type='checkbox' value='listItem_1' name='listItem[]' id='listItem_1'/><label for='listItem_1'>List Item 1</label></li>
</ul>
</div>
<!-- Content Teil mit Time-Formular -->
<div class="content">
<!-- Zeitformular -->
<div id="timeForm" class="timeForm">
<div class="formElement leftFloat">
<label title="Wenn ein Zeitraum gesetzt ist, wird Von und Bis nicht beruecksichtigt" for="preDefined">
Zeitraum:
</label>
<select id="preDefined" name="preDefined">
<option value="none">-</option>
<option value="tag">Anfang des Tages</option>
<option value="woche">Anfang der Woche</option>
<option value="monat">Anfang des Monats</option>
</select>
</div>
<div class="formElement leftFloat">
<label title="Datum im Format 'Jahr-Monat-Tag Stunden:Minuten' eintragen" for="from">
Von:
</label>
<input type="text" id="from" name="from" value="05.04.2010" />
<label title="Uhrzeit im Format 'Stunden:Minuten' eintragen" for="uhrfrom">
Uhrzeit:
</label>
<input type="text" id="uhrfrom" name="fromUhr" value="00:00" />
</div>
<div class="formElement leftFloat">
<label title="Datum im Format: 'Jahr-Monat-Tag (Stunden:Minuten)' eintragen" for="to">
Bis:
</label>
<input type="text" id="to" name="to" value="12.04.2010" /><input type="hidden" name="action" value="showGraphs" />
<label title="Uhrzeit im Format 'Stunden:Minuten' eintragen" for="uhrto">
Uhrzeit:
</label>
<input type="text" id="uhrto" name="toUhr" value="13:00" />
</div>
<div>
<br/>
<input id="submitButton" class="formButton" type="submit" value="OK" />
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Code:
/* ############## */
/* Allgemeine Style-Sachen */
/* ############## */
body {
margin: 0;
padding: 0;
background-color: #BCCDDE;
font-family: "Trebuchet MS";
}
h2 {
font-size: large;
font-weight: normal;
}
.leftFloat {
float: left;
}
.hidden {
visibility: hidden;
}
/* ########## */
/* Website Struktur */
/* ########## */
/* Wrapper */
.main {
min-height: 60em;
width: 65em;
margin: 4em auto auto auto;
}
/* Sidebar */
.sidebar {
height: 50em;
width: 7.5em;
padding: 1.0em 0.0em 0.5em 0.0em;
margin-top: 1em;
margin-left: 0.4em;
float: left;
overflow-y: scroll;
border-top: 1px solid black;
border-right: 1px dashed black;
border-bottom: 1px solid black;
background-color: #99AABB;
}
/* Content */
.content {
min-height: 52em;
padding: 1.0em 0.0em 0.5em 8em;
border: solid black 0.1em;
border-top: none;
background-color: #99AABB;
-moz-border-radius-bottomright: 2em;
-moz-border-radius-bottomleft: 2em;
}
/* Sidebar innen */
.sidebar h2 {
padding-left: 0.4em;
color: #ffffff;
text-decoration: underline;
}
.listeClass {
padding-left: 0.7em;
}
.listeClass li {
list-style: none;
margin-bottom: 0.1em;
padding-bottom: 0.3em;
font-size: large;
border-right: none;
border-bottom: 0.1em dashed black;
}
.listeClass li input {
float:left;
}
.listeClass li label {
display: block;
cursor: pointer;
}
.listeClass a {
display: block;
color: black;
}
.listeClass .active:hover {
color: #DDEE22;
}
/* Header */
.header {
height: 1.8em;
text-align: center;
margin-bottom: 0;
padding-top: 0.4em;
font-family: "Agency FB","Arial","Sans-serif";
color: white;
border-bottom: none;
border: solid 0.05em black;
background-color: #778899;
background: url("../../images/menubg.jpg") repeat-x #88A6C0;
-moz-border-radius-topleft: 2em;
-moz-border-radius-topright: 2em;
}
.main .headerLink {
text-decoration: none;
cursor: pointer;
}
/* Zeit-Formular */
.timeForm {
width: 39em;
height: 6em;
padding: 0.1em 0 0.5em 0.5em;
margin-bottom: 2em;
border: 0.1em black solid;
background: url("../../images/formbg.jpg") repeat-x #E8EFF9;
}
/* Formular-Elemente */
.formElement {
margin-right: 1em;
}
.formButton {
background-color: #BCCDDE;
border-color: #DDCCED;
}
.formElement label {
display: block;
}
.formElement input[type = text], .formElement select {
background-color: #f2f2f2;
}
.formElement input[type = text]:focus, .formElement select:focus {
background-color: #ffffff;
outline: 1px solid #4477ff;
}
