html Hintergrund "unendlich" erstellen

mrlowalowa

bekommt Übersicht
Tach allerseits,

Folgendes Problem.

Die Seite besteht aus einer Hintergrund farbe (kein bild o.ä.)
An den Rändern habe ich jeweils 12.5% freigelassen, sprich weiß.

Und oben ist auch noch ein Weißes Feld mit dem Logo der Seite enthalten.

Jetzt wird auf der fläche mit dem Hintergrund die gesamte Seite mithilfe einer Tabelle aufgebaut.

Das Problem ist nun, dass der Inhalt, der in der Tabelle wiedergegeben wird zulange ist für die Seite (den Hintergrund)

Ich glaube nicht, dass es für die Tabellen Zelle zu groß ist, sondern, dass der Hintergrund weiter generiert werden müsste, was er aber nicht tut...

Meine Css ID's zum Hintergrund/Logo:

Code:
#bereich {
 	position: absolute;
  	top: 210px;
  	margin-left: 12.5%;
  	width: 75%;
  	min-width: 1200px;
  	max-width: 1200px;
  	height: 100%;
  	background: #c8cabb repeat-y scroll ;
  	background-repeat: repeat-x;
}
#logo{
	margin-left: 15%;
	margin-top: 100px;
}


Der Hintergrund lässt sich bereits scrollen. Aber er Hört nach ca 900-980 Pixel auf..

Habe auch den Text mal auf schwarz gestellt, dass man ihn hätte sehen können, jedoch wird dieser auch abgeschnitten, da der Text in der Tabelle ist, welche auf die Maße des hintergrundes angepasst sind.




Ich hoffe ihr habt mein Problem verstanden und könnt mir helfen! :) Wenn es jemand nicht verstanden hat, versuche ich es auch gerne mal anders zu erklären, einfach mal nachfragen ;)
 
Weil ich Links eine Navigation hab, in der Mitte Überschrift, Text bla bla und rechts daneben noch ein Bild.

Die Website ist noch im Aufbau und noch nirgens hochgeladen. aber ich kann mal den Code von der Hauptseite schicken. Arbeite seit ca 2 Tagen intensiv daran. Aber was ist denn der vorteil von div's habe die auch eingebaut, aber in der Tabelle selber. Dachte nicht, dass man die neben einander anordnen kann.. Bin mit dem Table system eigentlich sehr zufrieden.


Code:
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen, projection" href="styles.css">
<title>Title-blabla</title>
</head>
<body>

<div id="logo">
	<img src="data/logo.png" alt="logo" width="400" height="70"/>
</div>
<div id="bereich">
	<table id="t_bereich">	
		<tr>
			<td valign="top" class="n_border">
				<ul id="navigation">
					<li class="active"><a href="file:///Users/Florian/Documents/Ma's%20Website/index.html">Home</a></li>
					<li class="navi"><a href="file:///Users/Florian/Documents/Ma's%20Website/vorteile.html">Ihre Vorteile</a></li>
					<li class="navi"><a href="/leistungen.html">Leistungen</a></li>
					<li class="navi"><a href="/referenzen.html">Referenzen</a></li>
					<li class="navi"><a href="/kontakt.html">Kontakt</a></li>
					<li class="navi_2"><a href="/impressum.html">Impressum</a></li>
				</ul>
			</td>	
			<td id="main">
				<div id="head">Damit<br />Ihre Geschichte <br />sitzt.</div>
				<p id="text">
					text bla bla <br />
bla bla
				</p>
			</td>
			<td id="bild">
				<img src="data/vorteile1.png" alt="Profil" width="250" height="200"/>
			</td>
		</tr>
		<tr>
			<td>
				XING BUTTON - Platzhalter
			</td>
		</tr>	
	</table>
</div>

</body>
</html>

Und noch die CSS-Datei dazu:

Code:
#bereich {
 	position: absolute;
  	top: 210px;
  	margin-left: 12.5%;
  	width: 75%;
  	min-width: 1200px;
  	max-width: 1200px;
  	height: 100%;
  	background: #c8cabb repeat-y scroll /*Anders: #B5B8AB */ ;
  	background-repeat: repeat-x;
}
#logo{
	margin-left: 15%;
	margin-top: 100px;
}
#t_bereich{
	margin-top: 80px;	
}

/* @group Navigations Bar */

#navigation{
	list-style-type: none;
	margin-right: 30px;
	font-size: medium;
	white-space: nowrap;
	}
.navi a{
	color: white;
}
.navi_2 a{
	color: white;
}
.active a{
	color: #81a69d;
}
.active_2 a{
	color: #81a69d;
}
.navi{
	margin-bottom: 30px;
}
.navi_2{
	margin-top: 100px;
}
.active{
	margin-bottom: 30px;
}
.active_2{
	margin-top: 100px;
	
}
.n_border{
	border-right: 4px solid white;
}

/* @group Links */

a {font-size: 110%; }
a:link { font-family: 'Helvetica',Helvetica,serif;text-decoration:none; font-weight:bold; ; /*font-size: medium;*/ }
a:visited { font-family: 'Helvetica',Helvetica,serif;text-decoration:none; font-weight:bold; }
a:active { font-family: 'Helvetica',Helvetica,serif;text-decoration:none; font-weight:bold; }
a:focus { font-family: 'Helvetica',Helvetica,serif;text-decoration:none; font-weight: bold;
}

/* @end */

/* @end */

/* @group Text */

#head {
	font-family: Garamond,GaramondNo8, serif;
	font-weight: bolder;
	font-size: 350%;
	margin-left: 30px;
	margin-bottom: 10%;
	color: #81a69d /* Anders: #78908a */;
}
#text{
	font-family: 'Helvetica',Helvetica, serif;
	color: white;
	margin-left: 30px;
	font-size: 140%;
	font-weight: 500;
	line-height:35px;
	white-space: nowrap;
}
#main{
	vertical-align: text-top;
	width: 80%;
	position: absolute;
}
h1{
	line-height: 50%;
}
p, h1{
	color: white;
	font: bold 100% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
.h1_color{
	color: #81a69d;
}

/* Vorteile List */

.text_list{
	margin-left: -20px;
}

/* @end */
#bild{
	vertical-align: top;
	position: absolute;
	margin-left: 63.5%;
}

Das sollte dir einen Überblick geben ;)

EDIT: immer dieser doofe editor wo man erst speichern muss und dann neu laden damit er neue sachen übernimmt.... Es geht jetzt wie es scheint... Oo... Aber trotzdem wieso div statt table? :O

EDIT2: fehlalarm.. Das war nur, weil ich mein fenster auf Full Screen hatte und es dementsprechend größer wurde in der relativion. Hab mal ein Screenshot:
ildschirmfoto2013-04-03um16.29.31.png
 
Zuletzt bearbeitet:
Na keine ahnung welches zielpublikum hast, aber barrierefrei ist die ganze tabellenverschachtelung nicht.
Und n kleiner Alptraum zu warten.

Und ich vermute dass es mit dem Bild was du als Content einbindest zusammenhängt dass der Bereich nicht erweitert wird.
 
Naja, verschachtelt ist das jetzt nicht wirklich. ist eine Zeile mit 3 Spalten mit Füllung. :D

Davor hatte ich eine Table in der table anstatt die liste für die naviation zu verwenden, das geb ich zu, war wirklich verschachtelt.. ^^

Es hängt mit dem height: 100% zusammen. Setzte ich da einen wert 1200px ein wird auch mehr angezeigt. Es ist also nun von nöten, dass ich die height pro seite anders mache, wie zum Beispiel mit einer class="normal", class="extended" etc ;)

das gaze sind ja 2 div's untereinander. die obere div für das Logo und die 2te div ist der Hauptteil. vielleicht hat die div eine beschränkung bei 1000 px was hight:100% entsprechen soll??

MfG
mrlowalowa
 
... oder für #bereich überhaupt keine Höhe angeben, denn das ist eh nur ein Conatiner für andere Inhalte und dehnt sich aus, wenn die anderen Inhalte größer werden. Grund: Die 100% bei background beziehen sich immer auf die Höhe des Viewports (Bildschirm) oder des Eltern Elements, nicht des Inhalts des Elements.

Statt #bereich einzufärben, könnte man auch einfach table einen background geben, damit hätte sich das Problem ganz von selbst erledigt.

Max-width und dann 1200 Pixel ist übrigens auch böse (außer bei verwendung von Media Queries). Wenn jemand mit einem Tablett im Hochkant Format oder mit einem Fon surft, ist das zu breit - und es wird so breit, wenn die Tabelle innen drin es verlangt, unabhängig von der Bildschirmgröße. Wenn Du einen Rand haben willst, solltest Du eventuell über % margins nachdenken und sich das innere Feld ausdehnen lassen, bis der Schirm voll ist. Im heutigen Zeitalter der stark unterschiedlichen Displaygrößen in CSS Pixeln (das ist ein Unterschied zu tatsächlichen Pixeln) sollte man keine absoluten Größen wie px oder pt oder cm oder mm verwenden: em und % sind einfacher skalierbarer und erlauben ein viel einfacheres flexibles Layout.

Die 3 Spalten bekommst Du übrigens auch prima mit float hin, dann brauchst Du gar keine Tabelle, siehe hier (40 unterschiedliche Anordnungen mit Header und footer ohne Änderungen des HTML codes - alles per CSS.)
 
Zuletzt bearbeitet:
Hey, danke der Tipp mit Table einfärben/hintergrund ist echt ne sau gute Idee! Das kann ich noch ändern,

Aber mit Float habe ich irgendwie schlechte erfahrungen gemacht. Zumbeispiel Bilder haben sich damit nicht gerührt. (War aber auch in einer Tabellen Zelle unk angezeigtem Border, da hätte man es schon gesehen) Vielleicht geht das einfach nicht in einer Tabelle.

Wenn ich ganz gut drauf bin versuche ich das mal testweise.

Die Max-width und min-width wollte ich eben aus dem Grund machen, damit es immer überall gleich ausschaut. Das ist ja jetzt nur die Desktop version. Wenn Die Gesamte Seite nämlich zusammen geschoben wurde, wurden a die Texte verengt (ist ja normal / nicht weiter schlimm) Aber auch das Bild von seiner Position (am rechten rand vom Bereich anliegend) verrutscht. Wenn man es aber kleiner Skaliert gehen die Tabellen Zellen irgendwann über den Zellen Rand hinaus.

Hab jetzt noch mal sehr viel geändert. Die verwendung von % und px ist bei mir so 50 / 50. Die abstände habe ich ja mit % zum beispiel gemacht. jetzt aber für genauere Verschiebungen in der Tabelle habe ich meistens eher px genommen.

Ich werde die Website das Wochenende mal Online stellen. Und dann könnt ihr euch ja mal mein ergebnis anschauen :)

Denke aber aufjedenfall schon darüber nach nochmal alle px einheiten in % zu ändern, wegen dem von dir angesprochenem Aspekt..



Wenn ich jetzt aber die Tabelle einfärbe wegen dem hintergrund und dann auf Float umsteigen würde, wäre der Hintergrund ja weg. Von daher werde ich lieber erstmal bei der Tabelle bleiben.

Schon mal vielen Dank für eure Antworten! :)
 
Habe die Website mittlerweile hochgeladen:

Link entfernt

Folgendes ist mir in Safari aufgefallen: ab und zu verrutscht der gesamte Text in der Hauptspalte nach rechts, da die Navigations-Spalte anscheinend normal in einer ebene über der anderen Spalte liegt. Manchmal werden die beiden Zeilen aber In die gleiche ebene interpretiert und es findet dann eine Verschiebung statt (eine Seite 5 mal neu Laden dann sollte es spätestens mal auftauchen.. )

In Firefox werden die Punkte über den Umlauten wie ä, ü, ö versetzt dargestellt.. Schrift Art Garamond

In opera übers Handy wurden die Texte locker um 100% klein "gezoomt"...

Ich würde schon gerne auf % Angaben bei den Größen gehen, aber leider hat das zu folge, das bei Zoom so die Seiten kleiner werden... :/
Und da dann noch mit min-width zu arbeiten macht auch nur mit Pixeln Sinn. Hat da jemand einen richtigen Mix Vorschlag??


Rechts der Rand von dem Bereich wird auch nicht immer dargestellt. Habe ich durch Margin-right erzwingen wollen. Ohne Margin right komme ich durch width und Margin-left auf 12.5% + 75%. Und da fehlen dann noch 12.5% die aber meistens, vorallem auf mobilen Geräten nicht angezeigt wird.
 
Zuletzt bearbeitet:
Oben