Hallo zusammen,
habe mich hier mal angemeldet, weil ich mehrere CSS-Probleme habe und mir ein Kollege dieses Forum empfohlen hat. ich hoffe mir kann hier jemand weiter helfen!
1. Problem - Formulare:
Ich habe folgende CSS-Definitionen für die Formulare meiner Seite (mit Beispiel!):
HTML-Code:
<!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>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {height: 100%;}
body {
font-family: Verdana,Tahoma,Arial,Sans-Serif;
font-size: 11px;
}
button, label, select, input[type=checkbox], input[type=radio], input[type=submit] {cursor: pointer;}
button, input, select, textarea {
border: 1px solid #000000;
background-color: #CCFFFF;
color: #000000;
}
input:focus, select:focus, textarea:focus
{
outline: 1px solid #FF0000;
background-color: #FFFFFF;
color: #000000;
}
form br {
clear: both;
font-size: 0;
}
fieldset {
border: 2px solid #FF0000;
padding: 4px;
}
legend {font-weight: bold;}
label.left {
float: left;
width: 128px;
text-align: right;
}
button.right, input.right, select.right, textarea.right {
display: block;
width: 190px;
margin-left: 134px;
}
textarea.right {
height: 96px;
overflow: hidden;
}
form#login {
width: 240px;
margin: 0 auto;
border: 1px solid #FF0000;
padding: 4px 8px 8px 8px;
_padding-top: 0; /* IE only */
}
form#login label.left {width: 88px;}
form#login input.right, form#login select.right, form#login textarea.right {
width: 144px;
margin-left: 94px;
}
.button {
float: right;
width: auto;
margin-left: 16px;
}
</style>
</head>
<body>
<form id="login" method="post" action="<?php echo INDEXURL; ?>">
<label class="left" for="userinp">Benutzername:</label>
<input class="right" id="userinp" title="Geben Sie hier Ihren Benutzernamen ein!" type="text" name="username" value="" />
<br />
<label class="left" for="passwdinp">Passwort:</label>
<input class="right" id="passwdinp" title="Geben Sie hier Ihr Passwort ein!" type="password" name="password" />
<br />
<input type="hidden" name="reqsection" value="" />
<button class="button" type="submit" name="login" value="login">Login</button>
<button class="button" type="reset" name="clear" value="clear">Leer</button>
<br />
</form>
</body>
</html>
Schaut Euch das mal bitte in verschiedenen Browsern an. Die Abstände zwischen Labeln und/oder Inputs/Buttons scheinen da ja komplett anders zu sein, obwohl ich alles (*) auf 0 setze! Wie bekomme ich es hin, dass es auf allen Browsern relativ gleich aussieht?
2. Problem - CSS Tooltips:
Ich will CSS-Tooltips in einer Tabelle realisieren, der IE6 scheint da aber nicht mit zu spielen. Mein Markup:
HTML-Code:
<!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>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {height: 100%;}
body {
font-family: Verdana,Tahoma,Arial,Sans-Serif;
font-size: 11px;
}
a.tooltip {
position: relative;
text-decoration: none;
cursor: default;
}
a.tooltip:hover {
background-color: transparent;
color: #FF0000;
}
a.tooltip span.pop {display: none;}
a.tooltip:hover span.pop {
z-index: 100;
display: block;
position: absolute;
border: 2px solid #000000;
background-color: #CCFFFF;
color: #000000;
font-size: 11px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
</tr>
<tr>
<td>
<a class="tooltip" href="#">Zeile 1
<span class="pop">
Popup-Text
</span>
</a>
</td>
<td>Zeile 1</td>
</tr>
<tr>
<td>Zeile 2</td>
<td>Zeile 2</td>
</tr>
</table>
</body>
</html>
Was muss ich ändern, damit er auch im IE6 die Popups anzeigt? Mache ich das außerhalb einer Tabelle funktioniert es tadellos!
3. Problem - CSS Layout:
Ich möchte ein CSS-Layout bauen, dass folgende Bedingungen erfüllt (erscheint mir aber fast unmöglich):
1. Zentriertes Layout mit einer festgelegten maximalen- und minimalen Breite UND Höhe, z.B. für Auflösungen ab 1024px.
2. Selbst bei maximaler Größe, möchte ich überall einen margin, damit der Rest von einem Hintergrundbild immer sichtbar ist. (Bedeutet, die komplette Seite muss sowohl horizontal, als auch vertikal zentriert werden!)
3. Seite besteht aus Banner, Navigation (beides top), Left Menu und Right Menu (beides nebeneinander unter der Navigation). Darunter soll noch ein Footer folgen.
4. Sobald die maximale Gesamthöhe erreicht ist und der Inhalt meines Right Menus (der eigentliche Content) zu groß für den div wird, soll mittels overflow: auto; ein Scrollbalken eingeblendet werden.
HTML-Code:
<!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>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {height: 100%;}
body {
font-family: Verdana,Tahoma,Arial,Sans-Serif;
font-size: 11px;
}
div#container {
min-width: 994px;
width: 96%;
min-height: 398px;
margin: 0 auto;
border: 4px solid #000000;
background-color: #000000;
color: #FFFFFF;
text-align: left;
}
div#header {
height: 55px;
padding: 16px;
background-color: #FF0000;
color: #FFFFFF;
}
div#navigation {
height: 27px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
div#left {
float: left;
width: 256px;
border-top: 8px solid #FF0000;
}
div#content {
min-height: 591px;
height: auto !important;
height: 591px;
margin-left: 256px;
border-left: 4px solid #FF0000;
padding: 12px;
background-color: #FFFFFF;
color: #000000;
}
div#footer {
clear: left;
height: 15px;
border-top: 2px solid #000000;
padding: 4px;
background-color: #FF0000;
color: #FFFFFF;
text-align: right;
}
</style>
</head>
<body>
<div id="distance"></div>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="left"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
Mir ist bewusst, dass min-width und max-width bei IE6 nicht funktionieren, aber für beides gibt es wohl CSS-Workarounds. Die Mischung aus %-Angaben und absoluten Pixelangaben verbaselt da immer alles. Obiges Beispiel ist noch ziemlich abgespeckt, aber vielleicht kann mir ja mal jemand was bauen!
Mir ist bewusst, dass das sehr viele Fragen für den ersten Post sind, aber ich hab wirklich schon sehr viel versucht und hoffe nun, dass mir hier weiter geholfen werden kann!
Viele Grüße!
