zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden div höhe - 2 scrollbalken vermeiden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.03.2010, 12:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.01.2010
Beiträge: 10
grubentaucher befindet sich auf einem aufstrebenden Ast
Frage div höhe - 2 scrollbalken vermeiden

Hallo zusammen,

ich habe bei der Erstellung unserer neuen Firmenseite ein Problem mit der Höhe.

Ich hätte es gerne so, dass der Header immer am oberen Fensterrand und der Footer immer am unteren Fensterrand klebt und der div content0 (der rahmen um content) bzw content (der Inhalt selbst), dementsprechend den Rest ausfüllt. Egal ob der User das Browserfenster in 1100*600 oder in Vollbild betrachtet.

Ich hoffe meine Erklärung ist halbwegs verständlich.

Noch zum besseren Verständnis wie ich mir das Layout gedacht habe, header, nav und footer sind immer sichtbar, nur in content0 bzw content wird bei entsprechend langem Inhalt ein Scrollbalken angezeigt. So wie ich es mir vorstelle ist der Scrollbalken dann auch wirklich nur neben dem langen Inhalt, nicht rechts am Fensterrand.

Wenn ich content eine feste Höhe gebe "height:665px und overflow:auto" setze, dann ist bei längerem Inhalt der Scrollbalken da wo ich ihn will. Allerdings habe ich dann bei Seiten mit viel Inhalt logischerweise 2 Scrollbalken wenn das Browserfenster kleiner als mein Layout mit fester Höhe gemacht wird. Einen am langen Inhalt selbst, und einen am Fensterrand.

Ich suche quasi eine Möglichkeit content zu sagen "guck wieviel platz zwischen header und footer ist, unanhängig davon wie groß das fenster ist und fülle diesen Platz aus".

Könnte mir jemand einen Tip geben wie ich meine Vorstellung am besten umsetzten kann, oder eine andere Idee wie ich diese Sache lösen kann?

Bin für jede Hilfe dankbar!

Hier ein Bild wie es sein soll:


Hier das Problem:


Hier die CSS:
Code:
	/* POSITIONEN FORM SCHRIFTART */

body
	{
		
		height: 100%;
		font: 85% arial, hevetica, sans-serif;
		text-align: center;
		color: #404040;
		background-color: #FFFFFF;
		
	}
	
#container
	{
		margin: 1em auto;
		width: 1024px;
		text-align: left;
		background-color: #FFFFFF;		
		
	}

#header
	{	
		margin: 0;
		height: 80px;
		width:1024px;
		background-color: #FFFFFF;
		border-top-width:3px;
  		border-top-style:solid;
  		border-top-color: #575757;
  		border-bottom-width:3px;
  		border-bottom-style:solid;
  		border-bottom-color: #575757;
  	}

	
#content0
	{
		float:right;
		margin-top:10px;
		margin-right: 3px;
		width: 832px;
		background-color: #EDEDED;
		border-left-width:3px;
  		border-left-style:solid;
		border-color:white;
		
	}



#content
	{
		margin:0;
		padding:1em 1.5em 2.5em 1.5em;
		height:665px;
		overflow: auto;
	}


		
	
#nav0	
	{
		margin-top: 10px;
		margin-left: 3px;
		width: 177px;
		height: 100%;
		
		
	}

#nav
	{
		padding:0.5em 1.5em 1em 1em;
		height:100%;
	}
	
#footer	
	{
		clear: both;
		height: 12px;
		background-color: #575757;
		border-top-width:6px;
  		border-top-style:solid;
  		border-color:white;
		white-space: pre;
	}



	/* FELD MIT RUNDEN ECKEN */


.back div 
	{ 
		background: url(pic/corner/nt.gif) repeat; 
	
	}

.tr div 
	{
		background:url(pic/corner/tr.gif) top right no-repeat;
	}

.tl div 
	{
		background:url(pic/corner/tl.gif) top left no-repeat;
	}

.br div 
	{
		background:url(pic/corner/br.gif) bottom right no-repeat;
	}

.bl div 
	{
		background:url(pic/corner/bl.gif) bottom left no-repeat;
	}


	/* SCHRIFT FARBE GROESSE */

		
#nav h1 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 120%; 
		color: #FF0000;
		padding: 0px;
	}		

#nav p 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 95%; 
		 
	}

#nav a.norm 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 95%;
		color: #404040;
		text-decoration: none;
	}

#nav a.norm:hover
	{
		text-decoration: underline;
		
	}


#nav a.rot
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 120%; 
		color: #FF0000;
		text-decoration: none;
		
	}

#nav a.rot:hover
	{ 
		text-decoration: underline;
		
	}
#content h1 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 150%; 
		margin-left: 5px;
		margin-right: 10px; 
	}
	
#content h2 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 100%;
		font-weight:bold;
		margin-left: 10px;
		margin-right: 10px; 
	}

#content p 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 100%; 
		margin-left: 10px; 
	}

#content a 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 100%;
		color: #404040; 
	}
	
#content u 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 100%;
		color: #404040; 
	}

#footer  
	{ 
		padding-top:1px;
		font: 85% arial, hevetica, sans-serif; 
		font-size: 65%;
		color:#FFFFFF; 	
		text-align: right; 
	}
und hier eine der html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
   http-equiv="content-type"> 
<title>TESTSEITE</title>

	<link rel="stylesheet" href="test.css" media="screen">
 
</head>


</head>
<body>
<div id="container">
<div id="header">
<img src="logo3.jpg" style="margin-left:10px;" alt="BILD">
</div>
<div id="leiste">
</div>


<div id="content0">

<div class="back"> 
 <div class="tr"> 
  <div class="tl">
   <div class="br"> 
    <div class="bl"> 
	
	 <div id="content">
<h1>Willkommen</h1>
<p>
Herzlich willkommen auf der Internetpr&auml;senz der...
</p>
<p>
Auf den folgenden Seiten erfahren Sie etwas mehr &uuml;ber 
<a href="unternehmen.html">unser Unternehmen</a>, 
unsere Leistungen, ...
</p>

</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="nav0">
<div class="back"> 
 <div class="tr"> 
  <div class="tl">
   <div class="br"> 
    <div class="bl"> 
<div id="nav">

<p><a class="rot" style="text-decoration: underline;" href="index2.html">Startseite</a></p>
 
<p><a class="rot" href="unternehmen.html">Unternehmen</a></p>

<p><a class="rot" href="leistungen.html">Leistungen</a></p>

<p><a class="rot" href="suche.html">Angebote</a></p>

<p><a class="rot" href="kontakt.html">Kontakt</a></p>


<br>
<p style="text-align: center; margin-left:1px; font-size: 80%;">
ADRESSE<br>
ADRESSE<br>
ADRESSE<br>
ADRESSE
</p>          
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="footer">Copyright © 2010 
</div>
</div>

</body>
</html>

Geändert von grubentaucher (29.03.2010 um 13:58 Uhr) Grund: Bilder zugefügt
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.03.2010, 16:27
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

schau mal hier bei den Fixed Layouts..
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.03.2010, 16:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.01.2010
Beiträge: 10
grubentaucher befindet sich auf einem aufstrebenden Ast
Standard

Dankeschön.
Sieht, zumindest auf den ersten Blick, nach genau dem aus, wonach ich gesucht habe.

Grüße!
Mit Zitat antworten
  #4 (permalink)  
Alt 30.03.2010, 17:16
Michael Walter
XHTMLforum-Mitglied
 
Registriert seit: 16.02.2010
Ort: Berlin
Beiträge: 237
Walter IT-Services befindet sich auf einem aufstrebenden Ast
Standard

Warum machst du so etwas?
Ich persönlich empfinde so etwas als störend,
dass wenn ich nur 768px Höhe zur Verfügung habe,
erstmal knapp 300px mit Header und Footer verbraten werden.

Der Gedanke dahinter ist immer nett gemeint,
versaut mir aber die Sicht :/

Da bevorzuge ich lieber einen Scrollbalken über die ganze Seite.
__________________
Walter IT-Services
Michael Walter

http://www.walter-it.de
http://blog.walter-it.de
Mit Zitat antworten
  #5 (permalink)  
Alt 07.04.2010, 12:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.01.2010
Beiträge: 10
grubentaucher befindet sich auf einem aufstrebenden Ast
Standard

Danke Michael, ich habe mir Deinen Rat zu Herzen genommen und die Seite mal auf meinem Netbook aufgerufen (Auflösung 1024 * 600) und stimmt schon, das Layout sieht gut aus auf einem Monitor mit hoher Auflösung, aber es war auf dem Netbook eine qual.

Grüße
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe danoman CSS 5 24.04.2011 19:38
div, dynamische höhe aber nix faux ... emmis CSS 1 11.12.2010 18:37
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 14:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:09 Uhr.