Kleines Problem

Hallo… bin rad am gestalten der HP. hab nur ein kleines problem. warum sind die boxen mit der überschrift supportforum nicht nebeneinander (siehe bild)

Bild:
http://img.bplaced.net/upload/5bf502ae1c84a94290d6c597aa4b1308.png

Der Quelltextcode:

[code]

MyFirstHP.de - Der kinderleichte Homepagebaukasten

#myfirsthp {
width: 725px;
}
#header {
width: 725px;
height: 72px;
vertical-align: top;
}
#navi {
width: 725px;
vertical-align: top;
}
#content {
width: 502px;
vertical-align: top;
}
#sidebar {
width: 223px;
vertical-align: top;
}
#newsbox {
width: 500px;
border: 1px solid #1874CD;
margin-bottom: 4px;
}

	#newsbox_overline {
	width: 500px;
	border-bottom: 1px solid #1874CD;
	}
	#newsbox_overline p {
	font-family: Verdana;
	color: #104E8B;
	font-weight: bold;
	font-size: 12px;
	}
	#newsbox_text {
	width: 500px;
	}
	#newsbox_text p {
	font-weight: none;
	font-family: Arial;
	color: #000000;
	font-size: 13px;
	}
	#newsbox2 {
	width: 200px;
	border: 1px solid #1874CD;
	margin-bottom: 2px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	}

	#newsbox2_overline {
	width: 200px;
	border-bottom: 1px solid #1874CD;
	}
	#newsbox2_overline p {
	font-family: Verdana;
	color: #104E8B;
	font-weight: bold;
	font-size: 12px;
	}
	#newsbox2_text {
	width: 200px;
	}
	#newsbox2_text p {
	font-weight: none;
	font-family: Arial;
	color: #000000;
	font-size: 13px;
	}
	#sidebarbox {
	width: 220px;
	border: 1px solid #1874CD;
	}
	#sidebarbox_overline {
	width: 220px;
	border-bottom: 1px solid #1874CD;
	}
	#sidebarbox_overline p {
	font-family: Verdana;
	color: #104E8B;
	font-weight: bold;
	font-size: 12px;
	}
	#sidebar_text {
	width: 220px;
	}
	</style>
</head>
<body>
	<table cellspacing="0" cellpadding="0" id="myfirsthp">
		<tr>
			<td colspan="2" id="header">
				<img src="img/header.png">
			</td>
		</tr>
		<tr>
			<td colspan="2" id="navi">
				<ul>
					<li>ll</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td id="content">
				<table cellspacing="0" cellpadding="0" id="newsbox">
					<tr>
						<td id="newsbox_overline"><p>MyFirstHP.de</p></td>
					</tr>
					<tr>
						<td id="newsbox_text">
							<p>Willkommen auf MYFIRSTHP.DE. Hier kannst Du dir deine eigene und kostenlose Homepage erstellen. Mit unserem modernen Baukastensystem, ist das kein Problem. Und falls Du dochmal Fragen hast, benutze unser Forum.</p>
						</td>
					</tr>
				</table>

				<table cellspacing="0" cellpadding="0" id="newsbox2">
					<tr>
						<td id="newsbox2_overline"><p>Das Supportforum</p></td>
					</tr>
					<tr>
						<td id="newsbox2_text">
						       <center>	<img src="img/forum.png" width="150" height="150"></center>
							<p>Unser Supportforum unterscheidet sich von vielen anderen. Denn bei uns bekommst du den Supprt von anderen Usern, die Dir bei dienen Problem besser helfen k?nnen. Au?erdem wird im Supportforum nicht nur bei Problemen geholfen, sondern auch, was gerade so im Internet los ist.</p><p><a href="http://forum.myfirsthp.de">Zum Forum</a></p>
						</td>
						<td>
					</tr>
				</table>

Das Supportforum

Unser Supportforum unterscheidet sich von vielen anderen. Denn bei uns bekommst du den Supprt von anderen Usern, die Dir bei dienen Problem besser helfen k?nnen. Au?erdem wird im Supportforum nicht nur bei Problemen geholfen, sondern auch, was gerade so im Internet los ist.

Zum Forum

Sidebar

Sidebartext

[/code]

Warum sollte es nebeneinander sein - was veranlaßt dich zu
dieser Ansicht?

Ansonsten hast du bei (X)HTML einige Dinge nicht verstanden.
Das id-Attribut dient dazu, Elemente eindeutig zu identifizieren,
ein Wert darf da nur genau einmal im Dokument vorkommen.

Dann hast du vermutlich nicht verstanden, wozu Tabellen gut
sind, die kannst du aktuell wohl alle als überflüssig streichen,
dann sieht die Welt schon mal wieder ganz anders aus ;o)

Einen doctype solltest du auch noch spendieren, damit man
erkennen kann, daß es sich wirklich um HTML handelt (was ich
vermute, also nicht XHTML etwa).
Dann solltest du auch veraltete Elemente (center etwa) und
Attribute weglassen. img-Elemente benötigen zudem ein
alt-Attribut mit Alternativtext.

Gut und wenn dann der HTML-Quelltext definiert und
aufgeräumt ist, lohnt es sich, sich Gedanken darüber zu machen,
wie und wo man etwas mit CSS anordnet. Da bietet sich
etwa Positionierung an oder in einigen Fällen kann auch 'float’
was bringen.

Ansonsten - Einheit px für Fließtext (font-size) ist eher
ungeeignet, besser ganz weglassen oder em, ex, %, relative
Angaben verwenden.
Bei font-family ist als letztes immer eine generische Schriftfamilie
anzugeben, in deinem Falle wohl immer sans-serif.

o.0 generische??
was bedeutet denn das wieder??

(ich mache da immer zwei rein, weiss aber eigentlich nicht wieso…)

mfg Joey

Generische Schriftfamilie:

Bei Schriften ist es so, daß sie nicht auf jedem System
installiert sind und aus Lizenzgründen auch nicht installiert sein
können oder werden. Deshalb sind Angaben wie ‘Verdana’ oder
’Arial’ oder ‘Helvetica’ nicht ausreichend für font-family.
Jede Schrift gehört aber zu einer Schriftfamilie, als da wären:
serif, sans-serif, monotype, cursive, fantasy.
Diese bezeichnen eben keine spezifische Schrift, sondern die
ganze Familie, was dann eine generische Angabe ist.
Eine von diesen schreibt man immer an das Ende der Liste
der Schriften bei font-family, um sicherzustellen, daß der browser
immer eine Schrift auswählen kann.
Tut man das nicht und die angegebene Schrift ist nicht
verfügbar, so braucht der browser eigentlich gar nichts anzeigen,
was mit Schrift zu tun hat (wenn die Schrift irgendwie bekannt
ist, kann der browser trotzdem irgendeine andere wählen, die
ähnlich ist, muß es aber nicht).
Bei dem generischen Typ muß der browser aber immer eine
Schrift pro Typ verfügbar haben, weswegen es da nie passieren
wird, daß er gar keinen Text anzeigt, weil er nicht weiß, womit.

de.wikipedia.org/wiki/Generisch

aso

Ein Tabledesign… langsam kriegt ich ne Krise. o.0

[offtopic]

table-design rulez! :ps: (…man bedenke am schluss zählt immernoch das resultat, vorteile hin oder her)
[/offtopic]

Eben.

Und das Resultat von tabellenbasierenden Layouts ist…

a) unübersichtlicher Quellcode
b) ungünstige Darstellung (viele Browser zeigen Tabellen erst an, wen der Inhalt der selben vollständig geladen wurde)
c) eine Katastrophe, wenn Layout-Änderungen durchgeführt werden sollen
d) unnötig hoher Traffic (resultierend u… aus Punkt a) )

Und die Vorteile…?
So sorry, fallen mir gerade nicht ein :sunglasses:

@hoffman: wird keine Schrift angegeben (oder eine nicht vorhandene), bedeutet das nicht, dass der Browser keinen Text mehr anzeigt - dafür gibt es Browseroptionen, in denen die Standard-Schriftart definiert wird.
Ansonsten hast Du natürlich recht.

@all

Dann muss ich mal schauen, wie ich das mit den Divs mache… ist das kompliziert? ^^^oô

Gruss Tobi

Nicht, wenn Du alles vergisst, was D bisher mit Tabellen gemacht hast.

Ein Tabellen-Design einfach mit Divs “nachzubauen” bringt natürlich auch nicht viel - aber ansonsten wirst Du sicherlich recht schnell feststellen, dass CSS einfacher und pflegeleichter zu handeln ist als Tabellen.

Als Einstieg empfehle ich
css4you.de
de.selfhtml.org/css/layouts/index.htm

Tobi - es geht ja nicht nur um divs, es geht im Grunde darum,
(X)HTML sinnvoll zu verwenden, also etwa die Kaskade h1-h6
für Überschriften, p für Absätzen, ul/ol/dl etc für Listen.

An sich ist das nicht schwer, man muß nur ungefähr wissen,
was für Elemente (X)HTML hat und was für Inhalte sie
auszeichnen.
div oder span verwendet man da eigentlich nur, wenn es kein
besseres Element für den Inhalt gibt. Weil div und span keine
inhaltliche Bedeutung haben, eignen sie sich allgemein für
dekorative Gruppierungen und Dinge, für die es in (X)HTML
keine passenden Elemente gibt.
Das Layout findet mehr oder weniger unabhängig davon mittels
CSS statt - bei einfachen Layouts auch nicht so schwierig.

idefix - ich behaupte ja auch nicht, daß das passieren muß, der
browser kann das aber so machen.
Bei irgendeinem browser (netscape4?) hatte ich das vor zig
Jahren mal, der hat dann den Text einfach nicht mehr angezeigt.
Und das ist dann nur der auffällige Fall.
Ich meine, das ganze Drama geht auch Glyphenweise, wenn
also die erste Schriftart keinen passenden Glyphen hat, geht
es mit dem nächsten weiter. Erst wenn der browser bei der
generischen Schriftart nichts passendes mehr hat, sollte er den
Glyphen für ‘fehlender Glyph’ anzeigen. Gibt man das nicht an,
kann es wohl auch glatt passieren, daß im laufenden Text
exotische Sonderzeichen einfach gar nicht dargestellt werden
und der Nutzer nicht mal drauf aufmerksam gemacht wird.

Daß die meisten browser das heute schlauer machen werden,
steht außer Frage, ist aber wohl in CSS nicht festgelegt, daß sie
da besonders kreativ werden müssen, wenn es dem Autor egal
ist. Aber solche dürftig ausgestatteten Stilvorlagen machen es
neuen Anbietern von browsern natürlich nur unnötig schwer, nur
den Spezifikationen folgend etwas zu produzieren, mit dem ein
Nutzer auch solche Sachen mit Gewinn betrachten kann.

ack.

In diesem Zusammenhang bin ich übrigens sehr, sehr neugierig, was den neuen InternetExplorer angeht - die Anfänge lesen sich ja schonmal gut: software.magnus.de/tools/artikel … eta-1.html