HTML Text schreibt rechts von der Website einfach weiter und macht keinen Break

Crageth

Ensign
Registriert
Sep. 2014
Beiträge
139
Vorsicht Anfänger :D

Erst zum Aufbau: Ich habe links eine Navigationsliste und rechts davon einen Text (Eine Historie, also Unmengen an Text)

Folgendes Problem:
An meinem Nebenbildschirm wird der Text, den ich geschrieben habe einfach ein noch mehrere Buchstaben nach dem Browserrand weitergeschrieben, anstatt automatisch einen Break zu machen. Auf meinem Hauptbildschirm passt das alles. Der Nebenbildschirm hat eine kleinere Auflösung als der Hauptbildschirm, allerdings ist der Browser momentan auf den kleineren maximiert.

Ich hab früher in der Schule mal gelernt, dass man den text irgendwie mit <p> und dann in css bearbeitet werden kann. Momentan habe ich den Text einfach nur ohne Befehl unter die Überschrift geschrieben und diesen in CSS auch nicht bearbeitet, weil ich befürchte, dass der Text dann an eine bestimmte Breite geheftet ist und dann genau dasselbe Problem auftreten würde.

Falls ich jetzt kein Detail vergessen habe hoffe ich auf schnelle Hilfe.
 
Code, wir brauchen Code!

Versuch mal die Taste F12 in den gängigen Browsern. Da kannst du dir alle HTML Elemente incl. der zugehörigen Eigenschaften anzeigen lassen.

Grundsätzlich gilt:
lern vorher HTML und CSS. Eine sehr sehr gute Anlaufstelle dafür ist http://www.codecademy.com/learn, beherrschen der englischen Sprache vorausgesetzt.
 
Das Ist meine Index, ein Beispiel wo das Problem auftritt und meine style.css
Dazu sage ich direkt, ich habe minimale Grundkenntnisse, aber bin noch ganz am anfang. Wie du am Inhalt der seite aber sehen wirst, ist es für einen Schützenverein und da gehen im jahr eh nur 3 Leute drauf xDD

Ich hoffe das hilft dir (und damit auch mir) weiter xD

P.S. Es kann natürlich sein, dass du Elemente findest, die inzwischen überflüssig sind oder einfach falsch oder doppelt sind, die ich aber nicht mehr gefunden habe


<!doctype html>

<html>

<head>
<title> BSV Batenbrock - Homepage</title>
<link rel="icon" href="wappen.png" type="image/x-icon">
</head>

<body background="xxxdp1.jpg" >

<header>
<link href="style.css" type="text/css" rel="stylesheet" />

<div id="header">
<div id="Ueberschrift">
Bürgerschützenverein <br />Bottrop-Batenbrock 1925 e.V.
</div>
<div id="wappen">
<img src="wappen.png" alt="BSV Batenbrock Wappen"/>
</div>
</div>
</header>


<br />





<div id="divseiteninhalt">
<div id="navlist">

<nav>
<ul>
<a href="index.html"><li>Startseite</li></a>
<a href="#"><li>Grundgedanke</li></a>
<a href="historie.html"><li> Historie</li></a>
<a href="majestaeten.html"><li>Majestäten</li></a>
<a href="satzung.html"><li>Satzung</li></a>
<a href="termine.html"><li>Termine</li></a>
<a href="training.html"><li>Training</li></a>
<a href="vereinsmeister.html"><li> Vereinsmeister</li></a>
<a href="vorstand.html"><li>Vorstand</li></a>
<a href="formulare.html"><li>Formulare</li></a>
<a href="fotos.html"><li>Fotos</li></a>
<a href="events.html"><li>Events</li></a>
<a href="links.html"><li>Links</li></a>
<a href="email.html"><li>Email-Adressen</li></a>
<a href="kontakt.html"><li>Kontaktadresse</li></a>
<a href="datenschutz.html"><li>Datenschutzrechtl. Hinweis</li></a>

</ul> <br />
<a href="https://www.facebook.com/BsvBottropBatenbrock1925Ev?fref=ts"><img id="facebook" src="facebook.png" /></a>
</nav>

</div>


<div id="seiteninhalt">
<h1 id="seitenueberschrift">Grundgedanke</h1><br />

<p>

Woher kommt eigentlich der Brauchtum rund um das Schützenfest? Wahrscheinlich liegt der Ursprung schon in vorchristlicher Zeit. Das Grundmotiv, das Schießen nach dem Vogel, existiert schon in germanischen Mythen und in den Märchen vieler Völker.<br /><br />


<h3>Warum die Schützen den Vogel vom Himmel holen</h3><br />
Woher kommt eigentlich Brauchtum und Schützenwesen?<br />

Parade und Vogelschießen, Gottesdienste und Königsball, das sind seit alters her feste Bestandteile der Schützenfeste. In fast jedem Dorf und jedem Stadtteil werden sie heute noch gefeiert. Woher kommt eigentlich dieses Brauchtum? Wahrscheinlich liegt der Ursprung schon in vorchristlicher Zeit. Das Grundmotiv, das schießen nach dem Vogel, existiert schon in germanischen Mythen und in den Märchen vieler Völker.<br /><br />

Mit dem Aufkommen des Christentums verloren diese heidnischen Mythen ihre Bedeutung, die Figuren aber blieben erhalten.<br /><br />

Erste Schützengesellschaften gab es schon im 11. Jahrhundert, ihr Ursprung liegt eindeutig in den Städten, die es gegen Angreifer zu verteidigen galt. Der Schützendienst in den Gilden und Bruderschaften wurde mehr und mehr zum Wehrdienst, bis der für jeden Bürger zur Pflicht wurde. Diese Bürgermilizen wurden nicht nur im Krieg eingesetzt - sie hatten auch bei Jahrmärkten, Prozessionen oder Hinrichtungen für Ordnung zu sorgen. Für diese Dienste bedankten sich die Städte, indem sie den Schützen besondere Rechte einräumten. Die Städte waren es auch, die sich für das Zustandekommen von Schiessspielen einsetzten. Von diesen "Freyschießen" im 15. Jahrhundert führt ein direkter Weg zu den heutigen Schützenfesten.<br /><br />

Aus der Zeit des "Siebenjährigen Krieges" und der nachfolgenden Jahre sind aus dem Bottroper Raum Schützenlisten überkommen, aus denen mit Leichtigkeit die alte Gruppenordnung zusammengestellt werden kann. Diese Liste sieht für das Jahr 1765 folgendermassen aus: Schützenkönig war Passmann, ihm zur Seite stand der Fähnrich Paus. Witte hatte die "Rute" (Vogel mit Stange) verfertigt, Unterberg versah den Dienst eines Tambours und Grabbock den eines Pfeifers.<br /><br />

Vorgänger des Schützenkönigs waren Storp, Pickenbrock und Emschermann. Als Königsknechte fungierten Reibrock und Gr. Holtfort. Als Baunboten sind bekannt Dörnemann, Sandkühler, Kremer, Lugge, Flötgen, Kruse und Hegermann. Der Schützenkönig befahligte vier Korparalschaften, und zwar die 1. Korporalschaft (Welheim) mit 66 Mann (ohne Chargen) unter Gr. Kraneburg, die 2. Korporalschaft (Schlangenholt) mit 16 Mann unter Vienken, die 3. Korporalschaft (Lehmkuhle) mit 50 Mann unter Schlüter und die 4. Korporalschaft (Dorf mit Fuhlenbrock) mit 50 Mann unter Lammert.<br /><br />

Die Bauernboten dienten innerhalb der Korporalschaften als Melder. Dorf mit Fuhlenbrock und Welheim hatten wegen ihrer Weiträumigkeit mehrere, Schlangenholt und Lehmkuhle je einen Boten. Aufgabe der Korporalschaften war nicht nur der Kampf um die Königswürde, bei Bedarf mussten sie durch "wehrfähige Söhne und Knechte" aufgefüllt werden und wurden dann von der Obrigkeit entsprechend eingesetzt.<br /><br />

In dieser Zeit entstand übrigens auch die Biermarke. Wenn die Korporalschaften ihre Schützenfeste feierten, kam immer die ganze Nachbarschaft und trank das Bier weg. Um sich davor zu schützen, wurden die ersten Biermarken an die Mitglieder verteilt, damit der (Gratis-) Gerstensaft nicht mehr die falschen Kehlen herunterrinnen konnte.<br /><br />

Viele der oben genannten Namen sind heute noch in Flur- und Strassenbezeichnungen und im Adressbuch Bottrops zu finden, und mit der Korporalschaft Schlangenholt haben wir sicher den Urahn des Bürgerschützenvereins Bottrop-Eigen e.V. endeckt.<br /><br />

Von den militärischen Zwängen haben sich die heutigen Schützenvereine zum Glück befreien können. Auch der Drill, wie er in den Gründerjahren üblich war, hat sich als entbehrlich erwiesen. Es reicht gerade noch zu einem Vorbeimarsch mit Musik. Erhalten geblieben sind uns dagegen die in der Gründungsversammlung des BSV Eigen festgeschriebenen Ziele: Pflege des Brauchtums, Liebe zur Heimat, Geselligkeit und Kameradschaft, körperliche Ertüchtigung und sportlicher Wettkampf.<br /><br />

Wie diese Ziele heute umgesetzt werden, darüber berichten die Kompanieführer an anderer Stelle.<br /><br />

<h6>Quelle: Verg. WAZ Mitte 1996 </h6>


</p>

</div>


</div>

</body>

</html>


<!doctype html>

<html>

<head>
<title> BSV Batenbrock - Homepage</title>
<link rel="icon" href="wappen.png" type="image/x-icon">
</head>

<body background="xxxdp1.jpg" >

<header>
<link href="style.css" type="text/css" rel="stylesheet" />

<div id="header">
<div id="Ueberschrift">
Bürgerschützenverein <br />Bottrop-Batenbrock 1925 e.V.
</div>
<div id="social">


</div>
<div id="wappen">
<img src="wappen.png" alt="BSV Batenbrock Wappen"/>
</div>
</div>
</header>

<br />



<div id="divseiteninhalt">
<div id="navlist">

<nav>
<ul>
<a href="#"><li>Startseite</li></a>
<a href="grundgedanke.html"><li>Grundgedanke</li></a>
<a href="historie.html"><li> Historie</li></a>
<a href="majestaeten.html"><li>Majestäten</li></a>
<a href="satzung.html"><li>Satzung</li></a>
<a href="termine.html"><li>Termine</li></a>
<a href="training.html"><li>Training</li></a>
<a href="vereinsmeister.html"><li> Vereinsmeister</li></a>
<a href="vorstand.html"><li>Vorstand</li></a>
<a href="formulare.html"><li>Formulare</li></a>
<a href="fotos.html"><li>Fotos</li></a>
<a href="events.html"><li>Events</li></a>
<a href="links.html"><li>Links</li></a>
<a href="email.html"><li>Email-Adressen</li></a>
<a href="kontakt.html"><li>Kontaktadresse</li></a>
<a href="datenschutz.html"><li>Datenschutzrechtl. Hinweis</li></a>

</ul> <br />
<a href="https://www.facebook.com/BsvBottropBatenbrock1925Ev?fref=ts"><img id="facebook" src="facebook.png" /></a>
</nav>

</div>


<div id="seiteninhalt">
<img id="willkommen" src="willkommen.png" />
<br /><br /><br />

<img id="verein2014" src="verein2014.jpg" /><br />
<p>
<font size="-2">F&uuml;r eine gr&ouml;&szlig;ere Ansicht, bitte Rechtsklick auf das Bild und dann "Grafik anzeigen".</font></p><br /><br />

<p>
<h3>Bürgerschützenvereine im Ortsschützenbund Alt-Bottrop:</h3><br />

BSV Andreas Hofer<br />
BSV Batenbrock 1925<br />
BSV Boy<br />
BSV Eigen<br />
BSV Fuhlenbrock<br />
BSV Lehmkuhle-Ebel<br />
BSV Stadtmitte<br />
BSV Vonderort<br />
BSV Welheim<br /><br />


<h3>Bürgerschützenverein in Neu-Bottrop:</h3><br />

BSV Grafenwald<br /><br />


<h3>Schützengesellschaften in Bottrop:</h3><br />

Alte Allgemeine Schützengesellschaft<br />
Schützengesellschaft Kirchhellen<br /><br /><br />
</p>
</div>


</div>

</body>

</html>

* {
padding: 0px;
margin: 0px;
font-family: Arial, Verdana, sans-serif;
}

html {
overflow-y: scroll;
}

header {
height: 115px;
background-color: #008000;
border-radius: 10px;
box-shadow: black 1px 1px 4px;
}

header h1 {
font-size: 20pt;
padding-left: 20px;
padding-top: 10px;
text-shadow: white 1px 1px 4px;
}

body {
width: 1500px;
background-color: white;
margin: 25px auto;
}

#Ueberschrift {
float: left;
width: 800px;
font-size: 30px;
padding-top: 20px;
padding-left: 100px;
text-shadow: white 1px 1px 4px;
}

!#wappen {
float: right;
width: 200px;
}

header img {
width: 130px;
}

#facebook {
width: 100px;
}

#divseiteninhalt {
width: 1300px;
}

#navlist {
border: gray 4px groove;
padding: 5px;
text-align: left;
margin-bottom: 25px;
margin-right: 25px;
float: left;
width: 165px;
box-shadow: black 1px 1px 4px;
}

nav ul {
list-style-type: none;
padding: 3px;
}

nav li {
margin-right: 15px;
background-color: black;
color: white;
font-size: 12pt;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
border: #c0c0c0 3px outset;
border-radius: 5px;
font-wheight: bold;
cursor: default;
}

nav a {
text-decoration: none;
}

nav li:hover {
border: #008000 3px inset;
}

nav a:hover {
color: #008000;
text-shadow: none;
}

#seiteninhalt {
float: right;
width: 900px;
}

#willkommen {
width: 500px;
}

#verein2014 {
width: 600px;
padding-top: 20px;
padding-bottom: 20px;
}

#vereinsfotoueberschrift {
text-shadow: green 1px 1px 4px;
}

h3 {
text-shadow: green 1px 1px 4px;
}

#seitenueberschrift {
text-shadow: green 1px 1px 4px;
}



Edit: Vielen Dank für die Website, ich werd mich da in der nächsten Zeit mal informieren, es kann ja niemals schaden, dieses Wissen zu haben
 
http://validator.w3.org
SChick den Code mal da durch, das Ding brüllt doch Unmengen Fehler heraus... udn einige meldet es nicht, die sind aber trotzdem da.

HTML ist eine semantische Sprache. Du kannst nicht einfach blind Elemente zusammen werfen und hoffen, dass da was richtiges heraus kommt. <p> deklariert z.B. einen Absatz. <p> darf keine <h*>-Elemente enthalten. <br/>-Spam für Umbrüche innerhalb eines <p> sind Bullshit. Beende den Absatz korrekt, wenn du den Absatz beenden willst.

Und was ist denn bitte <div id="divseiteninhalt">? Wozu gibt es semantische HTML5-Elemente wie <article> und <section>? Wozu gibt es ARIA-Roles? Und wenn du schon solche IDs verwendest, dann sorg dafür, dass sie insgesamt beschreibender sind.


Was deine CSS-Fehler angeht: Jeder moderne Browser hat Entwicklerwerkzeuge, mit denen du das Verhalten deines Codes überprüfen kannst. Chrome hat meiner Meinung nach die besten Werkzeuge. REchtsklick -> Element untersuchen
 
Ich danke euch, meine Website nimmt langsam gestalt an

Eine frage noch: Wie gestaltet ihr einen Textblock in verschiedene Abschnitte? benutzt ihr einfach die Break funktion für einen Absatz oder macht ihr das mit verschiedene <p> für jeden Absatz... oder wie stellt ihr das an??? Es geht nur darum, Absätze und Leerzeilen einzubringen
 
Zurück
Oben