[CSS] DIV Positionierung

[Salzi]

Ja genau so wie Nathea beschrieben und gezeichnet beschreibt das Problem ganz gut. Also die Füllgrafik links und rechts (das rote links und das rote rechts) müssen unterschiedlich sein

 

[Hilarious]

Ich muss auch langsam zugeben, dass ich nicht mehr weiss wie ich das anders erklären kann. Wo klemmts denn genau?

Gruss

Salzi

Ja, genau, wo klemmt's?

Können wir die Aufgabenstellung vielleicht unterteilen, denn im Moment mutet Deine Beschreibung noch sehr vielseitig an. Vielleicht finden wir ja mehrere Probleme, die man einzeln angehen kann. Nathea hat da bereits eins aufgegriffen...

 

[Salzi]

ich denke wenn das Problem mit dem unterschiedlichen Verlauf einmal geklärt ist, sind wir (bzw ich) schon ein ganzes stück weiter.

Ich arbeite noch gerade an der "Tabellen" darstellung. dann wirds hoffentlich noch etwas klarer...

 

[Hilarious]

Ja genau so wie Nathea beschrieben und gezeichnet beschreibt das Problem ganz gut. Also die Füllgrafik links und rechts (das rote links und das rote rechts) müssen unterschiedlich sein

Ok. Wie würdest Du die Grafiken dazu anlegen? Wo würdest Du Schnitte ansetzen?

 

[Salzi]

So hier einmal die Tabellendarstellung. Einfach auch mal in der Breite ändern das Fenster.

Muss ehrlich sagen sieht irgendwie komisch aus wenn ich das so zusammengebastelt habe... Da muss ich wohl den Grafiker nochmal ans werkeln schicken ...

@Hilarious: Geschnitten ist es folgendermassen: Links und Rechts die Randgrafiken sind fix abgeschnitten. Der mittlere Teil hat auch eine fixe grösse. Die Verläufe links und Rechts sind jeweils 1px breit.

 

[Nathea]

Wenn ich das richtig verstanden habe: Beispiel-Slices siehe Bild.

Slice 2 und 4 sind die, die am Ende variabel sein müssen (sich mit den Fenstern jeweils anteilig verbreitern). Und sie unterscheiden sich farblich wesentlich (siehe Anhang 2).

Hab sie alle mal hochgeladen:
Slice 1
Slice 2
Slice 3
Slice 4
Slice 5

 

[Salzi]

korrekt Nathea genau so ist es auch zu verstehen

Gruss

Salzi

 

[Salzi]

so ich nochmal (soory für Doppelpost doch ich brauch wieder mal Hilfe)

Habe es jetzt soweit hingekriegt: hier zu sehen.

Ist denke ich schon ein grosser Schritt nach vorne. Abgesehen von ein paar Ausnahmen gefällt es mir doch schon recht gut.

Das Problem was ich habe ist ja wohl offensichtlich. Im Haupttreil werden die Begrenzungen nicht mitgedruckt. bzw. sie werden zwar angezeigt aber nur auf der ersten Zeile. Wenn ich das   raus nehme kommt gar nichts mehr

Hier mein CSS:

body {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #C5C5C5;
}
#design {
    font: normal 10px Verdana, Arial, Helvetica, Sans-Serif;
}
.header {
    height: 192px;
    float: left;
}

.logo {
    width: 439px;
    height: 192px;
    background-image: url(../Bilder/Dexgo3_slice_31.1_01.jpg);
    float: left;
}

.banner {
    position: absolute;
    left: 439px;
    height: 192px;
    float: left;
}

.banner_left {
    width: 57px;
    height: 192px;
    background: url(../Bilder/Dexgo3_slice_31.1_02.jpg);
    float: left;
}

.banner_main {
    min-width: 468px;
    height: 192px;
    background: url(../Bilder/Dexgo3_slice_31.1_04.jpg);
    text-align: center;

}

.banner_right {
    width: 59px;
    height: 192px;
    background: url(../Bilder/Dexgo3_slice_31.1_05.jpg); 
    float: right;
}

.main {
    float: left;
}

.navi {
    position: absolute;
    top: 192px;
    left: 0px;
    width: 192px;
    float: left;
}

.navi_top {
    width: 192px;
    height: 54px;
    background: url(../Bilder/Dexgo3_slice_31.1_06.jpg); 
    float: left;
}

.navi_middle {
    width: 192px;
    height: 650px;
    background: url(../Bilder/Dexgo3_slice_31.1_13.jpg); 
    float: left;
}

.navi_bottom {
    width: 192px;
    height: 76px;
    background: url(../Bilder/Dexgo3_slice_31.1_19.jpg); 
    float: left;
}
.inhalt {
    position: absolute;
    top: 192px;
    left: 192px;
    height: 74px;
    float: left;
}

.inhalt_top_left {
    width: 58px;
    height: 74px;
    background: url(../Bilder/Dexgo3_slice_31.1_07.jpg);
    float: left;
}

.inhalt_top_main {
    min-width: 715px;
    height: 74px;
    background: url(../Bilder/Dexgo3_slice_31.1_09.jpg);
    text-align: center;

}

.inhalt_top_right {
    width: 59px;
    height: 74px;
    background: url(../Bilder/Dexgo3_slice_31.1_10.jpg); 
    float: right;
}
[B]
.inhalt_middle_left {
    height: 100%;
    width: 58px;
    background: url(../Bilder/Dexgo3_slice_31.1_14.jpg);
    float: left;
}

.inhalt_middle_main {
    min-width: 715px;
    background: url(../Bilder/Dexgo3_slice_31.1_15.jpg);
    text-align: center;

}

.inhalt_middle_right {
    width: 59px;
    height: 100%;
    background: url(../Bilder/Dexgo3_slice_31.1_16.jpg); 
    float: right;
}[/B]

.inhalt_bottom_left {
    width: 58px;
    height: 76px;
    background: url(../Bilder/Dexgo3_slice_31.1_20.jpg);
    float: left;
}

.inhalt_bottom_main {
    min-width: 715px;
    height: 76px;
    background: url(../Bilder/Dexgo3_slice_31.1_21.jpg);
    text-align: center;

}

.inhalt_bottom_right {
    width: 59px;
    height: 76px;
    background: url(../Bilder/Dexgo3_slice_31.1_22.jpg); 
    float: right;
}

und das zugehörige html:

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="css/styles.css" type="text/css" />
        <title>New DeXgo</title>
        
    </head>
    <body>
        <div id="design">
            <div class="header">
                <div class="logo"></div>
                <div class="banner">
                    <div class="banner_left"></div>
                    <div class="banner_right"></div>
                    <div class="banner_main">Banner</div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="navi">
                <div class="navi_top"></div>
                <div class="navi_middle"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
                <div class="navi_bottom"></div>
            </div>
            <div class="inhalt">
                <div class="inhalt_top_left"></div>
                <div class="inhalt_top_right"></div>
                <div class="inhalt_top_main"></div>
                [B]<div class="inhalt_middle_left"> </div>
                <div class="inhalt_middle_right"> </div>
                <div class="inhalt_middle_main"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
                [/B]<div class="inhalt_bottom_left"></div>
                <div class="inhalt_bottom_right"></div>
                <div class="inhalt_bottom_main"></div>
            </div>
        </div>
    </body>
</html>

Wie immer Danke jedem der helfen kann

Gruss

Salzi

 

[Nathea]

...
Im Haupttreil werden die Begrenzungen nicht mitgedruckt. bzw. sie werden zwar angezeigt aber nur auf der ersten Zeile. Wenn ich das   raus nehme kommt gar nichts mehr
...

.inhalt_middle_main {
min-width: 715px;
background: url(../Bilder/Dexgo3_slice_31.1_15.jpg);
text-align: center;

}
...

Du hast im CSS hier bisher nicht angegeben, dass das Hintergrundbild wiederholt werden soll (repeat). Ersetze mal die oben stehende Zeile mit dieser hier:

background: url(../Bilder/Dexgo3_slice_31.1_15.jpg) repeat-y;

Danach sollte es mit dem Hintergrund klappen.

Gruß,
Nathea

 

[Salzi]

hmm leider nicht wirklich. die grafik 15 ist ja der hintergrund vom Mittelteil. Der wird ja brav weitergeführt.

Problem sind ja die teile links und rechts welche nicht wiederholt werden. hab auch da dein repeat-y eingegeben ... erfolglos

Gruss

Salzi

 

[Nathea]

Ich habe dazu einmal einen tollen Artikel gelesen, der vielleicht auf Dein Problem passt:
Link
Ist englisch, aber gut beschrieben und schrittweise erklärt.

Lies mal

Gruß,
Nathea