nicht angemeldet
Seite zentrieren
Hallo alle zusammen!
Nach dem ich eine weile im Internet gesucht habe und auch die Tipps von selfhtml probiert habe, komm ich jetzt gar nicht mehr weiter und bitte euch um Hilfe.
Ich habe die Tipps ausprobiert, besonders auch das hier:
body {
text-align:center;
}
#AllesDiv {
text-align:left;
margin:0 auto;
width: 780px; /* oder eine andere gewuenschte Breite */
}
Nur klappt jetzt leider gar nichts mehr! Ich komme einfach nicht mehr weiter. Hab keine Ahnung was ich alles ändern muss. Ich gebe euch hier mal eine html Unterseite von mir:
<?xml version="1.0" ?>
<!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-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="index, follow" />
<meta name="author" content="xxxxxxxxxx" />
<meta http-equiv="content-language" content="de" />
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<title>Das Wissensportal: Web 2.0 und RFID</title>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, projection" title="Default"/>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td>
<img src="images/bg-oben.gif" alt=" " /><br />
<div id="hintergrund-div">
<div id="inhalt-div">
<div id="inhalt-container-div">
<div id="linksoben"><img src="images/header.jpg" alt="Insel des Wissens" /></div>
<div id="mitteoben"><img src="images/banner01.gif" alt="Seitename" /></div>
<div id="rechtsoben"><img src="images/logo.gif" alt="Modifizierter Portalschlüssel aus dem Film Startrek" /></div>
<div id="navigation-div">
<a href="index.html"><span class="place">Startseite</span></a>
<a href="web_2.0.html">Web 2.0</a>
<a href="rfid.html">RFID</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
<div id="text-div">
<h2>Willkommen auf der Homepage von Daniel Rogg und Steffen Altenhof</h2>
<h3>Ihrem Wissensportal</h3>
<p> </p>
<p>Aufgrund der Vorlesung Web-Grundtechniken an der Hochschule Ravensburg-Weingarten, ist diese Homepage entstanden.
Sie beschäftigt sich mit den Themen Web 2.0 und RFID. Wir hoffen Ihnen einen Üblick über diese Themenbereiche geben zu können
und wünschen Ihnen viel Spaß beim Surfen.</p>
<p> </p>
<p>Zu unseren Themegebieten gehören:</p>
<p> </p>
<table cellspacing="0" cellpadding="0" border="0" rules="none" frame="box">
<colgroup>
<col width="150"/>
<col width="250"/>
<col width="150"/>
<col width="350"/>
</colgroup>
<tbody valign="top" align="left">
<tr><td rowspan="7" class="web"> Web 2.0 </td>
<td><td rowspan="7" class="rfid">RFID </td></td></tr>
<tr><td><a href="web_2.0.html">Der Begriff "Web 2.0"</a></td>
<td><a href="rfid.html">Der Begriff "Rfid"</a></td></tr>
<tr><td><a href="netzwerke.html">Soziale Netzwerke</a></td>
<td><a href="transponder.html">Der Rfid Transponder</a></td></tr>
<tr><td><a href="wikis.html">Wikis</a></td>
<td><a href="schreib_lesegerät.html">Die Rfid Schreib- und Lesegeräte</a></td></tr>
<tr><td><a href="foren.html">Foren</a></td>
<td><a href="einsatzgebiet.html">RFID im Haushalt</a></td></tr>
<tr><td><a href="cloud.html">Cloud Computing</a></td>
<td><a href="vorteile-nachteile.html">Vor-/Nachteile</a></td></tr>
</tbody>
</table>
</div>
<div id="balken-div"> </div>
<div id="footer-div">
<div class="anschrift">xxxxxxxxxxxxxx - xxxxxxxxxxxxxxxxxxxxxl</div>
xxxxxxxxxxxxxxxxxx Email: <a href="mailto:xxxxxxxxxxxxxxxxxxxxxxxx">xxxxxxxxxxxxxx</a>
<div class="anschrift">xxxxxxxxxxxxxx - xxxxxxxxxxx - xxxxxxxx</div>
Tel.: xxxxxxxxxx- Emai: <a href="mailto:xxxxxxxxxxxxxxxxxxx">xxxxxxxxxxxxxxxxxxx</a>
</div>
</div>
</div>
</div>
<img src="images/bg-unten.gif" alt=" " /><br />
</td></tr></table>
</body>
</html>
hier möchte ich die tabelle, die noch gleich unter dem <body> tag ist raus bekommen und das ganze eben in CSS machen bzw. so muss es auf jeden Fall gemacht werden. Meine CSS Datei sieht so aus:
body { margin:0; padding:0; font-family:arial,helvetica,sans-serif; background-color:#f1f1f1; }
#hintergrund-div { width:970px; background-image:url(images/bg-mitte.gif); background-repeat:repeat-y; }
#inhalt-div { padding:0 13px 0 10px; }
#inhalt-container-div { width:947px; background-color:#ffdede; }
#logo-div { background-color:#fff; }
#logo-cell { text-align: right; vertical-align: top; padding-right: 10px; padding-bottom: 10px; }
#header-cell { width: 410px; }
#navigation-div { clear:left; border: none; height: 18px; padding-top:2px; background-image:url(images/navi-bg.jpg); background-repeat:repeat-x; background-color:#6e1a1a; font-size: 12px; }
#navigation-div a { padding-left: 60px; color:#ffffff; font-size: 14px; font-weight:bold; }
#text-div { background-image:url(images/bg-content.jpg); background-repeat:repeat; padding: 20px 40px 10px 30px; font-size: 13px; }
#text-div td { border: 0; padding: 20px 50px 10px 30px; font-size: 12px; }
#text-div tr { border: 0;}
#text-div a { color:black;}
#balken-div { width:947px; background-image:url(images/navi-bg.jpg); height:10px; font-size: 1px; background-color:#6e1a1a; }
#footer-div { padding: 5px; background-color:#fff; color: #222; text-align:center; font-size: 12px; }
#footer-div p { margin: 5px 0; }
#footer-div a { color: #222; }
#linksoben {float: left; position: relative; }
#mitteoben {float: left;}
#rechtsoben {float: left;}
.navigation-class { clear:left; border: none; height:27px; padding-top:2px; background-image:url(images/navi-bg.jpg); background-repeat:repeat-x; background-color:#6e1a1a; font-size: 12px; }
.navigation-class a { padding-left: 60px; color:#ffffff; font-size: 14px; font-weight:bold; }
.navigation-class2 { clear:left; border: none; height:18px; padding-top:2px; background-image:url(images/navi-bg.jpg); background-repeat:repeat-x; background-color:#6e1a1a; font-size: 12px; }
.navigation-class2 a { padding-left: 60px; color:#ffffff; font-size: 12px;}
.mitte { text-align:center; }
.web { font-weight:bold; font-size: 14px; }
.rfid { font-weight:bold; font-size: 20px; }
.anschrift { font-size:13px; font-weight:bold; }
.ausstellung { font-size:13px; font-weight:bold; }
.place { color:orange }
p { margin-top:0; margin-bottom:0; text-align:justify; }
h2 { font-size:20px; color:#6e1a1a; font-weight:bold; margin:-4px 0 10px 0; }
h3 { font-size:16px; color:#ff8400; font-weight:bold; margin:-4px 0 10px; }
h4 { margin:0; }
img { border:0; }
ul { margin-top:0; }
a:link { color:#ffffff; text-decoration:none; }
a:visited { color:#ffffff; text-decoration:none; }
a:focus { color:#ffffff; text-decoration:none; }
a:hover { text-decoration:underline; }
a:active { color:#ffffff; text-decoration:none; }
Ihr könnt es ja probieren und die Lösung die klappt und auch nicht sehr aufwendig/kompliziert ist, mir dann erklären.
Vielen lieben Dank!
Grüße
-
Hi,
Nach dem ich eine weile im Internet gesucht habe und auch die Tipps von selfhtml probiert habe, komm ich jetzt gar nicht mehr weiter und bitte euch um Hilfe.
Entsorge zunächst die Tabelle, wenn du keine tabellarischen Daten darzustellen hast, sondern sie nur zu Layoutzwecken missbrauchst.
Ich gebe euch hier mal eine html Unterseite von mir:
<?xml version="1.0" ?>
Und mach diese Zeile weg, sonst schickst du den IE in den Quirks Mode.
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]-
Hi,
Nach dem ich eine weile im Internet gesucht habe und auch die Tipps von selfhtml probiert habe, komm ich jetzt gar nicht mehr weiter und bitte euch um Hilfe.
Entsorge zunächst die Tabelle, wenn du keine tabellarischen Daten darzustellen hast, sondern sie nur zu Layoutzwecken missbrauchst.
Ich gebe euch hier mal eine html Unterseite von mir:
<?xml version="1.0" ?>
Und mach diese Zeile weg, sonst schickst du den IE in den Quirks Mode.
MfG ChrisB
Alles klar, dankeschön.
Jetzt habe ich nun eben das Problem, dass wenn ich die Tabelle entsorge, dann ist ja eben alles linksbündig am Rand und möchte ja eben die komplette seite zentrieren.
Wenn ich das mit dem body{text-align:center;} .......... mache dann schiebt es nur den balken ganz oben und ganz unten in Mitte und den der Text ist zentriert. Ich befürchte halt, dass ich an absolut jedem CSS Tag etwas ändern muss. Ich hoffe ihr könnt mir helfen.mfg
-
'ǝɯɐu$ ıɥ
Jetzt habe ich nun eben das Problem, dass wenn ich die Tabelle entsorge, dann ist ja eben alles linksbündig am Rand und möchte ja eben die komplette seite zentrieren.
Wenn ich das mit dem body{text-align:center;} .......... mache dann schiebt es nur den balken ganz oben und ganz unten in Mitte und den der Text ist zentriert. Ich befürchte halt, dass ich an absolut jedem CSS Tag etwas ändern muss. Ich hoffe ihr könnt mir helfen.http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte
p.s.
bitte kein TOFU.
ssnɹƃ
ʍopɐɥs--
I like children. If they're properly cooked.
- W.C. Fields-
http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte
okay dankeschön, werde ich drauf achten
-
-
-
-
[...] Aufgrund der Vorlesung Web-Grundtechniken an der Hochschule Ravensburg-Weingarten, ist diese Homepage entstanden [...]
Ich hoffe, diese Vorlesung hat nicht viel Geld gekostet.
-
[...] Aufgrund der Vorlesung Web-Grundtechniken an der Hochschule Ravensburg-Weingarten, ist diese Homepage entstanden [...]
Ich hoffe, diese Vorlesung hat nicht viel Geld gekostet.
Was soll denn das jetzt hier heißen? Ich habe keine Äußerungen über die Homepage gewünscht, sondern ganz einfach ein paar Tipps, wie ich die Tabelle in CSS mache und dass es mir alles durcheinander wirft. Deswegen habe ich auch den Quellcode hier rein gestellt, so dass nicht die üblichen Tipps mit den CSS Anweisungen: body{ text-align:center}.... kommen, sondern dass man mir konkret auf meinen Anwendungsfall sagen kann, was alles geändert werden muss. Ich dachte nämlich, dass wenn ich den body usw. center mach, dann auch in absolut jedem CSS Befehl etwas ändern muss.
Also ich wünsche schon ein paar qualifiziertere Kommentare, als dieser hier!!!
-
hei,
wenn du das beispiel gefunden hast:
#AllesDiv {
text-align:left;
margin:0 auto;
width: 780px; /* oder eine andere gewuenschte Breite */
}warum kannst du denn deine seite nicht zentriet bekommen ?!
Oder siehst du nur bahnhof ??
Gruss
-
warum kannst du denn deine seite nicht zentriet bekommen ?!
-
warum kannst du denn deine seite nicht zentriet bekommen ?!
schon qualifizierter ;)
heißt das jetzt folgende Zeile sollte erst mal bei jeder Datei raus:
<?xml version="1.0" ?>
?
-
heißt das jetzt folgende Zeile sollte erst mal bei jeder Datei raus:
<?xml version="1.0" ?>
Ich würde "Mach die Zeile weg" als "die Zeile sollte raus" interpretieren - das ist aber Ansichtssache.
-
Ich würde "Mach die Zeile weg" als "die Zeile sollte raus" interpretieren - das ist aber Ansichtssache.
alles klar, das hab ich jetzt getan und jetzt muss ich nur folgendes richtig nutzen:
> body { > text-align:center; > } > > #AllesDiv { > text-align:left; > margin:0 auto; > width: 780px; /* oder eine andere gewuenschte Breite */ > }heißt: #AllesDiv, dass ich bei jedem einzelnen div, egal was es macht, folgendes mit rein schreiben muss?
text-align:left;
margin:0 auto;
width: 780px-
margin:0 auto;
width: 780px!Nein, es würde auch reichen wenn du das body-Element zentriest - margin: 0 auto; und eine feste Breite reicht hier vollig aus. Den text-align-Krempel kannst du dir gut und gerne sparen, den IE5.5 abwärts willst du hoffentlich nicht mehr unterstützen.
-
Nein, es würde auch reichen wenn du das body-Element zentriest - margin: 0 »»auto; und eine feste Breite reicht hier vollig aus. Den text-align-Krempel »»kannst du dir gut und gerne sparen, den IE5.5 abwärts willst du hoffentlich »»nicht mehr unterstützen.
So reicht es bei mir irgendwie nicht. Wenn ich nur im body Element das rein mache, dann bleiebt die Seite trotzdem links am Rand. Es geht, wenn ich das so mache:
body { margin:0; padding:0; font-family:arial,helvetica,sans-serif; background-color:#f1f1f1; text-align:center; } #alle-div {text-align:left; margin:0 auto; width: 780px; }Nur ist sie so leider nicht ganz in der Mitte, sondern en bisschen weiter rechts. Geht das nicht irgendwie, dass es automatisch immer die Mitte nimmt?
danke schon mal
mfg
-
So reicht es bei mir irgendwie nicht. Wenn ich nur im body Element das rein mache, dann bleiebt die Seite trotzdem links am Rand. Es geht, wenn ich das so mache:
Dann machst du etwas falsch - was das ist, bleibt wohl dein Geheimnis.
#alle-div {text-align:left; margin:0 auto; width: 780px; }
Dass das text-align Unsinn ist, hab ich dir schon gesagt?
Nur ist sie so leider nicht ganz in der Mitte, sondern en bisschen weiter rechts. Geht das nicht irgendwie, dass es automatisch immer die Mitte nimmt?
Du machst etwas falsch - sie kann nicht "weiter rechts" sein (höchstens um 1 Pixel), da auto den Außenabstand exakt aufteilt.
Aber auch hier: es bleibt wohl dein Geheimnis.
-
-
-
-
-
-
-
hei,
wenn du das beispiel gefunden hast:
#AllesDiv {
text-align:left;
margin:0 auto;
width: 780px; /* oder eine andere gewuenschte Breite */
}warum kannst du denn deine seite nicht zentriet bekommen ?!
Oder siehst du nur bahnhof ??
Gruss
Genau deswege hab ich hier mal die html Datei und die CSS Datei zur Schau gestellt, so dass jemand diese mal bei sich rein kopieren kann und den Befehl ausprobieren. Müsste ihr hier bei gar allen anderen Divs immer das hier
#AllesDiv {
text-align:left;
margin:0 auto;
width: 780px; /* oder eine andere gewuenschte Breite */
}reinschreiben, egal um was es sich bei den divs dreht?
Und die feste width mit zum Beispiel 780px ist doch auch schlecht, dann ist es auch nicht bei jedem Bildschirm genau in der Mitte, oder?mfg
-
-
Also ich wünsche schon ein paar qualifiziertere Kommentare, als dieser hier!!!
Qualifizierte Kommentare waren gestern leider aus: Zitat 224
-
-