[HTML/CSS] Text in DIV-Box

Kompost · 25.04.2005, 20:49

Das hier ist meine index.html:

HTML-Code:

<html>
<head>
<title>Kompost</title>
<meta name="description" content="Kompost">
<meta name="author" content="Dieter">
<meta name="keywords" content="Kompost">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<link rel="stylesheet" type="text/css" href="main.css">

<body>

<div class="main">
<h1>Willkommen auf meiner Seite</h2>
<p>Tach Comunity, nach fast 5 Monaten Entwicklungszeit ist unser Werbenetzwerk layer-ads.de online gegangen. Dieses Projekt möchte ich Euch gern vorstellen. Seit dem Windowsupdate SP2 dürften Pop-ups endgültig Geschichte sein. Für Webmaster heisst dies umdenken. Wenn 2/3 der Besucher das Pop-Up garnicht sehen, wie kann es dann Geld bringen? Garnicht! Und genau dort setzen wir an. Statt mit Pop-Ups zu werben, die nur die Pop-Upblocker sehen, schalten Webmaster mit Layer-Ads unaufdringliche Layer auf Ihren Seiten, an denen der User einfach nicht vorbei kommt. Layer-Ads hebt sich dadurch von anderen Anbietern ab, dass es Werbetreibenden und Webmastern erlaubt, Werbung ganz gezielt zu schalten bzw. anzubieten. Dies gilt sowohl für die Herkunft des Besuchers, als auch für die Inhalte der Homepage. Er hat die Wahl aus über 20 Kategorien, die zu übernehmen, die am besten für seine Homepage geeignet sind. Detailierte grafische und Tabellarische Auswertungen für Webmaster und Werbetreibende sind bei uns ebenso normal, wie die sofortige Rechnungserstellung. All das in einem leicht und intuitiv zu bedienendem Mitgliederbereich. Unsere Layer bauen ausserhalb der Internetseite, für den Besucher absolut unsichtbar auf, so dass der Besucher keine Leeren Fenster angezeigt bekommt. Durch ein ausgeklügeltes Kompressionsverfahren und der Optimierung der Scripte konnten wir die Dateigröße auf unter 4 kb veringern. So stört die Werbung nicht den Seitenaufbau und bringt die Werbebotschaft blitzschnell dort wo sie hingehört - zum Besucher. Unser System wurde bisher mit über 20 verschiedenen Browsern und Betriebssystemen ausgiebig getestet, um zu gewährleisten, dass dem Webmaster niemand verloren geht. Vom Internet Explorer 4.0, über den aktuellsten Firefox bis zum seltenem Mac- oder Linuxbrowser. Jeder wird die Werbung sehen. Dabei nerven wir die Besucher nicht. Klickt er es einmal weg, kommt es auch innerhalb der nächsten 3 Stunden nicht wieder. Innerhalb weniger Tagen konnten wir durch die Vorteile unseres Werbenetzwerkes schon über 100 Webmaster von uns überzeugen und liefern derzeit bereits über 300.000 Layer pro Tag aus.Im Gegensatz zu anderen Anbietern, die nur Aufrufe zählen, steckt hinter Layer-Ads eine ausgefeilte Technik, die nur die Besucher zählt, die sich wirklich die Werbung ansehen. Das sind im Moment im Durchschnitt zwischen 80 und 95 % aller Besucher. Nur dadurch konnten wir hochkarätige Werbetreibende finden, die dafür sorgen, dass der Webmaster stets das Maximum seines Kundenpotentials vergütet bekommt. Nachträgliche Neuberechnungen oder Abwertungen bei "schlechtem Traffic" könnt Ihr woanders suchen. Wir zahlen jedem Webmaster mindestens EUR 2.50 pro tausend gültigen Aufrufen. Zum Dank für den großen Erfolg möchten wir jetzt etwas zurückgeben. Daher verlosen wir unter allen aktiven Webmastern einen Apple iPod. Die Gewinnchancen hängen dabei von der Anzahl der Lose ab, die ein Webmaster bis zum 30.06.2005 sammeln kann. Jeder angemeldete Webmaster erhält 1 Los für jeden Euro, den er mit Layer-Ads umsetzt. Zusätzlich gibts nochmal für jeden geworbenen Webmaster, der über uns mehr als 10 Euro Umsatz generiert nomal 25 Lose obendrauf. Alle Lose werden in einen Topf geworfen und der Gewinner am 1. Juli ermittelt. So haben sowohl große als auch kleine Seiten Gewinnchancen. Selbstverständlich ist die Teilnahme an Layer-Ads, als auch am Gewinnspiel komplett kostenlos und unverbindlich. Wenn Euch unser Angebot interessiert, schaut mal rein unter http://layer-ads.de/index.htm und wenn es Euch gefällt, sagt es anderen - wenn nicht sagt es uns.</p>
</div>
</body>
</html>

Hier ist meine main.css:

Code:

<style>
body {
    margin:0;
    padding:0;
    font-size:11px;
    font-family: Verdana, Arial, sans-serif;
}
div.menu_links {
    height:100%;
    width:320px;
    padding-left:15px;
    background:#fff;
    border-right:1px solid #FF2CC1;
    font:0.9em Verdana, Arial, sans-serif;
    float:left;
    background-image: url(gfx/spirale_links.gif);
    background-repeat: no-repeat;
}
div.menu_rechts {
    height:100%;
    width:400px;
    padding-right:15px;
    background:#fff;
    border-left:1px solid #FF2CC1;
    font:0.9em Verdana, Arial, sans-serif;
    float:right;
    background-image: url(gfx/spirale_rechts.gif);
    background-repeat: no-repeat;
    background-position: bottom;
}
div.main {
    height:100%;
    font:100% Trebuchet MS, Arial, sans-serif;
    float:left;
    padding-left:15px;
    white-space: pre-line;
    vertical-align: top;

}

</style>

Wieso wird dieser @~ǅ²²ǉ{~# Text immer unter der "main" Box ausgegeben? Ich hab auch schon auf css4you.de nach einer Lösung geguckt aber nix gefunden - ich bin halt noch totaler DIV-Box newbie

Ich freue mich über jede Hilfe => Danke im vorraus

**Lima** · 25.04.2005, 21:03

Warum machst du den ein <h1> auf und ein </h2> zu? Schau mal nach ob es daran liegt ...

Kompost · 25.04.2005, 21:27

Ne, funktioniert leider nicht

Auch nicht wenn ich einfach alles so reinpacke:

HTML-Code:

<div class="main">Tach Comunity, nach fast 5 Monaten Entwicklungszeit ist unser Werbenetzwerk layer-ads.de online gegangen. Dieses Projekt möchte ich Euch gern vorstellen. Seit dem Windowsupdate SP2 dürften Pop-ups endgültig Geschichte sein. Für Webmaster heisst dies umdenken. Wenn 2/3 der Besucher das Pop-Up garnicht sehen, wie kann es dann Geld bringen? Garnicht! Und genau dort setzen wir an. Statt mit Pop-Ups zu werben, die nur die Pop-Upblocker sehen, schalten Webmaster mit Layer-Ads unaufdringliche Layer auf Ihren Seiten, an denen der User einfach nicht vorbei kommt. Layer-Ads hebt sich dadurch von anderen Anbietern ab, dass es Werbetreibenden und Webmastern erlaubt, Werbung ganz gezielt zu schalten bzw. anzubieten. Dies gilt sowohl für die Herkunft des Besuchers, als auch für die Inhalte der Homepage. Er hat die Wahl aus über 20 Kategorien, die zu übernehmen, die am besten für seine Homepage geeignet sind. Detailierte grafische und Tabellarische Auswertungen für Webmaster und Werbetreibende sind bei uns ebenso normal, wie die sofortige Rechnungserstellung. All das in einem leicht und intuitiv zu bedienendem Mitgliederbereich. Unsere Layer bauen ausserhalb der Internetseite, für den Besucher absolut unsichtbar auf, so dass der Besucher keine Leeren Fenster angezeigt bekommt. Durch ein ausgeklügeltes Kompressionsverfahren und der Optimierung der Scripte konnten wir die Dateigröße auf unter 4 kb veringern. So stört die Werbung nicht den Seitenaufbau und bringt die Werbebotschaft blitzschnell dort wo sie hingehört - zum Besucher. Unser System wurde bisher mit über 20 verschiedenen Browsern und Betriebssystemen ausgiebig getestet, um zu gewährleisten, dass dem Webmaster niemand verloren geht. Vom Internet Explorer 4.0, über den aktuellsten Firefox bis zum seltenem Mac- oder Linuxbrowser. Jeder wird die Werbung sehen. Dabei nerven wir die Besucher nicht. Klickt er es einmal weg, kommt es auch innerhalb der nächsten 3 Stunden nicht wieder. Innerhalb weniger Tagen konnten wir durch die Vorteile unseres Werbenetzwerkes schon über 100 Webmaster von uns überzeugen und liefern derzeit bereits über 300.000 Layer pro Tag aus.Im Gegensatz zu anderen Anbietern, die nur Aufrufe zählen, steckt hinter Layer-Ads eine ausgefeilte Technik, die nur die Besucher zählt, die sich wirklich die Werbung ansehen. Das sind im Moment im Durchschnitt zwischen 80 und 95 % aller Besucher. Nur dadurch konnten wir hochkarätige Werbetreibende finden, die dafür sorgen, dass der Webmaster stets das Maximum seines Kundenpotentials vergütet bekommt. Nachträgliche Neuberechnungen oder Abwertungen bei "schlechtem Traffic" könnt Ihr woanders suchen. Wir zahlen jedem Webmaster mindestens EUR 2.50 pro tausend gültigen Aufrufen. Zum Dank für den großen Erfolg möchten wir jetzt etwas zurückgeben. Daher verlosen wir unter allen aktiven Webmastern einen Apple iPod. Die Gewinnchancen hängen dabei von der Anzahl der Lose ab, die ein Webmaster bis zum 30.06.2005 sammeln kann. Jeder angemeldete Webmaster erhält 1 Los für jeden Euro, den er mit Layer-Ads umsetzt. Zusätzlich gibts nochmal für jeden geworbenen Webmaster, der über uns mehr als 10 Euro Umsatz generiert nomal 25 Lose obendrauf. Alle Lose werden in einen Topf geworfen und der Gewinner am 1. Juli ermittelt. So haben sowohl große als auch kleine Seiten Gewinnchancen. Selbstverständlich ist die Teilnahme an Layer-Ads, als auch am Gewinnspiel komplett kostenlos und unverbindlich. Wenn Euch unser Angebot interessiert, schaut mal rein unter http://layer-ads.de/index.htm und wenn es Euch gefällt, sagt es anderen - wenn nicht sagt es uns.</div>

Kompost · 25.04.2005, 21:37

Ich hab eben folgende Erkenntnis gemacht

wenn ich im Quelltext folgende Texte untereinander schreibe wird der Text genau wie in meinem Beispiel unter der Box dargestellt:

afsdfsdf
sdfsdfsadf
sadfasdfsdf
asfdasdfsadf
asdfsdfsadfsadf
asdfsadfasdfasfd

Füge ich aber zwischen die einzelnen "Wörter" ein <br> ein so das es in die Zeile passt wird der Text in der Box dargstellt. Ich bräuhcte also einen Befehl der diesen Zeilenumbruch automatisiert

Normal geht das ganze so:

"Mit white-space: können Sie das Verhalten für den Zeilenumbruch festlegen. Folgende Angaben sind möglich:

normal = automatischer Zeilenumbruch (wie bei allen HTML-Tags außer <pre> und <nowrap>).
pre = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>...<pre>).
nowrap = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags."

pre und nowrap funktionieren aber das normal irgendwie nicht

*edit*

Also, der Text wird jedes mal unter der Box ausgegeben wenn der Text breiter ist als die Box - da hilft auch kein <br>

**Lima** · 26.04.2005, 08:15

Gib dem <p> eine feste Breite ...

Kompost · 26.04.2005, 08:25

Ich hab jetzt geschrieben:

HTML-Code:

<p class="content">Text<p>

und in der CSS Datei

HTML-Code:

content {
width: 100%;
}

Funktionier leider immernoch nicht

Kompost · 26.04.2005, 09:12

Ich hab jetzt in meinem CSS Dokument folgendes geändert:

HTML-Code:

.content {
 width: 420px;
 text-align: middle;
 }

Das width ist jetzt nicht im % sondern mit px definiert. Jetzt funktioniert es zwar aber da die Bildschirmauflösung von User zu User variert wäre es viel praktischer wenn ich irgendwie angeben könnte das der width so brei sein soll wie mein Main dings:

HTML-Code:

div.main {
    height:100%;
    font:100% Trebuchet MS, Arial, sans-serif;
    float:left;
    padding-left:15px;
    white-space: pre-line;
    vertical-align: top;

}

hardrock · 26.04.2005, 12:21

float erfordert eine fest angegebene Breite. Außerdem musst du auf die Reihenfolge der DIVs achten, sie werden ja in deinem Fall von links nach rechts geladen, da sie nicht absolut positioniert sind. Optimiertere Version deines Quellcodes:

HTML-Code:

<html>
<head>
<title>Kompost</title>
<meta name="description" content="Kompost">
<meta name="author" content="Dieter">
<meta name="keywords" content="Kompost">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div id="content">
	<div class="menu_links">
	</div>
	<div class="main">
		<h1>Willkommen auf meiner Seite</h1>
		<p>Tach Comunity, nach fast 5 Monaten Entwicklungszeit ist unser Werbenetzwerk layer-ads.de online
			gegangen. Dieses Projekt m&ouml;chte ich Euch gern vorstellen. Seit dem Windowsupdate SP2 d&uuml;rften
			Pop-ups endg&uuml;ltig Geschichte sein. F&uuml;r Webmaster heisst dies umdenken. Wenn 2/3 der Besucher
			das Pop-Up garnicht sehen, wie kann es dann Geld bringen? Garnicht! Und genau dort setzen wir an.
			Statt mit Pop-Ups zu werben, die nur die Pop-Upblocker sehen, schalten Webmaster mit Layer-Ads unaufdringliche
			Layer auf Ihren Seiten, an denen der User einfach nicht vorbei kommt. Layer-Ads hebt sich dadurch
			von anderen Anbietern ab, dass es Werbetreibenden und Webmastern erlaubt, Werbung ganz gezielt zu
			schalten bzw. anzubieten. Dies gilt sowohl f&uuml;r die Herkunft des Besuchers, als auch f&uuml;r
			die Inhalte der Homepage. Er hat die Wahl aus &uuml;ber 20 Kategorien, die zu &uuml;bernehmen, die
			am besten f&uuml;r seine Homepage geeignet sind. Detailierte grafische und Tabellarische Auswertungen
			f&uuml;r Webmaster und Werbetreibende sind bei uns ebenso normal, wie die sofortige Rechnungserstellung.
			All das in einem leicht und intuitiv zu bedienendem Mitgliederbereich. Unsere Layer bauen ausserhalb
			der Internetseite, f&uuml;r den Besucher absolut unsichtbar auf, so dass der Besucher keine Leeren
			Fenster angezeigt bekommt. Durch ein ausgekl&uuml;geltes Kompressionsverfahren und der Optimierung
			der Scripte konnten wir die Dateigr&ouml;&szlig;e auf unter 4 kb veringern. So st&ouml;rt die Werbung
			nicht den Seitenaufbau und bringt die Werbebotschaft blitzschnell dort wo sie hingeh&ouml;rt - zum
			Besucher. Unser System wurde bisher mit &uuml;ber 20 verschiedenen Browsern und Betriebssystemen ausgiebig
			getestet, um zu gew&auml;hrleisten, dass dem Webmaster niemand verloren geht. Vom Internet Explorer
			4.0, &uuml;ber den aktuellsten Firefox bis zum seltenem Mac- oder Linuxbrowser. Jeder wird die Werbung
			sehen. Dabei nerven wir die Besucher nicht. Klickt er es einmal weg, kommt es auch innerhalb der n&auml;chsten
			3 Stunden nicht wieder. Innerhalb weniger Tagen konnten wir durch die Vorteile unseres Werbenetzwerkes
			schon &uuml;ber 100 Webmaster von uns &uuml;berzeugen und liefern derzeit bereits &uuml;ber 300.000
			Layer pro Tag aus.Im Gegensatz zu anderen Anbietern, die nur Aufrufe z&auml;hlen, steckt hinter Layer-Ads
			eine ausgefeilte Technik, die nur die Besucher z&auml;hlt, die sich wirklich die Werbung ansehen.
			Das sind im Moment im Durchschnitt zwischen 80 und 95 % aller Besucher. Nur dadurch konnten wir hochkar&auml;tige
			Werbetreibende finden, die daf&uuml;r sorgen, dass der Webmaster stets das Maximum seines Kundenpotentials
			verg&uuml;tet bekommt. Nachtr&auml;gliche Neuberechnungen oder Abwertungen bei "schlechtem Traffic" k&ouml;nnt
			Ihr woanders suchen. Wir zahlen jedem Webmaster mindestens EUR 2.50 pro tausend g&uuml;ltigen Aufrufen.
			Zum Dank f&uuml;r den gro&szlig;en Erfolg m&ouml;chten wir jetzt etwas zur&uuml;ckgeben. Daher verlosen
			wir unter allen aktiven Webmastern einen Apple iPod. Die Gewinnchancen h&auml;ngen dabei von der Anzahl
			der Lose ab, die ein Webmaster bis zum 30.06.2005 sammeln kann. Jeder angemeldete Webmaster erh&auml;lt
			1 Los f&uuml;r jeden Euro, den er mit Layer-Ads umsetzt. Zus&auml;tzlich gibts nochmal f&uuml;r jeden
			geworbenen Webmaster, der &uuml;ber uns mehr als 10 Euro Umsatz generiert nomal 25 Lose obendrauf.
			Alle Lose werden in einen Topf geworfen und der Gewinner am 1. Juli ermittelt. So haben sowohl gro&szlig;e
			als auch kleine Seiten Gewinnchancen. Selbstverst&auml;ndlich ist die Teilnahme an Layer-Ads, als
			auch am Gewinnspiel komplett kostenlos und unverbindlich. Wenn Euch unser Angebot interessiert, schaut
			mal rein unter http://layer-ads.de/index.htm und wenn es Euch gef&auml;llt, sagt es anderen - wenn
			nicht sagt es uns.</p>
	</div>
	<div class="menu_rechts">
	</div>
</div>
</body>
</html>

css

Code:

body {
    margin:0;
    padding:0;
    font:0.9em Verdana, Arial, sans-serif;
}
#content {
	width:100%;
}	
div.menu_links {
    height:100%; width:200px;
    padding-left:15px;
    background:#fff;
    float:left;
    background: url(gfx/spirale_links.gif) no-repeat;
}
div.menu_rechts {
    height:100%; width:200px;
    padding-right:15px;
    background:#fff;
    float:left;
    background: url(gfx/spirale_rechts.gif) no-repeat bottom;
}
div.main {
    height:100%; width:600px;
    font:100% "Trebuchet MS", Arial, sans-serif;
    float:left;
    padding:0 15px 15px 15px;
    border-left:1px solid #FF2CC1;
    border-right:1px solid #FF2CC1;
}

Kompost · 26.04.2005, 12:24

Danke für die HIlfe

Es funktioniert jetzt

Dr. Doom · 27.04.2005, 10:23

hm, hatte das nen Grund, meinen Text zu benutzen?

Kompost · 27.04.2005, 11:50

Ich hab einfach nen längeren Text zum testen gebraucht, da ist mir deiner in den Sinn gekommen

25.04.2005, 21:03	#2 (permalink)
Lima Registriert seit: 23.02.2003 Ort: Hamburg Alter: 38 Beiträge: 3.265	AW: Text in DIV-Box Warum machst du den ein <h1> auf und ein </h2> zu? Schau mal nach ob es daran liegt ...

25.04.2005, 21:37	#4 (permalink)
Kompost Registriert seit: 25.10.2003 Beiträge: 8.502	AW: Text in DIV-Box Ich hab eben folgende Erkenntnis gemacht wenn ich im Quelltext folgende Texte untereinander schreibe wird der Text genau wie in meinem Beispiel unter der Box dargestellt: afsdfsdf sdfsdfsadf sadfasdfsdf asfdasdfsadf asdfsdfsadfsadf asdfsadfasdfasfd Füge ich aber zwischen die einzelnen "Wörter" ein <br> ein so das es in die Zeile passt wird der Text in der Box dargstellt. Ich bräuhcte also einen Befehl der diesen Zeilenumbruch automatisiert Normal geht das ganze so: "Mit white-space: können Sie das Verhalten für den Zeilenumbruch festlegen. Folgende Angaben sind möglich: normal = automatischer Zeilenumbruch (wie bei allen HTML-Tags außer <pre> und <nowrap>). pre = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>...<pre>). nowrap = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags." pre und nowrap funktionieren aber das normal irgendwie nicht edit Also, der Text wird jedes mal unter der Box ausgegeben wenn der Text breiter ist als die Box - da hilft auch kein <br> __________________

26.04.2005, 08:15	#5 (permalink)
Lima Registriert seit: 23.02.2003 Ort: Hamburg Alter: 38 Beiträge: 3.265	AW: Text in DIV-Box Gib dem <p> eine feste Breite ...

26.04.2005, 08:25	#6 (permalink)
Kompost Registriert seit: 25.10.2003 Beiträge: 8.502	AW: Text in DIV-Box Ich hab jetzt geschrieben: HTML-Code: <p class="content">Text<p> und in der CSS Datei HTML-Code: content { width: 100%; } Funktionier leider immernoch nicht __________________

26.04.2005, 09:12	#7 (permalink)
Kompost Registriert seit: 25.10.2003 Beiträge: 8.502	AW: Text in DIV-Box Ich hab jetzt in meinem CSS Dokument folgendes geändert: HTML-Code: .content { width: 420px; text-align: middle; } Das width ist jetzt nicht im % sondern mit px definiert. Jetzt funktioniert es zwar aber da die Bildschirmauflösung von User zu User variert wäre es viel praktischer wenn ich irgendwie angeben könnte das der width so brei sein soll wie mein Main dings: HTML-Code: div.main { height:100%; font:100% Trebuchet MS, Arial, sans-serif; float:left; padding-left:15px; white-space: pre-line; vertical-align: top; } __________________

26.04.2005, 12:24	#9 (permalink)
Kompost Registriert seit: 25.10.2003 Beiträge: 8.502	AW: Text in DIV-Box Danke für die HIlfe Es funktioniert jetzt __________________

27.04.2005, 10:23	#10 (permalink)
Dr. Doom Registriert seit: 20.11.2004 Beiträge: 59	AW: Text in DIV-Box hm, hatte das nen Grund, meinen Text zu benutzen?

27.04.2005, 11:50	#11 (permalink)
Kompost Registriert seit: 25.10.2003 Beiträge: 8.502	AW: Text in DIV-Box Ich hab einfach nen längeren Text zum testen gebraucht, da ist mir deiner in den Sinn gekommen __________________

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln