[css/html/wasauchimmer] hilfe, das ding funktioniert nur im ie richtig. :S

**Marian** · 22.11.2006 20:05

nunja. ich habe ein problem mit diesem tollen dingen hier:
http://upload.npcfighter.de/files/36/864ohmann.rar
im ie werden die buttons zentriert und mit der richtigen höhe angezeigt. allerdings weder in opera noch in firefox. :/

kann sich das mal irgendwer ansehen? ich habe nämlich keine ahnung, wo der fehler liegen könnte.

wenn das mit dem runterladen und angucken zuviel arbeit ist, kann ich auch gern nochmal den code posten. :]

...//edit: okay, extra für den dennis:

html-kram:

Code:

<html>
<head>

<title>css-gedoens.</title>

<link rel="stylesheet" type="text/css" href="http://upload.npcfighter.de/files/36/823test.css">

</head>
<body>

<div align="center">

<table width="700">
<td>
<div align="center">
<img src="http://upload.npcfighter.de/files/36/614banner.gif"><br>
<table class="menu"><td><a href="#">news</a></td><td><a href="#">archiv</a></td><td><a href="#">gästebuch</a></tr></table>
<iframe align="center" width="640" height="300" style="border: 1px solid; " frameborder="0">

</iframe>
</div>
</td>
</table>
</div>

</body>
</html>

css-kram:

Code:

a {
	color: #000000;
	font-family: Tahoma;
	font-size: 11px;
	font-variant: normal;
}

a:hover {
	color: #0a8380;
	font-family: Tahoma;
	font-size: 11px;
	font-variant: normal;
	text-decoration: underline;
}

table {
 	background-color: #EEEEEE;
	border-color: #000000;
	border-style: solid;
	border-width: 1px;
	color: #000000;
	font-family: Tahoma;
	font-size: 11px;
}

table.menu {

	background-color: #EEEEEE;
	border-color: #000000;
	border-style: solid;
	border-width: 0px;
	color: #000000;
	display: block;
	font-family: Tahoma;
	font-size: 11px;
	font-variant: small-caps;
	padding: 0px;
	text-decoration: none;
}

table.menu a{

	background-color: #DDDDDD;
	border-color: #000000;
	border-style: solid;
	border-width: 1px;
	width: 100px;
	height: 22px;
	color: #000000;
	display: block;
	font-family: Tahoma;
	font-size: 11px;
	padding: 4px;
	text-align: center;
	text-decoration: none;
}

table.menu a:active {
	background-color: #EBEBEB;
	border-color: #000000;
	border-style: solid;
	border-width: 1px;
	width: 100px;
	height: 22px;
	color: #333333;
	display: block;
	font-family: Tahoma;
	font-size: 11px;
	font-weight: bold;
	padding: 4px;
	text-align: center;
	text-decoration: none;
}


table.menu a:hover {
	background-color: #C3C3C3;
	border-color: #000000;
	border-style: solid;
	border-width: 1px;
	width: 100px;
	height: 22px;
	color: #000000;
	display: block;
	font-family: Times New Roman;
  letter-spacing: -2px;
  font-weight: bold;
	font-size: 17px;
	padding: 1px;
	text-align: center;
	text-decoration: none;
}

hr {

}

bitteschön. <3

**Maisaffe** · 22.11.2006 20:24

Igitt.

Versuch's mal so (das ganze wäre gut in einen weitern <div> Tag aufgehoben):

HTML-Code:

<div style="text-align:center;width:10%;>Hier zentrierter Button</div>
<a href="#">Menülink</a>

Sowas meintest Du doch oder?

**mitaki** · 22.11.2006 20:37

Jaja, ich weiß, die alte Tante muss auch mitmischen...

Zunächst: Wieso verfügt dein HTML Dokument nicht über eine Doctypeangabe?

Wenn du das machen würdest wäre die Angabe von <div align="center"> (welche so oder so bedenklich ist) überflüssig, da du der Tabelle (die ebenfalls bedenklich eingesetzt ist) eine bestimmte Breite zuweisen könntest und die Außenabstände mit auto regeln könntest.

Warum hat dein Bild kein alt-Attribut? Wenn es nur ein Designbild ist gib ein leeres alt-Attribut an. Wenn es einen Zweck hat, gibt dem Attribut einen Entsprechenden Text.
Weisst du Eigentlich wie nervig es ist, wenn man sich eine Webseite ohne Bilder ansehen will und überall schwirren [INLINE] oder [IMAGE] herum weil die Ersteller keine alt-Attribute angeben?

Warum hast du eine Tabelle in der Tabelle, wenn sich für Menüpunkte eine Liste viel besser eignen würde?

Einen Frame zur Anzeige des Inhalts? Weisst du nicht, dass Frames out sind?

Ach ja eine Grundsätzliche Regel noch: Wenn der IE etwas anscheinend richtig macht und andere Browser nicht, so liegt der Fehler mit hoher Wahrscheinlichkeit bei dir.

**ive beaten tetris** · 23.11.2006 05:15

weißt du eigentlich dass du ein klugscheißer bist mein freund? zu posten um zu helfen bedeutet zu posten um jemandem zu sagen wie er das problem beheben kann und nicht um ihn davon in kenntnis zu setzen du oder deine alten browserfreunde wären der meinung frames sind out oder tables mit align auszurichten währe grundliegend falsch. hinzu kommt dass iframes praktisch sind da du deine navigation permanent auf einer seite bejälst und diese nich immer mit geladen werden muss. er hat sich nun mal für diese variante entschieden und damit musst du klar kommen. falls nich dann reg dich irgendwo auf wo dich niemand hört

hey emo wie maisaffe schon sagte pack das ganze menü mal in nen neuen div und geb dem am besten ne feste breite. dann machst du folgendes um das ganze teil permanent zu zentrieren:

HTML-Code:

<div class="blubb">...</div>

Code:

div.blubb
{
 left: 50%;
 margin-left: -*px
}

anstelle des sternchens setzt du einen ziffern. das ist genau der wert den du bekommst wenn du das div in dem die menüs drinstecken minimierst nur dass du davor noch ein minus setzt (das ist ganz wichtig). hat das div etwa ne breite von 450 währe das demnach [FONT="Fixedsys"]margin-left: -225px;[/FONT] and youll get what you want *gröhl*

für die höhenangabe der inhalte kannst du das entweder mit padding ausrichten und den innnanabstand der kleinen elemente bestimmen oder auch mit line-height pfutschen. zentriert sind the ja schon

noch n kleines wort zu der tabelle: tabelle is nie falsch aber in dem falle hier auch nich wirklich notwendig. wenn du angenommen mal eine seite bastelst mit nem portal layout welches ne rechte und linke navigation hat und kopf und banner jeweils oben und unten ausgerichtet sind wäre es hier sinnvoll auf tables zurück zu greifen weil die meisten leute den effekt wünschen ihre seite flexibel zu halten. das heißt wenn dein browserfenster sich verkleinert rücken die elemente mit und bleiben nich fest kleben. sowas kann man mit tabellen wunderschön darstellen

btw ists das schlichte design dass die seite selbst im jetzigen zustand sehr geil aussehen lässt. was so ein 1px-rahmen alles anrichten kann... :D nur deine überschrift is voll hopper-age

**Manni** · 23.11.2006 12:41

Zitat von Miku

HTML-Code:

<div class="blubb">...</div>

Code:

div.blubb
{
 left: 50%;
 margin-left: -*px
}

ich hab selten eine bescheuerte Methode gesehen, ein Element zu zentrieren, sorry

Einfacher geht es mit:

Code:

margin: 0px auto;

oder

Code:

width: 100%; text-align: center;

Das funktioniert auch unabhängig von der Breite des Elements.

Zitat

noch n kleines wort zu der tabelle: tabelle is nie falsch aber in dem falle hier auch nich wirklich notwendig.

Doch. Tabellen sind sogar häufig ziemlich unangebracht. Spätestens wenn man mehrere Tabellen verschachtelt, sollte man nochmal über das Designkonzept nachdenken. Für Menüs eigenen sich meistens Listen hervorragend und das ist auch syntaktisch sehr viel sinnvoller: Schließlich hat man eine Auflistung von Links und keine Tabelle.
Allerdings bestätigen Ausnahmen die Regel, es kann auch manchmal sinnvoll und vor allem einfacher sein, ein Design mithilfe von einer Tabelle aufzubauen.

Und mitaki musst du nicht so ernst nehemn, der hat im Bezug auf Validität sowieso ein Rad ab

**mitaki** · 23.11.2006 15:35

Zitat

zu posten um zu helfen bedeutet zu posten um jemandem zu sagen wie er das problem beheben kann und nicht um ihn davon in kenntnis zu setzen du oder deine alten browserfreunde wären der meinung frames sind out oder tables mit align auszurichten währe grundliegend falsch

Geholfen wurde doch bereits. In einem WebDev Forum ist es nunmal üblich, dass man dann etwas mehr bekommt.
Wenn du den Artikel über Frames durchgelesen hättest, würdest du auch wissen, warum Frames out sind. Nämlich weil die angeblichen Vorteile von den nicht ganz so offensichtlichen Nachteilen überrempelt werden.
Nebenbei ist das Ausrichten von Tabellen mit align grundliegend falsch. Formatierendes MarkUp hat in HTML nichts zu suchen.

Zitat

er hat sich nun mal für diese variante entschieden und damit musst du klar kommen. falls nich dann reg dich irgendwo auf wo dich niemand hört

Der Großteil macht diesen Fehler aber aus dem Grund der Unerfahrenheit. Wie gesagt scheinen Frames offensichtlich Vorteile zu haben. Gerade deshalb ist es wichtig Aufklärung zu betreiben!

Zitat

hey emo wie maisaffe schon sagte pack das ganze menü mal in nen neuen div und geb dem am besten ne feste breite. dann machst du folgendes um das ganze teil permanent zu zentrieren:

Entschuldige, hier musste ich lachen.
Die Standardmethode

HTML-Code:

<style type="text/css">
#content {
 width: 450px; /* Pixel hab ich nur Wegen dem Bezug zu Mikus Beispiel genommen, tatsächlich wären min-/max-width Angaben zusammen mit em besser geeignet. */
 margin-left: auto; margin-right: auto;
}
</style>
<div id="content">Inhalt</div>

funktiononiert im IE nämlich ohne die Fehler, die bei leichtsinniger Nutzung von negativen margins auftreten können.

Zitat

Code:

width: 100%; text-align: center;

Sorry, Manni. Dieser Code ist nicht dazu geeignet, Elemente zentriert darzustellen, da er nur Inlineelemente zentriert.
Der IE wendet diese Regeln aber fälschlicherweise auch auf Blockelemente an, was laut Spec. nicht erlaubt ist. Die margin+auto Methode ist für zentrierte Blockelemente am besten geeignet.

Zitat

wenn du angenommen mal eine seite bastelst mit nem portal layout welches ne rechte und linke navigation hat und kopf und banner jeweils oben und unten ausgerichtet sind wäre es hier sinnvoll auf tables zurück zu greifen weil die meisten leute den effekt wünschen ihre seite flexibel zu halten.

Eine Tabelle hat nichts mit flexibilität zu tun.
Da hast du nun also deinen Kopfbereich mit nem Header von 1000 Pixel. Wenn ich jetzt 800x600 habe bleiben die Tabellenzellen trozdem 1000 Pixel breit.
Damit wäre bewiesen, dass zumindest die Kopftabellenzelle überflüssig ist und mit weniger Code möglich wäre.

Zitat

der hat im Bezug auf Validität sowieso ein Rad ab

Jaja, die alte Tante ^^

**Manni** · 23.11.2006 16:17

Zitat von mitaki

Sorry, Manni. Dieser Code ist nicht dazu geeignet, Elemente zentriert darzustellen, da er nur Inlineelemente zentriert.
Der IE wendet diese Regeln aber fälschlicherweise auch auf Blockelemente an, was laut Spec. nicht erlaubt ist. Die margin+auto Methode ist für zentrierte Blockelemente am besten geeignet.

Das ist mir durchaus klar. Mir war allerdings nicht klar, ob es nur um das Zentrieren von Text oder irgendwelchen Inline-Elementen geht, oder um das Zentrieren von Blockelementen

**ive beaten tetris** · 23.11.2006 17:46

Zitat

Und mitaki musst du nicht so ernst nehemn, der hat im Bezug auf Validität sowieso ein Rad ab :D

Zitat

Jaja, die alte Tante ^^

was soll ich dazu noch sagen außer dass ich euch dringends empfhele euch n zimmer zusammen zu nehmen?

Thema: [css/html/wasauchimmer] hilfe, das ding funktioniert nur im ie richtig. :S

Themen-Optionen

Anzeige

[css/html/wasauchimmer] hilfe, das ding funktioniert nur im ie richtig. :S

Miau

Berechtigungen