CSS Problem

EraZeR

EraZeR

Reisender
Also ich habe ein Layout in Css geschrieben , dass aus 5 div conrainern besteht. 1 container links für die Navigation. Einen rechts für News. Einen in der Mitte für den Inhalt einen oben für die Überschrift. Und der 5 fasst alle in einem zusammen. Jetzt habe ich das Problem, dass wenn ich den rechten Div etwas reinschreibe die Schrift über den Rand geht. Woran liegt das?
 
Ohne den Code zu sehen, können wir da wohl nur unsere Kristallkugel befragen und die hab ich leider in Cyrodiil stehen lassen :p
 
Und benutzt am besten noch deine MS-Paint-Skills, um zu zeigen, wie es aussehen soll und wie es aussieht, damit man das nicht erst testen muss ;)
 
Hier schon mal der Code:
Code: 
* {
    padding: 0px;
    margin: 0px;
}

body {
    margin: 5px;
    padding: 5px;
    border: solid grey;
    background-color: Green;
}
#container {
    margin: 5px;
    padding: 5px;
    border: solid black;
}
#navigation {
    background-color: White;
    border: solid aqua;
    padding: 5px;
    float: left;
    margin: 5px;
    width: 80px;
}
.navi {
    list-style-type: none;
}
#news {
    float: right;
    background-color: Blue;
    border: solid black;
    width: 150px;
    height: auto;
    padding: 2px;
    margin: 5px;
}
#impressum {
    clear: both;
    background-color: Gray;
    border: solid black;
    text-align: center;
}
#head {
    background-color: Olive;
    border: solid black;
    text-align: center;
    margin: 10px;
}
#inhalt {
    margin: 20px 200px;
    padding: 5px;
    border: solid black;
}
Das Problem bezieht sich auf das div-element mit der id News. Ich habe dem Element eine feste breite verpasst und die Höhe auf auto gestellt. Dadürch müsste es ja automatische zeilenumbrüche geben wenn der Text eine Breite von 150px erreicht und die Höhe müsste automatisch mitwachsen. Aber mein Dummytext den ich eigetragen habe läuft über das Element hinaus und zerstört das Layout und den Text.
 
Könntest du vielleicht nicht nur die CSS Datei sondern auch die HTML Datei posten und am Besten auch gleich die Addresse zu einem hochgeladenen Beispiel damit man das gleich sehen kann.

Ohne nun den CSS Code genau angeschaut zu haben da ich eben keine Lust habe zu raten wie dein HTML Code aussehen könnte mal eine Frage sieht dein Dummytext vielleicht so aus:
iogrsjfdmvherdjnfsgbijiodflghjmnodltfsgbjnotdslgb9otudgfhjnbg
Oder so:
fjhg fsogvhj ifs fsgvhjosf gvjfigv sydfgoi

Denn im ersten Fall ist die Darstellung korrekt, da nur zwischen 2 Worten und nicht innerhalb eines Wortes umbrochen wird.
 
Um das Element auf der rechten Seite zu positionieren.
HTML-Code:

Code: 
<?xml version="1.0"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmnls="http://www.w3c.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<link rel="stylesheet" type="text/css" href="./stylesheets/layout_screen_website01.css" />
<!-- [if] IE -->
<link rel="stylesheet" type="text/css" href="./stylesheets/layout_IE.css" />
<!-- [endif] -->
<title>Radiergummi-Net -- Hauptseite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container"> <!-- Container auf -->
<div id="head"> <!-- Head auf -->
<h1>Beispiel &Uuml;berschrift</h1>
<p>Beispieltext f&uuml;r dien &Uuml;berschrift</p>
</div><!-- Head zu -->
<div id="navigation"> <!-- Navigation auf -->
<ul class="navi">
<li><a href=":/bla.html"></a></li>
<li><a href="./bla.html"></a></li>
<li><a href="./bla.html"></a></li>
<li><a href="./bla.html></a></li>
<li><a href="./bla.html"></a></li>
<li><a href="./bla.html"></a></li>
<li><a href="./bla.html"></a></li>
<li><a href="./bla.html"></a></li>
</ul>
</div><!-- Navigation zu -->
<div id="news"> <!-- News auf -->
BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla
</div><!-- News zu -->
<div id="inhalt"> <!-- Inhalt auf -->
<h3>Beispiel&uuml; f&uuml;r den Inhalt</h3>
<p>Bla Bla BlaBlaBlaBlaBlaBlaBlaBla
BlaBlaBla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBla
BlaBlaBla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBla
BlaBlaBla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBla
</p>
</div><!-- Inhalt zu -->
<div id="impressum"> <!-- Impressum auf -->
<p>blablablablablablablablabla
blablablablablablablabla
blablablablablablablablablabla
blablablablablablablablablablablabla
blabla</p>
</div><!-- Impressum zu -->
</div><!-- Container zu -->
</body>
</html>
 
Da tut doch alles wie es soll.
Und mit meiner Annahme lag ich richtig.
Mach mal Leerzeichen in den Text bei den News! Denn das Problem ist dass die Wörter länger sind als das gesamte Kästchen und das Verhalten ist vollkommen normal, denn es wird zwischen Wörtern nicht in Wörtern umbrochen und mir ist nicht bekannt dass man einen Browser per CSS zur Silbentrennung oder sonstigem bringen kann... (na gut mit einer Skriptsprache ginge das noch wäre aber nicht so toll.)

Das selbe Problem hast du nicht nur bei deinem News Div sondern genauso bei jedem anderen Div, schau mal selbst Scharesoft hat das Problem:
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla

Ach und wozu benötigst du den Container Div? Schmeis den raus und benutz Body, denn gerade dieses Tag erfüllt genau den Sinn deines Container Divs!

Edit: Ok Scharesoft hat das Problem nicht aber das liegt daran, dass per Skript ab einer gewissen Anzahl von Buchstaben einfach ein Leerzeichen eingefügt wird (sicher Serverseitig per PHP), ich habe es ohne Leerzeichen eingegeben.

Außerdem gibts bei deiner Seite eher andere Probleme (von der Positionierung und den Größen her) ich hoffe du weist das, wenn nicht teste es mal mit anderen Browsern (sowohl beim FF3 als auch IE7 gibts Fehler).

Wenn du dennoch die überlangen Wörter (nicht nur überlangen Text) irgendwie beeinflußen willst gibts da die Eigenschaften overflow, max-width (width tuts auch) und max-height.
 
Zuletzt bearbeitet von einem Moderator:
Ähm noch ein Problem:
In meiner CSS Datei steht folgendens:
CSS-Code:
Code: 
#head>h1 {
   background: url:(header_web.gif) no-repeat top center; 
   display: none;
}
HTML-Code:
Code: 
.....
<div id="head">
<h1>Die Überschrift</h1>
</div>
....
Eigentlich müsste dann statt der Überschrift ein Bild angezeigt werden aber es wir kein Bild angezeigt.
 
Erstens heißt es:
Code: 
url(header_web.gif)
und nicht
Code: 
url:(header_web.gif)
!

Zweitens müßte nicht nur kein Bild angezeigt werden sondern gar nix, denn mit display: none blendest du das gesamte Objekt aus! Der Hintergrund ist Teil des Objekts der auch ausgeblendet wird!

Wenn du aber das display: none wegmachst, müsstest du sowohl die Überschrift (Text) als auch den Hintergrund angezeigt bekommen!
 
Zuletzt bearbeitet von einem Moderator:
Hast du meinen Post gelesen? Das war nicht der einzigste Fehler!

Ach Groß und Kleinschreibung immer beachten! Auch wenn es im IE unter Windows auf nem Windowsserver anders funktionieren mag. Und so ohne Pfadangabe muss sich das Bild glaube ich auch im selben Verzeichnis wie die HTML Datei befinden.
 
Zuletzt bearbeitet von einem Moderator:
Ich habe mal anhand des Codes den du hier gepostet hast kurz eine Testdatei erstellt:
HTML: 
<html>
	<head>
		<title>Test</title>

		<style type="text/css">
			#head>h1 {
				background: url(test.png) no-repeat top center; 
			}
		</style>
	</head>

	<body>
		<div id="head">
			<h1>Die Überschrift</h1>
		</div>
	</body>
</html>
Und bei mir scheint das ganze zu funktionieren.
Also muss der Fehler wahrscheinlich wo anders liegen.
Ist es möglich dass du die Angabe für die Überschrift irgendwo wieder überschreibst, ggf. direkt am Objekt selbst mit einem Style Attribut?
Funktioniert es wenn du das:
#head>h1 {
durch das ersetzt:
#head h1 {
Weichen deine Dateien von der obigen Datei in wesentlichen Punkten ab?
Wie bindest du dein Stylesheet ein (direkt in der HTML Datei, per Metatag)?
Poste ggf. wieder beide Dateien.
 
Zuletzt bearbeitet von einem Moderator:
HTML-Code
Code: 
<?xml version="1.0"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmnls="http://www.w3c.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<link rel="stylesheet" type="text/css" href="./stylesheets/layout_screen_website01.css" />
<!-- [if] IE -->
<link rel="stylesheet" type="text/css" href="./stylesheets/layout_IE.css" />
<!-- [endif] -->
<title>Radiergummi-Net -- Hauptseite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container"> <!-- Container auf -->
<div id="head" title="Radiergummi - NET"> <!-- Head auf -->
    <h1>Radiergummi - Net</h1>
</div><!-- Head zu -->
<div id="navigation"> <!-- Navigation auf -->
<ul class="navi">
    <li><a href="./index.html">Hauptseite</a></li>
    <li><a href="./mod_projekts.html">Mod - Projekte</a></li>
    <li><a href="./mod_preview.html">Mod - Previews</a></li>
    <li><a href="./mod_test.html">Mod - Tests</a></li>
    <li><a href="./games_test.html">Spiele - Tests</a></li>
    <li><a href="./tutorials.html">Tutorials</a></li>
    <li><a href="./kontak.html">Kontakt</a></li>
    <li><a href="./impressum.html">Impressum</a></li>
</ul>
</div><!-- Navigation zu -->
<div id="news"> <!-- News auf -->
    BlaBl aBlaBl a BlaBl aBla Bla Bla BlaBla BlaB laB laB laB laBla
</div><!-- News zu -->
<div id="inhalt"> <!-- Inhalt auf -->
<h3>Beispiel&uuml; f&uuml;r den Inhalt</h3>
<p>Bla Bla BlaBlaBlaBlaBlaBlaBlaBla
Bla Bla Bla
Bla Bla Bla Bla Bla Bla
BlaBl aB laB laB laBl aBl aBla
Bl a Bla Bla
BlaBlaBlaBlaBlaBla
BlaBlaBlaBlaBlaBlaBlaBla
Bla BlaBla
BlaBlaBlaBlaBlaBla
BlaB la BlaBlaBla Bla BlaBl aBlaBl aBla
BlaBlaBlaBlaBlaBla
Bla  BlaBl aBl aBl aBlaBla BlaBlaBlaB laB laBlaBla
Bl aBlaBl aBlaBlaBla
BlaBlaBl aBlaBlaB laBla BlaBlaB laBla
BlaBlaB laBlaBlaBla
B laBl aBlaBl aBlaBlaBlaBlaBlaBlaBla
BlaBlaBlaB laBlaBla 
Bla Bla BlaBlaB laBla BlaB laBla BlaB la
BlaBl BlaBlaBlaBlaBlaBlaBlaBl aBlaBlaBla
BlaBlaBlaB laBlaBla
BlaBla BlaB laBlaBlaB laBlaBlaBl aBla
BlaBl aBlaBlaB laBla
BlaB laBlaBla BlaBlaBl aBla BlaBl aBla
B laBlaB laBla BlaBla
Bla BlaBl aBlaB laBlaBlaBla
</p>
</div><!-- Inhalt zu -->
<div id="impressum"> <!-- Impressum auf -->
<p>blab labla blab labla bla blab la
blabla bla blablablablabla
blabl ablabl abl ablabl ablablabla
bla b labla blab labl ablab lablablablabla
blabla</p>
</div><!-- Impressum zu -->
</div><!-- Container zu -->
</body>
</html>
CSS-Code:
Code: 
* {
    padding: 0px;
    margin: 0px;
}

body {
    background-color: Green;
    background-image: url(../Paper0020_L.jpg);
}
#container {
    margin: 25px;
    padding: 10px;
    border: solid black;
}
#navigation {
    background-color: White;
    border: solid aqua;
    padding: 5px;
    float: left;
    margin: 5px;
    width: 80px;
}
.navi {
    list-style-type: none;
}
#news {
    float: right;
    background-color: Blue;
    border: solid black;
    width: 150px;
    height: auto;
    padding: 2px;
    margin: 5px;
}
#impressum {
    clear: both;
    background-color: Gray;
    border: solid black;
    text-align: center;
}
#head {
    border: solid black;
    text-align: center;
    margin: 10px;
}
#inhalt {
    margin: 20px 200px;
    padding: 5px;
    border: solid black;
}
#inhalt>h3 {
    text-align: center;
}
#kopf>h1 {
    background-image: url(../header_erazer_net2.gif) no-repeat top center;
}
#inhalt>p {
    text-indent: 25px;
    background: spacer.gif no-repeat fixed;
}
 
HTML: 
<div id="head" title="Radiergummi - NET"> <!-- Head auf -->
    <h1>Radiergummi - Net</h1>
</div><!-- Head zu -->
Code: 
#kopf>h1 {
    background-image: url(../header_erazer_net2.gif) no-repeat top center;
}
Das kann zusammen nix werden, der Computer ist noch nicht in der Lage automatisch Deutsch in Englisch und oder umgekehrt umzuwandeln! Also entweder du benutzt beides mal head oder kopf aber nicht gemischt, weil das sonst zwei unterschiedliche Dinge sind.

Du solltest auch falls du mehr als nur das Bild angibst "background" und nicht "background-image" nutzen.

Und das Bild "header_erazer_net2.gif" muss sich direkt über dem Ordner stylesheets befinden!

Außerdem kann es auch nicht gehen falls das Bild gar kein GIF ist! Also falls das z.B. ein PNG oder JPG oder sonst was ist und lediglich die Dateiendung in GIF umgeändert wurde wird der Browser es wahrscheinlich nicht anzeigen!

Und noch ein kleiner Tipp: Verwende wenn möglich KEINE Gifs! Für alles (ausser Animation) sind PNGs deutlich besser geeignet. Wenn du Photoshop nutzt muss ich aber dazu sagen dass dieses Programm einfach zu blöd für PNGs ist, GIMP ist für PNGs deutlich besser geeignet. Es gibt auch unzählige Tools mit denen man die macken von Photoshop ausbügeln kann aber naja.

Falls du irgendwelche Bedenken hast PNGs zu verwenden, du wissen willst wieso diese besser sind oder du einfach nur von irgendwelchen Leuten gehört haben solltest GIFs wären besser kann ich dir ruhig das ganze erklären aber das würde länger dauern. Und nein selbst der IE 6 unterstützt PNGs, zumindest soweit, dass man (bis auf Animationen) gänzlich auf GIFs verzichten kann.

Das was Jubidu sagt solltest du auch beachten, ggf. überschreibst du die Hintergrundbildangabe wieder. Schau dir die Teile aus dem Link ganz genau an und vergleich sie mit deinen.

Code: 
<?xml version="1.0"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Das mit der XML Versionsangabe ist nicht unbedingt die Beste Idee, da (wiedermal) der IE (Version 6) Probleme damit macht. Und zwar wenn nur das geringste vor dem DOCTYPE steht schaltet er vom Standardkonformen Modus in den Quirksmodus was total falsch ist. Lass es deshalb einfach weg. Siehe dazu: http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform

Und was du auf jedenfall tun solltest: Gewöhn dir eine vernünftige Einrückung an, das ist ja grausam! (Bis man da mal durchblickt)
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

L
[HTML/CSS] CSS-Problem(e)
Antworten
13
Aufrufe
1K
PC- und Technik-Forum
Londarus Trentos
L
Soulpepper
CSS "Boxen" Problem
Antworten
0
Aufrufe
531
PC- und Technik-Forum
Soulpepper
Soulpepper
Jim-Panse
Fehler bei einer Seite mit Tabelle
Antworten
2
Aufrufe
747
PC- und Technik-Forum
Jim-Panse
Jim-Panse
Sagantor
[CCS] Counter Strike Source Quakesounds im Offlinemodus
Antworten
0
Aufrufe
1K
Andere Spiele
Sagantor
Sagantor
monkey2175
[Mod-Anfrage] Grosses Haus
Antworten
11
Aufrufe
2K
[Obl] Modideen und -suche
White Messiah
White Messiah
Oben Unten
Zurück