Entwickler-Ecke
Off Topic - CSS Problem
Dude566 - Do 27.08.09 16:28
Titel: CSS Problem
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:
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
UGrohne - 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 - 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.
UGrohne - 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 - 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. :P
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?
Yogu - 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:
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:
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 - Fr 28.08.09 16:57
Ich habe mir das ganze von
http://www.ndesign-studio.com/resources/dreamweaver/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.
Yogu - 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 [
http://de.selfhtml.org].
Dude566 - 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. :P
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. ;)
Kha - 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 - 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.
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!