Guten Tag,
Ich möchte das hier hin bekommen
http://img5.fotos-hochladen.net/uploads/unbenanntguvj9n5f6k.png
Bis jetzt stehen die Nebenfächer und die Hauptfächer und der Strich in der Mitte ist noch gar nicht vorhanden.
Weiß jemand wie ich das hin bekommen könnte das Links Hauptfächer steht, in der Mitte ein Strich und rechts Nebenfächer?
Alle 3 sollten mittig sein.
Danke im Vorraus 
PS: Habe das bis jetzt gerade mit Paint gemacht ^-^
Hallo,
dann zeig mal deinen bisherigen Quelltext, oder sollen wir alles selbst tippen?
Weiß jemand wie ich das hin bekommen könnte das Links Hauptfächer steht, in der Mitte ein Strich und rechts Nebenfächer?
Es gibt verschiedene Möglichkeiten. Welche passt hängt von deinem bisherigen Quelltexst ab.
Alle 3 sollten mittig sein.
Das verstehe ich nicht. Horizontal oder vertikal?
Gruss
MrMurphy
[HTML]
Kann dir nur das hier geben 
Habe leider nicht mehr. Wäre nett wenn du mir was tippen könntest und das mit mittig vergiss das
Habe aber schon die Seite in 3 Teile eingeteilt hoffe du verstehst was ich meine in 3 teile eingeteilt
Also
[CODE].navilinks
{
width: 140px;
height: 1800px;
background-color: #E0E0E0;
color: #000000;
float: left;
padding: 5px;
}
.inhalt
{
text-algin: left;
width: 1010px;
height: 1800px;
background-color: #FFFFFF;
overflow: auto;
float: left;
padding: 10px;
}
.navirechts
{
width: 150px;
height: 1800px;
background-color: #FFFFFF;
color: #000000;
float: right;
}[/CODE]
Hallo,
ich habe dir mal ein Beispiel mit den zwei Spalten erstellt:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Zwei Spalten</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
width: 90%;
padding: 0;
margin: 1rem auto;
}
main {
padding: 1 rem;
}
main>* {
padding: 0 2rem;
}
main>:nth-child(1) {
border-right: 3px solid silver;
}
main>*>h2 {
color: blue;
}
main>* dt {
text-decoration: underline;
}
main>* dd {
margin-bottom: 0.6rem;
}
main {
display: flex;
}
main>* {
flex: 1;
}
}
</style>
</head>
<body>
<main>
<section>
<h2>Hauptfächer</h2>
<dl>
<dt>Betriebswirtschaftslehre</dt>
<dd>6 Arbeiten im Jahr</dd>
<dt>Deutsch</dt>
<dd>4 Arbeiten im Jahr</dd>
<dt>Englisch</dt>
<dd>4 Arbeiten im Jahr</dd>
<dt>Mathe</dt>
<dd>3 Arbeiten im Jahr</dd>
</dl>
</section>
<section>
<h2>Nebenfächer</h2>
<dl>
<dt>Büromanagement</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Gesamtwirtschaft</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Geschichte</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>IKT</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Religion</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Wirtschaftsinformatik</dt>
<dd>6 Arbeiten im Jahr. <br />Ihr arbeitet euch zu einem Programmierer an. Die ersten Schritte werdet ihr in EXCEL tätige. Danach kommen Datenbanken tran, wie sie überall zu finden sind wie z. B. bei Amazon. Falls ihr das abgearbeitet habt kommt HTML mit PHP. Und im zweiten Jahr witmet ihr euch nur noch den Programmieren.</dd>
</dl>
</section>
</main>
</body>
</html>Das kannst du dann ja in eine deiner drei Spalten einbauen.
Gruss
MrMurphy
Erstmal vielen Dank.
Habe noch was mit „
http://jsfiddle.net/kde7ta8q/2/
Wüssstest du wie ich das so schön hin bekomme?
Das ich links einfach alles hin schreiben kann und rechts?
Wie bekomme ich das hin das Nebenfächer auf der gleiche Höhe wie Hauptfächer anfängt
Hallo,
mit solchen veralteten Lösungen kenne ich mich nicht aus. Vielleicht findet sich ja jemand anders der dir helfen kann.
Gruss
MrMurphy
Da vergewaltigst Du das hr-Tag. Viel einfacher ist es, wenn Du einem der Container einen Rand gibst:
http://jsfiddle.net/Sempervivum/kde7ta8q/3/
Oder mit float/margin Layout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Arbeiten</title>
<style>
.links {
width:50%;
float:left;
}
.rechts {
margin-left:50%;
border-left:1px solid #000;
}
.rechts:after { /* somit ist die rechte spalte immer die längste */
content:"";
display:block;
clear:both;
}
h2 , dl {
padding:10px;
}
dt {
font-weight:bold;
padding:5px;
}
dd {
margin-left:20px;
}
dd:before {
content:"\2713 "; /* nachteil, wird vom screenreader mit vorgelesen */
padding-right:10px;
color:#f00;
}
h2 {
margin:0;
padding:10px;
}
</style>
</head>
<body>
<div class="links">
<h2>Hauptfächer</h2>
<dl>
<dt>Betriebswirtschaftslehre</dt>
<dd>6 Arbeiten im Jahr</dd>
<dt>Deutsch</dt>
<dd>4 Arbeiten im Jahr</dd>
<dt>Englisch</dt>
<dd>4 Arbeiten im Jahr</dd>
<dt>Mathe</dt>
<dd>3 Arbeiten im Jahr</dd>
</dl>
</div>
<div class="rechts">
<h2>Nebenfächer</h2>
<dl>
<dt>Büromanagement</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Gesamtwirtschaft</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Geschichte</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>IKT</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Religion</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Wirtschaftsinformatik</dt>
<dd>6 Arbeiten im Jahr. <br />Ihr arbeitet euch zu einem Programmierer an. Die ersten Schritte werdet ihr in EXCEL tätige. Danach kommen Datenbanken tran, wie sie überall zu finden sind wie z. B. bei Amazon. Falls ihr das abgearbeitet habt kommt HTML mit PHP. Und im zweiten Jahr witmet ihr euch nur noch den Programmieren.</dd>
</dl>
</div>
</body>
</html>