CSS Problem

Dude566 · Verfasst: Do 27.08.09 16:28

Ich wusste nicht wie ich dieses Thema sonst nennen sollte....

Also ich wollte mir mal ein kleines Template nur so aus Spaß mit XHTML und CSS zusammen basteln, habe bisher noch keine Erfahrungen damit.

Im Anhang ist ein Screenshot des Problems, ich wollte eigentlich das "Content" unter meiner Navi ist aber was ich auch mache es bleibt dort.

Hier mal ein bisschen Code zu den betreffenden Objekten:

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:

// CSS
.content {
background-color:#FFFFFF;
width:750px;
height:800px;
font-family:Arial, Helvetica, sans-serif;
margin-left:auto;
margin-right:auto;
border-bottom:thin;
border-left:thin;
border-right:thin;
border-top:thin;
border-color:#000000;
}

h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
padding:5px;
}

// HTML
<div class="content">

<div id = "style1">
<h1>Navigation</h1>
<ul>
<li><a href ="index.html">Home</a></li>
<li><a href ="index.html">Gallery</a></li>
<li><a href ="index.html">Info</a></li>
<li><a href ="index.html">Contact</a></li>
</ul>
</div>

<h3>Content</h3>

</div>

Das style1 ist die Navigation, habe ich da irgendwie was falsch geschrieben?

Gruß Dude566

Einloggen, um Attachments anzusehen!

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

UGrohne · Verfasst: Do 27.08.09 22:58

Dein Code ist etwas unvollständig und das Problem kann damit nicht nachvollzogen werden. Aber probier mal den Content in ein eigenes DIV zu packen und mit display:block zu versehen.

Dude566 · Verfasst: Do 27.08.09 23:04

In dem Moment wo du das geschrieben hast habe ich es eben selbst hinbekommen, auch wenn nicht optimal.

Ich habe den h3 einfach 2 mal verwendet und so eine Zeile übersprungen sieht man ja nicht, nur wenn man Text markiert. Aber wie war dein Lösungsvorschlag ich habe das nicht ganz verstanden.

edit: Achso meinst du ich soll kein h3 verwenden sondern ein eigens DIV dafür machen, und dann einfügen.

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

UGrohne · Verfasst: Do 27.08.09 23:32

Dude566 hat folgendes geschrieben :

In dem Moment wo du das geschrieben hast habe ich es eben selbst hinbekommen, auch wenn nicht optimal.

Ich habe den h3 einfach 2 mal verwendet und so eine Zeile übersprungen sieht man ja nicht, nur wenn man Text markiert. Aber wie war dein Lösungsvorschlag ich habe das nicht ganz verstanden.

edit: Achso meinst du ich soll kein h3 verwenden sondern ein eigens DIV dafür machen, und dann einfügen.

Nein, jeden Bereich, den Du platzieren willst - also Navigation, Header, Footer, Content - packt man normalerweise in eigene DIVs und konfiguriert diese per CSS. So hast Du die optimale Kontrolle.

Dude566 · Verfasst: Fr 28.08.09 16:40

ja nur den DIV für die Content Überschrift muss ich ja in den DIV des Contents reinpacken sonst erscheint der Text unter meinem Contentblock und ist somit nicht mit auf der Seite.

Edit: Habe ja jetzt alles in DIV, nur vorher habe ich es in einem Tutorial gesehn das es auch mit h1 usw geht. Wozu sind diese denn dann gedacht, bzw. was sind die Unterschiede?

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

Yogu · Verfasst: Fr 28.08.09 16:45

Hallo,

bitte poste doch einfach mal die komplette CSS-Datei und den vollständigen Inhalt der HTML-Datei. Oder du schickst uns einen Link, wo wir das ganze finden. Anders kommen wir hier nicht weiter.

Dem Screenshot nach zu schließen, hast du die Navigation in den Content-Block gepackt. Das solltest du lassen. Der grobe Aufbau meiner Seite sieht in etwa so aus:

markieren

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

<body>
  <div id="header" />
  <div class="navigation" />
  <ul class="toolbar" />
  <div id="sidebar" class="sidebar" />
  <div id="left_sidebar" class="sidebar" />
  <div id="content" />
  <div class="navigation bottomnavi" />
  <div id="footer" />
</body>

Wobei in jedem <div /> dann der Header, die Navigation, die Sidebar, der Inhalt etc. stehen.

Grüße,
Yogu

Edit:

Dude5667 hat folgendes geschrieben:

Habe ja jetzt alles in DIV, nur vorher habe ich es in einem Tutorial gesehn das es auch mit h1 usw geht. Wozu sind diese denn dann gedacht, bzw. was sind die Unterschiede?

Da hast du wohl irgend etwas missverstanden. <div /> dient zum Sammeln von anderen Elementen, also ist es eine Art "Container". <h1 />, <h2 /> etc. sind Überschriften (engl. headings). Dort drin darf nur Text stehen, keine weiteren Elemente. Ein kleines Beispiel:

markieren

XML-Daten

1:
2:
3:
4:
5:
6:
7:

<body>
  <div id="content" />
    <h1>Eine Beispielseite</h1>
    <p>Erster Absatz</p>
    <p>Zweiter Absatz</p>
  </div>
</body>

Dude566 · Verfasst: Fr 28.08.09 16:57

Ich habe mir das ganze von www.ndesign-studio.c...reamweaver/css-menu/ ein bisschen abgeschaut, und den DIV für den Content muss ich ja in den Content packen welcher meinen weißen Untergrund darstellt auf dem Nachher meine verfassten Texte stehen sollen.

Aber das Problem hat sich ja schon gelöst.

Und danke für die Erklärung des Unterschieds, das beste wird sein ich kaufe mir ein Buch für CSS usw. also Webdesign im Allgemeinen.

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

Yogu · Verfasst: Fr 28.08.09 17:45

Dude566 hat folgendes geschrieben :

Aber das Problem hat sich ja schon gelöst.

Nicht wirklich. Oder hast du, nachdem du eine leere Überschrift eingefügt hast, noch weiter gemacht? Das hier:

Dude566 hat folgendes geschrieben :

Ich habe den h3 einfach 2 mal verwendet und so eine Zeile übersprungen sieht man ja nicht, nur wenn man Text markiert.

ist nämlich nie und nimmer sauber. Außerdem ist es kein korrektes HTML (eine Überschrift muss einen Inhalt besitzen).

Dude566 hat folgendes geschrieben :

Und danke für die Erklärung des Unterschieds, das beste wird sein ich kaufe mir ein Buch für CSS usw. also Webdesign im Allgemeinen.

Wenn du das willst, gerne - es gibt aber genug Möglichkeiten, HTML&CSS ganz kostenlos zu lernen. Zum Beispiel auf SELFHTML.

Dude566 · Verfasst: Fr 28.08.09 18:07

Dude566 hat folgendes geschrieben :

ja nur den DIV für die Content Überschrift muss ich ja in den DIV des Contents reinpacken sonst erscheint der Text unter meinem Contentblock und ist somit nicht mit auf der Seite.

Edit: Habe ja jetzt alles in DIV, nur vorher habe ich es in einem Tutorial gesehn das es auch mit h1 usw geht. Wozu sind diese denn dann gedacht, bzw. was sind die Unterschiede?

Da habe ich es doch schon geschrieben wie ich es gelöst habe.

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

Kha · Verfasst: Fr 28.08.09 18:30

Dude566 hat folgendes geschrieben :

Habe ja jetzt alles in DIV, nur vorher habe ich es in einem Tutorial gesehn das es auch mit h1 usw geht. Wozu sind diese denn dann gedacht, bzw. was sind die Unterschiede?

Das bezog sich wahrscheinlich darauf, dass man nicht durch div & span die komplette Semantik des HTML-Codes zerstören soll. Du könntest in deinem Beispiel problemlos ul durch div und li durch span ersetzen, aber es würde dir nichts nutzen, sondern nur Screenreadern etc. schaden. In diesem Sinne hast du also schon alles richtig gemacht.

_________________
>λ=

Dude566 · Verfasst: Fr 28.08.09 18:34

Das mit ul und li habe ich ja nur von dem obigen Link abgeschaut um mir eine simple Navigation zu basteln.

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme