[Erledigt] Zwei Layout-Probleme in einfachem HTML-Dokument

ninoid · 01.07.2011, 19:41

Guten Abend!

Ich habe ein simples, CSS-basierendes Template gestaltet. Es ist weitgehend fertig, aber zwei kleine Fehler treiben mich in den Wahnsinn. Ich würde mich freuen, wenn der ein oder andere mal drüberschauen würde. Da es wirklich einfach aufgebaut ist, habe ich zur Demonstration den CSS-Code in die HTML-Datei kopiert und hochgeladen. So könnt Ihr Euch das File einfach mal anschauen: ninoid.com/problemkinder

Zunächst bereitet mir das h1-Element Probleme, welches ich im section-Bereich definiert habe. Es geht also nicht um die Headline im Header, sondern um die "Beispielüberschrift" im Contentbereich. Meine Idee war, die einzelnen Textelemente mit margin-top:10px auszustatten, um Abstände zwischen ihnen zu schaffen. Das funktioniert sowohl beim fettgedruckten Einleitungstext als auch beim restlichen Text wunderbar. Nur das h1-Element ignoriert margin-top:10px und klebt weiterhin am oberen Rand.

Als nächstes habe ich ein ungelöstes Problem mit meinen zwei Footer-Boxen. Die Seite hat eine Gesamt-Breite von 780px. Also dachte ich mir, den Boxen jeweils 385px Breite zu geben. Zusammen mit den 10px margin-right, die ich der ersten (linken) Box zugewiesen habe, welche den Abstand den beiden Boxen bewirkt, ergiebt das dann 780px. Das Problem ist, dass die zweite Box ja keinen Außenabstand nach rechts haben darf, da wir sonst wieder zu viel Breite haben, und zwei Zeilen innerhalb der 780px-breiten Content-Box entstehen. Mein "footer ul li:last-child"-Definitionsbereich wird aber nicht erkannt, und alle Anweisungen - wie in diesem Fall margin-right:0 - werden ignoriert.

Ich habe die Seite im neuen Firefox getestet. Über Hilfe würde ich mich riesig freuen.

Viele Grüße, ninoid

ChrisB · 01.07.2011, 19:49

Nix zum Anschauen da - 404

Chriz · 01.07.2011, 20:10

Bitte poste einen Link der funktioniert. Bis dahin macht dein Posting keinen Sinn.

ninoid · 01.07.2011, 20:58

Ups, entschuldigung. Jetzt funktioniert der Link.

EDIT: Aber ich merke gerade, dass Ihr den Beitrag ins falsche Forum geschoben habt.

nikosch · 01.07.2011, 21:02

Zu 1) vertikale margins werden in HTML zusammengefasst

http://reference.sitepoint.com/css/collapsingmargins
http://www.satzansatz.de/cssd/onhavinglayout.html

Zu 2)

Zitat:

Zusammen mit den 10px margin-right, die ich der ersten (linken) Box zugewiesen habe

Nö. Haste beiden zugewiesen.

Zitat:

Aber ich merke gerade, dass Ihr den Beitrag ins falsche Forum geschoben habt.

Sorry, mein Fehler.

ninoid · 01.07.2011, 21:11

Zitat:

Zitat von nikosch

Nö. Haste beiden zugewiesen.

Das ist richtig. Bei der zweiten (und letzten) Box habe ich dann aber folgendes definiert:

PHP-Code:

              footer ul li:last-child { <!-- Funktioniert offensichtlich nicht -->

                margin-right:0;

            }

Warum wird das ignoriert? Ich habe mehrfach nachgeschaut, so müsste es doch eigentlich funktionieren...

nikosch · 01.07.2011, 21:27

Ganz einfach - Du hast ungültigerweise noch ein UL im UL geschachtelt. Pure Unachtsamkeit, ein Blick in den Quellcode sagt mehr. Ansonsten wirds für Dich Zeit, Firebug zu installieren.

ninoid · 01.07.2011, 21:33

Ich habe FireBug installiert und sehe dort auch die ul-Tags im eigentlichen ul-Tag. Das verwundert mich, denn die sind nicht im tatsächlichen Quelltext:

PHP-Code:

          <footer>
            <ul>
                <li><a href="#">Impressum</a></li><li><a href="#">HTML5</a></li>
            <ul>
        </footer>

EDIT: Mir ist gerade aufgefallen, dass bei de Probleme den gleichen Ursprung haben. Sämtliche CSS-Befehle, die ich sowohl "section h1" als auch "footer ul li:last-child" zuweise, werden allesamt ignoriert. Das schließe ich aus der Tatsache, dass auch "font-size:36pt;" ungeachtet bleibt, wenn ich es "section h1" im CSS zuweise.

nikosch · 01.07.2011, 21:42

Zitat:

HTML-Code:

 <footer>
            <ul>
                <li><a href="#">Impressum</a></li><li><a href="#">HTML5</a></li>
            <ul><!-- Augen auf beim Eierkauf! -->
        </footer>

ninoid · 01.07.2011, 21:57

Uuuh, ja das ist offensichtlich. Entschuldige die Begriffsstutzigkeit - habe es behoben.

Das ändert aber leider nichts am eigentlichen Problem. Ich glaube das Problem liegt, wie in meinem letzten EDIT schon beschrieben, daran, dass der Browser die entsprechenden CSS-Befehle einfach ignoriert.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit PHP Simple HTML DOM Parser	berryone	PHP-Fortgeschrittene	2	30.08.2010 18:00
Doppelter E-Mail versand	include21	PHP Tipps 2010	3	06.05.2010 15:47
PHP und HTML - Ein paar Probleme	Rubio	Scriptbörse	99	13.02.2010 15:55
CHarset und Probleme mit IE	KeKs0r	HTML, Usability und Barrierefreiheit	10	26.01.2010 21:59
[Erledigt] Probleme mit html tabellen	peschels	PHP Tipps 2009	25	20.09.2009 09:51
[Erledigt] Zeichensatz Probleme \| html sonderzeichen euro	moveax1	PHP Tipps 2009	2	25.03.2009 13:15
HTML Dokument durchsuchen	bartzi	PHP Tipps 2008	3	02.04.2008 10:08
HTML Zeichen in einem bestehendem XML Dokument umwandeln		PHP Tipps 2006	33	24.03.2006 17:33
Probleme mit \" in html code		PHP Tipps 2006	6	22.02.2006 19:19
CSS Layout macht Probleme mit Firefox	Wimme	HTML, Usability und Barrierefreiheit	2	15.10.2005 13:33
Probleme bei der combo html und php	Dopedouglaz	PHP Tipps 2005	10	13.05.2005 11:14
Grosse Probleme Code an HTML Grundgerüst anzupassen	Kori	PHP Tipps 2005	6	15.01.2005 10:42
Validitor (HTML 4.01) = Schwachsinn?	Filewalker	Off-Topic Diskussionen	19	03.08.2004 15:27
[Erledigt] Probleme mit html tags!		PHP Tipps 2004	5	28.07.2004 23:37

01.07.2011, 19:41
ninoid Neuer Benutzer Registriert seit: 01.07.2011 Beiträge: 9 PHP-Kenntnisse: Anfänger	[Erledigt] Zwei Layout-Probleme in einfachem HTML-Dokument Guten Abend! Ich habe ein simples, CSS-basierendes Template gestaltet. Es ist weitgehend fertig, aber zwei kleine Fehler treiben mich in den Wahnsinn. Ich würde mich freuen, wenn der ein oder andere mal drüberschauen würde. Da es wirklich einfach aufgebaut ist, habe ich zur Demonstration den CSS-Code in die HTML-Datei kopiert und hochgeladen. So könnt Ihr Euch das File einfach mal anschauen: ninoid.com/problemkinder Zunächst bereitet mir das h1-Element Probleme, welches ich im section-Bereich definiert habe. Es geht also nicht um die Headline im Header, sondern um die "Beispielüberschrift" im Contentbereich. Meine Idee war, die einzelnen Textelemente mit margin-top:10px auszustatten, um Abstände zwischen ihnen zu schaffen. Das funktioniert sowohl beim fettgedruckten Einleitungstext als auch beim restlichen Text wunderbar. Nur das h1-Element ignoriert margin-top:10px und klebt weiterhin am oberen Rand. Als nächstes habe ich ein ungelöstes Problem mit meinen zwei Footer-Boxen. Die Seite hat eine Gesamt-Breite von 780px. Also dachte ich mir, den Boxen jeweils 385px Breite zu geben. Zusammen mit den 10px margin-right, die ich der ersten (linken) Box zugewiesen habe, welche den Abstand den beiden Boxen bewirkt, ergiebt das dann 780px. Das Problem ist, dass die zweite Box ja keinen Außenabstand nach rechts haben darf, da wir sonst wieder zu viel Breite haben, und zwei Zeilen innerhalb der 780px-breiten Content-Box entstehen. Mein "footer ul li:last-child"-Definitionsbereich wird aber nicht erkannt, und alle Anweisungen - wie in diesem Fall margin-right:0 - werden ignoriert. Ich habe die Seite im neuen Firefox getestet. Über Hilfe würde ich mich riesig freuen. Viele Grüße, ninoid Geändert von Chriz (01.07.2011 um 21:27 Uhr). Grund: URL verlinkt


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

01.07.2011, 19:49
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Nix zum Anschauen da - 404 __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

01.07.2011, 20:10
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Bitte poste einen Link der funktioniert. Bis dahin macht dein Posting keinen Sinn. __________________ "Nuschel ich?" - "Was?"

01.07.2011, 20:58
ninoid Neuer Benutzer Registriert seit: 01.07.2011 Beiträge: 9 PHP-Kenntnisse: Anfänger	Ups, entschuldigung. Jetzt funktioniert der Link. EDIT: Aber ich merke gerade, dass Ihr den Beitrag ins falsche Forum geschoben habt.

01.07.2011, 21:27
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ganz einfach - Du hast ungültigerweise noch ein UL im UL geschachtelt. Pure Unachtsamkeit, ein Blick in den Quellcode sagt mehr. Ansonsten wirds für Dich Zeit, Firebug zu installieren. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.07.2011, 21:33
ninoid Neuer Benutzer Registriert seit: 01.07.2011 Beiträge: 9 PHP-Kenntnisse: Anfänger	Ich habe FireBug installiert und sehe dort auch die ul-Tags im eigentlichen ul-Tag. Das verwundert mich, denn die sind nicht im tatsächlichen Quelltext: PHP-Code: `<footer> <ul> <li><a href="#">Impressum</a></li><li><a href="#">HTML5</a></li> <ul> </footer>` EDIT: Mir ist gerade aufgefallen, dass bei de Probleme den gleichen Ursprung haben. Sämtliche CSS-Befehle, die ich sowohl "section h1" als auch "footer ul li:last-child" zuweise, werden allesamt ignoriert. Das schließe ich aus der Tatsache, dass auch "font-size:36pt;" ungeachtet bleibt, wenn ich es "section h1" im CSS zuweise. Geändert von ninoid (01.07.2011 um 21:49 Uhr).

01.07.2011, 21:57
ninoid Neuer Benutzer Registriert seit: 01.07.2011 Beiträge: 9 PHP-Kenntnisse: Anfänger	Uuuh, ja das ist offensichtlich. Entschuldige die Begriffsstutzigkeit - habe es behoben. Das ändert aber leider nichts am eigentlichen Problem. Ich glaube das Problem liegt, wie in meinem letzten EDIT schon beschrieben, daran, dass der Browser die entsprechenden CSS-Befehle einfach ignoriert.