• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Es regnet, ist neblig und kalt, alle sind krank und der Chef wird zunehmend cholerisch. Das Thema des Monats ist also folgerichtig --> Das Grau(en)
    Wir sind gespannt, war Euch dazu einfällt! Zum Wettbewerb --> Klick

[CSS] DIV Positionierung

Salzi

Salzi

Prinzenapfel
Registriert
29.08.06
Beiträge
555
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

Gelbe Schleswiger Reinette
Registriert
10.08.05
Beiträge
1.759
Salzi schrieb:
Ich muss auch langsam zugeben, dass ich nicht mehr weiss wie ich das anders erklären kann. Wo klemmts denn genau?

Gruss

Salzi
Zum Vergrößern anklicken....

Ja, genau, wo klemmt's? :D

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

Salzi

Prinzenapfel
Registriert
29.08.06
Beiträge
555
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

Gelbe Schleswiger Reinette
Registriert
10.08.05
Beiträge
1.759
Salzi schrieb:
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
Zum Vergrößern anklicken....

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

Salzi

Prinzenapfel
Registriert
29.08.06
Beiträge
555
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

Nathea

Admin
AT Administration
Registriert
29.08.04
Beiträge
15.169
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
 

Anhänge

  • slices.png
    slices.png
    28,1 KB · Aufrufe: 55
  • re-li.gif
    re-li.gif
    969 Bytes · Aufrufe: 68
Salzi

Salzi

Prinzenapfel
Registriert
29.08.06
Beiträge
555
korrekt Nathea genau so ist es auch zu verstehen ;)

Gruss

Salzi
 
Salzi

Salzi

Prinzenapfel
Registriert
29.08.06
Beiträge
555
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:

Code: 
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:

Code: 
<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

Nathea

Admin
AT Administration
Registriert
29.08.04
Beiträge
15.169
Salzi schrieb:
...
Im Haupttreil werden die Begrenzungen nicht mitgedruckt. bzw. sie werden zwar angezeigt aber nur auf der ersten Zeile. Wenn ich das &nbsp; raus nehme kommt gar nichts mehr :(
...

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

}
...
Zum Vergrößern anklicken....
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

Salzi

Prinzenapfel
Registriert
29.08.06
Beiträge
555
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

Nathea

Admin
AT Administration
Registriert
29.08.04
Beiträge
15.169
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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten