Fertiges layout nehmen will nun die navigations verändern

Sonny · 9. April 2008 um 15:45

Hallo ich hab ein fertiges layout nun möchte ich aber für jeden einzelen Link Zb Home,Gb,Forum
2 bilder nehmen nähmlich eins normal und eins hover

mein teil der jetzigen navi schaut so aus in der css

[code]/* menue oben */

#menu a {display: block;
line-height:18px;
background-color:#000000;
color:#ffffff;
text-decoration:none ;font-family:verdana, sans-serif;
font-size: 9pt;
width:121px;
padding-left: 2px; padding-bottom: 2px; padding-top: 2px;margin: 0px auto;

}

#menu a:visited{
line-height:18px;
color:#ffffff;
background-color:#0000000;
text-decoration:none ;font-family:verdana, sans-serif;
font-size:9pt;
width:121px;
padding-left: 2px; padding-bottom: 2px; padding-top: 2px;margin: 0px auto;

}

#menu a:active{
background-color:#000000;
color:#ffffff;
text-decoration:none ;font-family:verdana, sans-serif;
font-size: 9pt;
width:121px;
padding-left: 2px; padding-bottom: 2px; padding-top: 2px;margin: 0px auto;

}

#menu a:hover {
background-color:#333333;
color:white;
text-decoration:none ;font-family:verdana, sans-serif;
font-size: 9pt;
width:121px;
padding-left: 2px; padding-bottom: 2px; padding-top: 2px;margin: 0px auto;
}

/* menue ûnten */

#menu2 a {
background-color:#00000;
color:#89A9B8
; text-decoration:none ;font-family:verdana, sans-serif; font-size: 9pt;
}

#menu2 a:visited{background-color:#ffffff;
color:#89A9B8;text-decoration:none;font-family:verdana, sans-serif; font-size: 9pt;
}

#menu2 a:active{background-color:#ffffff;
color:#89A9B8;text-decoration:none;font-family:verdana, sans-serif; font-size: 9pt;
}

#menu2 a:hover {background-color:#89A9B8;color:#ffffff;text-decoration:none ;font-family:verdana, sans-serif; font-size:9pt;
}[/code]

Und so in der in der index.html

[code]

[/code]

Was muss ich dafür ändern ?

sascha · 9. April 2008 um 15:52

Du meinst n OnMouseOver-Effekt oder?

Sonny · 9. April 2008 um 15:54

Ja den mein ich aber zur jetzigen zeit werden ja 2 bilder für alle links verwendet

sascha · 9. April 2008 um 16:00

hmm, löse es am besten so homepage-buttons.de/html-kur … ffekt.html

Sonny · 9. April 2008 um 16:07

Hmm danke das ist gut und dann einfach alles aus der css löschen bis auf das was die leiste macht für die navi ???
Oder bessere frage was muss aus der css datei raus damit es nicht zu problemen kommt =?

hoffmann · 9. April 2008 um 16:13

Das macht man wohl besser mit CSS und dem Pseudoformat
:hover.

Wenn du das für jeden Verweis anders haben willst, bekommt
eben jeder ein id-Attribut und du gibst das für jeden einzeln an.

Hast ja jetzt schon a:hover drin, müßtest da eben nur mit
background… ein Bild angeben.

Guckst du auch hier:
de.selfhtml.org/css/eigenschafte … rgrund.htm
de.selfhtml.org/css/eigenschafte … ormate.htm
de.selfhtml.org/css/formate/zent … ualformate

Sonny · 10. April 2008 um 15:15

Danke ich hab jezt auch schon ein button drin und die richtige hintergrund farbe nur möchte ich das die leiste wo der button drin ist voll durchgezogen ist und nicht links un rechts weiß
Und das die buttons nicht im center sind sondern left…
hier mal zum angucken http://r3mix.bplaced.net/Forum/index.php?sid=0bcebd0f91fef3b6e3a087b3f0f85410
Mich stört auch dieser abstand das aufeinmal der hintergrund vom forum auf hört also das da noch so ne weiße stelle ist wie mach ich das weg

hoffmann · 10. April 2008 um 15:33

Der Quelltext sieht allgemein recht gruselig aus, zudem
haufenweise veraltete Präsentationsattribute und überflüssige
und inhaltich falsch angewendete Tabellen. Da ist jedenfalls
öfter mal sowas wie ‘align=“center”’ angegeben, das wird
vermutlich bewirken - wer hätte es gedacht, daß der Zelleninhalt
zentriert wird ;o) also wegmachen. Im CSS könnte da
entsprechend auch text-align: center stehen.

Hintergrundfarben: die sind teils mit Präsentationsattributen oder
mittels des style-Attributes explizit gesetzt - wegmachen.

Weiß habe ich neben dem roten Knopf in schwarzer Tabellenzelle.
Das sind verschachtelte Tabellen - besonders gruselig, am
besten alle Tabellen entsorgen, veraltetes center wegwerfen,
Breiten nicht explizit festlegen, dann gibt sich das von allein.

Was da im Quelltext als ‘menü oben’ gekennzeichnet ist, kann
man komplett aufräumen - alle Tabellenelement weg, stattdessen
genau ein div um das rote Bild rum, per CSS Hintergrundfarbe
auf schwarz setzen.

Sonny · 10. April 2008 um 15:36

Oho ich hab beim ersten mal lesen nur bahnhof verstanden da ich mit html erst anfange aber ich werds mal versuche danke schonmal Also alles text allign und so suchen und löschen ??

hoffmann · 10. April 2008 um 15:46

Bevor du was löscht, solltest du vielleicht eine Sicherheitskopie
unter anderem Namen ablegen ;o)

Präsentationsattribute wirst du wohl nicht in der CSS-Datei
finden, die stehen irgendwo im PHP - oder wenn das sowas hat,
in einer Vorlage (‘template’). Dort wird man dann wohl auch
die style-Attribute finden, deren CSS-Angaben kaum mit einer
CSS-Datei zu überschreiben sind.

Generell kannst du dir den Quelltext der Ausgabe angucken
und dann Eigenschaften in der CSS-Datei zuordnen. Blind zu
löschen ist da nicht sehr sinnvoll. Mußt schon verstehen, welche
Anweisungen etwa auf das Menü wirken, sonst löscht du die
falschen Sachen ;o) Oder vielleicht nicht geradezu falsch, aber
etwas, was du vielleicht an anderer Stelle gern behalten hättest.

Sonny · 10. April 2008 um 20:44

Du meinst sowas hier <td align=“right” gegen was soll ich das ersetzen ??

hoffmann · 11. April 2008 um 10:39

align=“right” ist ein Präsentationsattribut, das kann man löschen.
In der CSS-Datei kann man dann im Bedarfsfalle gleichwertige
Angaben machen.

Bei dem Beispiel sind dann in der Tat nicht nur einzelne
Tabellenzellen überflüssig, sondern ganze Tabellen, die kann man
dann auch streichen oder den ganzen Kram durch ein einziges
div ersetzen und dies dann wieder in der CSS-Datei dekorieren.

Sonny · 11. April 2008 um 10:51

Sorry aber ich kapier garnichts also kann ich ja eigentlich fast mein ganzen inhalt löschen und eine neue css machen und eine neue index.html … Kenst du eine seite die so einen ähnlichen style hat (oben navi bar links rechts rand) die aber noicht so überflüssige codes drin hat ?
Weil erhlich gesagt komm ich garnicht mit was ich machen soll

hoffmann · 11. April 2008 um 12:21

Nun, das liegt alles daran, daß dies der (schlechte) Stil von vor
über 10 Jahren ist, aus einer Zeit, wo es noch gar kein CSS gab.
Aktuell würde man da ganz anders vorgehen, um eine sinnvolle
Ausgabe zu bekommen und eine, die man durchgehend einfach
mit CSS dekorieren kann.

Nun kann man da bei ausreichendem Verständnis mühsam
einzelne Fragmente reparieren, komplettes Aufräumen wird aber
lange dauern.
Da ich auch das Skript weder selbst verbrochen habe noch
jemals in sowas reingeguckt habe, kann ich auch nichtmal sagen,
wie aufwendig das ist, das komplett zu überarbeiten.
Bei eigenen historischen ‘Werken’ jedenfalls hat mich sowas vor
Jahren einige Arbeit gekostet, obwohl ich mich da sowohl in der
antiken ‘Tabellen’-Methodik als auch der aktuellen mit CSS
ganz gut auskenne.

Zwischen den beiden Extremen ‘alles wegwerfen und von vorne
beginnen’ und ‘alles so lassen’ gibt es viele Möglichkeiten, die
alle Zeit und Aufwand kosten. Die meisten davon werden in
verschiedener Hinsicht suboptimal sein.
Nur wenn dich schon stört, daß irgendwas zentriert ist, was nicht
zentriert ist oder nicht die ganze Breite hat, weil irgendwo ein
Attribut in irgendeiner Tabelle steht, welches explizit die Breite
festlegt, so kannst du dir sicher denken, daß du das nicht mit
einem Fingerschnippen beheben kannst.
Auch wenn man an dem HTML rein gar nichts ändert, kann man
das prinzipiell in den meisten Fällen überschreiben, dazu muß
man aber genau verstehen, was wie verschachtelt ist - und das
macht keiner gern, besonders nicht bei einem so vergurkten
Quelltext ;o)

Sonny · 11. April 2008 um 20:08

ALso ich hab nun ein gutes theme gefunden und schon eingebaut… Meine frage ist… Ist dieses theme den besser vom queltest heer ??
http://r3mix.bplaced.net/Forum/index.php?sid=81d8d4fb60357d27f909dce96f905d7f

hier in action

hoffmann · 12. April 2008 um 14:07

Das Menü zumindest sieht besser aus.
Der Rest scheint mir dann auch recht durchwachsen zu sein.
Der Validator stellt zudem fest, daß irgendwo ein falsches
Zeichen drin ist und findet 112 Fehler, darunter auch
Strukturfehler, die zu Problemen führen können. Zudem ist
grober Unfug enthalten, wie eine zweite Doctype-Deklaration,
zweites html-Element, head, body. Der Autor hat zudem auch
garantiert das id-Attribut nicht verstanden.
Also es handelt sich auch nicht um ein (X)HTML-Glanzstück, was
du da aufgetrieben hast ;o) Sieht eher so aus, als hätten die
Autoren keinen Schimmer von (X)HTML und hätten den Kram
mal eben so nebenbei als Zeugnis ihrer Indifferenz und Ignoranz
zusammengefrickelt.
Mehr so die übliche HTML-Suppe ohne besondere Neigung für
Korrektheit. Daß XHTML verwendet wird, ist nur Dekoration,
es würde als XHTML interpretiert nicht angezeigt werden,
weswegen es vermutlich auch prinzipiell als HTML gesendet
wird, damit die Fehler nicht so auffallen.

Sonny · 14. April 2008 um 14:30

Ehm erstmal ja…
Kennst du keine seite wo korrekte html vorlagen sind ? Die so einen aufbau haben ??

Achja ich bin nun auf wbblite2 umgestigen und möchte nun wissen wie man diese punkte vor home und der rest wegmachen kann http://r3mix.bplaced.net/upload/wbb/
link zum forum

hoffmann · 14. April 2008 um 15:05

Kommt mir eher so vor, als würdest du selbst die 'Vorlagen’
erst schreddern ;o)
Wie die Grundstruktur einer (X)HTML-Seite aussieht, kann man
etwa bei selfhtml nachlesen, eine Vorlage ist das nicht, das ist
der Inhalt der Seite, nichts Dekoratives wie eine Stilvorlage.

de.selfhtml.org/html/allgemein/grundgeruest.htm

Ganz sicher, daß du da nicht schon selber dran rumgebastelt
hast? Sieht für mich so aus, als hättest du da einen
Dateikopf mit anschließendem Menü reingebastelt.
Auch bei der Seite ist die Grundstruktur bereits geschreddert!
Kann doch nicht sein, daß solche Skripte immer zwei
doctypes reinschreiben, zwei html, head, title, body.
Das wird doch nicht an diesem wbb liegen - glaube ich
zumindest nicht.
Der Validator findet immerhin noch 16 Fehler, die meist mit den
doppelten Kopfdaten zusammenhängen, dazu gibt es in dem
Dokument auch ein center-Element, welches es in XHTML1.1 gar
nicht gibt.

Tippen würde ich mal, du hast alles selber eingefügt, was in dem
undefinierten center steht.
Wenn du das alles samt center wieder streichst und dann nur
hinzufügst, was innerhalb von div id=“header” steht, könnte das
einen Sinn ergeben. Wobei ich davon ausgehe, daß die href="#"
durch etwas Korrektes und Sinnvolles ersetzt werden.

Die Punkte jedenfalls sind Listenpunkte, die sind in dem Falle
per CSS recht einfach zu entsorgen:

ul#nav, ul#nav li {list-style: none inside; margin: 0; padding:0}

eigentlich braucht man nur list-style: none, da du aber vermutlich
irgendwelche Randabstände auch nicht so haben willst, wie sie
bei verschiedenen browsern unterschiedlich auftreten, sind die
damit auch zu 0 gesetzt. Sollten in dem CSS irgendwelche
anderweitigen Eigenschaften für diese Liste sein, so sollte das
entweder entfernt werden oder obige Anweisung dahinter stehen.

Sonny · 14. April 2008 um 15:29

Ehrlich ich kopier mir nur das wichtige raus und füge es dann in die zb header.tpl bei wbb3 ein Sonst mach ich nix

hoffmann · 14. April 2008 um 15:54

Ich denke, da hast du wohl zuviel kopiert, siehe oben ;o)
Wenn die Ausgabe so geschreddert ist, ist komplett ungewiß,
wie das jeweils angezeigt wird.
In komplettes Dokument darf man keine komplette Seite
einfügen, immer nur Fragmente und dann auch nur solche, die
an der entsprechenden Stelle erlaubt sind, sicher aber kein
zweites head-Element, keinen zweiten doctype etc ;o)