Hintergrundbilder über zwei div-Bereiche passgenau @ tutorials.de: Tutorials, Forum & Hilfe

NTDY · 31.05.09 16:43

Code :

|-body------------------------|
|     |-A2--------------|     |
|     |  |-A3--------|  |     |
|     |  |           |  |     |
|     |  |           |  |     |
|     |  |           |  |     |
|     |  |           |  |     |
|     |--|           |--|     |
|        |           |        |
|        |           |        |
|        |           |        |
|        |           |        |
|--------|-----------|--------|

Ich möchte gern eine Seite realisieren, die Folgendes erfüllt.

<body> besitzt eine Hintergrundbild: hintergrund.jpg. Das Element <body> ist in css so definiert:

color:#000000;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
line-height: 120%;
background-image:url(hintergrund.jpg);

Im Element <body> befindet sich das div Element A2. Innerhalb von A2 gibt es das div-Kindelement A3.
Beide div-Elemente A2 und A3 besitzen Bilder als Hintergrund mit dem Parameter: background-image. Beide Hintergrundbilder in A2 und A3 fließen ineinander (das Bild A2 geht über seine Grenzen hinaus, in den Bildbereich A3 hinein). Die Seite soll so angelegt sein, dass sich A2 und A3 in der Mitte befinden (siehe Skizze). Die Webseite ist für eine Bildschirmgröße von 1024px Breite optimiert. Daher ist der A3-Bereich 989px breit. Nur wenn der Benutzer eine größere Bildschirmgröße besitzt, soll der A2 Bereich auch sichtbar sein. Mit einer Bildschirmbreite von 1024px soll nur der A3 Bereich sichtbar sein und zusätzlich sollen keine Scrollbalken vertikal zu sehen sein.

Mein folgendes Konstrukt funktioniert leider noch nicht perfekt:

Code :

<html>
<head>
<style>
*{
    margin:0;
    padding:0;
}
 
body{
    color:#000000;
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
/*  line-height: 120%;*/
    background-image:url(images/cp_hintergrund.jpg);
    background-color:#00FF00;
}
 
.wrapper{
    background-image:url(images/cp_hintergrund2.jpg);
    background-repeat:no-repeat;
    margin:0px auto;
    height: 400px;
}   
    
.style1{
    background-image:url(images/cp_mittelteil.jpg);
    width:989px;
    height:400px;
    margin: 0px auto;
}
</style>
</head>
 
<body>
  <div class="wrapper">
    <div class="style1">12345678</div>
  </div>    
</body>
</html>

Suchwörter: überlappend, Bild überlappt 2 div-Bereiche, ineinaderfließende div-Bereiche mit Bild, überlappende Grafik

Maik · 31.05.09 17:47

Hi,

und was funktioniert bei dir mit dem Stylesheet nicht perfekt?

Falls es im IE an der horizontalen Ausrichtung der Blöcke im Viewport scheitert, liegt es am Darstellungsmodus "Quirksmode", in den die Browser bei der Übergabe des HTML-Dokuments ohne jegliche Doctype-Deklaration schalten, Stichwort "Doctype-Switch", und vom IE u.a. mit Fehlinterpretationen des "CSS-Boxmodells" quittiert wird.

Lösung in diesem Fall: Entweder das HTML-Dokument den Browsern im standardkonformen Modus übergeben, oder folgende CSS-Regel ergänzen:

Code :

body{
        color:#000000;
        font-family:Arial,Helvetica,sans-serif;
        font-size:14px;
/*        line-height: 120%;*/
        background-image:url(images/cp_hintergrund.jpg);
        background-color:#00FF00;
        [color=red][b]text-align:center; /* Horizontale Zentrierung im IE */[/b][/color][b]
        overflow:auto; /* Scrollleiste bei übergroßem Inhalt  */
        overflow-y:hidden; /* Vertikale Scrollleiste unterdrücken */[/b]
}
 
.style1{
        background-image: url(images/cp_mittelteil.jpg);
        width:989px;
        height:400px;
        margin: 0px auto;
        [color=red][b]text-align:left; /* Elementinhalt linksbündig ausrichten */[/b][/color]
}

mfg Maik

Intocabile · 31.05.09 19:04

Hi,

ich weiß nicht obs hier relevant ist, aber da von scrollbalken in divs die rede ist gehe ich mal davon aus, dass du feste width und height werte für deine div's benutzt.

In diesem fall würde dir der Befehl: overflow bestimmt helfen.

hier mal ein kleiner hilfelink:
http://www.css4you.de/overflow.html

vielleicht findest du damit auch eine lösung die scrollbars auf hidden zu setzen

Ich hoffe ich konnte helfen.

mfg Into

Maik · 31.05.09 19:06

Ich glaube, hier ist lediglich von den "Haupt"-Scrollleisten im Browserfenster die Rede, die ab einer gewissen Fenstergröße nicht erscheinen sollen

mfg Maik

NTDY · 01.06.09 10:32

Also ich habe es soweit geschafft, dass die Bilder übereinanderlappend in den div-Elementen wrapper und style1 passen. Ich habe einfach innerhalb von style1 den Parameter position verwendet.
Was noch nicht klappt ist, dass wenn ich das Browserfenster verkleinere, sich ab einer kleineren Breite als 1290px ein horizontaler Scrollbalken bildet. Dieser Scrollbalken soll aber erst ab der Breite 989px vorkommen und soll dann auch nur noch den style1 Bereich zeigen.

Code :

<html>
<head>
<style>
*{
    margin:0;
    padding:0;
}
body{
    background-image:url(cp_hintergrund.jpg);
    background-repeat:repeat-x;
    text-align:center; /* Horizontale Zentrierung im IE */
    overflow:auto; /* Scrollleiste bei übergroßem Inhalt  */
    overflow-y:hidden; /* Vertikale Scrollleiste unterdrücken */
}
.wrapper{
    width:760px;
    margin:0px auto;
    background-image:url(cp_hintergrund2.jpg); /* Bild: width: 1290px / height: 400px */
    max-width:1290px;
    min-width:1290px;
    max-height:500px;
    min-height:500px;
    background-repeat:no-repeat;
}
 
.style1{
    margin:0px auto;
    background-image:url(cp_mittelteil.jpg); /* Bild: width: 989px / height: 647px */
    height:647px;
    background-repeat:no-repeat;
    width:989px;
    position:relative;
    top:130px;  
    left:-58px;
    text-align:left; /* Elementinhalt linksbündig ausrichten */
}
</style>
</head>
 
<body>
  <div class="wrapper">
    <div class="style1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
  </div>  
</body>
</html>

Maik · 01.06.09 10:38

Moin,

der horizontale Scrollbalken ergibt sich durch die min-width:1290px-Deklaration für .wrapper, die auf "989px" herabgesetzt gehört, wenn erst unterhalb dieser Fensterbreite im Browser der Scrollbalken erscheinen soll.

Somit ist dann der Hintergrund von .wrapper beim horizontalen Scrollen im runterskalierten Viewport auch nicht mehr sichtbar.

mfg Maik

NTDY · 01.06.09 10:52

Da passieren leider gleich zwei Fehler:

1. Das Bild in wrapper wird auf einmal nur noch 989px breit.
2. Der Paramater postion in style1 greift nicht mehr und style1 verschiebt sich.

Maik · 01.06.09 10:55

Diese Fehler kann ich bei mir nicht nachvollziehen / reproduzieren.

Steht das Konstrukt incl. der Hintergrundbilder zur Begutachtung irgendwo online zur Verfügung?

mfg Maik

Maik · 01.06.09 12:13

Die aufgetretenen Darstellungsfehler resultieren meines Erachtens schlichtweg durch den "Boxenhintergrund" im .wrapper-Hintergrundbild, der sich nicht in der Bildmitte befindet, um mit dem darin horizontal zentrierten Block .style1 zu korrespondieren.

Daher auch dein Versuch, dies mit einer negativen left-Deklaration für den Block .style1 auszugleichen.

mfg Maik

NTDY · 01.06.09 14:16

Also so richtig funktioniert dies nicht mit dem min-width und dem max-width. Ich habe mal ein anderes Beispiel mit drei Spalten genommen und min-width und max-width angereichert.

HTML-Code:

<html>
<head>
<style type="text/css" media="screen">
html { 
  padding:0px;
  margin:0px;
}

body {
  background-color:#FFCC66;
  text-align:center;
  margin:0px;
  padding:0px;
}

#box {
width:1290px;
margin: 0px auto;
padding:0px;
text-align:left;
background-color:#0000FF;
}

#links {
width:150.5px;
height:400px;
padding:0px;
float:left;
background-color:#00FFFF;
min-width:0;
max-width:150.5px;
}

#inhalt {
width:989px;
max-width:989px;
min-width:989px;
padding:0px;
float:left;
background-color:#CCCCCC;
}

#rechts {
width:150.5px;
height:400px;
padding:0px;
float:left;
background-color:#00FF00;
min-width:0;
max-width:150.5px;
}
</style>
</head>

<body>

<div id="box">	
	<div id="links">
	</div>

	<div id="inhalt">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</div>

	<div id="rechts">
	</div>
</div>

</body>
</html>

Maik · 01.06.09 14:21

Das kann in diesem Fall auch nicht funktionieren, da alle übrigen Blöcke eine feste Breite besitzen.

Und welchen Sinn sollen zudem bei #container drei gleichlautende Werte für width,min-width und max-width ergeben?

Von deiner Vorstellung ausgehend, wann welcher Bereich des Hintergrunds im Fenster sichtbar sein soll, sollte es vollkommen genügen, den "Boxenhintergrund" im .wrapper-Hintergrundbild in der horizontalen Bildmitte zu platzieren, den Block .wrapper mit einer relativen Breite width:100% auszustatten, und darin das Hintergrundbild mittels background-position:center top horizontal zu zentrieren.

Wird nun das Browserfenster in der Horizontalen verkleinert, bleiben der "Boxenhintergrund" und die Box .style1 übereinander liegen, und die Außenbereiche des .wrapper-Hintergrundbilds verschwinden im linken und rechten "Niemandsland" des Viewports.

mfg Maik

Maik · 01.06.09 22:20

Wenn ich bis hierher jetzt alles richtig verstanden habe, soll es doch hierauf abzielen:

Hintergrundbilder über zwei div-Bereiche passgenau-preview_1024.jpg

Hintergrundbilder über zwei div-Bereiche passgenau-preview_1280.jpg

v.l.n.r.: 1024px. 1280px

Et voilà

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-06-01">

<title>tutorials.de | demo_NTDY</title>

<style type="text/css">
<!--
*{
        margin:0;
        padding:0;
}

* html {
        overflow:auto;
}

body{
        color:#000000;
        font-family:Arial,Helvetica,sans-serif;
        font-size:14px;
        background:url(cp_hintergrund.jpg) repeat-x;
        text-align:center;
        overflow-y:hidden;
}

.wrapper{
        background:url(cp_hintergrund2.jpg) no-repeat center top;
        height:400px;
        width:100%;
        min-width:989px;
}

.style1{
        background:url(cp_mittelteil.jpg);
        width:989px;
        height:400px;
        margin:0px auto;
        text-align:left;
        position:relative;
        top:130px;
}
-->
</style>

</head>
<body>

<div class="wrapper">
        <div class="style1">
             <p>12345678</p>
        </div>
</div>

</body>
</html>

Im Anhang das Beispiel incl. der überarbeiteten Grafik "cp_hintergrund.jpg".

mfg Maik

NTDY · 01.06.09 23:06

Perfekt.
Ich wollte schon gerade den Beitrag als "Erledigt" ansehen. Ich hoffe, dass CSS irgendwann einmal einfacher wird.

Vielen vielen Dank.

Ist sicherlich auch nützlich für andere User.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Unsichtbare Mouseover-Bereiche über Thumbnailleiste legen

Zwei Hintergrundbilder mit repeat klappt nicht

[Access] Balken im Bericht über alle Bereiche

video über load movie passgenau laden lassen

[CSS] Wie kann ich zwei verschiedene Hintergrundbilder verwenden?

E-Mail:

Abonnieren Abbestellen