+ Antworten
Ergebnis 1 bis 14 von 14

Thema: Brauche Hilfe bei Umsetzung eines Layouts -> XHTML / CSS Webseite

  1. #1
    TP-Greis Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Avatar von Boris
    Registriert seit
    Mar 2001
    Ort
    Stuttgart & Kornwestheim
    Beiträge
    9.420

    Brauche Hilfe bei Umsetzung eines Layouts -> XHTML / CSS Webseite

    Moin,

    derzeit versuche ich, ein Design in 100% XHTML und CSS umzusetzen.

    Das Design sieht so aus:

    http://www.kurierdienst-kuehn.de/bilder/layou-shot3.gif

    Und das Ergebnis (soweit) ist das:
    http://www.kurierdienst-kuehn.de/willkommen/

    Die Navigation ist ganz rafiniert, sie besteht nur aus einem einzigen Bild, das mit CSS verschoben wird. Funktioniert auch tadellos.

    Leider hab ich jetzt keinen Plan, wie ich weiter machen soll. Zuerst mal ein "Fehler":

    Der IE erzeugt im div des Logobereiches (id=header) am Schluss einen 3-4 Pixel breiten, weißen Rand. Ich habe keine Ahnung, wieso. Mozilla/Firebird machen den nicht.

    Als nächstes meine Planlosigkeit - ich habe keine Ahnung, wie ich es erreichen soll, dass einmal das entsprechende Bild pro Seite (das Foto links) angezeigt werden soll, und das "Motto" (ist reiner Text) so positioniert wird, dass es im großen blauen Balken rechts unten stehen soll.

    Hat jemand ein paar Ideen oder Ansätze zu meinen derzeit zwei Problemen?

    Danke und Gruß,

    Adagio
    My software never has bugs. It just develops random features ...

    » DevShack - die Website des freien Webentwicklers Boris

  2. #2
    TP-Member Mausdrachen ist auf einem guten Weg Avatar von Mausdrachen
    Registriert seit
    Aug 2003
    Ort
    z. Zt. Neuruppin
    Beiträge
    69
    Hallo Adagio

    in #motto habe ich einfach padding-top: 100px; eingefügt und im <div id="header"> die Leerzeichen hinter dem img entfernt.
    Hier kannst mal schauen, ob es so recht ist *klick* Im IE6 unter WinXP sah es jetzt jeden Falls ordentlich aus.

    Liebe Grüsse
    Michaela
    Zitat von George Bernard Shaw:

    "Eines der traurigsten Dinge im Leben ist, dass ein Mensch viele gute Taten tun muss, um zu beweisen, dass er tuechtig ist, aber nur einen Fehler zu begehen braucht, um zu beweisen, dass er nichts taugt."


  3. #3
    TP-Greis Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Avatar von Boris
    Registriert seit
    Mar 2001
    Ort
    Stuttgart & Kornwestheim
    Beiträge
    9.420
    Hm, das ist aber eine sehr "schmuzige" Art und Weise. Dadurch, dass der Motto-Schriftzug aus Text besteht, wird es 100% Probleme mit verschiedenen Browsern und Auflösungen geben.

    Nach dem Bild gibt es keine Leerzeichen, nur Tabs. Die sollten eigentlich nicht stören

    Gibt es eine andere Variante?
    My software never has bugs. It just develops random features ...

    » DevShack - die Website des freien Webentwicklers Boris

  4. #4
    TP-Member Mausdrachen ist auf einem guten Weg Avatar von Mausdrachen
    Registriert seit
    Aug 2003
    Ort
    z. Zt. Neuruppin
    Beiträge
    69
    Hi Adagio

    wieso ist das eine "schmutzige" Lösung? Versteh ich nicht. Das Bild im <div> davor ist mit einer Höhe von 120 definiert, folglich ist das <div> danach genauso hoch. Was ist falsch daran den Abstand von oben dann auf 100px zu setzen für den Text? Ich fange mit CSS erst an, also verzeih eine so dumme Frage.

    Und was die Probleme angeht... unter Windows 98 sieht es im Netscape 7.02, Opera 7.11, Mozilla Firebird und IE 5.5 gleich aus. Opera hat allerdings ein Problem nach <div id="navcontainer">. Dort ist auch ein Zeilenabstand zu sehen.

    Liebe Grüsse
    Michaela
    Zitat von George Bernard Shaw:

    "Eines der traurigsten Dinge im Leben ist, dass ein Mensch viele gute Taten tun muss, um zu beweisen, dass er tuechtig ist, aber nur einen Fehler zu begehen braucht, um zu beweisen, dass er nichts taugt."


  5. #5
    TP-Greis Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Avatar von Boris
    Registriert seit
    Mar 2001
    Ort
    Stuttgart & Kornwestheim
    Beiträge
    9.420
    Wer sagt Dir denn, dass der als 18px breit definierte Text auch 20 Pixel hoch ist? (20px + 100px Padding -> 120px Höhe) ;-)

    Ich hab Deine Variante mal genommen, aber mit dem unterschied, dass ich für die Texthöhe ebenfalls 20 feste pixel definiert habe (line-height). Scheint zu funktionieren.

    Das IE-Problem mit dem Rand ist übrigens jetzt weg.

    EDIT:
    Opera 7.50 zeigt bei mir alles tadellos an. Welche Version hast Du benutzt?
    Geändert von Adagio (12.05.2004 um 00:54 Uhr)
    My software never has bugs. It just develops random features ...

    » DevShack - die Website des freien Webentwicklers Boris

  6. #6
    TP-Member Mausdrachen ist auf einem guten Weg Avatar von Mausdrachen
    Registriert seit
    Aug 2003
    Ort
    z. Zt. Neuruppin
    Beiträge
    69
    hatte es mir mit Opera 7.11 angesehen. Die Leerzeile ist weg. Wer weiß was das gestern war. Aber ich hab da noch eine Kleinigkeit im IE5.5 entdeckt. Das Bild neben dem Motto ragt etwas hervor (siehe Anhang).
    Angehängte Grafiken  
    Zitat von George Bernard Shaw:

    "Eines der traurigsten Dinge im Leben ist, dass ein Mensch viele gute Taten tun muss, um zu beweisen, dass er tuechtig ist, aber nur einen Fehler zu begehen braucht, um zu beweisen, dass er nichts taugt."


  7. #7
    TP-Greis Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Avatar von Boris
    Registriert seit
    Mar 2001
    Ort
    Stuttgart & Kornwestheim
    Beiträge
    9.420
    Das hab ich bereits erfahren, und ich habe weder eine Idee, noch die Lust, etwas für den CSS-verbuggten IE 5.x oder 5.5 extra zu "optimieren". Außer, jemand weiss, woran es liegt und wie man es schnell ändern kann *g*
    My software never has bugs. It just develops random features ...

    » DevShack - die Website des freien Webentwicklers Boris

  8. #8
    TP-Specialist prefix ist auf einem guten Weg
    Registriert seit
    Aug 2002
    Ort
    Nähe Wien
    Beiträge
    4.642
    Zitat Zitat von Adagio
    Das hab ich bereits erfahren, und ich habe weder eine Idee, noch die Lust, etwas für den CSS-verbuggten IE 5.x oder 5.5 extra zu "optimieren". Außer, jemand weiss, woran es liegt und wie man es schnell ändern kann *g*
    tantek hilft dir

    --> ich bin ein link

  9. #9
    TP-Greis Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Avatar von Boris
    Registriert seit
    Mar 2001
    Ort
    Stuttgart & Kornwestheim
    Beiträge
    9.420

    Question

    Ich wüsste nicht, wie mir das bei dem Bildproblem helfen sollte (?) ...

    Wie auch immer - im Prinzip hab ich jetzt nur noch ein "Problem" ... für das jetzt variable Layout (100% Breite) müsste ich in einen Variablen Container (DIV1, 100% Breite) einen festen Container (DIV2, 160px Breite) und daneben, ohne dass er "floaten" soll, einen Container plazieren, der die Restbreite einnimmt (DIV3).

    Sämtliche Versuche meinerseits sind aber gescheitert. Wie genau das aussehen soll, hab ich mal als Bild beigefügt. Weiß jemand eine Lösung oder Ansatz?
    Angehängte Grafiken  
    My software never has bugs. It just develops random features ...

    » DevShack - die Website des freien Webentwicklers Boris

  10. #10
    TP-Specialist prefix ist auf einem guten Weg
    Registriert seit
    Aug 2002
    Ort
    Nähe Wien
    Beiträge
    4.642
    ähm, also das bild ist doch leicht umzusetzen:

    a) dem ganzen body margin und padding auf null setzen, background geben
    b) dem rosa container: breite 160px, float: left;
    c) dem inhalt: margin-left: 160px
    d) darunter einen unsichtbaren clearer setzen (under rosa und inhalt)

    uw meinst das eh so, oder?

  11. #11
    TP-Greis Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Avatar von Boris
    Registriert seit
    Mar 2001
    Ort
    Stuttgart & Kornwestheim
    Beiträge
    9.420
    Jup, funzt auch super, danke. Ein Problem aber bleibt - im IE6 (und auch NUR im IE6, IE5 und andere Browser machen das nicht) ist der Text um 2-3 Pixel "verrückt" neben der Subnavi ... das sieht eigenartig aus (?)
    My software never has bugs. It just develops random features ...

    » DevShack - die Website des freien Webentwicklers Boris

  12. #12
    TP-Specialist prefix ist auf einem guten Weg
    Registriert seit
    Aug 2002
    Ort
    Nähe Wien
    Beiträge
    4.642
    das ist der bekannte 3px-bug, der beim floaten im ie6 auftritt -> workaround

  13. #13
    TP-Greis Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Boris lebt für das TP und seine User Avatar von Boris
    Registriert seit
    Mar 2001
    Ort
    Stuttgart & Kornwestheim
    Beiträge
    9.420
    Und ich dachte, langsam kommen alle Browser auf einen gemeinsamen Nenner, ohne das man 1903282 Hacks und Workarounds benutzen muss
    My software never has bugs. It just develops random features ...

    » DevShack - die Website des freien Webentwicklers Boris

  14. #14
    TP-Specialist prefix ist auf einem guten Weg
    Registriert seit
    Aug 2002
    Ort
    Nähe Wien
    Beiträge
    4.642
    das wird nicht mal in 10 jahren möglich sein :nein harhar

    leider

+ Antworten

Ähnliche Themen

  1. Brauche Hilfe bei Pflichtenheft
    Von Student im Forum Webdesign allgemein
    Antworten: 4
    Letzter Beitrag: 06.04.2004, 15:28
  2. Ich brauche mal hilfe... -> Webseitenerstellung
    Von majonaise im Forum Webdesign allgemein
    Antworten: 5
    Letzter Beitrag: 10.01.2003, 14:43
  3. Image Ready -> Brauche Hilfe!!!
    Von mcFragger im Forum Photoshop
    Antworten: 2
    Letzter Beitrag: 20.02.2002, 17:53
  4. brauche hilfe bei einem javaskript
    Von chris74 im Forum HTML & CSS
    Antworten: 7
    Letzter Beitrag: 12.09.2001, 18:56

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

     

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51