[nextuser]

Hallo Leute,

ich habe ein Problem mit Margin-Top.
Ich habe einen Main-Bereich, der wie folgt aussieht:

<main>
     <header>
          <nav>
               <a href="home.php" id="menu_home"></a>
          </nav>
     </header>
     <aside>
          ...
     </aside>
     <article>
          ...
     </article>
</main>

Jetzt möchte ich den Article-Bereich mit einem Margin-top von 50 Pixel versehen. Doch egal, wie viel ich eingebe, Margin-Top funktioniert nicht.
Ich weiss auch schon wieso. Im Netz habe ich ähnliche Probleme gefunden und dort hieß es, das der Main-Bereich keinen wirklichen Inhalt hat.
Wenn ich da einen Buchstaben oder sonstwas eingebe, so funktioniert Margin-Top einwandfrei.
Jetzt ist es bei mir so, das im Header- und Asidebereich nur Links mit einer ID sind, wodurch ich Ihnen mit CSS die Bilder zuweise, um den Status(Normal, Hover) in nur einer Grafik festhalten zu können.

Wisst Ihr, wie ich das Problem lösen kann?
Hier noch die CSS:

main
{
	width: 1400px;
	height: 980px;
	text-align: center;
	margin: 0px auto;
	background: url(img/main/Main_BG.png) no-repeat;
}
header
{
	width: 750px;
	height: 50px;
	float: right;
	cursor: pointer;
}
aside
{
	clear: right;
	float: left;
	text-align: left;
	width: 290px;
	height: 930px;
}
article
{
	width: 1060px;
	height: 850px;
	margin-top: 50px;
	text-align: center;
	overflow: auto;
}

[MrMurphy]

Hallo

Aus deiner Anfrage geht leider nicht hervor was du im Endeffekt erreichen willst.

Leere Container und Elemente verhalten sich anders als gefüllte, das ist richtig.

Die Höhe von Containern und Elementen wird von deren Inhalt bestimmt. Deshalb gilt es als schlechtes Vorgehen, Containern und Elementen eine Höhe zu geben. Grade Anfänger haben meist keine Vorstellung welche Probleme überflüssige height-Angaben nach sich ziehen.

Zudem spielen verschiedene CSS-Eigenschaften zusammen oder wirken aufeinander ein. So zum Beispiel margin, float und overflow. Um das zu erklären sind ganze Buchkapitel geschrieben worden, das überschreitet die Möglichkeiten eines Forums. Wenn du das overflow entfernst funktioniert margin-top. Deine Probleme sind damit aber wahrscheinlich noch nicht gelöst.

Wenn ich wüßte was du erreichen willst könnte ich dir wahrscheinlich eine Vorlage erstellen. Wobei ich dann wahrscheinlich einige aktuellere und geeignetere CSS-Angaben verwenden werde.

Zudem legt dein HTML-Quelltext die Vermutung nahe, dass du das main-Element falsch verwendest. Das ist kein Ersatz für den früher gebräuchlichen wrapper. Ein wrapper ist mit aktuellem HTML in der Regel überflüssig. Wenn du trotzdem einen verwenden möchtest ist dafür nach wie vor das div das geeignete Element.

Also beschreibe bitte genauer was du erreichen möchtest.

Am besten wäre natürlich ein Link zu deiner Seite, weil wir zum Beispiel keinen Zugriff auf deine Grafiken haben und so zum Beispiel nicht wissen können, wie die Seite mit dem background-image aussieht.

Gruss

MrMurphy

[nextuser]

Zitat von MrMurphy

Die Höhe von Containern und Elementen wird von deren Inhalt bestimmt. Deshalb gilt es als schlechtes Vorgehen, Containern und Elementen eine Höhe zu geben. Grade Anfänger haben meist keine Vorstellung welche Probleme überflüssige height-Angaben nach sich ziehen.

Ja, du hast recht. Aber die Box, um die es geht soll eine feste Höhe haben und der Inhalt soll gescrollt werden. Den anderen Boxen habe ich nur eine
feste Höhe gegeben, um es beim Testen mit border besser erkennen zu können.

Zitat von MrMurphy

Wenn ich wüßte was du erreichen willst könnte ich dir wahrscheinlich eine Vorlage erstellen. Wobei ich dann wahrscheinlich einige aktuellere und geeignetere CSS-Angaben verwenden werde.

Es geht mir lediglich um die Orangene Box, welche ich mit einem Margin-Top versehen möchte.
Ich habe es momentan so:

<div id="site">
     <header>
          <nav>
               <a href="../../index.php" id="menu_home"></a>
          </nav>
     </header>
     <aside>
          ...
     </aside>
     <main>
          <article>
               ...
          </article>
     </main>
</div>

Die gemeinte Box wird jetzt durch das Main-Tag beschrieben. Der div stellt den Main-Bereich(Weiß) dar. Jetzt bestehen die Bereiche "header" & "aside"
ja nur aus einer Navigation. Wie oben zu sehen, mache ich das mit einem Link und einer ID, um die Grafik mit CSS zu laden. Wenn ich beim div einen Buchstaben eingebe, so funktioniert Margin-Top("site" hat sozusagen Inhalt).
Das ist mein Problem. Entweder ich finde eine Lösung, oder ich muss diese Box mit position:absolute platzieren.

Hast du einen Vorschlag?

Zitat von MrMurphy

Zudem legt dein HTML-Quelltext die Vermutung nahe, dass du das main-Element falsch verwendest. Das ist kein Ersatz für den früher gebräuchlichen wrapper. Ein wrapper ist mit aktuellem HTML in der Regel überflüssig. Wenn du trotzdem einen verwenden möchtest ist dafür nach wie vor das div das geeignete Element.

Ja, auch da hast du recht. Ich habe mich jetzt mal bischen in den Main-Tag eingelesen und habs auch erkannt, das es dazu da ist, lediglich den eigentlichen Inhaltsabschnitt zu beschreiben. Sowas wie Menü, Seitenleiste und Footer gehören natürlich nicht da rein.

Zitat von MrMurphy

Am besten wäre natürlich ein Link zu deiner Seite, weil wir zum Beispiel keinen Zugriff auf deine Grafiken haben und so zum Beispiel nicht wissen können, wie die Seite mit dem background-image aussieht.

Das geht leider schlecht, da ich die Seite grad erst am erstellen bin. Ist noch nichts online, daher auch die Grafik.

[MrMurphy]

Hallo

Ich bezweifele zwar dass du mit deinen Vorstellungen auf Dauer glücklich werden wirst, aber genug der Warnungen.

Für das Grundlayout interessieren mich zunächst nur die dafür notwendigen Container, füllen kannst du sie hinterher. Also

   <div class="site cf">
      <header>
      </header>
      <aside>
      </aside>
      <main>
      </main>
   </div>

Die CSS-Angaben können natürlich von dir angepasst werden, zum Beispiel die Farben. Bei den Größenangaben musst du darauf achten dass sie zusammen passen.

Das CSS für Größen und Farben.

.site {
   /*green*/
   background-color: hsla(120, 100%, 25%, 1);
   width: 1400px;
   height: 980px;
   margin: 0px auto;
}
header {
   /*blue*/
   background-color: hsla(240, 100%, 50%, 1);
   width: 750px;
   height: 50px;
}
aside {
   /*red*/
   background-color: hsla(0, 100%, 50%, 1);
   width: 340px;
   height: 850px;
}
main {
   /*gold*/
   background-color: hsla(51, 100%, 50%, 1);
   width: 1060px;
   height: 850px;
}

Und das CSS für die Anordnung der Elemente mit float:

/* Clearfix - Micro-Clearfix-Hack */
.cf::before,
.cf::after {
   content: " "; /*Leerstelle ist wichtig*/
   display: table;
}
.cf::after {
   clear: both;
}
.site {
   overflow: hidden;
}
header {
   margin-left: 650px;
}
aside {
   float: left;
}
main {
   float: left;
   overflow: auto;
   margin-top: 50px;
}

Eine komplette Beispielseite:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Float Problem 03</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
      }
   }

   @media all {
      .site {
         /*green*/
         background-color: hsla(120, 100%, 25%, 1);
         width: 1400px;
         height: 980px;
         margin: 0px auto;
      }
      header {
         /*blue*/
         background-color: hsla(240, 100%, 50%, 1);
         width: 750px;
         height: 50px;
      }
      aside {
         /*red*/
         background-color: hsla(0, 100%, 50%, 1);
         width: 340px;
         height: 850px;
      }
      main {
         /*gold*/
         background-color: hsla(51, 100%, 50%, 1);
         width: 1060px;
         height: 850px;
      }
   }

   /*Float Stuff*/
   @media all {
      /* Clearfix - Micro-Clearfix-Hack */
      .cf::before,
      .cf::after {
         content: " "; /*Leerstelle ist wichtig*/
         display: table;
      }
      .cf::after {
         clear: both;
      }
      .site {
         overflow: hidden;
      }
      header {
         margin-left: 650px;
      }
      aside {
         float: left;
      }
      main {
         float: left;
         overflow: auto;
         margin-top: 50px;
      }
   }

   </style>
</head>
<body>
   <div class="site cf">
      <header>
      </header>
      <aside>
      </aside>
      <main>
      </main>
   </div>
</body>
</html>

Gruss

MrMurphy

[nextuser]

Vielen Dank für deine ausfürliche Antwort. Ich werd sie mir mal genauer anschauen.

Zitat von MrMurphy

Ich bezweifele zwar dass du mit deinen Vorstellungen auf Dauer glücklich werden wirst, aber genug der Warnungen.

Was genau meinst du mit meinen "Vorstellungen", mit denen ich nicht glücklich werden sollte.

Kann bei header nicht auch float:right stehen, oder führt das auch zu Fehlverhalten?

[MrMurphy]

Hallo

Kann bei header nicht auch float:right stehen, oder führt das auch zu Fehlverhalten?

Probier es aus. Du kannst ja einfach meinen Quellcode für die gesamte Seite nehmen und damit rumspielen und ausprobieren. Dafür habe ich ihn erstellt.

Ich habe mir bei den CSS-Anweisungen aber etwas gedacht und die so erstellt, dass es möglichst wenig Probleme gibt.

Was genau meinst du mit meinen "Vorstellungen", mit denen ich nicht glücklich werden sollte.

Du baust die Seite zu starr auf. Das geht in der Regel auf Dauer schief.

Ohne den endgültigen Inhalt zu kennen kann ich zur Zeit aber auch nur raten und dir Tipps aus meiner Erfahrung geben.

Deshalb nur so viel: Überleg dir mal wie die Seite auf einem Tablet oder Smartphone im Quer- und Hochformat dargestellt wird.

Gruss

MrMurphy

[nextuser]

Die Pixelangaben werden(zumindest in der Höhe) ja wegfallen. Lediglich die eine Box wird feste Angaben haben. Für mobile Geräte wird diese "Version" entsprechend angepasst.

Vielen dank für deine Mühen. Ich werde deinen Code zu herzen nehmen, und versuchen, ihn bis ins Detail zu verstehen. So werde ich auch devinitiv etwas dazulernen.