Autor |
Beitrag |
Dude566
Beiträge: 1592
Erhaltene Danke: 79
W8, W7 (Chrome, FF, IE)
Delphi XE2 Pro, Eclipse Juno, VS2012
|
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:
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
Beiträge: 5502
Erhaltene Danke: 220
Windows 8 , Server 2012
D7 Pro, VS.NET 2012 (C#)
|
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
Beiträge: 1592
Erhaltene Danke: 79
W8, W7 (Chrome, FF, IE)
Delphi XE2 Pro, Eclipse Juno, VS2012
|
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
Beiträge: 5502
Erhaltene Danke: 220
Windows 8 , Server 2012
D7 Pro, VS.NET 2012 (C#)
|
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
Beiträge: 1592
Erhaltene Danke: 79
W8, W7 (Chrome, FF, IE)
Delphi XE2 Pro, Eclipse Juno, VS2012
|
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
Beiträge: 2598
Erhaltene Danke: 156
Ubuntu 13.04, Win 7
C# (VS 2013)
|
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:
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
Beiträge: 1592
Erhaltene Danke: 79
W8, W7 (Chrome, FF, IE)
Delphi XE2 Pro, Eclipse Juno, VS2012
|
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
Beiträge: 2598
Erhaltene Danke: 156
Ubuntu 13.04, Win 7
C# (VS 2013)
|
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
Beiträge: 1592
Erhaltene Danke: 79
W8, W7 (Chrome, FF, IE)
Delphi XE2 Pro, Eclipse Juno, VS2012
|
Verfasst: Fr 28.08.09 18:07
_________________ Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.
|
|
Kha
Beiträge: 3803
Erhaltene Danke: 176
Arch Linux
Python, C, C++ (vim)
|
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
Beiträge: 1592
Erhaltene Danke: 79
W8, W7 (Chrome, FF, IE)
Delphi XE2 Pro, Eclipse Juno, VS2012
|
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.
|
|
|