Layout mit 100% height und width @ tutorials.de: Tutorials, Forum & Hilfe

alex130 · 13.02.07 01:02

Hi
Ich hab ein Problem und zwar weiß ich nicht, wie ich so ein Layout mit 100% height und width amchen kann. Kann mir da bitte jemand helfen?
Ich hab auch noch nen Screen angehängt.
Thx

Maik · 13.02.07 05:49

Hi,

vielleicht entsprechen Stu Nicholls' CSS-Layouts vom Grundprinzip her deinen Vorstellungen?

alex130 · 13.02.07 07:15

Hi
Ja genau sowas brauch ich

alex130 · 13.02.07 15:02

Hi
Ich hab jetzt mal sowas einfaches gecodet, aber das funktioniert nicht ganz, das Menu geht links ganz nach oben und der Content bereich ist nicht da

Ich hoffe du kannst mir helfen:

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 {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
 
#header {
width: 100%;
height: 20%;
position: fixed;
background-color: #FF0000;
}
 
#menu {
width: 25%;
height: 80%;
float: left;
background-color: #0000FF;
position: fixed;
}
 
#content {
width: 75%;
height: 80%;
float: right;
background-color: #000000;
}
</style>
</head>
 
<body>
 
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
 
</body>
</html>

Maik · 13.02.07 17:00

Ehrlich gesagt verstehe ich jetzt nicht, weshalb du das Rad neu erfinden willst, wenn ich dir heute Morgen die Links zu drei lauffähigen Lösungsbeispielen genannt habe.

Dass das Menü am oberen Fensterrand ausgerichtet ist, liegt einfach daran, dass du den Header mit einer 20%-Höhe positioniert und das Menü nicht dementsprechend von oben positioniert hast. Gleiches dürfte auch für den Content-Bereich gelten.

Zudem müsstest du die folgende Regel um das html-Element erweitern:

Code :

[b]html,[/b]body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

Dr Dau · 13.02.07 17:14

Hallo!

Wenn ich mir seinen Code so ansehe, sieht es mir nach einer abgewandelten Version eines unserer Beispiele aus.

Gruss Dr Dau

Maik · 13.02.07 17:15

Meinst du deinen Thread div height=100% nur im IE??

Dr Dau · 13.02.07 17:18

Genau den meinte ich.

Maik · 13.02.07 17:24

Wenn, dann dürfte es sich um eine "abgespeckte" Version eines deiner Beispiele handeln, da meine später angehängten Beispiele für ein Layout mit fixer Breite gedacht sind.

Dr Dau · 13.02.07 17:31

So genau habe ich es mir nicht angesehen..... war bis vorhin ja auch nicht möglich (Dominik hatte ja mal wieder gebastelt

).
Mir kam der Code halt nur irgendwie bekannt vor.

Maik · 13.02.07 17:35

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

alex130 · 16.02.07 20:51

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.02.07 21:01

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.02.07 23:35

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.02.07 05:53

Hi,

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Div mit 100% width und height

Mehrspaltiges Layout: Probleme mit min-height:100% bzw height:100%

height/width - Berechnung

Iframe mit width und height 0

height und width

E-Mail:

Abonnieren Abbestellen