Bitte nicht direkt erschlagen

[sirschmock]

Moin Männers,

mein Verein hat mich beauftrag mal ne Website zu erstellen die ihr hier findet


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

 

[cebito]

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.

 

[leveler]

AW: Bitte nicht direkt erschlagen

moin, hast du dich denn schon mal mit den begriffen 'boxmodel',
'positionierung' (absolut/relativ) usw. vertraut gemacht?

der code deiner seite hilft fragen zum code deiner seite zu beantworten

 

[sokie]

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:

#newsticker{
  position: absolute;
  top: xxxpx;
  left: yyypx;
  background: #ffff00;
  width: xxxpx;
  height:yyypx;
}

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")

 

[sirschmock]

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

 

[cebito]

AW: Bitte nicht direkt erschlagen

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.

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, 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.

 

[sirschmock]

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 .



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

 

[leohh]

AW: Bitte nicht direkt erschlagen

Welchen Fehler siehst du denn eigentlich genau?
Gibt es ein Live-Beispiel?

 

[sirschmock]

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

 

[leohh]

AW: Bitte nicht direkt erschlagen

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

 

[sirschmock]

AW: Bitte nicht direkt erschlagen

Super danke danke

Ihr seid echt fix hier.

Greats

Sir Schmock

 

[sirschmock]

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

 

[pragma]

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.

 

[leohh]

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.

 

[sirschmock]

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

 

[chaosprinz]

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:

<div id="header"><div id="header-innen">...</div></div>

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.
- 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.