mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 11.12.2016 03:55 Benutzername: Passwort: Auto-Login

Thema: CSS / Seite mit Header - Content - Footer / height="100%" ? vom 18.04.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS / Seite mit Header - Content - Footer / height="100%" ?
Seite: 1, 2  Weiter
Autor Nachricht
tnobs
Threadersteller

Dabei seit: 27.07.2005
Ort: insbruck
Alter: -
Geschlecht: Männlich
Verfasst Di 18.04.2006 14:43
Titel

CSS / Seite mit Header - Content - Footer / height="100

Antworten mit Zitat Zum Seitenanfang

hi, versuche gerade eine seite mit drei div tags aufzubauen, welche aus header / content / footer bestehen soll. die ganze seite soll in der höhe immer 100 % betragen, header (100px) und footer (30px). wie schaffe ich es dass der content sich automatisch anpasst, ohne dass ein vertikaler scrollbalken auftaucht.

mein bisheriger code:

<style type="text/css">
<!--
body{
margin: 0;
}

.box1{
background:#cde0eb;
padding:10px;
height: 100px;
margin:0 10px 0 10px;}

.box2{
padding:10px 10px 10px 30px;
width:35%;
height: 100%;
float:left;}

.box3{
padding:10px 30px 10px 10px;
margin:0 0 0 45%;}

.box4{
background:#cde0eb;
clear:left;
height: 30px;
padding:10px;
margin:0 10px 0 10px;}
-->
</style>
</head>
<body>

<div class="box1">box1</div>

<div class="box2">box2</div>

<div class="box3">box3</div>

<div class="box4">box4</div>

</body>
</html>
  View user's profile Private Nachricht senden
fuchsbau

Dabei seit: 15.08.2005
Ort: .//root
Alter: 33
Geschlecht: Männlich
Verfasst Di 18.04.2006 15:21
Titel

Antworten mit Zitat Zum Seitenanfang

Au weia! Versteh ich nicht. Was verstehstn unter automatisch anpassen?

Du hast z.B. n Fließtext und der is zu lang, also kommt ne vertikale Scrollbar. Ja und nun? Was soll automatisch passieren? Oder binnich zu doof? Hmm...?!

.//thomas

edit:

sonst (nach deiner beschreibung) würd ichs halt so machen, nur aufpassen, dass der content nicht zu dick wird.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style type="text/css">
<!--
body { margin: 0; padding: 0; }
.complete { height: 100%; margin: 0; padding: 0; border: 0; background-color: #ffffff;}
.header { height: 100px; margin: 0; padding: 0; border: 0; background-color: #cde0eb;}
.footer { position: absolute; bottom: 0; height: 30px; width: 100%; border: 0; margin: 0; background-color: #cde0eb; padding: 0; }

-->
</style>
</head>
<body>
<div class="complete">
<div class="header"></div>
<div>CONTENT</div>
<div class="footer"></div>
</div>
</body>
</html>


haste halt im IE die 2-3px rand unten, gibts bestimmt auch nochn trick, wie du die wegbekommst...


Zuletzt bearbeitet von fuchsbau am Di 18.04.2006 15:50, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Di 18.04.2006 17:49
Titel

Antworten mit Zitat Zum Seitenanfang

geb deinen div dingern mal aussagekräftige IDs das man weiß worum es geht. und google mal nach „einmal erdgeschoss bitte“ dann findeste ne anleitung zu ner 100% height seite mit fixem footer auf der seite von sonem typen namens manuel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
tacker

Dabei seit: 22.03.2002
Ort: Offenbach am Main
Alter: 36
Geschlecht: Männlich
Verfasst Mi 19.04.2006 10:03
Titel

Antworten mit Zitat Zum Seitenanfang

Wichtig: HTML und CSS sind keine Programmiersprachen!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
wunschtacho

Dabei seit: 12.04.2006
Ort: Rosenheim/München
Alter: 37
Geschlecht: Männlich
Verfasst Mi 19.04.2006 13:16
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo,

könnte dir das weiterhelfen:

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

   <head>
      <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
      <title>Untitled Page</title>
      <style type="text/css" media="screen"><!--
body {
   color: black;
   background: white;
   text-align: center;
   margin: 0;
   }


#frame    {
   background-color: #c0c0c0;
   margin: 0 auto;
   width: 300px;
   height: auto;
   overflow: auto;
   
   
   /* IE 5 Win fix */
   overflow= visible;
   height=100%;
   margin-bottom= -100px;
   }

#minh   {
   background-color: blue;
   float: left;
   top: 0;
   bottom: 0;
   width: 1;
   height: 100%;
   margin-top: -200px;
   
   /* IE 5 Win fix */
   margin-top = -100px;
   padding-top = 0;
   }



#layer1   {
   background-color: #8fbc8f;
   float: left;
   top: 0;
   width: 90px;
   height: auto;
   !padding-bottom: 100px; /* IE 6 */

   }



#layer2  {
   background-color: #ffe4c4;
   float: left;
   margin-left: 5px;
   top: 0;
   width: 100px;
   height: auto;
   !padding-bottom: 100px; /* IE 6 */
   }


#layer3   {
   background-color: #d2691e;
   margin-left: auto;
   top: 0;
   width: 90px;
   height: auto;
   !padding-bottom: 100px;/* IE 6 */
   }
   
   
#footer {
   background-color: #ee82ee;
   width: 300px;
   height: 100px;
   margin: 0 auto;
   }

#head  {
   background-color: #ffc0cb;
   margin: 0 auto;
   width: 300px;
   height: 100px;
   }


--></style>
   </head>

   <body>
      <div id="frame">
         <div id="head"></div>
         <div id="minh"></div>
         <div id="layer1">
            Linker Bereich
         </div>
         <div id="layer2">
            #lorem
         </div>
         <div id="layer3">
            Rechter Bereich
         </div>
      </div>
      <div id="footer">footer</div>
   </body>

</html>


Grüße
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
fuchsbau

Dabei seit: 15.08.2005
Ort: .//root
Alter: 33
Geschlecht: Männlich
Verfasst Mi 19.04.2006 19:10
Titel

Antworten mit Zitat Zum Seitenanfang

wunschtacho hat geschrieben:


Code:
/* IE 5 Win fix */
   margin-top = -100px;
   padding-top = 0;
   }


Code:
!padding-bottom: 100px; /* IE 6 */


Code:
!padding-bottom: 100px; /* IE 6 */


Code:
!padding-bottom: 100px;/* IE 6 */




* Nee, nee, nee * Sowas geht ja wohl mal garnicht.

Und überhaupt sieht das ganze bei mir (FF) recht seltsam aus.


Zuletzt bearbeitet von fuchsbau am Mi 19.04.2006 19:14, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
wunschtacho

Dabei seit: 12.04.2006
Ort: Rosenheim/München
Alter: 37
Geschlecht: Männlich
Verfasst Mi 19.04.2006 19:17
Titel

Antworten mit Zitat Zum Seitenanfang

Aber sicher geht so was

ist ein gängiger CSS Hack für den Internet Explorer - kannst dir gleich mal merken Lächel

width: 100px;
!width: 120px;


Grüße
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
fuchsbau

Dabei seit: 15.08.2005
Ort: .//root
Alter: 33
Geschlecht: Männlich
Verfasst Mi 19.04.2006 19:20
Titel

Antworten mit Zitat Zum Seitenanfang

ja, ist mir schon klar. du kannst auch gleich ne browserweiche mit javascript bauen. du kannstes aber eben auch lassen ^^ janee, das ist wohl n programmier- * Ich bin ja schon still... * entschuldigung tacker *schreibt100.000mal"HTMLundCSSsindkeineProgrammiersprachen!"andietafel" * Ich bin ja schon still... * ein äh non-print-allgemein-philosophie-problem. ich finde das stinkt nach langen dünnen nudeln. egal ^^

Zuletzt bearbeitet von fuchsbau am Mi 19.04.2006 19:22, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] Layout(Header, Sidenav, Content, Footer) mit 100% Höhe
Variabler Header/Footer in Höhe - fester Content - WIE?
[CSS] Content Div überlagert Footer
CSS Problem - Inhalt an Footer und Header anpassen?
CSS, height 100% und der Mist mit Browserverschiedenheiten
Wieder mal... CSS height 100%
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.