[dblay]

Zitat

die Verwendung von missbrauchten div-Tags

Na über "missbraucht" lässt sich aber streiten, denn immerhin handelt es sich hier um ein allgemeines Blockelement ... Bloß ich sag mal ganz ehrlich, ich find das mit divs übersichtlicher als den Quelltext mit den ganzen Conditional Comments.

Ist ja richtig, dass man das besser mit Listen machen soll, aber mit der ganzen Tabelle dazwischen, das ist semantisch auch nicht gerade korrekt. Und es stellt sich einfach das Problem bei Listen, dass man die nicht ohne Weiteres und ohne CSS-Hacks und sowas alles vernünftig browserübergreifend formatiert kriegt.

Letztlich läuft das auch so ein bissel auf ne Glaubensfrage hinaus, aber ich find es einfach besser, einen Quelltext zu haben, der in allen Browsern funktioniert, und nicht andersrum.

Dieser Beitrag wurde von dblay bearbeitet: 06. August 2007 - 11:18

[Witi]

Dann will ich mal den Streit für mich entscheiden
http://www.vorsprungdurchwebstandards.de/t...antischer-code/

Was hast du gegen die CCs? Die sind gang und gebe im Webdesign. Findest du eigentlich auf sämtlichen Seiten, die ordentlich erstellt wurden. Das ist im Prinzip der am einfachsten zu bedienende "Browserhack", der auch lückenlos funktioniert.

Zitat

aber mit der ganzen Tabelle dazwischen, das ist semantisch auch nicht gerade korrekt.

Klar, von den Tabellen habe ich auch nicht gesprochen, sondern nur die schönen Listen.

[dblay]

Zitat

Dann will ich mal den Streit für mich entscheiden

Na klar, mir ist das schon durchaus bewusst, was es mit semantischen Markup auf sich hat.

Zitat

Was hast du gegen die CCs?

Ich hab nix gegen CCs, sondern gegen deren Verwendung in diesem konkreten Fall. In dem anderen Thread, der sich auch auf dieses Menü bezieht, sagst du ja auch selbst, dass der Quelltext dadurch echt bescheiden wird

Was anderes wollte ich auch nicht zum Ausdruck bringen, meiner Meinung nach ist dann ne div-Suppe immer noch besser als sowas. Natürlich ist eine reine Liste immer noch die beste Lösung!

[dblay]

Ich schreib das jetzt mal hier rein, weil es wahrscheinlich am besten passt: Du hast ja nen Link zu einer Test-Seite gepostet, und nun ist mir aufgefallen, dass die im Firefox so gar nicht richtig angezeigt wird. Speziell das Menü zeigt der FF überhaupt nicht so an, wie du dir das vorstellst. Falls du das bereits weißt, dann vergiss den Post hier einfach, aber ansonsten hoffe ich, dass ich dich hiermit auf das Problem hinweisen konnte

PS: Du hast ja nun scheinbar einen anderen Menü-Quellcode verwendet. Gefällt mir eindeutig besser als das andere, obwohl er (auch) nicht (so richtig) semantisch ist

[CrazyLexx]

Zitat (dblay: 07.08.2007, 18:28)

mir aufgefallen, dass die im Firefox so gar nicht richtig angezeigt wird. Speziell das Menü zeigt der FF überhaupt nicht so an, wie du dir das vorstellst.

Arg, echt?! Nur auf meiner Beispielseite oder hat das Menü in dem Eingangs geposteten Quelle auch schon nicht funktioniert? Was genau funktioniert denn nicht daran?

[dblay]

Na wie du das sicher schon festgestellt hast, "funktioniert" das Menü zwar, wird aber nicht richtig dargestellt, d.h. die Stylesheets müssten noch überarbeitet werden.

[CrazyLexx]

Zitat (dblay: 08.08.2007, 10:31)

Na wie du das sicher schon festgestellt hast, "funktioniert" das Menü zwar, wird aber nicht richtig dargestellt, d.h. die Stylesheets müssten noch überarbeitet werden.

Habe das Template jetzt mal auf ein old-school <table> Design umgestellt. Konnte aber trotzdem noch nicht herausfinden, wo das Problem im CSS genau liegt. Vielleicht kann mal jemand einen Blick auf den entsprechenden Teil aus dem css File werfen:

/* NavBlock */
.solidblockmenu{
margin: 0;
padding: 0;
float: center;
font: bold 13px Arial;
width:811px;
border: 1px solid #494949;
border-width: 1px 0;
background: black url(../img/blocknav/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(../img/blocknav/blockactive.gif) center center repeat-x;
}

.solidblockmenu .selected a, #solidblockmenu .selected a hover{ /*currently selected tab*/
background: transparent url(../img/blocknav/blockactive.gif) center center repeat-x;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 0px solid #FEC009; /*THEME CHANGE HERE*/
border-top-width: 5px;
font:bold 13px Arial;
line-height:18px;
z-index:100;
background-color: #000000;
background:transparent url(../img/blocknav/opaque.png); 
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border: 0 solid #494949; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
color: white;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:visited{
color: white;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #FEC009;
color: white;
}

<!--[if IE]>
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}

Innerhalb der Seite wird die Navigationsleiste mit folgendem aufgerufen:

<div id="hauptmenu" class="solidblockmenu">
<ul>
<li><img src="templates/{$theme}/img/blocknav/blockarrow.gif" hspace="0" align="left" alt="" /></li>
<li><a href="http://www.gamepals.de/">Startseite</a></li>
<li><a href="http://www.gamepals.de" rel="dropmenu1" >News</a></li>
<li><a href="http://www.gamepals.de/index.php?p=articles&area=1" rel="dropmenu2" >Artikel</a></li>
<li><a href="http://gamepals.blogspot.com/">Podcast</a></li>
<li><a href="http://www.gamepals.de/index.php?p=gallery&area=1" rel="dropmenu3" >Media</a></li>
<li><a href="http://www.gamepals.de/index.php?area=1&p=static&page=impressum" rel="dropmenu4">Intern</a></li>
</ul>
</div>
</td>
</tr>
<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?p=index&categ=3&area=1">Allgemein</a>
<a href="http://www.gamepals.de/index.php?p=index&categ=4&area=1">Microsoft</a>
<a href="http://www.gamepals.de/index.php?p=index&categ=1&area=1">Nintendo</a>
<a href="http://www.gamepals.de/index.php?p=index&categ=2&area=1">Sony</a>
</div>

<!--2st drop down menu --> 
<div id="dropmenu2" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?p=articles&categ=5">Playstation</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=13">Xbox</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=33">Wii</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=11">Nintendo DS</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=6">PSP</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=9">Gameboy Advanced</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=10">GameCube</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=16">Spezial</a>
</div>

<!--3st drop down menu --> 
<div id="dropmenu3" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?p=gallery&area=1">Gallerien</a>
<a href="http://www.gamepals.de/index.php?p=downloads&area=1">Downloads</a>
<a href="http://www.gamepals.de/index.php?categ=1&parent=0&p=downloads&area=1">Videos</a>
</div>

<!--4st drop down menu --> 
<div id="dropmenu4" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?area=1&p=static&page=team">Team</a>
<a href="http://www.gamepals.de/contact_1.htm">Kontakt</a>
<a href="http://www.gamepals.de/index.php?area=1&p=static&page=jobs">Jobs</a>
<a href="http://www.gamepals.de/index.php?area=1&p=static&page=impressum">Impressum</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("hauptmenu", 0)
</script>

[dblay]

Zitat

.solidblockmenu{
margin: 0;
padding: 0;
float: center;
font: bold 13px Arial;
width:811px; height:30px;
border: 1px solid #494949;
border-width: 1px 0;
background: black url(../img/blocknav/blockdefault.gif) center center repeat-x;
}

Das sollte zumindest die Anzeige des Menüs korrigieren. Musst mal ausprobieren, wie hoch das genau zu sein hat.

Edit: Und dann sind da ja noch ein paar Elemente "gefloatet". Ändere deinen Style mal so, dass das erste Element, was unter dem Menü zu sehen ist (z.B. Überschrift) zusätzlich die Eigenschaft clear:both; bekommt.

Ach so, und hast du ne Doc-Type-Angabe in deiner HTML? Wenn nicht, muss die unbedingt rein.

Dieser Beitrag wurde von dblay bearbeitet: 08. August 2007 - 16:19

[CrazyLexx]

Gut, zumindest die Navigationsleiste wird jetzt auf IE also auch FF gleich angezeigt. Das Problem ist aber offenbar durch die Pfeilgrafik entstanden: Wenn ich die nämlich heraus nehme, passt wieder alles.

Dann haben wir aber erneut das alte Problem: Wie bekomme ich die Pfeilgrafik denn nun korrekt eingebunden?

EDIT: Das Problem liegt mit der Navi-Leiste liegt offenbar doch nicht an der Grafik, die ich eingefügt hatte: Wenn ich direkt im Template die unten markierten <ul> Tags herausnehme, wird die Leiste korrekt angezeigt... Fehlt mir dann nicht eigentlich ein wichtiger Befehl?!

Zitat

<div id="hauptmenu" class="solidblockmenu">
<ul>
<li><img src="templates/{$theme}/img/blocknav/blockarrow.gif" hspace="0" align="left" alt="" /></li>
<li><a href="http://www.gamepals.de/">Startseite</a></li>
<li><a href="http://www.gamepals.de" rel="dropmenu1" >News</a></li>
<li><a href="http://www.gamepals.de/index.php?p=articles&area=1" rel="dropmenu2" >Artikel</a></li>
<li><a href="http://gamepals.blogspot.com/">Podcast</a></li>
<li><a href="http://www.gamepals.de/index.php?p=gallery&area=1" rel="dropmenu3" >Media</a></li>
<li><a href="http://www.gamepals.de/index.php?area=1&p=static&page=impressum" rel="dropmenu4">Intern</a></li>
</ul>
</div>

Möchte nun noch eine Grafik als Footer über den eigentlichen Hintergrund legen und die Seite unten damit abschließen. Kann ich das irgendwie mit einem <table> hinbekommen? Habe das mal probiert und die Grafik wird im IE leicht nach links versetzt angezeigt.

<table width="840" height="30" border="0" cellspacing="0" cellpadding="0" align="center" >
<tr>
<td background="templates/{$theme}/img/page/page_bottom.gif" align="center" />TEST FOOTER</td>
</tr>
</table>

Dieser Beitrag wurde von CrazyLexx bearbeitet: 08. August 2007 - 17:28

[dblay]

Nee, also die <ul>-Tags kannst du nicht weglassen, außer du entfernst auch die ganzen <li>-Tags. Ist aber denke ich nicht so gut, am besten du gehst das Problem wirklich am Ursprung an - nämlich am CSS-Style. D.h., wenn das HTML-Dokument denn validiert. Bevor du also an deinen Styles rumfrickelst, schick die HTML mal durch den W3C-Validator: http://validator.w3.org/

Wenn es da noch Fehler gibt, dann beseitige die zuerst, bevor du dich an das CSS-Dokument ran machst. Du könntest dann z.B. dem <ul> auch einen expliziten Style zuweisen.

Zitat

Möchte nun noch eine Grafik als Footer über den eigentlichen Hintergrund legen ....

Warum mit einer Tabelle? Mach doch einfach ein Blockelement mit Hintergrund, in welches du ein Bild packst.

[CrazyLexx]

Habe die <ul> Tag mal wieder in den Text aufgenommen und nun ist plötzlich der gesamte Textbereich nicht mehr zentriert sondern nach links verschoben.

Dieser Beitrag wurde von CrazyLexx bearbeitet: 09. August 2007 - 17:26