✔ Layout mit 100% height und width

Maik · 13. Februar 2007

Jaja, Dominik dreht schon mal gerne "im laufenden Betrieb" an dem einen oder anderen Schräubchen - ohne Rücksicht auf Verluste.

alex130 · 16. Februar 2007

Hi
Das mit den 100% hab ich jetzt schon geschafft, danke trotzdem aber jetzt habe ich bei einem anderen Layout wieder ein problem, und zwar wird es in Firefox richtig angezeigt aber im Internet Explorer (Version 6) wird es falsch angezeigt. Denn im IE streckt sich das menü mit dem Content Bereich.
Hier mein Code, ich hoffe auf schnelle Antworten.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Loudside</title>
<style type="text/css">
body {
background-image: url(images/bgs.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #000000;
}

#container {
width: 800px;
border: 1px solid black;
margin: 0 auto;
background: #FFFFFF;
}

#header {
width: 800px;
height: 130px;
border-bottom: 1px solid black;
background-image: url(images/logo.gif);
}

#menu {
width: 149px;
border-right: 1px solid black;
float: left;
background: #FFFFFF;
padding: 15px;
}

#content {
width: 600px;
background: #FFFFFF;
padding: 15px;
padding-right: 5px;
float: right;
}

#footer {
width: 610px;
height: 15px;
background: #FFFFFF;
padding: 5px;
float: right;
border-top: 1px solid black;
}

.menu {
font-size: 14px;
color: #003366;
font-weight: bold;
text-decoration: none;
}

.menu:hover {
font-size: 14px;
color: #999999;
font-weight: bold;
text-decoration: underline;
}

.clear { /* stellt nach den floatenden Boxen wieder den normalen Textfluss her */
clear: both;
font-size: 1px;
}

</style>
</head>

<body onselectart="return false" ontragstart="return false" oncontextmenu="return false">
<div id="container">

<div id="header"></div>

<div id="menu">
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
</div>

<div id="content">
<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
<br />
</div>
<div id="footer" align="center">Website &copy; by <a href="mailto:webdesign@pcmasters.at">Alexander Bischof</a></div>
</div><div class="clear">&nbsp;</div>


</body>
</html>

Maik · 16. Februar 2007

Hi,

ich würde mal das DIV .clear unmittelbar nach dem Footer und innerhalb des DIV #container notieren.

Hier wird nämlich nicht das Menü gestreckt, sondern das DIV #container (einfach mal eine andere Hintergrundfarbe für das Menü bestimmen), und da das DIV .clear an der falschen Stelle notiert ist, streckt der Firefox-Browser derzeit auch nicht das DIV #container.

So gesehen stellt der IE die Seite richtig dar, und Firefox eben nicht.

Um den gewünschten Effekt zu erzielen, müsstest du also die Hintergrundfarbe für das DIV #container entfernen.

alex130 · 20. Februar 2007

Hi
Thx für die letzte Antwort, aber ich muss leider wieder einmal nerven

Und zwar wird mein Layout in Firefox richtig angezeigt und im IE falsch, also im IE 6 sind zwei Scrollbalken zu viel.
Ich hoffe du kannst mir helfen.
Hier mein Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
background-image: url(Unbenannt.jpg);
font-family: Arial, Helvetica, sans-serif;
}

#header {
width: 780px;
height: 15px;
background-color: #88c3e1;
padding: 10px;
margin: 0 auto;
margin-bottom: 10px;
}

#container {
width: 800px;
margin: 0 auto;
overflow: auto;
background-color: #ffffff;
}

#menu {
width: 130px;
float: left;
background-color: #ffffff;
padding: 15px;
padding-top: 0px;
}

#content {
width: 600px;
background-color: #e2e2e2;
padding: 15px 10px 15px 10px;
margin: 20px 10px 10px 5px;
float: right;
min-height: 500px;
border: 2px solid black;
}

#footer {
width: 610px;
height: 20px;
background-color: #ffffff;
padding: 5px;
float: right;
}

.menu-bg {
width: 127px;
height: 22px;
background-image: url(button.jpg);
padding: 2px;
text-align: center;
}

.menu-bg:hover {
width: 127px;
height: 22px;
background-image: url(button2.jpg);
padding: 2px;
text-align: center;
}

.menu {
font-size: 12px;
color: #003366;
font-weight: bold;
text-decoration: none;
}

.menu:hover {
font-size: 12px;
color: #ff8041;
font-weight: bold;
text-decoration: underline;
}

.navi {
font-size: 16px;
color: #a1a1a1;
font-weight: bold;
}

</style>
</head>

<body>

<div id="header"></div>
<div id="container">
<div id="menu">

&nbsp;<br />
<div class="navi" align="center">Navigation</div>
&nbsp;<br />
<div class="menu-bg"><a href="#" class="menu">Home</a></div>
<div class="menu-bg"><a href="#" class="menu">Kunden eintragen</a></div>
<div class="menu-bg"><a href="#" class="menu">Kunden suchen</a></div>
<div class="menu-bg"><a href="#" class="menu">Vertrag eingeben</a></div>
<div class="menu-bg"><a href="#" class="menu">Vertrag suchen</a></div>
<div class="menu-bg"><a href="#" class="menu">Account Infos</a></div>
&nbsp;<br />
--------------------------<br />
<div class="menu-bg"><a href="#" class="menu">Logout</a></div>
--------------------------<br />
&nbsp;<br />
User: &nbsp;<b><?php echo $_SESSION['user_username']; ?></b><br />
Rang: <b><?php echo $rang; ?></b><br />
&nbsp;<br />

</div>
<div id="content">
<?php

include 'config.inc.php';

mysql_connect($host, $user, $pass) or die ("Keine Verbindung zu der Datenbank möglich.");
mysql_select_db($db);

$sql = "SELECT * FROM Kunden WHERE Id = \"{$_GET['id']}\"";
$res = mysql_query($sql) OR die(mysql_error());   
$userdaten = mysql_fetch_assoc(mysql_query('SELECT * FROM Kunden WHERE Id='.(int)$_GET['id']));

if ($_POST['submit'])
{
$sql = 'UPDATE `Kunden` SET 
`Anrede` = \''.mysql_real_escape_string($_POST['Anrede']).'\', 
`Akademischer` = \''.mysql_real_escape_string($_POST['Akademischer']).'\', 
`Zuname` = \''.mysql_real_escape_string($_POST['Zuname']).'\', 
`Vorname` = \''.mysql_real_escape_string($_POST['Vorname']).'\', 
`Geburtstag` = \''.mysql_real_escape_string($_POST['Geburtstag']).'\', 
`Sozialv` = \''.mysql_real_escape_string($_POST['Sozialv']).'\', 
`Beruf` = \''.mysql_real_escape_string($_POST['Beruf']).'\', 
`Festnetz` = \''.mysql_real_escape_string($_POST['Festnetz']).'\', 
`Handy` = \''.mysql_real_escape_string($_POST['Handy']).'\', 
`Fax` = \''.mysql_real_escape_string($_POST['Fax']).'\', 
`Email` = \''.mysql_real_escape_string($_POST['Email']).'\', 
`Art` = \''.mysql_real_escape_string($_POST['Art']).'\', 
`Nummer` = \''.mysql_real_escape_string($_POST['Nummer']).'\', 
`Datum` = \''.mysql_real_escape_string($_POST['Datum']).'\', 
`Behoerde` = \''.mysql_real_escape_string($_POST['Behoerde']).'\', 
`Kontonummer` = \''.mysql_real_escape_string($_POST['Kontonummer']).'\', 
`BLZ` = \''.mysql_real_escape_string($_POST['BLZ']).'\', 
`Bank` = \''.mysql_real_escape_string($_POST['Bank']).'\', 
`Beschreibung` = \''.mysql_real_escape_string($_POST['Beschreibung']).'\', 
`Kundenkonto` = \''.mysql_real_escape_string($_POST['Kundenkonto']).'\', 
`Partnerkennung` = \''.mysql_real_escape_string($_POST['Partnerkennung']).'\', 
`Verwendung` = \''.mysql_real_escape_string($_POST['Verwendung']).'\', 
`Strasse` = \''.mysql_real_escape_string($_POST['Strasse']).'\', 
`Ort` = \''.mysql_real_escape_string($_POST['Ort']).'\', 
`Land` = \''.mysql_real_escape_string($_POST['Land']).'\',
`Notiz` = \''.mysql_real_escape_string($_POST['Notiz']).'\', 
`Beruflich` = \''.mysql_real_escape_string($_POST['Beruflich']).'\'
WHERE `Id` = '.(int)$_GET['id'];

//echo $sql;
mysql_query($sql) OR die(mysql_error());  
  echo 'Die Einstellungen wurden übernommen!';
}  




echo '
<form method="post" action="?id='.(int)$_GET['id'].'" enctype="multipart/form-data"> 
<table width="580" border="0" align="center" class="table" />

<tr>
<td class="headline"><strong>Namensdaten</strong></td>
</tr>

  <tr>
    <td class="table1" align="left">Anrede</td>
    <td class="table1" align="left">
	<select name="Anrede"><option value="'.$userdaten['Anrede'].'" selected>'.$userdaten['Anrede'].'</option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
<option value="Firma">Firma</option>
<option value="Gruppe">Gruppe</option>
<option value="Familie">Familie</option>
</select>
</td>
	</tr>
	
    <tr>
    <td class="table2" align="left">Akademischer Titel </td>
    <td class="table2" align="left"><select name="Akademischer"><option value="'.$userdaten['Akademischer'].'" selected>'.$userdaten['Akademischer'].'</option>
<option value="----">----</option>
<option value="Bakk.">Bakk.</option>
<option value="DDr.">DDr.</option>
<option value="DI">DI</option>
<option value="DI DDr">DI DDr</option>
<option value="DI Dr.">DI Dr.</option>

<option value="Dipl-Bw.">Dipl-Bw.</option>
<option value="Dipl-Inf.">Dipl-Inf.</option>
<option value="Dipl-Kffr.">Dipl-Kffr.</option>
<option value="Dipl-Vw.">Dipl-Vw.</option>
<option value="Dkfm.">Dkfm.</option>

<option value="Dkfm. Dr.">Dkfm. Dr.</option>
<option value="Dr.">Dr.</option>
<option value="Mag.">Mag.</option>
<option value="Mag. DDr.">Mag. DDr.</option>
<option value="Mag. DI">Mag. DI</option>

<option value="Mag. Dkfm.">Mag. Dkfm.</option>
<option value="Mag. Dr.">Mag. Dr.</option>
<option value="MAS">MAS</option>
<option value="MBA">MBA</option>
<option value="MMag.">MMag.</option>
</select></td>
  </tr>
  <tr>
    <td class="table1" align="left">Zuname</td>
    <td class="table1" align="left"><input type="text" name="Zuname" value="'.$userdaten['Zuname'].'" size="30" /></td>
  </tr>
  <tr>
    <td class="table2" align="left">Vorname</td>
    <td class="table2" align="left"><input type="text" name="Vorname" value="'.$userdaten['Vorname'].'" size="30" /></td>
  </tr>
  <tr>
    <td class="table1" align="left">Geburtsdatum</td>
    <td class="table1" align="left"><input type="text" name="Geburtstag" value="'.$userdaten['Geburtstag'].'" size="20" />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; TT.MM.JJJJ
	</td>
  </tr>
   <tr>
    <td class="table1" align="left">Sv-Nr.</td>
    <td class="table1" align="left"><input type="text" name="Sozialv" value="'.$userdaten['Sozialv'].'" size="30" /></td>
  </tr>


<tr><td colspan="2">&nbsp;</td></tr>
<tr><td colspan="2">&nbsp;</td></tr>

<tr>
<td><strong  class="headline">Adresse</strong></td>
</tr>
<tr>
    <td class="table3" align="left">Verwendung</td>
    <td class="table3" align="left">
	<select name="Verwendung"><option value="'.$userdaten['Verwendung'].'" selected>'.$userdaten['Verwendung'].'</option>
<option value="Hauptwohnsitz">Hauptwohnsitz</option>
<option value="Inkassoadresse">Inkassoadresse</option>
<option value="Risikoadresse">Risikoadresse</option>
<option value="Zweitwohnsitz">Zweitwohnsitz</option>
</select></td>
  </tr>
 <tr>
    <td class="table4" align="left">Straße</td>
    <td class="table4" align="left"><input type="text" name="Strasse" size="30" value="'.$userdaten['Strasse'].'" /></td>
  </tr>
   <tr>
    <td class="table3" align="left">PLZ - Ort</td>
    <td class="table3" align="left"><input type="text" name="Ort" size="30" value="'.$userdaten['Ort'].'" /></td>
  </tr>
    <tr>
    <td class="table4" align="left">Land</td>
    <td class="table4" align="left"><input type="text" name="Land" size="30" value="'.$userdaten['Land'].'" /></td>
  </tr>
  
<tr><td colspan="2">&nbsp;</td></tr>
<tr><td colspan="2">&nbsp;</td></tr>

<tr>
<td><strong class="headline">Kommunikation</strong></td>
</tr>
<tr>
    <td class="table5" align="left">Festnetz</td>
    <td class="table5" align="left"><input type="text" name="Festnetz" size="30" value="'.$userdaten['Festnetz'].'" /></td>
  </tr>
  <tr>
    <td class="table6" align="left">Beruflich</td>
    <td class="table6" align="left"><input type="text" name="Beruflich" size="30" value="'.$userdaten['Beruflich'].'" /></td>
  </tr>
 <tr>
    <td class="table5" align="left">Handy</td>
    <td class="table5" align="left"><input type="text" name="Handy" size="30" value="'.$userdaten['Handy'].'" /></td>
  </tr>
   <tr>
    <td class="table6" align="left">Fax</td>
    <td class="table6" align="left"><input type="text" name="Fax" size="30" value="'.$userdaten['Fax'].'" /></td>
  </tr>
    <tr>
    <td class="table5" align="left">Email</td>
    <td class="table5" align="left"><input type="text" name="Email" size="30" value="'.$userdaten['Email'].'" /></td>
  </tr>

<tr><td colspan="2">&nbsp;</td></tr>
<tr><td colspan="2">&nbsp;</td></tr>

<tr>
<td><strong class="headline">Bankverbindung</strong></td>
</tr>
 <tr>
    <td class="table7" align="left">Kontonummer</td>
    <td class="table7" align="left"><input type="text" name="Kontonummer" size="30" value="'.$userdaten['Kontonummer'].'" /></td>
  </tr>
   <tr>
    <td class="table8" align="left">BLZ</td>
    <td class="table8" align="left"><input type="text" name="BLZ" size="10" value="'.$userdaten['BLZ'].'" /></td>
  </tr>
    <tr>
    <td class="table7" align="left">Bank</td>
    <td class="table7" align="left"><input type="text" name="Bank" size="30"  value="'.$userdaten['Bank'].'" /></td>
  </tr>
    <tr>
    <td class="table8" align="left">Beschreibung</td>
    <td class="table8" align="left"><input type="text" name="Beschreibung" size="30" value="'.$userdaten['Beschreibung'].'" /></td>
  </tr>
    <tr>
    <td class="table7" align="left">Kundenkonto</td>
    <td class="table7" align="left"><input type="text" name="Kundenkonto" size="30" value="'.$userdaten['Kundenkonto'].'" /></td>
  </tr>
    <tr>
    <td class="table8" align="left">Partnerkennung</td>
    <td class="table8" align="left"><input type="text" name="Partnerkennung" size="30" value="'.$userdaten['Partnerkennung'].'" /></td>
  </tr>

<tr><td colspan="2">&nbsp;</td></tr>
<tr><td colspan="2">&nbsp;</td></tr>

<tr>
<td><strong class="headline">Identitätsnachweis</strong></td>
</tr>
<tr>
    <td class="table9" align="left">Art</td>
    <td class="table9" align="left">
	<select name="Art"><option value="'.$userdaten['Art'].'" selected>'.$userdaten['Art'].'</option>
<option value="----">----</option>
<option value="Firmenbuchauszug">Firmenbuchauszug</option>
<option value="Führerschein">Führerschein</option>
<option value="Personalausweis">Personalausweis</option>
<option value="Reisepass">Reisepass</option>
</select></td>
  </tr>
 <tr>
    <td class="table10" align="left">Nummer / Kennung</td>
    <td class="table10" align="left"><input type="text" name="Nummer" size="30" value="'.$userdaten['Nummer'].'" /></td>
  </tr>
   <tr>
    <td class="table9" align="left">Ausstellungsdatum</td>
    <td class="table9" align="left"><input type="text" name="Datum" size="30" value="'.$userdaten['Datum'].'" /></td>
  </tr>
    <tr>
    <td class="table10" align="left">Beh&ouml;rde</td>
    <td class="table10" align="left"><input type="text" name="Behoerde" size="30" value="'.$userdaten['Behoerde'].'" /></td>
  </tr>
  <tr>
    <td class="table9">Notizen</td>
    <td class="table9"><textarea name="Notiz" cols="50" rows="5">'.$userdaten['Notiz'].'</textarea></td>
  </tr>
<tr><td colspan="2">&nbsp;</td></tr>
   <tr>
  <td></td>
  <td align="center"><input name="Reset" type="reset" value="Abbrechen"><input type="submit" name="submit" value="Speichern"/></td>
  </tr>
</table>
</form>
&nbsp;<br />
<hr>
<h2>Verträge:</h2>
<a href="vertragsanzeige.php?Kunde='.$userdaten['Id'].'" target="_blank">KFZ</a>
<hr>
';
?>

</div>
<div id="footer" align="center">DVM Kundenverwaltung &copy; by <a href="mailto:webdesign@pcmasters.at" class="menu">Alexander Bischof</a></div>
</div>

</body>
</html>

THX

Maik · 21. Februar 2007

Hi,

dann nimm mal die overflow:auto-Eigenschaft aus dem Selektor #container raus.

alex130 · 21. Februar 2007

Hi
Das habe ich schon versucht, dann wird es im IE richtig dargestellt und in Firefox nicht.
Thx

Maik · 21. Februar 2007

Ich kann da keine Unterschiede bzw. Darstellungsfehler im Firefox-Browser entdecken.

alex130 · 21. Februar 2007

Hi
Ich hab dir die zwei Screens angehängt
Thx

Maik · 21. Februar 2007

Okay, ohne die Hintergrundgrafik fällt der Fehler nicht auf.

Heb mal nach dem Footer die float-Eigenschaft auf.

Code:

.clear {
clear:both;
}

Code:

<div id="container">
    <div id="menu">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
    <div class="clear"></div>
</div>

alex130 · 21. Februar 2007

Ich hab das float im Footer entfernt, aber es wird immer noch falsch angezeigt.
Hier ein Screen:

✔ Layout mit 100% height und width

Maik

alex130

Erfahrenes Mitglied

Maik

alex130

Erfahrenes Mitglied

Maik

alex130

Erfahrenes Mitglied

Maik

alex130

Erfahrenes Mitglied

Anhänge

Maik

alex130

Erfahrenes Mitglied

Anhänge

Neue Beiträge