HTML Coding, WBB2

[pneuma]

Hallo,

derzeitig habe ich ein Problem mit dem Coding und zwar komme ich mit den Buttons nicht voran.
Die CSS Einstellungen, stehen derzeitig richtig für den Firefox. Ich möchte das ganz gerne aber auch für den Internet Explorer korrekt angezeigt haben.

Zur veranschaulichung:

http://gfx-dream.net/index.php (Startseite ist nur interessant, deshalb keine weitere Freigabe)

Die Startseite habe ich ziemlich gut und auch valide hinbekommen, aber wie gesagt es hängt bei den Buttons, wo mir der Fehler nicht bekannt ist.

Der Code:

<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; margin-left: -3px;">
  <tr>
   <td style="background-image: url(images/animetalev1/header_top.jpg); width: 937px; height: 115px; border: 0px;">
	<img src="images/animetalev1/top_start.jpg" style="margin-bottom: 11px; width: 75px; height: 54px;" alt="Forum"></img>
	<img src="images/animetalev1/top_members.jpg" style="margin-bottom: 13px; width: 109px; height: 52px;" alt="Memberliste"></img>
	<img src="images/animetalev1/top_team.jpg" style="margin-bottom: 13px; width: 72px; height: 52px;" alt="Team"></img>
	<img src="images/animetalev1/top_partner.jpg" style="margin-bottom: 13px; width: 126px; height: 52px;" alt="Partner"></img>
</td>
</tr>
</table>

Ändere ich nun margin-bottom von top_start auf 12px, dann wird es korrekt im IE angezeigt, aber nicht mehr im Firefox. Genau das gleiche mit den anderen.

Danke.

 

[bluescript]

Abgesehen davon, dass hier exzessivstes Tabellen-Layout vorherrscht (aber das ist hier nicht die Frage und wahrscheinlich dem verwendeten Burning Board zuzuschreiben), versteh ich mehreres nicht. Weshalb haben die Buttons unterschiedliche Höhen und weshalb positionierst Du sie mit margin-bottom am unteren Rand. Entfern die Margin-Definition komplett aus den Buttons und gib der Tabellenzelle ein padding-top. Dann sind sie auf einer Linie oben angeordnet und sollten überall gleich aussehen. Außerdem vereinfacht das den Code.

 

[pneuma]

Danke.

margin-bottom habe ich bewusst genommen, damit der die Buttons von unten nach oben gedrückt werden und so mit eine gleiche Reihe geben. Die Höhen habe ich grade ebend korrigiert.

In der Tabellenzeile, gehe davon aus das <table> gemeint ist, habe ich padding-top eingesetzt. Erhöhe ich nun auf ca. 5px kommt ein grauer schmaler Balken. Sind zwar alle in einer Reihe, granzen aber nicht auf der einen Linie.

 

[bluescript]

Das padding-top musst Du dem TD-Element geben, das die Buttons beinhaltet, nicht der Tabelle als ganzes.

 

[pneuma]

Danke dir.

Habe ich auch getan, im Plus Bereich geht es eher nach unten, tue ich dies in's Minus ändert sich rein gar nichts.

 

[bluescript]

Dass sich bei Padding bei Minuswerten nix ändert liegt in der Natur der Sache. Padding definiert den Rand nach innen und Negativwerte sind hier anders als bei Margin nicht möglich. Auch dort sind negative Werte eigentlich Notlösungen oder zumindest doch eher sehr spezifischen Einzelfällen vorbehalten.

Wenn die Buttons partout nicht so wollen wie Du willst, solltest Du Dich vielleicht noch etwas mehr mit den CSS Basics auseinandersetzen. Entweder das, oder als alternative Quick&Dirty-Lösung könntest Du die Buttons auch als eine große Grafik abspeichern und die unterschiedlichen Links über eine Imagemap definieren. Schön ist das in so nem Fall aber auch net...

 

[pneuma]

Danke, ich habe wiederrum margin benutzt, welches dieses mal auch funktioniert, bei beiden Browsern. Derzetig stehe aber noch vor einem Rätsel, da ich das ja mit margin ausgerichtet habe, ist es mir kaum möglich neue Bilder noch mit einzufügen, da sich ja dann auch alles verschiebt.

Wie auf dem Bild würde ich gerne den header so coden:

http://romish.deviantart.com/art/BOARD-sodo-124466509?q=1&qo=1

Bei dem Suchformular müsste ich mir spontan was einfallen lassen oder mir nochmal so einen Code raus suchen. Problem ist eher die unteren rechten Buttons, mit einem neuem tr oder td geht es anscheinend nicht, daher weiß ich auch nicht weiter.

 

[bluescript]

Also ich kann Dir jetzt nicht Deine Seite schreiben, aber nur mal so als Tipp, da Du offenbar noch recht am Anfang stehst; es gibt viele Möglichkeiten, um zum abgebildeten Ergebnis zu kommen:

Tabellenbasiert (nicht modern, aber in diesem Fall auch schon egal): 2x2 Tabelle. Links oben Buttons, rechts oben Suchfeld mit TD-Style "text-align: right; vertical-align: middle;", links unten Text, rechts unten weitere Buttons mit TD-Style "text-align: right;". Das Hintergrundbild mußt Du dabei gar nicht in 4 Teile teilen, sondern Du kannst ein und dasselbe Hintergrundbild den einzelnen Zellen jeweils mit passender "background-position" zuweisen (von links oben: top left, top right, bottom left, bottom right). Die Buttons kannst Du in diesem Fall als einfache Grafiken ohne Drumherum reinpflanzen.

Schöner und zeitgemäßer: Beide Buttonleisten als Listen, also:

<ul id="">
<li>button 1</li>
<li>button ...</li>
</ul>

Den Listenelemente nimmst Du mit "list-style-type: none;" das Listenzeichen. Dann lässt Du sie sich horizontal aneinanderreihen, indem Du den LI-Elementen "float: left;" und eine feste Breite mitgibst. Das Suchfeld würde ich pragmatischerweise als letzten Punkt in die Liste mit aufnehmen. Diesem LI gibst Du dann einfach die Restbreite bis zum rechten Layoutrand. Bei der zweiten Buttonleiste läuft es genauso, nur dass hier das breite Element zuerst kommt (bzw. falls Du das gar nicht brauchst kannst die LIs auch mit "float:right;" sich rechtsbündig anordnen lassen).

Soviel mal als Anregung.

 

[pneuma]

Nein, nein, natürlich sollst du nicht das Design anpassen und ich bedanke mich auch für die hilfreichen Tipps und Anregungen, auf die ul-Elemente wäre ich niemals gekommen, welches im Firefox nun wiederum wunderbar aussieht, aber wiederum bei allen anderen Browsern katastrophal aussieht.

Wie es den anscheinend hat, brauch ich doch mehr Hilfe als erwartet, wo bei es sich letzt endlich doch nur um den Header handelt. So mit ist denke ich der Thread abgeschlossen, da ich mir jemanden hole, der mir das ganze zeigt und codet, so das ich das ebenfalls verstehe und für spätere Zwecke auch verwenden kann.

Denn bei so was, bin ich mit meinem Latein am Ende.