Schrift und Bilder mit html in einer Zeile zentrieren

Hallo,

ich habe gerade folgendes Problem bei meiner Seite - und zwar: Wie kann ich die Schrift und Bilder in einer Zeile zentrieren ohne dass die mir auseinander gerissen wird? Momentan sieht es bei mir so aus:



und so sollte es aussehen:



Im FireFox und anderen Browsern wird mir alles korrekt angezeigt (unteres Bild), nur im Internetexplorer zerreißt es das komischerweise.

Der Code sieht bei mir so aus:

Code: Alles auswählen

<table class="main" cellpadding="0" cellspacing="0" width="1003">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="head1"><p align = "center"> <font size="6">Wie bekomme ich alles in eine Zeile?</p></td>
</tr>
</table>

Der "Fehler" liegt indirekt beim Internet Explorer und ist mit bloßem HTML auch nicht auszugleichen, sondern eigentlich per CSS. Allgemein würde ich dir empfehlen, auf Tabellen nur dann zurückzugreifen, wenn du auch etwas tabellarisch darstellen möchtest - und nicht, das Layout als Tabelle zu betrachten bzw. Umzusetzen.

Da du ja bereits Klassen verwendest, scheinst du dafür auch schon teilweise CSS zu benutzen? Oder doch nicht? Denn du trennst semantisch nicht korrekt. Der font-Tag ist sozusagen "abgeschafft", da das Schriftbild über das CSS gesteuert wird. Im CSS kannst du dann für den Internet Explorer einfach nochmal das selbe Schriftbild wie allgemein auch für die Tabellen angeben, dann müsste es passen. Jedoch würde ich dir wie gesagt davon abraten, Tabellen überhaupt für's Layout zu verwenden - es bläht den Quellcode unnötig auf und macht das Arbeiten für dich selbst damit unübersichtlicher. Stattdessen verwendet man Divs (aber bitte nicht in der selben Menge wie Tabellenzellen ), die eben auch über das CSS gestylt werden.

Gut, danke schon einmal für die Hilfe. Ja ich habe auch ein CSS, ich kann ja mal den betreffenden Teil wo ich den Fehler vermute posten, es ist ziemlich lang geworden:

Code: Alles auswählen

body {margin: 0px; -moz-user-select: none; -khtml-user-select: none; user-select: none;}

form {display: inline;}

table.main {background-color: #ffffff;}

td.head1 {background-color: #f7f7f7; padding: 3px; width: 110px;}
td.head2 {background-color: #f7f7f7; padding: 3px; font-family: arial; font-size: 12px; color: #777777; vertical-align: bottom;}
td.head3 {background-color: #f7f7f7; padding-right: 20px; text-align: right; font-family: arial; font-size: 12px; color: #777777;}

td.headline {font-family: arial; font-size: 12px; color: #223A57; font-weight: 400; padding: 5px 7px 5px 7px; background-color: #FF6633;}
a.headline:link {font-family: arial; font-size: 12px; color: #223A57; font-weight: 400; text-decoration: none;}
a.headline:visited {font-family: arial; font-size: 12px; color: #223A57; font-weight: 400; text-decoration: none }
a.headline:hover {font-family: arial; font-size: 12px; color: #223A57; font-weight: 400; text-decoration: underline }

td.boxline {background-color: #FF9933; height: 20px; padding: 0px 5px 0px 7px; font-family: arial; font-size: 11px; color: #bbbbbb;}
a.boxline:link {font-family: arial; font-size: 11px; font-weight: 400; color: #223A57; text-decoration: none ;}
a.boxline:visited {font-family: arial; font-size: 11px; font-weight: 400; color: #bbbbbb; text-decoration: none }
a.boxline:hover {font-family: arial; font-size: 11px; font-weight: 400; color: #bbbbbb; text-decoration: none }

Schreibender hat geschrieben:EDIT: Ich sehe gerade, dass ich den Font Tag durch die Pixelgröße im CSS ersetzen kann - richtig?

Code: Alles auswählen

a.boxline:link {font-family: arial; font-size: 11px; font-weight: 400; color: #223A57; text-decoration: none ;}
a.boxline:visited {font-family: arial; font-size: 11px; font-weight: 400; color: #bbbbbb; text-decoration: none }
a.boxline:hover {font-family: arial; font-size: 11px; font-weight: 400; color: #bbbbbb; text-decoration: none }

Code: Alles auswählen

a.boxline:link {font-family: arial; font-size: 11px; font-weight: 400; color: #223A57; text-decoration: none;}
a.boxline:visited, a.boxline:hover {font-family: arial; font-size: 11px; font-weight: 400; color: #bbbbbb; text-decoration: none; }

Ok, ich habe nun auch herausgefunden wie ich die Schriftgröße im CSS ändern kann, danke wieder einmal.

Ich meinte dass ich vorher statt <p align = "center" >Text</p> mit <div align = "center"> </div> gearbeitet habe. Ich kenne mich mit divs allerdings gar nicht aus, ich hab die Idee aus der Selfhtml Dokumentation geklaut (Texte zentrieren) .

Kann ich denn dann das CSS weiter benutzen, denn ich habe meine Seite im Grunde schon fertig und ein "paar" Tabellen drin versteckt die ich über das CSS verwalte. Einfach so gegen div austauschen geht wohl nicht . Wie kann ich denn, wenn ich nicht alles ändern will, den Text über CSS zentrieren?

Danke für den Tipp mit dem Zusammenfassen, da ich noch total neu bin habe ich der Übersicht halber (für mich) immer alles ausführlich geschrieben und im Vertrauen darauf, dass das CSS sowieso klein ausfällt und die Ladezeit nicht runterzieht. Wieso und warum habe ich den Befehl nicht sauber beendet?

Entschuldige die ganzen Noobie Fragen .

Schreibender hat geschrieben:a.boxline:link {font-family: arial; font-size: 11px; font-weight: 400; color: #223A57; text-decoration: none ;}
a.boxline:visited {font-family: arial; font-size: 11px; font-weight: 400; color: #bbbbbb; text-decoration: none <- hier fehlt das Semikolon}
a.boxline:hover {font-family: arial; font-size: 11px; font-weight: 400; color: #bbbbbb; text-decoration: none <- hier fehlt das Semikolon}

Code: Alles auswählen

div {
text-align: center;
}

Ok danke noch einmal - dann muss ich mir mal die Zeit nehmen die Seite bei Gelegenheit noch einmal zu überarbeiten .

Noch fehlt mir aber der Ansatz wie ich den Text per CSS zentrieren kann, das CSS habe ich so eingebunden:

Code: Alles auswählen

<link rel="StyleSheet" type="text/css" href="http://127.0.0.1/default.css">

Code: Alles auswählen

<style type="text/css">
          .center {text-align: center;}
           td {text-align: ","}
  </style>

Code: Alles auswählen

html
<link rel="StyleSheet" type="text/css" .center {text-align: center;} href="http://127.0.0.1/default.css">

CSS
td.head1 {background-color: #f7f7f7; padding: 3px; font-family: arial; font-size: 40px; color: #000000; width: 110px; text align: center;}

Hallo,

ich habe es jetzt hinbekommen - der Fehler war zu blöd, vor allem weil ich jetzt im StyleSheet einiges probiert habe um den Text zu zentrieren, z. B. mit text-align: center oder margin-left: auto; margin-right: auto - und es hat nie geklappt, ständig war der Text weiter am linken Rand zusammengeklatscht als ob da eine unsichtbare Grenze rechts exisitieren würde.

Jetzt habe ich mich mal auf Excel besonnen wo der gleiche Fehler bei Texten auftreten kann, wenn die Spalte zu eng gewählt ist - und:

td.head1 {background-color: #f7f7f7; padding: 3px; width: 110px;

Argh kann ich da nur sagen, ich habe es jetzt so geändert:

body {margin: 0px; -moz-user-select: none; -khtml-user-select: none; user-select: none; text-align: center;}

form {display: inline;}

table.main {background-color: #ffffff;}

td.head1 {background-color: #f7f7f7; padding: 3px; font-family: arial; font-size: 28px; color: #000000; width: 1000px; text-align: center;

Jetzt geht es ohne Probleme und bei der Gelegenheit habe ich mal gleich meine Seite wie hier (Talkteria) zentriert damit es nicht so an den Rand geklatscht aussieht.

Trotzdem noch einmal danke!