mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 06.12.2016 19:27 Benutzername: Passwort: Auto-Login

Thema: [CSS/HTML Probs] Container und 100% Höhe vom 27.06.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS/HTML Probs] Container und 100% Höhe
Autor Nachricht
waiu
Threadersteller

Dabei seit: 16.04.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 27.06.2005 21:18
Titel

[CSS/HTML Probs] Container und 100% Höhe

Antworten mit Zitat Zum Seitenanfang

Hi an alle CSS-Füchse hier,

unter folgendem Link seht Ihr einen Sketch von mir: http://www.airfrenchband.org/sketch/

Mein Problem:
Ich möchte gerne den äußeren blauen Bereich auf 100% Höhe haben (also bis unten zum Browserrand) OHNE Scrollbalken. Momentan ist einer da, weil er anscheinend den oberen Abstand mit dazu rechnet. Wie umgehe ich das?

Der weiße innere Inhaltsbereich soll dann auch entsprechend bis unten laufen.

Ich poste dazu mal das CSS:
Code:
body {
   background : #FFFFFF repeat-x;
   background-image: url(images/bg.jpg);
   background-position: bottom;
   font-family: Helvetica;
}

#main {
   background: #197FBF;
   width: 900px;
   text-align: left;
   margin: auto;
   margin-top:  50px;
   height:  100%;
}

div.logoair img {
   margin: 0px;
   padding:  0px;
   position: relative;
   left: 639px;
   top: -89px
}

div.content {
   width:  855px;
   position: absolute;
   top: 190px;
   margin-left: 20px;
   background-color: #fff;
   padding-bottom: 20px;
}

div.tlk p {
   margin-left: 24px;
   padding-top: 20px;
}

div.tlk p a {
   font-size:  18px;
   font-weight:  bold;
   text-decoration:  none;
   color:  #fff;
   margin-right:  15px;
   text-transform: uppercase;
}

div.tlk p a:link {
   color: #fff;
   padding: 3px;
}

div.tlk p a.active:link {
   color: #000;
   background-color: #fff;
   padding: 3px;
}

div.tlk p a:hover {
   color: #000;
}

div.content h1 {
   position:  absolute;
   top: -67px;
   margin-left:  0px;
   background-color: #fff;
   padding: 5px;
   color:  #197FBF;
   display: inline;
   font-size:  30px;
   text-transform: uppercase;
}

div.content h2 {
   color: black;
   font-size:  12px;
   margin: 30px 0 0 30px;
}

div.content h3 {
   text-transform: uppercase;
   color: #FF2E72;
   font-size:  17px;
   margin: 5px 0 1px 30px;
}

div.content p {
   margin: 0 50px 0 30px;
   font-size:  12px;
}


Vielen Dank für Eure Hilfe!
  View user's profile Private Nachricht senden
mcbethy

Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 33
Geschlecht: Weiblich
Verfasst Mo 27.06.2005 21:45
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
html, body {height:100%}


Ach so, und hast du es mit negativem margin-top versucht?


Zuletzt bearbeitet von mcbethy am Mo 27.06.2005 21:49, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
waiu
Threadersteller

Dabei seit: 16.04.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 27.06.2005 22:20
Titel

Antworten mit Zitat Zum Seitenanfang

mcbethy hat geschrieben:
Code:
html, body {height:100%}


Ach so, und hast du es mit negativem margin-top versucht?


body html height: 100% bringt nichts.

Ich soll dem blauen Bereich einen negativen margin-top geben? Hm ich probiers mal.

Das Problem ist scheinbar wirklich die beiden argumente hier gleichzeitg zu verwenden, eigentlich logisch. Nur was tun? :
Code:
margin-top: 50px;
   height:  100%;


Hab den Link mal upgedated.


Zuletzt bearbeitet von waiu am Mo 27.06.2005 22:25, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
way2hot

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 34
Geschlecht: Männlich
Verfasst Mo 27.06.2005 23:32
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.mediengestalter.info/forum/22/div-hoehe-am-u-browserrand-orientieren-ohne-height-100-37985-1.html

Seashore hat geschrieben:
Müßte es nicht so gehen wie hier?
http://www.css4you.de/wslayout1/ex0001.html
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
mcbethy

Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 33
Geschlecht: Weiblich
Verfasst Di 28.06.2005 00:21
Titel

Antworten mit Zitat Zum Seitenanfang

way2hot.de hat geschrieben:
http://www.mediengestalter.info/forum/22/div-hoehe-am-u-browserrand-orientieren-ohne-height-100-37985-1.html

Seashore hat geschrieben:
Müßte es nicht so gehen wie hier?
http://www.css4you.de/wslayout1/ex0001.html


Ha, ja richtig! Ich hatte selbst das Problemchen.
Oberes Beispiel hatte mir aber nichts genützt, weil der Seitenaufbau ein völlig anderer war.
Möglich wäre es natürlich einen Container (mit dem Blau) um alles herumzulegen, der die Höhe 100% und margin:0 hat. In diesem Container befände sich dann als Header ein weißer Div-Container mit weißer Hintergrundfarbe in dem das Logo ausgerichtet werden könnte. Aber vermutlich ist das zu kompliziert gedacht. Ist schon spät. * Ich bin müde... *

Bei mir ging es wirklich als ich dem html- und/oder body-Element (genau weiß ich das jetzt nicht mehr) ein negatives margin-bottom zugewiesen habe.
In deinem Fall wären das margin-bottom:-50px. Ich frage mich gerade, ob das auch browserübergreifend kompatibel war... im FF und IE neuster Generationen auf dem PC schon.

Nun, probieren geht über studieren! *Thumbs up!*
  View user's profile Private Nachricht senden
waiu
Threadersteller

Dabei seit: 16.04.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 28.06.2005 08:23
Titel

Antworten mit Zitat Zum Seitenanfang

Hey,
Code:
html {
   height: 100%;
   margin-bottom: -50px;
}


hat geholfen! Merci!
  View user's profile Private Nachricht senden
 
Ähnliche Themen [css] div-container Höhe
css div container höhe?
CSS Container 100% Vertikal ausrichten
CSS DIV 100% Höhe
[CSS] Hintergrundgrafik 100% Höhe und Breite
css höhe 100% in verschachtelten containern
Neues Thema eröffnen   Neue Antwort erstellen
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.