homepage - ohne Zeilenumbruch

ueb65 · #1 (**permalink**) 28.01.2005, 21:39

Hallo,
beim Erstellen meiner Homepage stellt sich mir folgendes Problem.

Ich möchte eine Homepage erstellen, die links und rechts einen Bereich mit der festen Breite von 160 px besitzt. Der mittlere Bereich soll abhängig von der Fenstergröße eine varaible Breite besitzen (Fensterbreite - 2*160px).
Der obere Bereich hat zusätzlich eine feste Höhe von 60 px.
Das funktioniert auch alles ganz gut. Nur wenn ich das Fenster etwas zu schmal mache, dann bekomme ich so etwas wie einen Zeilenumbruch und das gesamte Layout der Website kommt durcheinander.
Nun möchte ich gerne erreichen, dass der obere Teil der Homepage nicht umbricht. Wenn das Fenster zu schmal ist, dann soll der Browser unten eine Scrollbar einrichten und die Seite dann nicht vollständig sichtbar anzeigen.
Ich habe schon einiges getestet, bin aber noch zu keiner Lösung meines Problems gekommen. Die Verwendung von white-space:nowrap hat mich leider nicht weiter gebracht.

Wer kann mir helfen?

Ich habe meinen HTML-Code soweit wie möglich abgespeckt um ihn besser nachvollziehen zu können. Hier wird nur der obere Teil der Homepage abgebildet, der das Problem mit dem Umbruch hat.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<style type="text/css"><!--
body 
{
	font-family:verdana, helvetica, arial;
	font-size:11px;
	background-color:#ffffff;
	margin:0px;
	height:100%;
}

h1 {
	font-size:13px;
	font-weight:bold;
	margin:0px;
	padding:0px;
}

table {
	border:0px;
	padding:0px;
	margin:0px;
	width:100%;
}

.header {
	height:60px;
	background-color:#eeeeee;
}

.logo {
	height:60px;
	width:160px;
	float:left; 
	text-align:center;
	background-color:#ffffff;
}

.division, a.division {
	float:left;
	margin-top:5px;
	margin-bottom:5px;
	margin-right:10px;
	margin-left:10px;
	text-align:left;
	padding:0px 15px;
}
a.division:link, a.division:visited, a.division:active {
	border-left:3px solid #215ab5;
	color:#215ab5;
}

a.division:hover, .division {
	border-left:3px solid #FF6300;
	color:#FF6300;
}

//--></style>

<body>
	
	
	<div class="logo">
		
	</div>
	
	<div class="header">
		
		
		<h1 class="division">
			
SAP Prozess-und
Modulberatung
		</h1>
		<h1 class="division">
			
Enterprise Collaboration &amp;
Integration
		</h1>
		<h1 class="division">
			
Konfigurations-
und Kataloglösungen
		</h1>
	
		
		<div class="logo" style="float:right;">
			
		</div>
	
	</div>

</body>
</html>

Boris · #2 (**permalink**) 28.01.2005, 22:03

Setz für das DIV oder den Bereich, wo der Scrollbalken erscheinen soll, mal ein:

overflow: auto;

Funktioniert es dann?

ueb65 · #3 (**permalink**) 29.01.2005, 21:48

Hallo,

vielen Dank für den Tip.
Leider funktioniert es auch nicht.

Ich habe um alle Einträge herum einen <div style="overflow:auto;">-Tag gelegt. Trotzdem bricht der Browser um und zerstört das Layout.

Gibt es nichts, das einen Zeilenumbruch verhindert?

Ich habe schon das Attribute 'white-space:nowrap' versucht zu verwenden, leider bisher auch ohne Erfolg.

Als letzte Möglichkeit bleibt mit eine Tabelle, wovon ich aber gerne Abstand nehmen möchte.

Gruß
Uli

soma · #4 (**permalink**) 30.01.2005, 01:06

Zitat:

Zitat von ueb65

Hallo,

Code:

<style>
.header {
	height:60px;
	background-color:#eeeeee;
}


//--></style>

	<div class="header">
		
		
		<h1 class="division">
			
SAP Prozess-und
Modulberatung
		</h1>
		<h1 class="division">
			
Enterprise Collaboration &amp;
Integration
		</h1>
		<h1 class="division">
			
Konfigurations-
und Kataloglösungen
		</h1>
	
		
		<div class="logo" style="float:right;">
			
		</div>
	
	</div>

Ich habe mal ein wenig von deinem Quelltext zitiert. Schau ihn dir mal genau an. Wie willst du denn den ganzen Inhalt in 60px Höhe unterbringen?
Gut, um so eine Seite zu realisieren musst du einen Container haben und diesen Container dann einen absoluten Wert in der Breite angeben, denn woher soll denn nun der Browser wissen, ab welcher Breite er einen Scrollbalken einblenden soll?
Du kannst es ungefähr so ausprobieren:

Code:

<html>
<body>
<div class="container" style="margin: 0px auto 0px auto; width: 800px;">
	<div style="border: 1px solid black; height: 60px;">60 px hoch</div>
	<div style="float: left; width: 160px; border: 1px solid black;">160px breit links</div>
	<div style="float: right; widht: 160px; border: 1px solid black;">160px breit rechts</div>
	<div style="margin: 0px auto 0px auto; border: 1px solid black;">mitte</div>
</div>
</body>
</html>

Ich habe >>class="container"<< nur zur Verdeutlichung benutzt, dies kannst du aber im Styletag oder in der separaten CSS Datei aber durchaus benutzen!
Vielleicht solltest du aber auch noch den DIV-Container auch noch das >>margin: 0px auto 0px auto;<< ins Style einbinden und die Breite halt anpassen.
Hoffe, dir ein wenig geholfen zu haben.

Grinsegruss

soma

Edit: ich habe einfach mal das MARGIN in den Container eingefügt

Nun kannst du den Code herauskopieren und das ganze einfach mal test.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Textfeld auf anderen Homepage anzeigen lassen	modietz	(X)HTML	2	25.10.2012 11:45
Probleme bei Bildschirmauflösung einer neu erstellten Homepage – Htmlseiten werden n	TB1975	CSS	6	20.02.2009 15:28
Zeilenumbruch durch Codestruktur	MANIK	(X)HTML	11	23.09.2007 15:37
[Design & Inhalt] Homepage eines Messengers	raikon	Site- und Layoutcheck	18	06.06.2007 15:12
homepage in css, rahmen	webix21	CSS	4	18.12.2006 17:09