abgeschnittener Hintergrund

Status
Nicht offen für weitere Antworten.

bluex

Erfahrenes Mitglied
Hi

Ich habe das Problem, dass in einem div mit eine hintergrundfarbe, einfach jedes mal wenn das Browserfenster zu klein ist und der Scrollbalken für links und rechts erscheint, dann die Hintergründe einfach auf Fenstergrösse abgeschnitten sind wenn man nach rechts scrollt.

hier mal der CSS-code für eine dieser div:
HTML:
.navi {
	background-color: #000000;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #AD585A;
	height: 22px;
	font-weight: bold;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
	clear: left;
	width: 100%;
		}

mfg
blueX
 
Zuletzt bearbeitet:
Hast du auch deinem body eine Hitergrundfarbe zugewiesen?
Code:
body {
  background-color: #000000;
}

Tobee
 
Ja der body hat #FFFFFF

Hier mal ein screenshot wie ich des meine. Die Breite des div soll sich an der gesamten Seite orientieren. Aber die Browser machen die Boxen immer nur so breit wie das Fenster ist. =/

mfg
blueX
 

Anhänge

  • 25411attachment.jpg
    25411attachment.jpg
    160,7 KB · Aufrufe: 11
Zuletzt bearbeitet:
erstmal einen kleinen Tipp für die Übersichtlichkeit :)

Die Eigenschaften für border kannst du zusammenfassen - erspart viel schreibarbeit... aber jedem wies beliebt :)

HTML:
.navi {
	background-color: #000000;
	border-bottom: 3px solid #AD585A;
	height: 22px;
	font-weight: bold;
	border-top: 1px solid #FFFFFF;
	clear: left;
	width: 100%;
		}

Aber zu deinem eigentlichen Problem hätte ich noch ne Frage:

Hast du vorher sowas wie einen "Container" definiert? Also ein div-Element, dass alle anderen umgibt? Wenn ja, hast du da vllt die Breite speziell festgelegt? Das wäre die einzige Erklärung für mich, warum sie sich nicht über die gesamte Breite erstrecken. :)
 
hi

Ja das Ganze wird von einem div umgeben, der nicht begrenzt ist, aber er passt sich auch nur der sichtbaren Fenstergrösse an und nicht der ganzen Seite. Ich werd mal versuchen das mit einer Mindesbreite zu beheben.

//EDIT: Ja wenn ich für den äusseren div eine Mindesbreite definiere dann geht es, zumindest in den normalen Browsern, der IE macht bei einem Balken trotzdem Probleme und weigert sich den an den äuseren div anzupassen.

mfg
blueX
 
Zuletzt bearbeitet:
also hier des Testlayout:

HTML:
<!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=utf-8" />
<meta name="keywords" content="Holger Biege, Ostrock, Osten, ostmusik, sagte mal ein dichter, wenn der abend kommt, circulus, cola-wodka, reichtum der welt, robinson, will alles wagen, " />
<meta name="description" content="ge tert rweter erer e" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Holger Biege</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" media="all" type="text/css" href="css/navi.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/navi_ie.css" />
<![endif]-->
</head>
<body>
<div id="lineleft">&nbsp;</div>
<div id="border">
	<div style="width: 930px;">
		<div class="header_logo"><img src="images/header.jpg" alt="Holger Biege" width="459" height="150" hspace="0" vspace="0" border="0" /></div>
		<div class="header_logo">
			<object width="400" height="150" data="images/header.swf" type="application/x-shockwave-flash">
				<param name="movie" value="images/header.swf" />
				<param name="quality" value="high" />
			</object>
		</div>
	</div>
	<div id="navi">
		<div class="menu">
			<ul>
				<li><a class="hide" href="index.php">home</a>
					<!--[if lte IE 6]>
					<a href="index.php">home
					<table><tr><td>
					<![endif]-->
					<!--[if lte IE 6]>
					</td></tr></table>
					</a>
					<![endif]-->
				</li>
				<li><a class="hide" href="news.php">news</a>
					<!--[if lte IE 6]>
					<a href="news.php">news
					<table><tr><td>
					<![endif]-->
					<!--[if lte IE 6]>
					</td></tr></table>
					</a>
					<![endif]-->
				</li>
				<li><a class="hide" href="#">zum K&uuml;nstler</a>
					<!--[if lte IE 6]>
					<a href="#">zum K&uuml;nstler
					<table><tr><td>
					<![endif]-->
					<ul class="menue_sub">
						<li class="menue_sub">&nbsp;</li>
						<li class="menue_sub">&nbsp;</li>
						<li class="menue_sub"><a href="#" title="Biographie">Biographie</a></li>
						<li class="menue_sub"><a href="#" title="zum K&uuml;nstler">zum K&uuml;nstler</a></li>
					</ul>
					<!--[if lte IE 6]>
					</td></tr></table>
					</a>
					<![endif]-->
				</li>
				<li><a class="hide" href="../boxes/index.html">Discographie</a>
					<!--[if lte IE 6]>
					<a href="#">Discographie
					<table><tr><td>
					<![endif]-->
					<ul class="menue_sub">
						<li class="menue_sub">&nbsp;</li>
						<li class="menue_sub">&nbsp;</li>
						<li class="menue_sub"><a href="#" title="Discographie">Discographie</a></li>
						<li class="menue_sub"><a href="#" title="CD-Versand">CD-Versand</a></li>
						<li class="menue_sub"><a href="#" title="Songs anhören">Songs anhören</a></li>
					</ul>
					<!--[if lte IE 6]>
					</td></tr></table>
					</a>
					<![endif]-->
				</li>
				<li><a class="hide" href="../mozilla/index.html">Rezensionen</a>
					<!--[if lte IE 6]>
					<a href="#">Rezensionen
					<table><tr><td>
					<![endif]-->
					<!--[if lte IE 6]>
					</td></tr></table>
					</a>
					<![endif]-->
				</li>
				<li><a class="hide" href="../ie/index.html">Tourplan</a>
					<!--[if lte IE 6]>
					<a href="../ie/index.html">EXPLORER
					<table><tr><td>
					<![endif]-->
					<ul class="right_side">
						<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
						<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
						<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
					</ul>
					<!--[if lte IE 6]>
					</td></tr></table>
					</a>
					<![endif]-->
				</li>
				<li><a class="hide" href="#">G&auml;stebuch</a>
					<!--[if lte IE 6]>
					<a href="#">G&auml;stebuch
					<table><tr><td>
					<![endif]-->
					<!--[if lte IE 6]>
					</td></tr></table>
					</a>
					<![endif]-->
				</li>
			</ul>
		</div>
	</div>
	<div class="navi_sub">&nbsp; </div>
	<p class="free">&nbsp;</p>
	<div class="content">
		<table width="859" border="0" cellspacing="0" cellpadding="5">
			<tr>
				<td ><img src="images/fluegel.jpg" alt="flügel" width="100" height="116" style="float:left;" />
					<p>Die Welt der Suchmaschinen ist geteilt. Auf der einen Seite gibt es fleißige, aber relativ schlicht gestrickte Verfahren, die große Teile des Internets durchsuchen und nach bestimmten Algorithmen bewerten, wie zum Beispiel Google. Auf der anderen Seite gibt es Systeme, die Inhalt und Bedeutung von Texten zu extrahieren suchen, aber wegen der erforderlichen Rechenleistung und Handarbeit bisher nur in begrenzten Datenräumen wie Unternehmensarchiven zu Hause waren („Text Mining“). Die Firma Interactive Systems mit Sitz in Berlin und Marburg arbeitet nun daran, mit den Methoden des Text Minings eine Suchmaschine für das offene Internet aufzubauen.<br />
						„Im ersten Halbjahr 2007 wollen wir eine semantische Suchmaschine ins Netz stellen“, sagt Martin Hirsch, Chef der Interactive Systems. Sie wird sich an eine klar umrissene Patientengruppe richten und keine freie, sondern nur eine stichwortbasierte Suche erlauben. Dafür soll sie aber sämtliche deutschsprachigen Webseiten durchforsten und Ergebnisse präsentieren, die nicht nur den Kontext der Suchanfrage berücksichtigen, sondern auch die inhaltlichen Beziehungen der Suchterme zueinander. Das genaue Geschäftsmodell für die Suche steht nach Angaben Hirschs noch nicht fest.<br />
						<br />
						Basis dafür ist ein Verfahren, dass nach Angaben Hirschs an die Erkenntnisse aus der Hirnforschung angelehnt ist und dadurch deutlich schlanker, schneller und präziser arbeitet als herkömmliche Text-Mining-Ansätze. In einem ersten Schritt werden dazu die Fachbegriffe aus einem Text extrahiert und nach bestimmten Kriterien wie der Häufigkeitsverteilung geordnet. Als nächstes werden diese Kandidaten in einen inhaltlichen Zusammenhang gebracht. Wenn zwei Wörter mit der Phrase „ist ein“ verbunden sind, handelt es sich um Über- und Unterbegriffe. Wenn die Verteilung von zwei unterschiedlichen Worten nahezu identisch ist, sind es höchstwahrscheinlich Synonyme.</p>
					<p>&nbsp;</p></td>
				<td width="200" valign="top"><div id="box"><img src="images/sonnenmeer.jpg" alt="sonnenmeer" style="float:left;" />
						<p>Die Welt der Suchmaschinen ist geteilt. Auf der einen Seite gibt es fleißige, aber relativ schlicht gestrickte Verfahren, die große Teile des Internets durchsuchen und nach bestimmten Algorithmen bewerten, wie zum Beispiel Google. Auf der anderen Seite gibt es Systeme, die Inhalt und Bedeutung von Texten zu extrahieren suchen, aber </p>
					</div></td>
			</tr>
		</table>
	</div>
	<p class="free">&nbsp;</p>
	<p class="navi_bottom">Impressum | Seite empfehlen | zu Favoriten hinzufügen </p>
	<p class="abschl">abschlussgfx</p>
</div>
</body>
</html>

und das ist dei dazugehörige CSS datei:

HTML:
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #FFFFFF;
	margin: 0px;
		}
div#border {
	position: absolute;
	min-width: 950px;
	max-width: 100%;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
	overflow: visible;
	left: 50px;
	top: 0px;
	right: 1px;
	bottom: 0px;
}
div#lineleft {
	position: absolute;
	z-index: 2;
	width: 50px;
	background-color: #FFFFFF;
	margin-bottom: 100%;
	height: 500px;
	background-image: url(../images/piano.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	font-style: oblique;
	color: #999999;
}
p {
	margin: 0px;
	padding: 0px;
		}
div#navi {
	min-width: 950px;
	max-width: 100%;
	clear: left;
	font-weight: bold;
	background-color: #000000;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #AD585A;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
		}

div.navi_sub {
	background-color: #CCCCCC;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #666666;
	border-bottom-color: #666666;
}
p.free {
	height: 50px;
}
.content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #BF7D80;
	border-right-color: #BF7D80;
	border-bottom-color: #BF7D80;
	border-left-color: #BF7D80;
	padding-left: 3px;
	text-align: justify;
	display: compact;
}

.header_logo {
	float: left;
	margin: 0px;
	padding: 0px;
}

p.navi_bottom {
	background-color: #CCCCCC;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
}
#box {
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: dashed;
	border-left-color: #AD585A;
	line-height: 13px;
	padding-left: 8px;
	display: compact;
}
.content  img {
	margin-right: 3px;
}

Ist noch nicht ganz so schön übersichtlich , weil Dreamweaver ja immer alles einzeln einträgt. Naja es geht ja jetzt soweit auf allen Browsern... nur schade das der IE immer ne Extrawurscht braucht..

mfg
blueX
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.
Zurück