Website für eine Fussballteam

veritas696 · 26 Februar 2010

Hallo liebe Community,

kurz zu mir:
ich bin 27 jahre alt, Software-Entwickler und begeisterter Fussballspieler. Leider bin ich meiner beruflichen Laufbahn noch nicht in den Genuß gekommen mich mit Web-Entwicklungen zu beschäftigen und so besitze ich nur die Grundkenntnisse aus meinem Studium dazu.

Vorhaben:
Ich wurde gebeten für meinen heimischen Verein eine Internetpräsenz zu erstellen. Da dies auch in meinem Interesse ist und ich gern ein wenig Öffentlichkeitsarbeit leisten möchte, habe ich diese Herrausforderung angenommen. Da ich, wie gesagt, bisher nur wenig Erfahrungen damit sammeln konnte, hoffe ich, daß ihr mir hier mit Rat und Tat zur Seite stehen könnt. Ich werde sicherlich viele Fragen haben und hoffe, daß mir hier die Möglchkeit dazu gegeben wird.:-o

Inhalt:
Entwickeln werde ich die Website mit Macromedia Dreamweaver. Das Grundgerüst der Website habe ich bereits in einem Grafikprogramme skizziert und schaut ungefähr so aus (Ansicht der Startseite):
(ich hoffe, ich darf das hier mal momentan als Link einstellen, das hochladen als Anhang is mir an meinem aktuellen Rechner nicht möglich)

http://www.bilderkiste.org/show/original/9f7d13c22681231f1f006842084851a1/template.JPG

Aufbau der Seite:
Die Website besitzt "4 Teile":
- einen Header mit Name des Vereins, und Logo (oben)
- einen Navigationsbereich (Menu) mit Links zu den einzelnen Themen (links)
- ein Untermenu (unterhalb des Headers), (dazu später mehr) auf der Startseite
steht in diesem Fall nur ein Willkommensgruß
- einen Hauptbereich (Content) in dem die einzelnen Informationen zu den jeweiligen Menupunkten dargestellt werden sollen.

1. Ziele:
Die Website soll so aufgebaut werden das Header, Menu und Untermenu immer im Browser sichtbar sind, d.h. nur der Hauptbereich soll scrollbar sein.
Header, Menu, Untermenu besitzen festgelegte Größen und sollen sich auch bei Vergrößerung/Verkleinerung des Browserfenster nicht ändern. Nur der Hauptbereich soll veränderbar sein.

1. Frage:
ist mein erstes Ziel überhaupt umsetzbar :mrgreen: ? Im Prinzip gehts mir darum, daß die 3 statischen Teile nicht immer wieder neu geladen werden müssen wenn ein anderer Menupunkt ausgewählt wird, und halt immer für den Benutzer sichtbar sind ,egal wie weit er im Hauptbereich gescrollt hat.

2. Frage:
Wie steige ich mit meinem gewünschten Grundgerüst am besten in Dreamweaver ein, d.h. welche Art Dokument wähle ich hierbei am besten aus (als ersten ist mir ein Framset in den Sinn gekommen), weiß aber nicht ob dies die beste Variante darstellt.Oder erstellt man die einzelnen Teilbereich seperat?

ihr könnt mich gern mit Fragen löchern wenn euch was unklar ist :| und hoffe ihr könnt mir den Weg zu meinem gewünschten Ziel zeigen :mrgreen:

schöne grüße Veritas

Efchen · 26 Februar 2010

Willkommen!

veritas696 schrieb:
Da ich, wie gesagt, bisher nur wenig Erfahrungen damit sammeln konnte, hoffe ich, daß ihr mir hier mit Rat und Tat zur Seite stehen könnt.

Na, aber hallo! Wenn nicht hier, wo dann? :-)
Gleich mal ein Link zum Einstieg: Einführung | Webdesign mit XHTML und CSS

Entwickeln werde ich die Website mit Macromedia Dreamweaver.

Würde ich nicht machen. Das ist ja in erster Linie ein Code Generator. Die können aber alle kein HTML, bzw definitiv können sie nicht automatisch Semantik vergeben, und das ist der Grundsinn von HTML. Du wirst also in jedem Fall HTML & CSS lernen müssen, damit Du den Code, den DW Dir fabriziert, korrigieren kannst.

Das Grundgerüst der Website habe ich bereits in einem Grafikprogramme skizziert und schaut ungefähr so aus (Ansicht der Startseite):

Das Grundgerüst einer Website besteht aus HTML und der Semantik des Inhalts. Das Layout und Design ist zweitrangig.
Außerdem musst Du Dir beim layouten im Klaren sein, was das WWW Dir alles an Variablen bietet. Kaum zwei Viewports sind gleich groß, einer hat nur wenig Platz für Deine Site, andere haben mehr. Die Schriftgröße kann bei jedem verschieden sein. Auch darauf musst Du reagieren.
Es gibt sehr viel zu beachten.

Die Website soll so aufgebaut werden das Header, Menu und Untermenu immer im Browser sichtbar sind, d.h. nur der Hauptbereich soll scrollbar sein.

Ganz schlecht. Wenn ich da an mein Netbook denke, wo ich ca. 1000x400px Platz im Viewport habe, und Du dann mit einem fixen Bereich kommst, der mir noch mehr Platz wegnimmt, dann habe ich am Ende vielleicht nur 200px Höhe Platz für den eigentlichen Inhalt. Das muss nicht sein. Das ist Platzverschwendung und nutzerunfreundlich.

Header, Menu, Untermenu besitzen festgelegte Größen und sollen sich auch bei Vergrößerung/Verkleinerung des Browserfenster nicht ändern. Nur der Hauptbereich soll veränderbar sein.

Und wenn der Viewport dann so groß ist wie Header&Menu, dann sieht der Nutzer gar nichts mehr. Das kann nicht in Deinem Sinne sein.

ist mein erstes Ziel überhaupt umsetzbar

Es ist nicht sinnvoll.
Aber im Moment solltest DU eh erstmal die Grundlagen des WWW lernen, dann HTML und dann CSS. Erst dann solltest Du versuchen, Dein Design umzusetzen, wenn Du den Rest gut beherrscht.

Im Prinzip gehts mir darum, daß die 3 statischen Teile nicht immer wieder neu geladen werden müssen wenn ein anderer Menupunkt ausgewählt wird

Das ist kein Problem, so ist das für HTTP vorgesehen, so macht das jede anständige Seite. Es geht hier ja nur um ein paar Bytes. Und wenn Du Inhalt und Layout immer strikt voneiander trennst, dann wird das Design ja komplett gecached und nur der Inhalt wird neu geladen.

Wie steige ich mit meinem gewünschten Grundgerüst am besten in Dreamweaver ein, d.h. welche Art Dokument wähle ich hierbei am besten aus (als ersten ist mir ein Framset in den Sinn gekommen), weiß aber nicht ob dies die beste Variante darstellt.Oder erstellt man die einzelnen Teilbereich seperat?

Auf gar keinen Fall als Frameset Wenn Du nach dessen Nachteilen suchst, solltest Du erschüttert sein, und die Dinger freiwillig nicht mehr benutzen.

ihr könnt mich gern mit Fragen löchern wenn euch was unklar ist

Ich erwarte eher, dass ich später aussehe wie ein Schweizer Käse :-)

stachelbeer · 26 Februar 2010

Du solltest bedenken, dass eine Website kein Buch ist, dessen Format du kennst. Ich kann schon auf dem Bild, dass anscheinend eine Seite verkleinert darstellt, das Menü nicht ohne Scrollen erreichen. Wenn Du jetzt also das Scrollen nur auf dem Hauptinhalt zulässt, dann wären einige Inhalte für mich nicht erreichbar (ich sitze hier an einem Netbook mit 1024 mal 576 Pixel; Der Viewport Beträgt aber nur: 1016 mal 387 Pixel).

Das Vergrößern nur in bestimmten Bereichen zu zulassen ist höchstens im Internet-Explorer möglich. Allerdings ist es dem Besucher gegenüber höchst unhöflich.

Um nur einen Bestimmtenbereich zu verändern kann man entweder Frames benutzen oder ein Ajax-Framework. Beide Techniken sollte man nicht für eine Vernünftige Erreichbarkeit einsetzen. Informationen über Frames: Subotnik: Warum Frames out sind (und es schon immer waren...)
und Ajax: AJAX - Vor- und Nachteile einer Modeerscheinung

Webdesigner und Suchmaschinen-Robot - woodshed productions - Dsseldorf

Für eine leichtere Pflege der Website ist es sinnvoll die sich wiederholende Elemente auszulagern und in die Website Serverseitig einzufühgen.

Wichtig ist, den Inhalt vernünftig zu schreiben und den Text entpsrechend seiner Semantik auszuzeichnen.

Ich kenne Dreamweaver nicht, kann entsprechend dazu nichts sagen.

veritas696 · 26 Februar 2010

@Efchen: erstmal Danke für deine Tipps: also bei HTML hab ich zumindestens Grundkenntnisse, wenn ich da an der einen oder andere Stelle nich weiter komm hilft mir der gute Google sicher weiter ;) Für CSS arbeite ich grad ein Tutorial durch was mich da sicher weiter bringt.

Efchen schrieb:
Würde ich nicht machen. Das ist ja in erster Linie ein Code Generator. Die können aber alle kein HTML, bzw definitiv können sie nicht automatisch Semantik vergeben, und das ist der Grundsinn von HTML. Du wirst also in jedem Fall HTML & CSS lernen müssen, damit Du den Code, den DW Dir fabriziert, korrigieren kannst.

hm nun gut, stell mir Dreamweaver nur als sehr praktikabel vor, mit seiner WISISWG (oder so ähnlich) Funktion vor. Kannst du mir denn einen guten HTML Editor empfehlen? Am besten Open-source natürlich

. Mit highlighting und den ganzen krimskrams, vielleicht auch Projekt orientiert?

Efchen schrieb:
Ganz schlecht. Wenn ich da an mein Netbook denke, wo ich ca. 1000x400px Platz im Viewport habe, und Du dann mit einem fixen Bereich kommst, der mir noch mehr Platz wegnimmt, dann habe ich am Ende vielleicht nur 200px Höhe Platz für den eigentlichen Inhalt. Das muss nicht sein. Das ist Platzverschwendung und nutzerunfreundlich.

Nungut, der Header wäre nun grad mal 100px hoch und das Menu 100px breit, aber was du sagts leuchtet mir natürlich ein :| ich dacht nur es sieht einfach besser aus :roll: und man hat die Menupunkte immer im Blick und muss nich ständig zurückscrollen wenn man z.B. zur Startseite will.

Efchen schrieb:
Das ist kein Problem, so ist das für HTTP vorgesehen, so macht das jede anständige Seite. Es geht hier ja nur um ein paar Bytes. Und wenn Du Inhalt und Layout immer strikt voneiander trennst, dann wird das Design ja komplett gecached und nur der Inhalt wird neu geladen.

was genau meinst du mit "Inhalt und Layout" strikt voneinander trennen?

stachelbeer schrieb:
Für eine leichtere Pflege der Website ist es sinnvoll die sich wiederholende Elemente auszulagern und in die Website Serverseitig einzufühgen.

was wären zum Beispiel wiederholende Elemente an meiner Weibsite?

Edit: könnt ihr mir ein gutes HTML-Tutorial empfehlen welches mich meinen Ziel näher bringt? Ich weiß das Ziel ist noch weit, aber ein paar Beschleunigungsstreifen wären nicht schlecht ;)

Efchen · 26 Februar 2010

veritas696 schrieb:
bei HTML hab ich zumindestens Grundkenntnisse

Das heißt, Du weißt, was mit "Semantik" gemeint ist und kannst Deinen Inhalt auch damit logisch auszeichnen?

stell mir Dreamweaver nur als sehr praktikabel vor, mit seiner WISISWG Funktion vor.

WYSIWYG - What You See Is What You Get. Eben das ist der Modus, den Du NICHT benutzen solltest, oder eben nur mit äußerster Vorsicht, weil kein Programm in dem Modus eine geeignete Semantik vergibt und vergeben kann. Das musst Du selber machen. Ob DW Dir dazu die entsprechenden Möglichkeiten gibt und ob der Code am Ende wirklich ausreicht, sei mal dahin gestellt. Du kannst gerne Deine Ergebnisse hier posten, wir nehmen gerne jede Zeile einzen auseinander! ;-)

Kannst du mir denn einen guten HTML Editor empfehlen?

Jeder beliebige Texteditor ist vollkommen ausreichend.

Nungut, der Header wäre nun grad mal 100px hoch und das Menu 100px breit

Das sind schon wieder 100px auf jeder Seite, die Du mir wegnimmst. 2x 100px, die mich als Nutzer Deiner Site unglücklicher machen.

ich dacht nur es sieht einfach besser aus

Das hat was, ja, aber wenn dadurch die Nutzbarkeit leidet, ist das schlecht. Und ich bin immer noch der Ansicht, dass einem das schönste Aussehen nichts nutzt, wenn die Nutzbarkeit bescheiden ist.

man hat die Menupunkte immer im Blick und muss nich ständig zurückscrollen wenn man z.B. zur Startseite will.

Das kann man bestimmt auch anders lösen. Z.B. mit einem 20px breiten Tab, das an der Seite fest sitzt, und wenn man drüber fährt, geht das Menü auf. Sowas hab ich schonmal gesehen. Lässt sich sicher auf die selbe Art lösen wie die üblichen CSS-hover-Menüs.

was genau meinst du mit "Inhalt und Layout" strikt voneinander trennen?

HTML ist für den Inhalt, und nur zur logischen Auszeichnung des Inhalts. Nichts, was Du mit HTML machst, tust Du, um damit ein bestimmtes Aussehen zu erreichen. Das machst Du allein mit CSS, so wie Du mit CSS auch keine Semantik festlegen kannst. Wenn Du einen bestimmten optischen Effekt willst, und dazu das HTML-Tag änderst, dann trennst Du Inhalt und Layout nicht, und hast den Sinn der beiden Sprachen noch nicht begriffen.
Trennung von Inhalt und Layout heißt außerdem, dass Du alles, was mit dem Aussehen zu tun hast, idealerweise in ein externes Stylesheet packst. Dann wird das Stylesheet nur einmal geladen und dann in den Cache gestellt. Ab sofort werden nur noch die Inhalte (HTML) vom Server abgeholt. Packst Du Layoutinformationen alle mit in die HTML-Seiten, werden diese bei jeder Seite aufs Neue mitgeladen.

was wären zum Beispiel wiederholende Elemente an meiner Weibsite?

Der Header und das Menü!

könnt ihr mir ein gutes HTML-Tutorial empfehlen welches mich meinen Ziel näher bringt?

Ich hab Dir ganz am Anfang schon einen Link gegeben. Das Forum hat da wohl was von dem Seitentitel abgeschnitten. Auch hier nochmal der Link: Einführung | Webdesign mit XHTML und CSS

thuemmy · 26 Februar 2010

veritas696 schrieb:
Kannst du mir denn einen guten HTML Editor empfehlen? Am besten Open-source natürlich . Mit highlighting und den ganzen krimskrams, vielleicht auch Projekt orientiert?

z.B. Notepad++

veritas696 schrieb:
und muss nich ständig zurückscrollen wenn man z.B. zur Startseite will.

Da bietet sich der beliebte "Nach oben"-Link an.

veritas696 schrieb:
was genau meinst du mit "Inhalt und Layout" strikt voneinander trennen?

Dem Inhalt mittels HTML eine Bedeutung geben, und das Design mit CSS machen.

veritas696 schrieb:
was wären zum Beispiel wiederholende Elemente an meiner Weibsite?

Den Kopfbereich und das Menü. Einfach alles, was sich auf jeder Seite wiederholt.

veritas696 schrieb:
könnt ihr mir ein gutes HTML-Tutorial empfehlen welches mich meinen Ziel näher bringt? Ich weiß das Ziel ist noch weit, aber ein paar Beschleunigungsstreifen wären nicht schlecht ;)

Schau mal hier: Einf

Gruß thuemmy

veritas696 · 26 Februar 2010

Soweit so gut, jetzt hab ich noch ein paar Schlagworte die für mich wichtig waren.
Die Trennung von HTML und CSS hab ich verstanden und is fest eingeplant :mrgreen:
Dadurch weiß ich auch was Semantik bedeutet und werd drauf achten!
Ich meld mich bald wieder wenns ans Eingemachte geht...

please stay tuned...

veritas696 · 26 Februar 2010

So, hoffe Doppelposts sind bei euch erlaubt, wenn nich editieren ich das nächste mal den letzten Beitrag :|

nächste Frage (ja jetzt schon

):
Um mich in die ganze Thematik besser einzuarbeiten, habe ich mir als erstes mein Menu erstellt. Dadurch konnt ich ein bissl mit CSS rumspielen und meine HTML Kenntnisse auffrischen.
Das Menu sieht jetzt ungefähr so aus wie auf dem Bild (siehe Post #1). Verwendet hab ich dazu das "class" Attribute für die <a> tags. da sieht dann so aus im .css:

Code:

a.hauptlink:link 
{
         display:block;
         background-color:#8284E7;
         color:#FFFFFF;
         font-weight: bold;                
         ...
}

ähnlich dann auch für .hover .visited . und .active

angemwendet dann in der .html:

Code:

<a class="hauptlink" href="#">Startseite</a>

frage is nun: Die Hintergrundfarbe ändert sich nun nach unten hin und soll immer heller werden(im Bild erkennbar). Wie kann ich das erreichen? geht das überhaupt mit "class" oder muss ich da "id" verwendet und für jeden link ne neue Hintergrundfarbe definieren? Was auch noch helfen würde: kann man die Hintergründe von Links transparent gestalten?

Gimli · 26 Februar 2010

Mal was zu DW:
Ich selbst benutze auch Dreamweaver, allerdings nur, weil er diese Tolle autovervollständigungs-Funktion hat und den Code sehr schön farbig markiert. Wenn man es schon hat, weil man sich z.B. Photoshop in nem Paket geholt hat, dann sollte man ihn auch nutzen ;) Ich denke Dreamweaver ist ein excellentes Werkzeug, auch ohne die WYSIWYG Funktion.

vitus37 · 26 Februar 2010

Gimli schrieb:
Ich selbst benutze auch Dreamweaver, allerdings nur, weil er diese Tolle autovervollständigungs-Funktion hat und den Code sehr schön farbig markiert.

Das können die meisten HTML-Editoren ;)

Aber nochmal zurück zum Theme:

varitas696 schrieb:
frage is nun: Die Hintergrundfarbe ändert sich nun nach unten hin und soll immer heller werden(im Bild erkennbar). Wie kann ich das erreichen? geht das überhaupt mit "class" oder muss ich da "id" verwendet und für jeden link ne neue Hintergrundfarbe definieren? Was auch noch helfen würde: kann man die Hintergründe von Links transparent gestalten?

Die erste Frage verstehe ich nicht so ganz, aber der einzige Unterschied (meines Wissens) zwischen id und class ist der, dass class im HTML-Quelltext mehrmals und id nur ein einziges mal vorkommen darf. Den Links kannst du unterschiedliche Hintergrundfarben geben, wenn du ihnen unterschiedliche Klassen zuweist.
Zur zweiten Frage: Normal sind die Hintergründe von Links automatisch transparent.
Ausserdem, da dein Menu eine Auflistung mehrerer Links ist, muss es auch als Liste ausgezeichnet werden, also mit <ul> und <li>.

veritas696 · 26 Februar 2010

also nochmal: wie auf dem Bild/der Skizze im Post#1 zu erkennen ist, ist der Hintergrund des ersten Links ("Startseite") dunkler als der Hintergrund des letzten Links ("Fan stuff"). Aber ich näme mal wirklich an daß ich da für jeden Link ne neue "class" definieren muss :cry: a la : a.hauptlink1:link {...}, a.hauptlink2:link {...} ...
bei .hover,. active etc. is mir das eigentlich schnuppe aber bei .link hät ich das schon ganz gern :roll: hm...

vitus37 · 27 Februar 2010

Hmm, ich denke auch, dass du dafür jedem Menüpunkt eine eigene Klasse oder ID zuweisen musst.

stachelbeer · 27 Februar 2010

Du kannst auch mit sowas arbeiten:

Code:

#menu li:first-child a {
  /* Formatierungen */
}
#menu li:first-child + li a {
  /* Formatierungen */
}
#menu li:first-child + li + li a {
  /* Formatierungen */
}
#menu li:first-child + ... + li a {
  /* Formatierungen */
}

Körnerbrötchen · 27 Februar 2010

Oder du trennst dich von deinem Layout ein wenig, erstellst einen Farbverlauf als Grafik und setzt den als Hintergrund der List (also ul).

veritas696 · 27 Februar 2010

stachelbeer schrieb:

Du kannst auch mit sowas arbeiten:

Code:

#menu li:first-child a {
  /* Formatierungen */
}
#menu li:first-child + li a {
  /* Formatierungen */
}
#menu li:first-child + li + li a {
  /* Formatierungen */
}
#menu li:first-child + ... + li a {
  /* Formatierungen */
}

kannst du das mal genauer erklären :roll: ich seh da nicht wirklich nen Vorteil zur Erstellung mehrerer classes?
Gibts den bei css so eine Art "Vererbung"? Ich mein, wenn ich die Eigenschaften für den Standard Link festlege mit a:link {...} . übernimmt dann ein a.meineklasse:link {...} alle eigenschaften die ich nicht neu definieren aus a:link ?

Wie siehts aus mit Kombination von "id" und "class"? kann man in der "class" alle eigenschaften festlegen und mit "id's" die farbe definieren, das würde zumindest einiges an code sparen. angewendet dann so:

<a href="index.htm" id="menucolor_id1" class="menulink">Startseite</a>

veritas696 · 1 März 2010

Der Farbverlauf des Menus wird erstmal auf die ToDo-Liste gepackt, vielleicht arbeite ich da auch mit opacity, mal schaun...erstmal nebensächlich :mrgreen:

nun zum Header: Ich verwende hierbei eine Hintergrundgrafik (800x100). Nun möchte ich die links zur "Startseite" "Impressum" und "Kontakt" hinzufügen. Ich erreiche es aber nur das sie sich mittig am oberen Rand des Headers befindet (also ÜBER der Schrift "SG Leimbach"). Ich möchte sie aber gern an den unteren Rand des Headers in der Mitte haben. Wo muss ich was im Stylesheet dafür defineren? In der "class" für die Links oder in der "class" fürs div? (Abbildung siehe Post #1).

lg veritas

veritas696 · 1 März 2010

meine aktuellen Probleme:

Abbildung zur Erläuterung:
http://www.bilderkiste.org/show/original/1d492141a096c02076338a7e208c531e/testbild1.JPG

Im Header sieht man die Links für "Startseite", "Kontakt", "Impressum", "Anfahrt". Dies ist der einzige Inhalt des Headers, der Rest ist alles Hintergrundgrafik.
Mir ist es bisher nicht gelungen diese vier Links an den unteren Rand des Headers zu verschieben, wie kann ich dies tun? :???:

Am linken Rand befindet sich das Navigationsmenu(in ein "DIV" eingebet, siehe äußeren helblauen Rand)
die ersten 3 Links sind direkt ins "DIV" geschrieben und beginnen an der gewünschten Stelle (am linken Rand des "DIVS")
Die restlichen Links sind in einer Liste zusammengefasst. Warum befindet sich so dort so eine große Lücke zum linken Rand(der innere hellblaue Rahmen gehört zur ul- "class"). Hat das was mit den Aufzählungszeichen zu tun, die ich aber per "list-style:none;" weg gemacht haben.

der html-code:

Code:

<body>
<!-- ####### KOPFBEREICH -Schriftzug der SG Leimbach plus Logo, Kontakt Impressum etc. ###### -->
<div class="divheader">

<a class="headerlink" href="#">Startseite</a>
<a class="headerlink" href="#">Kontakt</a>
<a class="headerlink" href="#">Impressum</a>
<a class="headerlink" href="#">Anfahrt</a>


</div>

<!-- ###### NAVIGATIONSMENU ###### -->
<div class="divnavi">
     <!-- Hauptmenu -->
   <a class="hauptlink" href="#">Startseite</a>
   <a class="hauptlink" href="#">Der Verein</a>
   <a class="hauptlink" href="#">Geschichte</a>

   <ul class="menustyle">
   <!--<li><p id="haupttitel">Hauptmenu</p></li>-->
   <li><a class="hauptlink" href="#">Startseite</a></li>
   <li><a class="hauptlink" href="#">Der Verein</a></li>
   <li><a class="hauptlink" href="#">Geschichte</a></li>
   <li><a class="hauptlink" href="#">Sportpark</a></li>
   <li><a class="hauptlink" href="#">akt. Saison</a></li>
   <li><a class="hauptlink" href="#">Teams</a></li>
   <li><a class="hauptlink" href="#">Erfolge</a></li>
   <li><a class="hauptlink" href="#">Archiv</a></li>
   <li><a class="hauptlink" href="#">Gästebuch</a></li>
   <li><a class="hauptlink" href="#">Partner</a></li>
   <li><a class="hauptlink" href="#">Links</a></li>
   <li><a class="hauptlink" href="#">Fan Stuff</a></li>
   </ul>
  </body>
</html>
</div>

die css-datei:

Code:

ul.menustyle
{
        BORDER-RIGHT: #87ceeb 1px solid;
          BORDER-LEFT: #87ceeb 1px solid;
          BORDER-TOP: #87ceeb 1px solid;
          BORDER-BOTTOM: #87ceeb 1px solid;
         list-style:none;
         list-style-type:none;
         /*opacity: 0.7;*/
         /*float:top;*/
}

a.headerlink:link {
         /*display:block;*/
         color:#FFFFFF;
         font-size:80%;
         text-align:center;
         vertical-align:text-bottom;
         text-transform:none;
}
div.divheader{
          /*BORDER-RIGHT: #87ceeb 1px solid;
          BORDER-LEFT: #87ceeb 1px solid;
          BORDER-TOP: #87ceeb 1px solid;
          BORDER-BOTTOM: #87ceeb 1px solid;*/
          background-image: url(img/header_bg.jpg);
          background-repeat: no-repeat;
          background-position: center;
          background-position-x: center;
          PADDING-RIGHT: 2px;       /* Abstände des inhalts des Headers zum Rand*/
          PADDING-LEFT: 2px;
          PADDING-BOTTOM: 2px;
          PADDING-TOP: 2px;
          FONT-WEIGHT: bolder;    /* fetter als normaler text */
          /*FONT-SIZE: 100%;*/
          height: 100px;
          /*MARGIN: 100px 0% 0px;*/
          margin: 0px 0px 0px 0px;
          /*TEXT-TRANSFORM: none;*/
          COLOR: #000000;
          FONT-STYLE: normal;
          BACKGROUND-COLOR: #0000FF;
          TEXT-ALIGN: center;
          FONT-VARIANT: normal;
          TEXT-DECORATION: none;
}

div.divnavi{

          BORDER-RIGHT: #87ceeb 1px solid;
          BORDER-LEFT: #87ceeb 1px solid;
          BORDER-TOP: #87ceeb 1px solid;
          BORDER-BOTTOM: #87ceeb 1px solid;
          background-image: url(img/navi_bg.jpg);
          background-repeat: no-repeat;
          PADDING-RIGHT: 2px;       /* Abstände des inhalts des Headers zum Rand*/
          PADDING-LEFT: 2px;
          PADDING-BOTTOM: 2px;
          PADDING-TOP: 2px;
          height:500px;
          float:left;
          weight:100px;
          /*MARGIN: 100px 0% 0px;*/
          margin: 1px 1px 1px 1px;
          /*TEXT-TRANSFORM: none;*/
          COLOR: #000000;
          /*FONT-STYLE: normal;*/
          BACKGROUND-COLOR: #0000FF;
          /*TEXT-ALIGN: left;*/
          /*FONT-VARIANT: normal;*/
          /*TEXT-DECORATION: none;*/

}

Kann ich anstatt einer Liste auch eine Tabelle verwenden, bin mir sicher, daß da diese Lücke zum Rand nicht auftritt. würd mich freuen wenn mir jemand helfen kann.

lg veritas

Efchen · 1 März 2010

Mein Tipp: Lerne erstmal HTML, bevor Du Dich an CSS und das Aussehen wagst. Deine Semantik ist noch nicht ausreichend, wenn Du jetzt schon das Aussehen machst, musst Du evtl. wieder alles ändern, wenn Du dann den HTML-Code machst. Das eine Menü packst Du richtig in eine Liste, das andere unsinnigerweise in ein div. Warum?
Dann hat Deine Seite wohl keinen <head> und keinen Doctype. Ohne Doctype sind Darstellungsunterschiede vorprogrammiert.
Lerne doch erstmal die Basics, bevor Du Dich an Dinge für Fortgeschrittene wagst.

Außerdem solltest Du bei solchen Problemen immer einen Link zur Seite geben.

veritas696 · 1 März 2010

Head und Doctyp hab ich doch nicht mit hineinkopiert weil ich den Beitrag nicht so lang werden lassen wollte. der Code für die HTML-Datei war halt gekürzt, wollt nur die wichtigen Teile reinbringen. Mit den drei Menüpunkte wollt ich nur zeigen wie es ungefähr aussehen sollte, also wie weit links die "Links" eigentlich stehen sollten. Ich hatte damit quasi nur rumgespielt und wollt wissen warum die Liste im Navimenu so weit rechst anfängt.
Momentan arbeite ich an meine Sourcen lokal...
gut hier nochmal der gesamte Code:

html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
  <title>Homepage der Sportgemeinschaft Leimbach</title>
  <link rel="stylesheet" type="text/css" href="sgl_styles.css" />
</head>

<body>
<!-- ####### KOPFBEREICH -Schriftzug der SG Leimbach plus Logo, Kontakt Impressum etc. ###### -->
<div class="divheader">

<a class="headerlink" href="#">Startseite</a>
<a class="headerlink" href="#">Kontakt</a>
<a class="headerlink" href="#">Impressum</a>
<a class="headerlink" href="#">Anfahrt</a>


</div>

<!-- ###### NAVIGATIONSMENU ###### -->
<div class="divnavi">
     <!-- Hauptmenu -->

   <ul class="menustyle">

   <li><a class="hauptlink" href="#">Startseite</a></li>
   <li><a class="hauptlink" href="#">Der Verein</a></li>
   <li><a class="hauptlink" href="#">Geschichte</a></li>
   <li><a class="hauptlink" href="#">Sportpark</a></li>
   <li><a class="hauptlink" href="#">akt. Saison</a></li>
   <li><a class="hauptlink" href="#">Teams</a></li>
   <li><a class="hauptlink" href="#">Erfolge</a></li>
   <li><a class="hauptlink" href="#">Archiv</a></li>
   <li><a class="hauptlink" href="#">Gästebuch</a></li>
   <li><a class="hauptlink" href="#">Partner</a></li>
   <li><a class="hauptlink" href="#">Links</a></li>
   <li><a class="hauptlink" href="#">Fan Stuff</a></li>
   </ul>
   <!--<li><p id="haupttitel">Hauptmenu</p></li>-->


</div>
<!-- ###### Untermenu ###### -->

<div class="divundernavi">

</div>

<!-- ###### INHALT DER SEITE -->
<!--
<div class="divmain">

        <h2>News, Ankündigungen, Updates</h2>
     <p>23.02.2010 Neuigkeiten</p>
       <h1>Article 1:</h1>

       <p>All human beings are born free
       and equal in dignity and rights.
       They are endowed with reason and conscience
       and should act towards one another in a
       spirit of brotherhood</p>

</div>
-->

  </body>
</html>

du meinst die Links im Header nehm ich an die einfach in ein div gepackt sind? Hät nicht gedacht daß ich dafür ne Liste bräucht :-? gut überarbeit ich mal... was ist mit der Liste im Navimenu, liegt das an den Aufzählungszeichen?

Efchen · 2 März 2010

veritas696 schrieb:
Head und Doctyp hab ich doch nicht mit hineinkopiert weil ich den Beitrag nicht so lang werden lassen wollte.

Wenn Dir das so wichtig ist, dann gib einfach einen Link zur Seite. Dann wird der Beitrag noch kürzer und der Code wird nicht verstümmelt.

der Code für die HTML-Datei war halt gekürzt, wollt nur die wichtigen Teile reinbringen.

Der Doctype ist immens wichtig. Wenn Du nicht beurteilen kannst, was wirklich wichtig ist und was nicht, solltest Du immer alles anzeigen. Besser halt mit nem Link...

wollt wissen warum die Liste im Navimenu so weit rechst anfängt.

Das kann man mit Firebug ganz einfach nachprüfen. Das geht aber nur mit nem Link zur Seite...
Code lesen ist so anstrengend :-)

du meinst die Links im Header nehm ich an die einfach in ein div gepackt sind? Hät nicht gedacht daß ich dafür ne Liste bräucht

Warum solltest Du nicht? Ich meine, das ist doch auch eine Liste von Links. <div> bedeutet "Gruppe mehrere Elemente". Warum sollte das an der Stelle was anderes sein?

was ist mit der Liste im Navimenu, liegt das an den Aufzählungszeichen?

Die verschobenen Menüpunkte unter den ersten drei? Da ist vermutlich margin-left oder padding-left oder beides nicht auf 0.

Website für eine Fussballteam

Neues Mitglied

Efchen

Guest

Neues Mitglied

Neues Mitglied

Efchen

Guest

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest