problem mit width:100% und hintergrund image

losthighway · 22.12.2010

HI
Ich versuche gerade ein Template für Joomla selber zu bauen und hab als Anfänger Probleme.
Bisher hab ich immer Fertige Templates mit firebug usw. umgebaut aber jetzt will ich wirklich mein eigenes.

Zu meinen Problem:
Ich habe 3 div´s nebeneinander mit Hintergrundbildern und einer Mindestbreite für das ganze Template. Das hab ich soweit hingebracht aber sobald ich versuche das mittlere div flexibel für die Broswergrösse zu machen und zb width:100% zu verwenden wird der Abstand zum linken Rand mit gerechnet und die Breite ragt über den Browserrand hinaus.
Dabei entsteht eine Scrollleiste die auch auch nicht weg bekomme.

Ich hab schon so viel herum getestet das ich jetzt einfach gar nicht mehr durchblicke. Hab nebenbei immer versucht mit den css4you und selfhtml Seiten zu arbeiten aber jetzt bin ich noch verwirrter.

hier meine codes: (sorry wenn alles etwas stümperhaft wirkt)

Code:

</head>

<body>
<div id="box">
    <div id="nr1"></div>
    <div id="nr2"></div>
    <div id="nr3"></div>
</div>
</body>
</html>

Code:

body {
    background-image: url(Vintage_Pattern_Dark_by_nouseforaname.jpg);
    margin: 0 auto;
}
#nr2 {
    background-image: url(Bilder/club-neu-test_02.jpg);
    background-repeat: repeat;
    height: 520px;
    width: 768px;
    margin-left: 287px;
    position: absolute;
    z-index: 2;
}
#nr1 {
    position: absolute;
    z-index: 1;
    width: 287px;
    height: 520px;
    background-image: url(Bilder/2_02.jpg);
}
#nr3 {
    height: 520px;
    width: 523px;
    position: absolute;
    z-index: 3;
    right: 0px;
    background-image: url(Bilder/4_04.jpg);
}
#box {
    width: 100%;
    height: 520px;
    min-width: 1578px;
    position: absolute;
}

:'

uhm::'

uhm:
lg LH.

Herr_D · 22.12.2010

AW: problem mit width:100% und hintergrund image

Wieso positionierst du absolut? ...und willst dann auch noch absolute positionierungen verschachteln?

1. Tipp: benenne die div um
2. Tipp: versuche mal float:
3. Tipp: Vermeide eine Mindestbreite von 1578 px - Was denkst du denn, wer solche Auflösungen nutzt?

Wenns denn aber sein muss:

HTML:

<!doctype html public "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
* {margin:0; padding:0; }

body {
    background-image: url(Vintage_Pattern_Dark_by_nouseforaname.jpg);
}

#box {
    height: 520px;
    width: 1578px;
    overflow:hidden;
    margin: 0 auto;
}


#linkeseite {
    width: 287px;
    height: 520px;
    background: url(Bilder/2_02.jpg) #f00;
    float:left;
}
#mitte {
    background: url(Bilder/club-neu-test_02.jpg) #0f0;
    background-repeat: repeat;
    height: 520px;
    width: 768px;
    float:left;
}

#rechteseite {
    height: 520px;
    width: 523px;
    background: url(Bilder/4_04.jpg) #00f;
    float:left;
}

#klar {
clear:both }
-->
</style>


</head>

<body>
<div id="box">
    <div id="linkeseite"></div>
    <div id="mitte"></div>
    <div id="rechteseite"></div>
    <div id="klar"></div>
</div>
</body>
</html>

Sorry für die farben

losthighway · 22.12.2010

AW: problem mit width:100% und hintergrund image

Herr_D schrieb:
Wieso positionierst du absolut? ...und willst dann auch noch absolute positionierungen verschachteln?

1. Tipp: benenne die div um
2. Tipp: versuche mal float:
3. Tipp: Vermeide eine Mindestbreite von 1578 px - Was denkst du denn, wer solche Auflösungen nutzt?

Erstmal danke für die schnelle Antwort!

Sorry ich hab zuerst ein Design im PS gemacht und dann zum Erstversuch in Dreamweaver übertragen darum hab ich die Größen noch nicht angepasst.

Danke für dein Beispiel aber ich hätte gerne das die "linke seite" und die "mitte" am linken Bildschirmrand sind und die "rechte Seite" immer rechts egal welche Breite der Browser hat.
Somit sollte sich der Hintergrund der "mitte" wiederholen um die Lücke zwischen "mitte" und "rechts" zu füllen.
Darum habe ich auch eine Mindestbreite gesetzt um den Content nicht mit dem rechten div zu überdecken wenn der Browser kleiner sein sollte.

Puh ich hoffe ich konnte das halbwegs verständlich rüber bringen

Danke lg

Herr_D · 22.12.2010

AW: problem mit width:100% und hintergrund image

auch das läßt sich mit float umsetzen, du brauchst dazu noch ein anpassbares div

Ganz schnell

HTML:

<!doctype html public "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
* {margin:0; padding:0; }

body {
    background-image: url(Vintage_Pattern_Dark_by_nouseforaname.jpg);
}

#box {
    height: 520px;
    width:100%;
    min-width: 1578px;
    overflow:hidden;
    margin: 0 auto;
}


#linkeseite {
    width: 287px;
    height: 520px;
    background: url(Bilder/2_02.jpg) #f00;
    float:left;
}


#rechteseite {
    height: 520px;
    width: 523px;
    background: url(Bilder/4_04.jpg) #00f;
    float:right;
}

#mitte {
    background: url(Bilder/club-neu-test_02.jpg) #0f0;
    background-repeat: repeat;
    height: 520px;
    width: 768px;
    float:left;
}

#flexi {
    height: 520px;
    background:transparent; /* eventuell Bild einbauen */
}

#klar {
clear:both }
-->
</style>


</head>

<body>
<div id="box">
    <div id="linkeseite"></div>
    <div id="mitte"></div>
    <div id="rechteseite"></div>
    <div id="flexi"></div>
    <div id="klar"></div>
</div>
</body>
</html>

losthighway · 22.12.2010

AW: problem mit width:100% und hintergrund image

ja so hatte ich es auch schon nur ist da wieder das Problem das der Contentbereich ne fixe breite hat und somit ne mögliche Lücke(Content-Rechts) bei einem größerem Browserfenster nicht schließt.

Ich weiß ich bin lästig....

Herr_D · 22.12.2010

AW: problem mit width:100% und hintergrund image

losthighway schrieb:
ja so hatte ich es auch schon nur ist da wieder das Problem das der Contentbereich ne fixe breite hat und somit ne mögliche Lücke(Content-Rechts) bei einem größerem Browserfenster nicht schließt.

Ich weiß ich bin lästig....

*hust

Mach den Content fluid?

Zeig mal 'n Bild...

losthighway · 22.12.2010

AW: problem mit width:100% und hintergrund image

Herr_D schrieb:
*hust

Mach den Content fluid?

Zeig mal 'n Bild...

So siehts aus:

Herr_D · 23.12.2010

AW: problem mit width:100% und hintergrund image

Sowas hab ich befürchtet

Es wird schwierig, für den inneren Bereich immer das passende Bild zu haben... es wird nach rechts nur ab und an einen nahtlosen Übergang geben....

...um die Lücke zu schließen, müßtest du #box auch einen Hintergrund verpassen (den vom #mitte)

Jetzt hast du zwei Möglichkeiten:

1. Du nimmst für #mitte nur einen einfarbigen Hintergund

2. Du verzichtest auf die fedden Schlagschatten und trennst die Bereiche per css (border) dann kriegt nur noch box einen Hintergrund

Hast du das Bild von der Lilie (grauer Hintergrund) mal und die Farbangaben bzw. deine komplette .psd

losthighway · 24.12.2010

AW: problem mit width:100% und hintergrund image

Ja hast recht das ist mit dem Hintergrund leider ne blöde Sache!
Aber ich werde es einfach mit schwarz gefüllten bereichen versuchen und den Grauen Hintergrund lassen.
Komisch wie einfach ein Design sein kann aber wie schwer es doch als Website umzusetzen ist:uhm:

Hab mir auch schon ein neues Design im PS gemacht mit slices usw.......

Aber jetzt ist erstmal Feiertag und in diesem sinne:

!!!DANKE FÜR EUER HILFE UND SCHÖNE FEIERTAGE!!!
lg LH