Design-Frage...

    Hallo Leute,
    mal wieder ne Design Frage...
    ich würde gerne das Theme Relaxation mit einem Rahmen umziehen. Der Rahmen soll das gesamt Fenster umspannen. Leider ergibt sich da ein Problem:

    Durch mehrere Beiträge verschieben sich ja auch die einzelnen Anteile des Hintergrunds, d.h. der Rahmen wird gestückelt und sieht einfach sch.... aus.


    Habt ihr da Tipps oder Beispiele, wie man das umsetzen kann ????

    In der Anlage schicke ich euch mal ein Bild, wie es so umgefähr aussehen soll.

    Viele Grüße

    Robert

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Moin!, ja, da fällt mir schon etwas ein - sagt Dir der Begriff Sinus-Kurve etwas? Du musst Das Bild, also den Rahmen wie folgt dreiteilen: header, background (mittelstück), footer. Das Mittelstück muss so herausgetrennt werden, dass die "Schwingung", also das Drahtstück, einmal komplett eine virtuellen Nullpunkt durchläuft - ähnlich einer Sinus-Schwingung. Dann kann auch die Webseite 40000km lang sein - das Mittelstück wird unendlich erscheinen, wenn es sauber abgetrennt worden ist. Capiche? [Blockierte Grafik: http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Simple_sine_wave.svg/100px-Simple_sine_wave.svg.png]

    Supergeile Idee !!!

    Leider muss ich das ganze jetzt noch in Fireworks umgesetzt bekommen, wovon ich leider nur sehr begrenzt Ahnung habe.

    Denn die vorgeschlagene Linie muss ja absolut gleichmäßig und genau sein....

    Uff, mal sehen wie ich das hinbekomme...

    Gruß

    Robert

    Mach Dir nicht ins Hemd, Robert ;). Fireworks kann das sicherlich hervorragend. Links unten hast Du ja die Koordinaten-Anzeige. Die wird dir sicherlich behilflich sein, damit Du oben und unten quasi den "Nulldurchlauf" erwischt. Ergebnis natürlich posten!

    Leider hapert es immer noch, obwohl ich die Sinuskurve nahezu perfekt umgesetzt habe. Dennoch kommt es im Blog immernoch zu unschönen "Schnittkanten"...

    Viele Grüße

    Robert

    P.S.: Melde mich sobald ich es geschafft habe (oder vielleicht hat jemand noch nen Tipp :mrgreen: )

    Zitat von milko

    Moin!, ja, da fällt mir schon etwas ein - sagt Dir der Begriff Sinus-Kurve etwas? Du musst Das Bild, also den Rahmen wie folgt dreiteilen: header, background (mittelstück), footer. Das Mittelstück muss so herausgetrennt werden, dass die "Schwingung", also das Drahtstück, einmal komplett eine virtuellen Nullpunkt durchläuft - ähnlich einer Sinus-Schwingung. Dann kann auch die Webseite 40000km lang sein - das Mittelstück wird unendlich erscheinen, wenn es sauber abgetrennt worden ist. Capiche? [Blockierte Grafik: http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Simple_sine_wave.svg/100px-Simple_sine_wave.svg.png]

    Genial! Danke ich habe es immer viel umständlicher gelöst! Jetzt weiß ich das auch ...

    vG
    k3v

    Also im Moment sieht es so (wie unten im Anhang) aus.
    Leider entstehen, wenn ich die Grafik teile immernoch ziemliche Schnittkanten, d.h. die header, footer und Hauptgrafik fügen sich nicht richtig zusammen.
    Fällt einem von euch noch was ein ????

    Kleiner Nachtrag,
    also das mit dem Rahmen bekomme ich schon hin. Anscheinend habe ich aber einen Denkfehler im Style-Sheet.

    Ich schick euch mal den Code:

    Code
    #page {
    background: url(images/middlebarb.gif) repeat-y top center;
    margin: auto;
    padding: 0;
    text-align: left;
    width: 900px;      
}

    ...Hier wird der mittlere Teil der insgesamt drei Grafiken angesteuert

    Code
    #footer {
    background: url(images/bottombarb.gif) no-repeat bottom center;
    background-color: inherit;
    clear: both;
    color: #808979;
    font-size: 11px;
    height: 90px;
    margin: 0;
    padding: 10px 10px 10px 67px;

    ...der footer

    Code
    #top {
    background: transparent url(images/topbarb.gif) no-repeat top center;
    height: 90px;
}

    ...der obere Teil der Grafik

    Leider sieht es im Moment nämlich so (wie unten im Anhang) aus...

    Bin hier wirklich am verzweifeln...
    Wie man sieht ergeben sich am footer und header unschöne Schnittkanten, die restlichen Rahmenbereich passen nahezu perfekt zusammen...

    Viele Grüße

    Robert

    Oben kannst du hinbekommen indem du die Höhe des #top solange veränderst bis es passt. Oder die Mittelgrafik anders abschneidest.

    Unten, keine Chance, du weißt ja nie wie lang die Seite wird. Alternativ dort die Senkrechten weglassen?

    Ist ne Möglichkeit,aber keine wirklich zufriedenstellende...

    Gibt es denn keine Anweisung im css, die definiert, wann das Bild "geschnitten" wird, wenn der Beitrag kürzer ist ???

    Denn wenn man das ändern könnte, dann wäre mir eine Seite ohne Inhalt lieber, als ein abgeschnittener Rahmen....

    Gruß

    Robert

    das Bild niemals dreiteilen, sondern viermal

    dann muss das Bild eine irre Höhe haben,
    was weiß ich 3000 px oder so...

    getrennt wird:

    1x für links oben
    1x für rechts oben
    1x für links unten
    1x für rechts unten

    Trennung am besten 1/3 zu 2/3 in der Breite

    einbauen kannst Du das Bild

    nutze

    html für lins oben
    body für rechts oben
    die beiden anderen im Footer

    anders wird das nie was
    ;)

    lg

    Hallo Monika,
    das sind ja gute Nachrichten...
    Dennoch habe ich (wie könnte es auch anders sein) noch ein paar Fragen dazu:

    Wieso Trennung in 1/3 2/3 in der Breite (und wie genau sieht das aus ???) ?

    Ist es möglich mir evtl. ein paar (heißbegehrte) Codeschnipsel über das integrieren in body/html und footer zukommen zu lassen ?

    Denn grafische Ideen zu haben ist ja mal das eine, die Umsetzung hakt...aber ziemlich.
    Vielleicht hast Du ja auch nen Link wo ich mir mal ein Beispiel oder noch mehr Hintergrundinformationen holen kann....

    Viele Grüße

    Robert

    P.S.: und schon mal vielen Dank, hatte es schon fast verworfen....

    Zitat von Olafb

    Monika
    haste richtig geschaut? Wie willst du das rastern, das müsstest du? Die Senkrechte hat doch je nach Höhe horizontal gesehen einen anderen Schnittpunkt.

    Darum gehts nicht, sondern, dass die Vier Teile auch ein bisschen überlappen können, sonst wird ein nicht gut css Könner verrückt ;)

    lg

    kleine Lücke im Header stört das layout

    hm ich nutze einfach mal diesen thread da es sich bei meinem problem auch um eine design frage geht...

    ich benutze das sirius theme von olaf und bin soweit auch voll zufrieden aber der header bereich stört bissle!

    anschauen könnt ihr es auch hier - Jared

    wenn ihr nach oben auf den header schaut seht ihr eine kleine lücke über dem "logo". dort kann man seiten verlinken (wie startseite usw) aber ich brauche es nicht und so stört diese lücke! hab schon einiges im css ausprobiert aber es will einfach nicht... wie bekommen die lücke über dem logo weg???

    wär für jede hilfe sehr dankbar

    danke dir
    dein satz mit dem IE 5.5 hat mich auf die idee gebracht es auch mal mit nem anderem browser zu versuchen...! hab den ganzen tag mit IE 6 programmiert! bei dem hab ich aber das problem das der cache nicht sauber geleert wird.

    mit dem FF siehts sauber aus
    es lag ausserdem an einem <br /> im headerbereich! gut versteckt. hatte nix mit der CSS zu tun!

    Ps: darauf muss einer erstmal kommen :mrgreen:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden