zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Frameset mit CSS - Kleinigkeit fehlt noch

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.07.2006, 18:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2006
Ort: Berlin
Beiträge: 21
Skeeve befindet sich auf einem aufstrebenden Ast
Frage Frameset mit CSS - Kleinigkeit fehlt noch

Hallo allerseits,

hoffe, dass mir einer von euch bei meinem Problem helfen kann. Ich habe eine Seite, die ich komplett auf CSS umstellen möchte und verzweifle gerade ein wenig

Habe mal alles hochgeladen unter http://www.r2host.de. Das Problem besteht darin, dass die Optik im Firefox stimmt, im IE aber leider voll daneben aussieht. Der Scrollbalken geht über die komplette Seite und der Hintergrund der Navigation geht nicht bis zum Ende der Seite. Bin schon auf zig Seiten gewesen mit fertigen Layouts, habe meines aber leider nicht gefunden.

Bin für jeden Tip dankbar.

Gruß Hannes
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.07.2006, 18:14
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Skeeve
Der Scrollbalken geht über die komplette Seite
Der vertikale Scrollbalken geht normalerweise immer über die komplette Seite, falls dein Inhalt länger ist als der Viewport anzeigen kann.
Oder suchst du eine Möglichkeit nur den Content Bereich scrollen zu lassen?
Dann siehe overflow: auto.
Zitat:
Zitat von Skeeve
der Hintergrund der Navigation geht nicht bis zum Ende der Seite.
Such mal nach faux columns, ist anders leider nicht möglich. Oder in der FAQ, Frage 1.
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.07.2006, 18:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2006
Ort: Berlin
Beiträge: 21
Skeeve befindet sich auf einem aufstrebenden Ast
Standard

Danke für die schnelle Antwort!

Zitat:
Zitat von Lloyd Larkin
Der vertikale Scrollbalken geht normalerweise immer über die komplette Seite, falls dein Inhalt länger ist als der Viewport anzeigen kann.
Oder suchst du eine Möglichkeit nur den Content Bereich scrollen zu lassen?
Dann siehe overflow: auto.
Ja, Ziel ist es, dass der Balken am Bildschirmrand ist und nur der Contentbereich gescrollt wird. Sollte die Navigation sehr lang werden, muss die separat scrollbar sein.
Das mit dem Overflow funktioniert im Firefox sehr gut, nur im IE leider nicht. Da der Balken nicht direkt am Content kleben soll habe ich einen Container drumherum gesetzt, der mit dem folgenden Code kombiniert wird:

Code:
.contentframe{
   position:absolute; top:90px; left:220px; right: 0px; bottom: 0px;
   margin: 0px; padding: 0px;
   background-color: #ffffff;
   overflow:auto;
}
Zitat:
Zitat von Lloyd Larkin
Such mal nach faux columns, ist anders leider nicht möglich. Oder in der FAQ, Frage 1.
Vielen Dank, das hat funktioniert. Bleibt also nur noch das eine Problem mit dem Scrollbalken.

Vielen Dank,
Hannes

Geändert von Skeeve (26.07.2006 um 18:50 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 26.07.2006, 20:21
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Die einzige Möglichkeit die mir momentan einfällt dein Vorhaben mit dem Scrollbalken am rechten Rand zu realisieren wäre alles bis auf den Content Bereich mit position: fixed zu positionieren. Dann schaut es oberflächlich so aus als ob nur der Content Bereich gescrollt wird, eben weil sich nur dieser bewegt.
Allerdings müsstest du dann wieder nach Workarounds für den IE suchen, da dieser bis einschliesslich Version 6 position: fixed nicht kennt.

Gibt es keine andere Möglichkeit wie du das Layout realisieren könntest?
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }
Mit Zitat antworten
  #5 (permalink)  
Alt 27.07.2006, 10:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2006
Ort: Berlin
Beiträge: 21
Skeeve befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Lloyd Larkin
Die einzige Möglichkeit die mir momentan einfällt dein Vorhaben mit dem Scrollbalken am rechten Rand zu realisieren wäre alles bis auf den Content Bereich mit position: fixed zu positionieren. Dann schaut es oberflächlich so aus als ob nur der Content Bereich gescrollt wird, eben weil sich nur dieser bewegt.
Allerdings müsstest du dann wieder nach Workarounds für den IE suchen, da dieser bis einschliesslich Version 6 position: fixed nicht kennt.

Gibt es keine andere Möglichkeit wie du das Layout realisieren könntest?
Hi Lloyd Larkin,

bin auf den Code nicht besonders fixiert. Ich würde auch nochmal von vorne anfangen. Die Optik sollte aber genau so sein wie das Layout derzeit im Firefox dargestellt wird. Ich bin mit CSS noch nicht so tief vertraut und bin mir daher nicht sicher wie das mit fixed und floating ist. Ich habe als Styles folgendes definiert:

Code:
html,body{ 
   height: 100%; max-height:100%; width: auto;
   background: #fff url(lightblue.gif) repeat-y 0 0;   
   color: #000;
   font-size: 100.01%;
   font-family:Verdana,Arial,Geneva,sans-serif; 
   margin: 0px; padding: 0px;
}
						
.head{ 
   position:absolute; top:0px; left:0px;
   margin: 0px; padding: 0px;
   width: 100%; height: 90px;
   background-image: url(header.gif); 
   display:block;
 }

.contentframe{ /* umschließt navigation und content damit der scrollbalken am rechten rand ist */
   position:absolute; top:90px; left:220px; right: 0px; bottom: 0px;
   margin: 0px; padding: 0px;
   background-color: #ffffff;
   overflow:auto;
}

.content{ 
   width: 580px;
   padding: 0px; padding-left:50px; padding-right:50px; padding-top: 40px;
   background-color: #cccccc;
}
						
			
.navi{
   position:absolute; top: 90px; bottom: 0px;
   width: 220px;
   margin: 0px;  
   background-color: #d9e6f3; 
   font-family:Arial,Verdana,Geneva,sans-serif; 
}
Mit Zitat antworten
  #6 (permalink)  
Alt 27.07.2006, 12:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2006
Ort: Berlin
Beiträge: 21
Skeeve befindet sich auf einem aufstrebenden Ast
Standard Wie macht man 100% minus 220px?

Edit:

Habs hinbekommen. FF und IE6.0 zeigen alles so an wie ich das möchte. Jetzt installiere ich gerade ein paar VMs, um Betriebssysteme und Browservarianten zu checken.

Hier der Code, falls jemand ein ähnliches Layout braucht (habs noch nicht schöngeräumt)

Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>CSS Layout</title>
	<link rel="stylesheet" media="all" type="text/css" href="style.css" />
	<link rel="stylesheet" media="all" type="text/css" href="navi.css" />	
</head>
<body>
	
	<!-- Rahmen um den Content -->
	<div id="contentframe">
	
	<!-- Anfang des Contentbereichs -->
	<div class="content">
		<h1>Topic</h1>
		<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent in turpis eu tortor viverra laoreet. Donec faucibus tristique magna. Suspendisse vel arcu ac arcu lacinia vestibulum. Fusce tempus ligula ut nisl. Sed porttitor vulputate elit. Fusce porta, est in porttitor viverra, nisl mi posuere lacus, sit amet posuere odio nibh at leo. Integer nisl enim, venenatis in, nonummy ut, ullamcorper ac, diam. Aenean ultrices, tortor at mollis dapibus, nisi turpis fringilla erat, non iaculis lorem risus vitae lacus. Etiam mi lorem, scelerisque et, scelerisque nec, dapibus consequat, ante. Donec iaculis sodales leo. Aliquam feugiat. Sed sed mi et turpis pulvinar fringilla. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vitae nulla a est aliquam.
		</p>
	</div>
	<!-- Ende des Contentbereichs -->

	</div>
	<!-- Ende des Contentframes -->
	
	<!-- Navigation -->
	<div class="navi">
		<img src="header_klein.gif" alt="Header" />
		<ul>
			<li><a href="index2.html" target="_self">Link 1</a></li>
			<li><a href="index2.html" target="_self">Link 2</a>
				<ul class="subnavi">
					<li><a href="index.html" target="_self">Link 2.1</a></li>
					<li>
						<a href="index.html" target="_self">Link 2.2</a>
						<ul>
							<li><a href="index.html" target="_self">Link 2.2.1</a></li>
							<li><a href="index.html" target="_self">Link 2.2.2</a></li>
							<li><a href="index.html" target="_self">Link 2.2.3</a></li>
						</ul>														
					</li>
					<li><a href="index.html" target="_self">Link 2.3</a></li>
				</ul>
			</li>
			<li><a href="index.html" target="_self">Link 3</a></li>
			<li><a href="index.html" target="_self">Link 4</a></li>
			<li><a href="index.html" target="_self">Link 5</a></li>
			<li><a href="index.html" target="_self">Link 6</a></li>
			<li><a href="index.html" target="_self">Link 7</a></li>
			<li><a href="index.html" target="_self">Link 8</a></li>
		</ul>			
	</div>
	<!-- Ende der Navigation -->
	
	<!-- Bannerbereich: Topnavigation etc -->
	<div class="head">
		<div class="logo">
			<img src="logo.gif" width="210" height="65" alt="Logo" />
		</div>
		<ul class="topnavi">
			<li><a href="index.html">Link 1</a></li>			
			<li><a href="index.html">Link 2</a></li>
			<li><a href="index.html">Link 3</a></li>
			<li><a href="index.html">Link 4</a></li>
			<li><a href="index.html">Link 5</a></li>
			<li><a href="index.html">Link 6</a></li>
		</ul>
	</div>
	<!-- Ende des Bannerbereichs -->	
</body>
</html>
Code:
body{ 
   max-height:100%; width: auto;
   background: #fff url(lightblue.gif) repeat-y 0 0;   
   color: #000;
   font-size: 100.01%;
   font-family:Verdana,Arial,Geneva,sans-serif; 
   margin: 0px; padding: 0px;
   overflow: hidden;    
   }

.head{ 
   position:absolute; top:0px; left:0px;
   margin: 0px; padding: 0px;
   width: 100%; height: 90px;
   background-image: url(header.gif); 
   display:block;
   }

#contentframe{
   position:fixed; top: 90px; left:0; right: 0px; bottom: 0px;
   margin: 0; padding-left: 220px;
   overflow:auto;
}


  
.content{ 
   width: 480px;
   margin: 0;
   padding:40px 50px 200px 50px; 
/*   padding: 0px; padding-left:50px; padding-right:50px; padding-top: 40px; */
   background-color: #cccccc;
}

						
.content p{	
   font-family:Verdana,Geneva,Arial,sans-serif; 
   font-size:11px; 
   color: #000000; 
   line-height: 18px	
}
						
.content h1{	
   font-size:14px; color: #3f4c59; font-weight: bold; line-height: 16px	
}


.logo{
   position:absolute; top:12px; left:12px;
   margin:0px; padding: 0px;
}

.navi{
   position:absolute; top: 90px; bottom: 0px;
   width: 220px;
   margin: 0px;  
   background-color: #d9e6f3; 
   font-family:Arial,Verdana,Geneva,sans-serif; 
}

/*
######################
ie hacks
######################
*/
/* Contentbereich erst bei 90 Pixeln von oben starten lassen */
* html body {
  padding:90px 0 0 0; 
  }

/* Contenframebox auf 100% bringen da die innere Box die Contentframbox auf über 100% dehnt und kein overflow zustande kommt */
* html #contentframe {
   height: 100%;
   }
   
* html .content {
   height: 100%;
   width: 580px;
   }
   
   
/*
######################
Hacks Ende
######################
*/
Danke für die Unterstützung!

Geändert von Skeeve (27.07.2006 um 16:25 Uhr)
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
2 CSS Files -> 1 CSS File Habi CSS 7 17.02.2010 16:25
Verschachteln und Erweitern von CSS? DerJo CSS 4 25.01.2010 19:07
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 03:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 09:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39


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