Anzeige

Bitte nicht direkt erschlagen

Bitte nicht direkt erschlagen | PSD-Tutorials.de

Erstellt von sirschmock, 12.07.2009.

  1. sirschmock

    sirschmock Noch nicht viel geschrieben

    Dabei seit:
    07.10.2005
    Beiträge:
    31
    Ort:
    Stolberg
    Bitte nicht direkt erschlagen
    Moin Männers,

    mein Verein hat mich beauftrag mal ne Website zu erstellen die ihr hier findet
    Bongte Plüüm ANzeiger

    Wie man ersehen kann möchte ich dort Div container einbauen. Ich habe mir mal ein paar Free Templates geladen und mir den Fall einmal angeschaut. Bei den Free Seiten kann ich die container verschieben und sie sind an dieser Position wo ich sie verschoben habe, wenn ich ich mir die seite im Firefox anschaue.

    Mein Problem ist jetzt ... nicht hauen :)

    habe einen div container erstellt z.b. bei dem Newsticker wenn ich mir die Seite dann im Firefox anschaue, sitz der conatainer ganz wo anders was mache ich um himmels willen falsch. Ja ja ich weiß dies ist nur eine kleinigkeit aber ich würde mich demens freuen von Euch Hilfe zu bekommen. Habe mir die Free 100 mal angeschaut und alles genauso gemacht aber meine div container stehen NIE da wo sie sollen :(


    Greats

    Have a nice Day

    Sir Schmock
     
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Ein bissl Quelltext etc. wäre hilfreich -> siehe Signatur. Der Link weist ja nur auf 'ne Tabellengebaute (PS-erstellte) Seite. :rolleyes:
     
    #2      
  3. leveler

    leveler 00110100 00110010

    Dabei seit:
    23.06.2008
    Beiträge:
    2.614
    Bitte nicht direkt erschlagen
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    hallo sirschmok,
    als erstes wäre es gut, in der css etwas für ordnung zu sorgen und den #container nur einmal zu formatieren.
    wenn du da absolut positionierte elemente 'einhängen' willst die bei jedemBrowser an der selben Stelle zu sehen sein sollen muss der container ausserdem noch ein position:relative; bekommen.
    dann kannst du innerhalb des containers die Elemente positionieren, die eine ansolute positionierung brauchen.
    ApDiv1 und ApDiv2 etc, sind da relativ unbrauchbare bezeichner.
    günstiger sind da Bezeichner wie zB <div id="newsticker"></div> oder <div id="hauptinhalte"></div>

    wenn du diese Elemente innerhalb von container (unterhalb der Tabelle einfügen) notierst und mit den css eigenschaften:
    Code (Text):
    1.  
    2. #newsticker{
    3.   position: absolute;
    4.   top: xxxpx;
    5.   left: yyypx;
    6.   background: #ffff00;
    7.   width: xxxpx;
    8.   height:yyypx;
    9. }
    10.  
    versiehst, kannst du sie einfach anhand der Zahlenwerte (anstelle von xxx und yyy) genau ausrichten.
    die Eigenschaft background ist hier nur gesetzt,damit man die Ausdehnung der DIVs direkt sehen kann - später entfernen.
    nach dem gleichen Muster richtest du auch den div für die Hauptinhalte ein.

    (btw:Galerie braucht nur ein "L")
     
    Zuletzt bearbeitet: 12.07.2009
    #4      
  5. sirschmock

    sirschmock Noch nicht viel geschrieben

    Dabei seit:
    07.10.2005
    Beiträge:
    31
    Ort:
    Stolberg
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    THX

    et funzt 1000 Dank.
    EIne Frage hätte ich da noch, gibt es eine möglichkeit SOnderschriften Temporär zu laden wenn der User die Seite betritt und wenn er Sie wieder verlässt die Tmp Datei auch wieder gelöscht wird.


    Sir Schmock
     
    #5      
  6. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Willst du die Schrift weiter auf der Webseite verwenden? Damit würd ich sparsam umgehen, Fließtexten würd ich nen "normalen" Webfont zuordnen, vom Bildschirm liest es sich anders als aus der Zeitung oder Büchern.

    Aber naja, hier ein Thread zum Thema in dem es auch ein Beispiel gibt...

    Edit: Das Beispiel setzt jedoch aktiviertes JavaScript voraus und die Worte werden dann als einzelne png-dateien ausgegeben.
     
    Zuletzt bearbeitet: 12.07.2009
    #6      
  7. sirschmock

    sirschmock Noch nicht viel geschrieben

    Dabei seit:
    07.10.2005
    Beiträge:
    31
    Ort:
    Stolberg
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Guten Morgen,

    mit der Schriftart habe ich es verworfen aber ich habe gerade festgestellt das die Darstellung im IE und Firefox nicht richtig ist .

    Bongte Plüüm Anzeiger

    hier der code
    #container {
    position:relative;
    height: 1000px;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    }

    was ist daran falsch

    Danke für alles

    Greats

    Sir Schmock
     
    #7      
  8. leohh

    leohh CSS verliebt

    Dabei seit:
    19.06.2008
    Beiträge:
    244
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Welchen Fehler siehst du denn eigentlich genau?
    Gibt es ein Live-Beispiel?
     
    #8      
  9. sirschmock

    sirschmock Noch nicht viel geschrieben

    Dabei seit:
    07.10.2005
    Beiträge:
    31
    Ort:
    Stolberg
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Hallo

    klicke mal bitte auf Bongte Plüüm Anzeiger

    Live www.schauli.de

    wenn ich diesen im Firefox öffne kommt der zentriert aber im IE ist der Links und nicht Zentriert.
    Bin ich noch nicht wach??


    Sir Schmock
     
    #9      
  10. leohh

    leohh CSS verliebt

    Dabei seit:
    19.06.2008
    Beiträge:
    244
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Gib deinem body { text-align: center; } und deinem Hauptcontainer (#container) ein text-align: left;
     
    #10      
  11. sirschmock

    sirschmock Noch nicht viel geschrieben

    Dabei seit:
    07.10.2005
    Beiträge:
    31
    Ort:
    Stolberg
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Super danke danke

    Ihr seid echt fix hier.

    Greats

    Sir Schmock
     
    #11      
  12. sirschmock

    sirschmock Noch nicht viel geschrieben

    Dabei seit:
    07.10.2005
    Beiträge:
    31
    Ort:
    Stolberg
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Hallo an alle
    nach Stundenlangen Lesen und vieles mehr dachte ich ich hätte den Dreh raus aber nö das war wohl nichts.

    Ich habe mal mein Paket als .zp Virenfrei :) zum Download bereit gestellt

    darin ist enthalten

    Bilder
    css
    index.html

    zu meinem Problem
    habe alle divs angelegt und wenn ich vorschau sage versetzt der mir 8 divs die ich mit float alle auf right gestellt habe.
    Könntet ihr euch das bitte einmal anschauen und mir den fehler sagen was ich falsch mache suche mich hier dumm und dämlich. Aber da ich es zum ersten mal mit div arbeite bin ich in dieser Sache noch nicht so fitt. :(
    Link www.schauli.de/Test.zip


    Ich danke Euch

    Sir Schmock
     
    #12      
  13. pragma

    pragma Noch nicht viel geschrieben

    Dabei seit:
    09.06.2009
    Beiträge:
    10
    Geschlecht:
    männlich
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Du hast in der css-Datei bei #Ausgabe den float vergessen. Den margin-left bei #home musst du löschen. Dann sieht das Menü schon mal besser aus.
     
    #13      
  14. leohh

    leohh CSS verliebt

    Dabei seit:
    19.06.2008
    Beiträge:
    244
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Du arbeitest doch hier sowieso mit einer festen Breite, wozu brauchst du dann rechts drehende Kulturen ;)
    Alle floats nach rechts loeschen und dafuer ein float:left vergeben, nach dem letzten Element innerhalb des umschliessenden Container das clearen nicht vergessen. Dieser Container, braucht im Uebrigen keine Hoehe, die zieht er sich automatisch.

    Aber mal unabhaenig davon: Du bist dir sicher, dass du auf dieses Markup setzten willst?
    Ich seh da noch weitere Probleme auf dich zukommen - spaetestens wenn es ans Menue geht.
     
    #14      
  15. sirschmock

    sirschmock Noch nicht viel geschrieben

    Dabei seit:
    07.10.2005
    Beiträge:
    31
    Ort:
    Stolberg
    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Hm ich bin für jede Hilfe sehr dankbar ich zermarter hier meinen Kopf wie ich es am besten anstelle. Um Dir mal meinen Gedanken zu erläutern.
    Der head Bereich sollte immer so stehen bleiben. Unten der kann auch so bleiben aber im Main möchte ich ja schon die Seite (n) dann so verändern das es so aussieht wie eine richtige Zeitung. Es geht wie Du ja weißt über einen Schießverein aus dem Bergischen.

    z.b.
    1. Seite im Main Bereich unten Rechts das Aktuelle Wetter aus Remscheid darüber die AKtuellen Lottozaheln und darüber eine Newsticker vom Verband

    Im Hauptmain sollte dann der Bericht des letzten Lampfes von usn sein

    2. Seite z.b.
    alles von der ersten seite weg und den Main Bereich nach Rechst setzen und den newsticker nach Links.

    Ich hoffe Du hast meinen Gedanken folge keisten können.
    Wie würdest Du es am besten machen so da ich das Design(Farbe) in Photoshop ruckzuck ändern kann und nur die neuen Bilder hochlade.

    Ich bedanke mich

    Sir Schmock
     
    #15      
  16. chaosprinz

    chaosprinz Guest

    Bitte nicht direkt erschlagen
    AW: Bitte nicht direkt erschlagen

    Hi Sirschmock,
    ohne großarteig auf dein spezifisches Design einzugehen zu müssen kann ich dir schon vorweg sagen: Entwerf dein Design im PS einfach so dass es entsprechende Flexibilität aufweißt.
    Des weiteren würd ich mir bevor ich markup schreib erst mal ganz genau das Design anschauen und dann entscheiden wie du das im xHtml&CSS am besten umsetzt.
    Die meisten Probleme wurden irgenwann schon mal gelöst, so dass sich einige schöne Basistemplates ergeben.
    Fang an dir alles zusammengliedern, was in den Header kommt, was in den Mainbereich inklusive linker und rechter Seitenspalte und was in den Footer (falls Bedarf is) soll.
    Dann baust du dir entsprechend erstma einen div-Container der für die Zentrierung zuständig ist.
    In dem Container setzt du dir erstmal die 4 Haupt-divs. Also Header,Navigation,Main,Footer.
    Nun kommt der Trick 17 um den Rechenfehler der älteren IEs auszugleichen: Bevor du nun schon Inhalts-divs in deine Boxen packst, setzt du in jede noch mal eine div. Also beispielsweise:
    Die äußeren nimmst du her für die Postitionierung und die Bestimmung der Breite und die inneren nimmst du für die Bestimmung der Innenabstände.

    Für deine Horizontale Navigation wirds etwas knifflig wenn mans noch nicht kennt. Da du ja festgesetzte Breiten für die einzelnen Nav-Punkte hast gibts da mindestens zwei annehmbare Möglichkeiten. Beide setzen voraus, dass du die navigation mit einer <ul> umsetzt.
    Die eine Möglichkeit is alle <li>-Elemente innerhalb dieser Liste auf {display:inline} zu setzen, mit anderen lässt du die <li>s links floaten.
    Ich geb dir hier mal 2 interessante Links zu dem Thema:

    Link1(display:inline) : http://www.akademie.de/programmierung-administration/html-und-css/tipps/css-stylesheet-praxis/horizontale-navigation-mit-css.html
    Link2(li-floater): Cascading Style Sheets { Tutorial : Horizontal-Navigation mit gleitenden Hintergründen }

    Dann machst du dich an den Mainbereich. Du hast ja ein Dreispalten layout wenn ich das richtig verstanden habe. Also setzt du zu erstmal 3 divs in deinen main: sidebar-left, center, sidebar-right.
    Alle 3 Container lässt du left-floaten und weißt ihnen die gewünschte Breite zu. Du könntest jetzt noch mit spielereien arbeiten, z.b. dem center negative margins für die rechte spalte zuweisen und so, muss aber nich sein.
    Wenn du die 3 left floaten kann du entweder sagen dass dein div#main ein overflow:hidden bekommt, damit würdest du festlegen, dass main seine innenliegenden div umschließt obwohl diese ja floaten.

    Bevor du Inhalt-Divs in die Boxen packst, denk an unsern Trick 17: Bau in jedem wieder einen innen-Div für die innenabstände, zwecks Rechenfehler älterer IEs.

    Zum Footer werd ich jetzt hoffentlich nichts mehr sagen müssen. :)

    Das is nicht als Komplettlösung zu sehen sondern als erster Ansatz oder auch Inspiration. Endlösungen würden den Rahmen hier sprengen, davon mal ab, dass ich normalerweise meine Brötchen mit Endlösungen verdiene.
    Trotzdem weiß ich wie es am Anfang halt ist, darum geb ich auch gern mal Starthilfe.

    Ich geb dir einen Rat mit auf deinem Weg: Guck dir ab wie es die "Großen" machen und schau was du davon für dich am besten brauchen kannst. Es gibt im Endeffekt immer zwei Grundansätze: 1.) du baust dein Theme von vorherein so auf, dass es ein Minimum an Browserbugs auslöst und reduzierst so die Notwendigkeit der Nutzung von Browserweichen oder
    2.) Du machst dich soweit vertraut mit den Tücken der alten IEs, dass du ungefähr weißt, wann, wie und wo du welche Weichen setzt.

    Ich geb dir nun zum Schluss noch einige Websites auf den Weg, die entweder sehr gut durchgereifte html/css-Frameworks bieten welche du entweder zum Designen oder einfach zum abschauen der Kniffe und lernen hernehmen kannst und auch welche die das Thema ganz herrvoragend behandeln:
    YAML - ein Framework für die saubere Umsetzung von Mehrspaltenlayouts in jeder Komplexität unter Berücksichtigung aller möglich Browserbugs. Mit dem Buch dazu hab ich sehr viel von meinem heutigen Wissen gelernt.
    BlueprintCSS ist ebenfalls ein Framework welches auf einem sogenannten Grid-system beruht (Raster). Das ganze ist extrem tricky gehandelt und echt extrems flexibel.
    Yahoo UI - ebenfalls ein gridbasiertes Layout welches sich schon extremst gut an Regeln der Semantik hält.
    Website von Eric Meyer - einer der großen CSS-Gurus, der zwar in englsich schreibt, aber definitiv viele wirklich gute Lösungsansätze für verschiedenste Layoutprobleme mit CSS darlegt.
    A List Apart Ebenfalls eine "Muss"-Lesezeichen für Webworker bzw. CSS-Layouter. Auch englischsprachig

    Als deutsche Seiten möchte ich dir die oben schon erwähnte theStyleworks und natürlich css4you noch mitgeben.

    Ich wünsch dir noch ein frohes Schaffen und gutes Gelingen für dein Projekt.
     
    #16      
Seobility SEO Tool
x
×
×