[Nachtgold]

Hallo,

ich bin gerade dabei, mir eine Grundstruktur für die Gestaltung von Internetseiten aufzubauen.
Diese Struktur soll zweierlei beinhalten:

1. Kopfbereich, Fußbereich, Navigationsbereich, Inhaltsbereich --> flexibel (und übersichtlich anordenbar);
2. Die Bereiche sollen nach Möglichkeit "mitwachsen", also z. B. der Navibereich mit den Inhalt-Bereich, falls dieser über den Bildschirm hinausgeht (lt. der FAQ hier scheint dies nicht so einfach zu sein?).

Zu 1.: "Soweit" habe ich dies hinbekommen: Cartoons!!!
--> Wieso besteht hier ein Abstand unter dem Kopfbereich?
Hier die css-Datei:

html
{
	margin: 0; padding: 0;
}

body  
{     
  background-color:lightblue;
  background-image:url('../Bilder/.png');
  margin: 0; padding: 0;
  overflow-y:scroll;
}

/* Formatierung selbst definierter Bereiche: */
#wrapper  
{        
   width: 800px;
   min-height: 800px;
   margin: 20px auto; 
   border: 1px solid black;
   background: white; 
}


#header
{
   background-color: #fed;
   clear: both;
}


#sidebar
{
   background-color:#f99;
   width:30%;
   float:left;
}


#content
{
   background-color:#ff9;
   width:70%;
   float:left;
}


#footer
{
   background-color:#9f9;
   clear: both;
}

Zu 2.: Dieses Problem hatte ich bei einem anderen Projekt so gelöst, dass ich den Navibereich manuell dem Inhalt angeglichen hatte (also mit mehreren "navi-#divs...").
Doof nur, dass ich erst spät bemerkt hatte, dass was in Firefox gut aussieht, von allen anderen Browsern, die ich testete (Chrome, Opera) anders interpretiert wird, was mich u. a. zu folgendem off-topic-Kommentar bewegte:




Off-Topic - Folgendes soll nicht als Provokation verstanden werden:
Ich hatte 2001 zuletzt mit dem Thema "Internetseiten gestalten" zu tun, und muss feststellen, dass dies inzwischen NOCH chaotischer geworden ist:
Man muss mit "1000" Syntaxen herumhantieren, in php gibt es keine "messge-box", Browser interpretieren Standards immer noch unterschiedlich...

Man sollte doch meinen, dass es die Menschheit innerhalb von ca. 15 Jahren mal geschafft haben konnte, sich wenigstens diesbezüglich zu einigen!? So etwas wie "PowerPoint" oder "Visual Basic" für Webseiten, wobei jeweils (auf Basis grafischer Objekte, die bei der Entwicklung bereits aussehen wie später auf der Internetseite) normkonformer Quelltext, automatisch erzeugt würde...
Nun - off off-topic!

[Manfred62]

--> Wieso besteht hier ein Abstand unter dem Kopfbereich?

weil das p margin hat. Du solltest ein generelles reset machen.
(z.B. in der FAQ Punkt 1)

[Nachtgold]

Zitat von Manfred62

weil das p margin hat. Du solltest ein generelles reset machen.
(z.B. in der FAQ Punkt 1)

--> *hmpf*, danke! Das ist natürlich peinlich, dass die Lösung am Anfang des FAQ zu finden war.
Allerdings hatten alle anderen Bereiche ja auch den "Standard-<p>-Abstand, und wurden ohne "Bereichsabstände" dargestellt...

[Manfred62]

wenn du ein reset machst, brauchst du folgendes nicht:

html, p, ul, h1, h2 {
    margin: 0;
    padding: 0;
}

Kennst du Little Boxes? Das ist sehr gute Basis-Lektüre zum lernen.
Dort werden auch flexible Layouts erstellt/erklärt.

[Nachtgold]

@Manfred:
Danke, ich habe den Link gespeichert, und werde mich, speziell mit der dynamischen Anpassung vom Design an den Inhalt, damit auseinandersetzen.