• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seite Teilen

kaepten

kaepten

Mitglied
Guten Tag,

Ich möchte das hier hin bekommen
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 ^-^
 
Werbung:
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?
Zum Vergrößern anklicken....

Es gibt verschiedene Möglichkeiten. Welche passt hängt von deinem bisherigen Quelltexst ab.

Alle 3 sollten mittig sein.
Zum Vergrößern anklicken....

Das verstehe ich nicht. Horizontal oder vertikal?

Gruss

MrMurphy
 
HTML: 
<h3> Hautpfächer </h3>
<a id="haupt" </a>
</br>
Betriebswirtschaftslehre
<a id="bwl" </a>
</br>
6. Arbeiten im Jahr.
</br>
Deutsch
</br>
4. Arbeiten im Jahr.
</br>
Englisch
</br>
4. Arbeiten im Jahr.
</br>
Mathe
</br>
3. Arbeiten im Jahr.
</br>


<h3>Nebenfächer</h3>
<a id="neben" </a>
</br>
Büromangment
</br>
2. Arbeiten im Jahr.
</br>
Gesamtwirtschaft
</br>
2. Arbeiten im Jahr.
</br>
Geschichte
</br>
2. Arbeiten im Jahr.
</br>
IKT
</br>
2. Arbeiten im Jahr.
</br>
Religon
</br>
2. Arbeiten im Jahr.
</br>
Wirtschaftsinformatik
</br>
<a id="wi" </a>
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 sie 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.
6. Arbeiten im Jahr.

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;
       }
 
Werbung:
Hallo,

ich habe dir mal ein Beispiel mit den zwei Spalten erstellt:

Code: 
<!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 "<hr>" entdeckt.

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
 
Werbung:
Oder mit float/margin Layout.
Code: 
<!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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben