✔ Breite anpassen

Status
Nicht offen für weitere Antworten.
StupidBoy

StupidBoy

Mitglied Gold
Ich habe eine Frage bzgl. des anpassens der Breite.
Folgendes ist das Problem: Ich habe eine Hintergrundgrafik die in der Breite flexibel sein soll. Da ich die Ursprungsgrafik weder kacheln noch strechten möchte habe ich mich dazu entschieden die Grafik in drei Teile zu teilen, einen linken und einen rechten Teil, beide statisch und am linken bzw. rechten Fensterrand ausgerichtet, und einen mittleren Teil der je nach Fensterbreite gestreckt werden soll um den Platz zwischen der linken und der rechten Grafik zu füllen. Für die mittlere Grafik hatte ich es mit width="100%" probiert, allerdings wird die Grafik dann so breit wie das ganze Fenster :eek:
Hat da jemand nen Rat wie ich das mittlere Fenster gerade so groß bekomme dass es die Lücke zwischen der linken und der rechten Grafik füllt?

Grüße
 
Das liesse sich mit drei floatenden DIVs realisieren. Hier mal ein Vorentwurf:

CSS-Code:
Code: 
div.leftColumn
{
float: left;
width: 150px;
background: url(leftColumn.png);
}

div.rightColumn
{
float: right;
width: 150px;
background: url(rightColumn.png);
}

div.centerColumn
{
margin: 0 150px 0 150px;
background: url(centerColumn.png) repeat-x;
}

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}
HTML: 
<body>

  <div class="leftColumn"></div>

  <div class="rightColumn"></div>

  <div class="centerColumn"></div>

  <div class="clear">&nbsp;</div>

</body>
 
Danke, sieht im Firefox schon sehr schön aus, allerdings sind im IE zwischen den drei Grafiken kleine Abstände.
Abgesehen davon suche ich noch nach einer Möglichkeit, mit der ich verhindern kann, dass, sobald die Fensterbreite zu schmal ist, die rechte Grafik unter die linke springt.

Code: 
			div.leftColumn
			{
			float: left;
			width: 489px;
			height: 235px;
			background: url(banner_left.jpg);
			}
			
			div.rightColumn
			{
			float: right;
			width: 490px;
			height: 235px;
			background: url(banner_right.jpg);
			}
			
			div.centerColumn
			{
			height: 235px;
			margin-left: 489px;
			margin-right: 490px;
			background: url(banner_middle.jpg) repeat-x;
			}
			
			div.clear
			{
			clear: both;
			height: 0;
			font-size: 0;
			margin: 0;
			padding: 0;
			}
 
Danke, sieht im Firefox schon sehr schön aus, allerdings sind im IE zwischen den drei Grafiken kleine Abstände.
Zum Vergrößern anklicken....
Für den IE ist dann eine Korrektur nötig, um die 3px-Abstände zu schliessen:

Code: 
div.centerColumn
			{
			height: 235px;
			margin-left: 489px;
			margin-right: 490px;
			background: url(banner_middle.jpg) repeat-x;
			}

* html div.centerColumn /* Fehlerkorrektur für IE */
{
margin-left: 486px; /* = 489px - 3px */
margin-right: 487px; /* = 490px - 3px */
}
Abgesehen davon suche ich noch nach einer Möglichkeit, mit der ich verhindern kann, dass, sobald die Fensterbreite zu schmal ist, die rechte Grafik unter die linke springt.
Zum Vergrößern anklicken....
Dieses Verhalten ist 'normal', da der mittlere Bereich keine feste Breite besitzt und sich so weit zusammenstauchen lässt, bis das rechte DIV unter das Linke rutscht. Mit einer festen Breitenangabe liesse sich das zwar umgehen, aber dann wäre der mittlere Bereich auch nicht mehr dynamisch.
 
michaelsinterface hat gesagt.:
Code: 
* html div.centerColumn /* Fehlerkorrektur für IE */
{
margin-left: 486px; /* = 489px - 3px */
margin-right: 487px; /* = 490px - 3px */
}
Zum Vergrößern anklicken....
Das funktionier leider nicht, habs auch mit anderen Werten ausprobiert und es scheint mir so als hätte man mit margin-left und margin-right nur die Möglichkeit das Bild noch schmaler zu machen respektive den Abstand zu vergrößern. Andersherum wills aber nicht klappen, der Abstand bleibt immer. :(

michaelsinterface hat gesagt.:
Dieses Verhalten ist 'normal', da der mittlere Bereich keine feste Breite besitzt und sich so weit zusammenstauchen lässt, bis das rechte DIV unter das Linke rutscht. Mit einer festen Breitenangabe liesse sich das zwar umgehen, aber dann wäre der mittlere Bereich auch nicht mehr dynamisch.
Zum Vergrößern anklicken....
Hab dieses Problem mit diesen Problem dadurch gelöst, dass ich alle drei betroffenen divs in ein großes div eingebunden hab und diese per width: 100% min-width: 980px definiert hab. Für den IE (ich hasse ihn) habe ich bei Google folgenden Codeschnipsel gefunden: width:expression(document.documentElement.clientWidth < 980? "980px": "auto" );. Und es funktioniert :)

Grüße
 
Hast du die DIVs auch in der 'richtigen' Reihenfolge notiert :confused:

HTML: 
<div class="leftColumn"></div>

<div class="rightColumn"></div>

<div class="centerColumn"></div>

<div class="clear">&nbsp;</div>
 
Habe eben nochmal experimentiert: der Grund für den 3px-Abstand sind die Höhenangaben der DIVs (!)

Besitzen sie keine Höhenangabe, taucht das Problem mit dem 3px-Abstand im IE (6.0) auch nicht auf.

*very confused*
 
Ja, habe alles so gemacht wie von dir geschrieben (Copy&Paste).
Deswegen wundert mich das auch *also very confused* ;)
Habe auch verschiedene Verriationen probiert, mit div.clear, ohne dieses, aber auch ohne
* html div.centerColumn /* Fehlerkorrektur für IE */
{
margin-left: 486px; /* = 489px - 3px */
margin-right: 487px; /* = 490px - 3px */
}, nur mit einem der beiden Codeschnipsel etc. hat aber nie großatig was gebracht.
Desweiteren hab ich noch ein wenig am Doctype rumgespielt, mit Transitional ohne loose.dtd siehts teilweise etwas besser aus, die Problematik der Abstände zwischen den divs löst es aber nicht.
Ich habe dazu noch ausprobiert per Z-Index die mittlere Grafik der linken und rechten unterzuordnen, das will aber auch nicht gehen.

Grüße StupidBoy der den IE gerne vernichten würde ;)

Hier der Code, vielleicht fällt dir was auf.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <title>Test</title>
        <style type="text/css" media="screen">
        body { background-color:#cccccc; }
        a:link {color:#000000;}
        a:visited {color:#000000;}
        a:hover {color:#000000;}
        a:active {color:#000000;}
        div.banner { width: 100%; min-width: 980px;  width:expression(document.documentElement.clientWidth < 980? "980px": "auto" );}
        div.leftColumn
        {
        float:left;
        width: 489px;
        height:235px;
        background-image:url(banner_left.jpg);
        background-repeat:no-repeat; }
        div.rightColumn
        {
        float:right;
        width: 490px;
        height:235px;
        background-image:url(banner_right.jpg);
        background-repeat:no-repeat;
        }
        div.centerColumn
        {
        left: 489px;
        width: 100%;
        height:235px;
        background-image:url(banner_middle.jpg);
        background-repeat: repeat-x;
        }
        * html div.centerColumn /* Fehlerkorrektur für IE */
        {
        margin-left: 486px; /* = 489px - 3px */
        margin-right: 487px; /* = 490px - 3px */
        }
        div.clear
        {
        clear: both;
        height: 0;
        font-size: 0;
        margin: 0;
        padding: 0;
		}
        div.leftleft
        {
        float:left;
        width: 489px;
        height:62px;
        background-image:url(2left.jpg);
        background-repeat:no-repeat;
        }
        div.rightright
        {
        float:right;
        width: 490px;
        height:62px;
        background-image:url(2right.jpg);
        background-repeat:no-repeat;
        }
        div.middlemiddle
        { left: 489px;
        width: 100%;
        height:62px;
        background-image:url(2middle.jpg);
        }
        div.leftx
        {
        height:31px;
        background-image:url(leftx.jpg);
        background-repeat:no-repeat;
        background-position: left, top;
        }
/*Linke Backgrounds des oberen Abschnittes (left.gif)*/
        div.a1
        {
        width:209px;
        height:4px;
        background-image:url(left.gif);
        background-repeat:reapeat-y;
        background-position: left, top;
        }

/*Linke Tops des oberen Abschnittes (left1top.gif)*/
        div.b1
        {
        height:24px;
        background-image:url(left1top.gif);
        background-repeat:no-repeat;
        background-position: left, top;
        }

/*Linke Elemente des oberen Abschnittes (left1element.gif)*/
        div.c1{
        height:16px;
        background-image:url(left1element.gif);
        background-repeat:no-repeat;
        background-position: left, top;
        }

/*Linke Enden des oberen abschnittes (left1end.gif)*/
        div.d1
        {
        height:16px;
        background-image:url(left1end.gif);
        background-repeat:no-repeat;
        background-position: left, top;
        }
        
        </style>
    </head>

  
<div class="leftColumn"></div>
<div class="rightColumn"></div>
<div class="centerColumn"></div>
<div class="clear">&nbsp;</div>
        <div class="leftleft"></div>
        <div class="rightright"></div>
    
        <div class="middlemiddle"></div>
        <div class="leftx"></div>
        <div class="b1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="d1"></div>
        <div class="a1"></div>
        <div class="b1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="d1"></div>
        <div class="a1"></div>
        <div class="b1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="d1"></div>
        <div class="a1"></div>
        <div class="b1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="d1"></div>
        <div class="a1"></div>
        <div class="b1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="d1"></div>
        <div class="a1"></div>
      
        </div>
        <body>


        </body>


</html>
 
Habs jetzt auch noch einmal mit diesem Hack für den IE versucht, ist dem von dir geposteten ja auch recht ähnlich, aber auch das lüppt nicht.
Langsam bin ich wirklich am verzweifeln :confused:

Grüße


Code: 
 /* IE CSS Hack by vbdesigns.de */
* html #left { 
margin-right: -3px; 
} 
* html #right { 
margin-left: -3px; 
} 
 
* html #middle { 
margin: 0 177px 0 177px;
display:inline-block; 
} 
/* Ende IE CSS Hack by vbdesigns.de */
 
Wie ich gestern Abend schon schrieb, liegt der Grund für den 3px-Abstand in den Höhenangaben der DIVs.

Da keine der drei Hintergrundgrafiken mit repeat-y vertikal wiederholt wird, gehe ich jetzt mal davon aus, daß sie schon 235px hoch sind. Somit kann die Angabe height:235px für die drei DIVs entfernt werden und das Problem wäre im IE gelöst. ;)


Anmerkungen zu deinem Source-Posting:
  • Die Javascript-Ermittlung der Restgröße müsste doch so lauten:
Code: 
width:expression((document.body.clientWidth - 980) + "px");
Siehe hierzu auch das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken.


  • In der Klasse .centerColumn fehlen die Eigenschaften margin-left und margin-right.

  • Die Werte für background-position werden ohne Komma notiert, also background-position:left top.

  • Das öffnende <body> befindet sich an der falschen Stelle.

  • Am Ende ist ein schliessendes </div> notiert, das kein öffnendes <div> besitzt.
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück