text-align:center wäre auch nur ein Hack für den ollen IE 5.x und älter, das müsste man dann allerdings auf das Elternelement anwenden und dann das text-align in dem Element selbst explizit neu setzen, wenn man nicht gerade auch dort text-align:center haben will.

Moderne Browser und der IE 6 setzen aber margin:auto korrekt um, zumindest wenn sie die Seite im Standardsmode darstellen. Das Problem wird wahrscheinlich einfach nur wie in dem verlinkten Thread beschrieben durch einen fehlenden oder ungünstigen DOCTYPE entstehen.

Gib doch mal einen URI, wo man sich das ansehen kann.

DuckMania

www.DuckMania.net [Kennt ihr vllt bin der 2te man im Projekt weil C-Sharper gespeert ist soll ich hier Frage]

So sieht mein Anfang aus

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Is daran was Falsch ???

Pflanzenfresser

Zitat:

Zitat von Kemikal

[url]

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Is daran was Falsch ???

Was soll den bitte daran falsch sein ?

-Alles in Ordnung.

Ich denke Du beziehst den Div Container auf deine Seite DuckMania, wo man das Gesamte Menü rechts sieht, welches natürlich nicht schön ausschaut.

Um dir bei diesem Problem zu helfen, solltest Du vlt. deinen Code posten.
Falls Du das aus irgendeinem Grund nicht möchtest, kannst Du den Code auch per Pm schicken, oder deine Frage konkreter auf/mit einem Beispiel bezogen stellen.

Gruß,

DuckMania

Meine index.html

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>DuckMania</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>


<div id="basic-accordian" >


<div class="tab_container">
  <div class="accordion_headings header_highlight" id="test1-header" ><a href="index.html">Home</a></div>
  <div id="test2-header" class="accordion_headings" ><a href="crash.html">Color Crash</a></div>
  <div id="test3-header" class="accordion_headings" ><a href="wallpaper.html">Wallpaper</a></div>
  <div id="test4-header" class="accordion_headings" ><a href="icons.html">Icons</a></div>
  <div id="test5-header" class="accordion_headings" ><a href="Skins.html">Skins</a></div>
  <div id="test6-header" class="accordion_headings" ><a href="special.html">Specials</a></div>
  <div id="test7-header" class="accordion_headings" ><a href="partner.html">Partner</a></div>
</div>

<div style="float:left;">
  <div id="test1-content" style="width:803px; padding-left:1px;">
	<div class="accordion_child">
    
      <div align="center">Herzlich Willkommen auf DuckMania - Deiner Website f&uuml;r Wallpaper, Icons, Avatare und viel mehr. <br />
          <br />
        
        Wir w&uuml;rden uns freuen, wenn Du uns unterst&uuml;tzen w&uuml;rdest, indem Du diesen Banner an eine beliebige Stelle an Deiner Website einfügen w&uuml;rdest.<br />
        <br />
        
        <img src="http://duck.xho.st/DuckMania/Banner.png" />
        
        </div>
	</div>
  </div>
 </div>
</div>

<div style="visibility:hidden">
<script type="text/javascript" src="http://www.ipcounter.de/count_js.php?u=48012190&amp;color=pink"></script>
<noscript><a href="http://www.ipcounter.de/stats.php?u=48012190" target="_blank"><img src="http://www.ipcounter.de/count.php?u=48012190&amp;color=pink" alt="IPCOUNTER.DE - Kostenloser Live Counter!" border="0" /></a></noscript>
</div>

</body>
</html>

Meine style.css

HTML-Code:

* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin:10px;
	width: 807px;
}

#basic-accordian{
	border:5px solid #EEE;
	padding:5px;
	width:805px;
	position:absolute;
	top:115px;
	margin:auto;
	left: 500px;
}

.accordion_headings{
	padding:5px;
	background:#99CC00;
	color:#FFFFFF;
	border:1px solid #FFF;
	cursor:pointer;
	font-weight:bold;
}

.accordion_headings:hover{
	background:#00CCFF;
}

.accordion_child{
	padding:15px;
	background:#EEE;
}

.header_highlight{
	background:#00CCFF;
}

.tab_container *{
	float:left;
	width:103px;
}

a:link {text-decoration: none; color: #FFFFFF;}

aNtiCHrist

Äh, da steht ja auch noch position:absolute sowie top-/left-Werte drin. Da ist das natürlich kein Wunder, wie soll das gleichzeitig erfüllbar sein?

ceotron

schau mal da nach . . tolle seite: http://www.css4you.de/

sollte dir das nicht weiterhelfen, werde ich mich wieder melden.

cu * ceotron

DuckMania

Ja das muss ja drin sein das position absolut da sonst der 5px graue rand nicht genau um denn content liegt.

Und wenn ich left right rausnehme ändert sich auch nix

aNtiCHrist

Ok, da muss man etwas weiter ausholen. Das position:absolute ist für solch ein triviales Layout natürlich nicht notwendig, der graue Rahmen endet ohne das position nur deshalb vorzeitig, weil du ohne grund ein float:left auf den Inhaltsbereich anwendest. Schmeiß das raus, dann stimmt das mit dem Rahmen wieder.

Das Zentrieren funktioniert bereits, es ist bloß nicht sichtbar, da du unsinnigerweise für body schon eine (übrigens für den Inhalt sogar zu schmale) Breite definierst. Du "zentrierst" also dein Element innerhalb eines Containers, wo gar kein Platz zum Verschieben nach links oder rechts ist. Zentriere also entweder das body-Element direkt oder aber entferne dort die width-Angabe.

Merke:

Wenn die Darstellung in modernen Browsern nicht der erwarteten entspricht, sollte man nach dem Problem suchen und nicht noch mehr Eigenschaften definieren. Erst recht keine so schwer zu hanhabenden wie position:absolute. Dein Problem lässt sich nämlich allein durch das Entfernen von unsinnigen Definitionen lösen.
Der DOM Inspector von Firefox/SeaMonkey (oder eine Extension wie Firebug) ist eine große Hilfe bei der Analyse von unerklärlichen Seitendarstellungen. Lerne sie zu nutzen.

DuckMania

OK wenn ich das bei body rausnehem ist es center aber das float-left ist ja auch da um die Buttons neben einander anzuzeigen wenn ich das rausnehme werden sie untereinander angezeigt

So siehts momentan aus
http://www.DuckMania.net/

Meine CSS momentan

HTML-Code:

* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin:10px;
}

#basic-accordian{
	border:5px solid #EEE;
	padding:5px;
	width:805px;
	top:115px;
	margin:auto;
}

.accordion_headings{
	padding:5px;
	background:#99CC00;
	color:#FFFFFF;
	border:1px solid #FFF;
	cursor:pointer;
	font-weight:bold;
}

.accordion_headings:hover{
	background:#00CCFF;
}

.accordion_child{
	padding:15px;
	background:#EEE;
}

.header_highlight{
	background:#00CCFF;
}

.tab_container *{
	float:left;
	width:103px;
}

a:link {text-decoration: none; color: #FFFFFF;}

aNtiCHrist

Zitat:

weil du ohne grund ein float:left auf den Inhaltsbereich anwendest.

Ich habe nichts von der Navigation gesagt, dort hat das float durchaus seine Berechtigung. Das Problem ist das unsinnige inline definierte float in dem einen div-Element um den Inhaltsbereich.

Es ist übrigens nicht sinnvoll, wenn du immer einen Link zu einem Frameset angibst. Das ist völlig uninteressant, verlinke das Dokument direkt.

DuckMania

ahso da habe ich euch Falsch verstanden

www.DuckMania.net

Also für Home is nun richtig aber irgendwie ist das bei denn anderen Seiten nicht so.

Hat jemand dafür ne erklärung weil die CSS wirkt ja auf alle HTML Seiten von mir

aNtiCHrist

Dir muss man offenbar alles doppelt erklären:

Zitat:

Das Problem ist das unsinnige inline definierte float in dem einen div-Element um den Inhaltsbereich.

Inline -> eben nicht im Stylesheet

Zitat:

Es ist übrigens nicht sinnvoll, wenn du immer einen Link zu einem Frameset angibst.

uninteressantes Frameset: http://www.duckmania.net/
interessantes Dokument: http://www.duck.xho.st/

DuckMania

Au man bin ich heute schwer von begriff

Danke nun sieht alles richtig aus.

Nun mal ne Frage zum aussehen
Was findet ihr besser...

- Navigation Oben [wie jetzt]
- Navigation Rechts
- Navigation Links

tankard666

das geht zb so
<style type="text/css">
#boxdrumrum
{
text-align:center;
}

</style>

<div id="boxdrumrum">
<div>
hier den text eingeben
</div>
</div>
sollte funktionieren

DuckMania

Zitat:

Zitat von tankard666

das geht zb so
<style type="text/css">
#boxdrumrum
{
text-align:center;
}

</style>

<div id="boxdrumrum">
<div>
hier den text eingeben
</div>
</div>
sollte funktionieren

Wozu sollte das ne Hilfe sein ???

Mein Problem ist doch schon gelöst

Anzeige

Anmelden

Weitere Tipps