Probleme mit Layout

Status
Nicht offen für weitere Antworten.
A

abanta

Mitglied
Hallo

ich habe bis her mein Layout immer mit Tabellen erstellt und will jetzt auf CSS um stellen aber irgend wie bekomme ich das nicht so recht hin. Ich will folgendes Tabellen Layout umsetzen:

Code: 
<table HEIGHT="100%" WIDTH="100%" BORDER="1">
  <tbody>
    <tr>
      <td HEIGHT="80">Navi</td>
    </tr>
    <tr>
      <td>content</td>
    </tr>
    <tr>
      <td HEIGHT="20">footer</td>
    </tr>
  </tbody>
</table>

ich habe dazu diese Seite erstellt:
1.php
Code: 
<html>
<head>
  <title></title>
<link rel="stylesheet" type="text/css" href="layout/defult.css">
</head>
<body>
<div ID="container">
	<div ID="menu"><? //include "navi.php";?></div>
	<div ID="content"><br><br><br></div>
	<div ID="footer">blabla</div>
</div>
</body>
</html>
und das zu
defult.css:
Code: 
#menu {
    width:100%;
    height:3.1em;
    background: #A6A6A6;
    border-bottom-style : solid;
    border-bottom-width : 0.05em;
    border-left-style : solid;
    border-left-width : 0.05em;
    border-right-style : solid;
    border-right-width : 0.05em;
    border-top-style : solid;
    border-top-width : 0.05em;
  }

#main {
    background-color : #FFFFFF;
    border-bottom-style : solid;
    border-bottom-width : 1px;
    border-left-style : solid;
    border-left-width : 1px;
    border-right-style : solid;
    border-right-width : 1px;
    overflow : auto;
    padding-left : 10px;
    width : 100%;
  }

#content {
    border-bottom-color : #000000;
    border-bottom-style : solid;
    border-bottom-width : 1px;
    border-left-color : #000000;
    border-left-style : solid;
    border-left-width : 1px;
    border-right-color : #000000;
    border-right-style : solid;
    border-right-width : 1px;
    font-family : arial;
    font-size : 0.8em;
    padding-left : 10px;
    text-decoration : none;
    vertical-align : top;
    width : 100%;
    height : 90%;
  }

body {
    font-family : Arial;
  }

#content ul {
    background-color : #ffffff;
    display : block;
    list-style-position : outside;
    list-style-type : decimal;
  }

#content li {
    display : block;
    list-style-position : outside;
    list-style-type : decimal;
  }


#footer {
    background-color : #a6a6a6;
    height : 1em;
    text-align : center;
    border-bottom-color : #000000;
    border-bottom-style : solid;
    border-bottom-width : 1px;
    border-left-color : #000000;
    border-left-style : solid;
    border-left-width : 1px;
    border-right-color : #000000;
    border-right-style : solid;
    border-right-width : 1px;
  }

Nur habe ich 2 Probleme damit:

[1]das ganze soll über die komplete Breite und Höhe gehn und die Höhe bekomme ich nicht hin
[2]der rechte broder geht leider über den rechten Rand hinaus

Ich kenne mich noch nicht wirklich gut aus und wäre für etwas unterstützung SEHR dankbar.

DANKE
Abanta
 
[1]das ganze soll über die komplete Breite und Höhe gehn und die Höhe bekomme ich nicht hin
Zum Vergrößern anklicken....
Eine Möglichkeit ist, dass du in deine CSS-Datei folgendes hinzufügst:

html {
height: 100%
}
body {
height: 100%
}
(kann sein, dass es im HTML-Bereich reicht, aber bin mir da grad nicht mehr so sicher.)
Das Problem bei der Sache ist, dass es eben nicht 100% des Bildschirms sind, sondern
etwas mehr, dafür ist es recht schnell und einfach erledigt.

[2]der rechte broder geht leider über den rechten Rand hinaus
Zum Vergrößern anklicken....
Welcher rechte „Border“ geht über welchen Rand hinaus?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück