[HTML/CSS] 3 Hintergrundbilder

Fengar · 20 Januar 2008

Hallo,

ich suche eine Möglichkeit 3 verschiedene Hintergrundbilder zu verwenden.
Hier mal eine kleine Skizze wie ich mir das vorstelle:

also die kleinen Striche in der mitte sollen alle ein 1pixel breites Bild darstellen.

Gibt es da irgendeine Möglichkeit?

Gruß,
Fengar

theHacker · 20 Januar 2008

Wenn du 3 Hintergrundbilder brauchst, brauchst du auch 3 Container, denen du sie zuweist.

gadon · 20 Januar 2008

div mit breite und höhe 100% in dem dann jeweils nen weiteren div pro hg bild

Fengar · 20 Januar 2008

Danke erstmal für die schnellen Antworten.

Ich habe es so versucht:

HTML Teil

HTML:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="hintergrund1"></div>
<div class="hintergrund2">
Testinhalt
</div>
<div class="hintergrund3"></div>
</body>
</html>

CSS-Teil

Code:

BODY {
padding:0px;
margin:0px;
}

.hintergrund1 {
width:400px;
min-width:400px;
max-width:400px;
background:#ff0000 repeat-y;
}

.hintergrund2 {
width:400px;
min-width:400px;
max-width:400px;
background:#00ff00 repeat-y;
text-align:center;
}

.hintergrund3 {
width:400px;
min-width:400px;
max-width:400px;
background:#0000ff repeat-y;
}

Der IE hat das ganze vertikal dargestellt. (sah aus wie eine Flagge mit Schrift)
Der FF hat nur den Container dargestellt, wo ein Text stand.

Cosmoflamme · 20 Januar 2008

Dir ist aber schon klar,dass sowohl "min-width" als auch "max-width" vom IE6 noch nicht interpretiert werden können?Zumal mir die Angabe unsinnig erscheint,da die Breite immer 400px betragen wird.Also reicht die erste Angabe
width:400px;.
Verrate uns doch bitte noch,ob die Webseite sich an den Bildschirm anpassen soll,oder ob es eine feste Grösse gibt.

Moloc · 21 Januar 2008

Fengar schrieb:
Der IE hat das ganze vertikal dargestellt. (sah aus wie eine Flagge mit Schrift)

Das liegt daran, dass ein div-Element ein Block-Element ist und somit immer die gesammte Breite "verwendet", auch wenn es so nicht dargestellt wird. Abhilfe schafft z.B. das setzen der float-Eigenschaft. Eventuell funktioniert das auch mit dem ändern der display-Eigentschaft.

Fengar schrieb:
Der FF hat nur den Container dargestellt, wo ein Text stand.

Eventuell hilft es, wenn du eine Höhe noch mit angibst. Dann sollten alle Browser die divs anzeigen.

gadon · 21 Januar 2008

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>valid xhtml1.0-strict</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="box1">a</div>
<div class="box2">a</div>
<div class="box3">a</div>
</div>
</body>
</html>

PHP:

#html, body {
	color: #000000;
	background: #FFFFFF;
	height: 100%;
	min-height: 100%;
	padding: 0px;
	margin: 0px;
}

div.container {
	position: absolute;
	color: #000000;
	background: #FFFFFF;
	height: 100%;
	width: 100%;
	padding: 0px;
}

div.box1 {
	float: left;
	color: #000000;
	background: #990000;
	height: 100%;
	width: 33%;
	padding: 0px;
}

div.box2 {
	float: left;
	color: #000000;
	background: #FF6600;
	height: 100%;
	width: 33%;
	padding: 0px;
}

div.box3 {
	float: left;
	color: #000000;
	background: #FFFF00;
	height: 100%;
	width: 34%;
	padding: 0px;
}

mbassus · 21 Januar 2008

gadon schrieb:
div mit breite und höhe 100% in dem dann jeweils nen weiteren div pro hg bild

Pfui

gadon · 21 Januar 2008

mbassus schrieb:
Pfui

ja ok, ist zwar schmutzig aber wenn du zeigst wie man es sauber macht bekommste nen orden.

hab bisher nur diese lösung hier gefunden und selbst di ist so lala

https://www.thescripts.com/forum/thread100443.html

Fengar · 22 Januar 2008

Danke ersteinmal für eure Posts

@gadon: Mit dem FF funktioniert das Einwandfrei, aber beim IE wird der 3. Container in die nächste Zeile versetzt und dann habe ich rechts einen großen weissen Bereich.
Und wie stellt man das so ein, dass das Linke und das Rechte Feld eine feste Größe haben und das Hauptfeld, in der Mitte eine variable, welche sich der Bildschirmgröße anpasst?

gadon · 23 Januar 2008

bei google mal nach css 3 spalten layout suchen.

ansonsten ein wenig trixen, die mitte leer lassen:

PHP:

#html, body {
	color: #000000;
	background: #FFFFFF;
	height: 100%;
	min-height: 100%;
	padding-left: 0px;
	margin: 0px;
}

div.container {
	position: absolute;
	color: #000000;
	background: #FFFFFF;
	height: 100%;
	width: 100%;
	padding: 0px;
}

div.box1 {

	float: left;
	color: #000000;
	background: #990000;
	height: 100%;
	width: 200px;
	padding: 0px;
}

div.box3 {
	float: right;
	color: #000000;
	background: #FFFF00;
	height: 100%;
	width: 200px;
	padding: 0px;
}

htmlcode ist der selbe wie oben, nur ohne div box2

Fengar · 23 Januar 2008

Danke Vielmals für deine Mühen :biggrin:

Leider hab ich immer noch ein Problem siehe hier:

Bei der dritten Box sieht es so aus, als wär dort ein Zeilenumbruch. Hat da jemand eine Erklärung und evtl. auch eine Lösung dafür?

gadon · 23 Januar 2008

setz mal noch ein:

margin: 0px;

dazu.

Fengar · 24 Januar 2008

margin: 0px; hat nicht geholfen, aber line-height:0px; hat das Problem behoben.

Jetzt gibt es aber wieder ein Neues.
Wenn ich einen Inhalt einfüge, der Größer ist, als der Platz, der in der Mitte zur Verfügung steht, gibt es Probleme. Der Inhalt verlängert den Hintergrund von dem mittleren Hintergrund in den Rechten Hintergrund hinein. Das sieht dann so aus:

Ausserdem wird der Inhalt nicht zentriert, er müsste eigentlich auch in den Linken (Blauen) Container zu sehen sein.
Mein Quelltext sieht zur Zeit so aus:

PHP:

#html, body {
    color: #000000;
    background: #FFFFFF;
    height: 100%;
    min-height: 100%;
    padding: 0px;
    margin: 0px;
	text-align: center;
}

div.container {
    position: absolute;
    color: #000000;
    background: #FFFF00;
    height: 100%;
    width: 100%;
    padding: 0px;
	line-height:0px;
	overflow:scroll;
}

div.box1 {
    float: left;
    color: #000000;
    background: #0000FF;
    height: 100%;
    width: 200px;
    padding: 0px;
}

div.box3 {
    float: right;
    color: #000000;
    background: #FF0000;
    height: 100%;
    width: 200px;
    padding: 0px;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>valid xhtml1.0-strict</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="box1"></div>
<div style="line-height:normal;"><table width="90%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>
</div>
<div class="box3"></div>
</div>
</body>
</html>

Moloc · 24 Januar 2008

Wie ich schon weiter oben erwähnt habe, handelt es sich hier um das Problem, dass ein div immer die gesammte breite benützt, wenn nichts anderes angegeben wird. Desshalb ist deine box3 unterhalb von box2 zu sehen, wenn in der box2 ein Text steht.

Versuchs mal hiermit: (kann sein, dass irgend eine IE version da bei der Darstellung noch einzelne probleme hat, musst du ausprobieren)

Code:

div.box2 {
   float: left;
   margin: 0 200px;
}

Du musst dann der zweiten Box im html auch noch das Attribut class="box2" setzen.

gadon · 24 Januar 2008

Fengar schrieb:
margin: 0px; hat nicht geholfen, aber line-height:0px; hat das Problem behoben.

Jetzt gibt es aber wieder ein Neues.
Wenn ich einen Inhalt einfüge, der Größer ist, als der Platz, der in der Mitte zur Verfügung steht, gibt es Probleme. Der Inhalt verlängert den Hintergrund von dem mittleren Hintergrund in den Rechten Hintergrund hinein. Das sieht dann so aus:

Ausserdem wird der Inhalt nicht zentriert, er müsste eigentlich auch in den Linken (Blauen) Container zu sehen sein.
Mein Quelltext sieht zur Zeit so aus:

Junge, so schwer kann das doch nicht sein, ich geb dir später noch ein letztes Beispiel!

:roll:

Fengar · 28 Januar 2008

Sorry bin wirklich noch Anfänger auf dem Gebiet

Über ein letztes Beispiel wär ich seeeeeehr dankbar

gadon · 29 Januar 2008

werd dich nacher mal im icq betuddeln.

[HTML/CSS] 3 Hintergrundbilder

Fengar

South Park - Fan

theHacker

sieht vor lauter Ads den Content nicht mehr

gadon

has left the game!

Fengar

South Park - Fan

Cosmoflamme

Quellcode-Schubser

Moloc

Well-known member

gadon

has left the game!

mbassus

Well-known member

gadon

has left the game!

Fengar

South Park - Fan

gadon

has left the game!

Fengar

South Park - Fan

gadon

has left the game!

Fengar

South Park - Fan

Moloc

Well-known member

gadon

has left the game!

Fengar

South Park - Fan

gadon

has left the game!