Containerpositionierungsprobleme, keine Lösung in Sicht

**unclefu86** · 28.05.2005 16:02

Containerpositionierungsprobleme, keine Lösung in Sicht

Hallo ihr!

Also ich habe noch immer Probleme mit der Koordination meiner Container.
Mit im Anhang sind der CSS Code, der HTML-Code und Bilder, die darstellen wo die Container sein sollten (was die Schrift darstellt) und dann sieht man halbtransparent eingefärbt die Container dort, wo sie bisher sind. Im Internet Explorer wie auch Mozilla Firefox sieht es schlecht aus! Warum?

Mögliche Problemstellen:

1. Der Wrapper-Container #wrap stört das Verhältnis bzw. ich habe doch (trotz mehrmaliger Kontrolle) irgendwas vergessen, sodass die Gesamtpixelzahl die Breite von #wrap übersteigt oder was weiß ich.

2. float ist irgendwo falsch gesetzt, clear fehlt? (hab das noch nie gebraucht)

3. Box-Modell Problem, padding, margin oder border sind falsch?

4. position:fixed oder sonstiges?

Irgendwie habe ich selbst mittlerweile den Überblick verloren.

Danke für eure Hilfe!

PS: Das ALLGEMEINE Aussehen kann hier: http://www.everydaythesame.de/unclefu86/index.php unter der index.php (und nur unter dieser Datei!!) angesehen werden. Vielleicht eine bessere Alternative als die Screenshots.
PPS: @Mods: Ich hoffe, dass das nochmalige Posten bzw. auskoppeln aus dem Quellthread: http://www.traum-projekt.com/forum/s...ad.php?t=65739 ist okay…

Screenshots:
...

Code:

* {
			border:0 none transparent; 
			padding:0;
			margin:0}

html, body {
			overflow:auto;
			font:100.01% verdana,arial,sans-serif}
		
div {		text-align:left}

/* Wrapper Bereich (variabel, immer gleiche height) */
#wrap {
			width:753px;
			margin:0 auto}

/* Content */
#content {	width:453px;
			float:right}

#content a {font-size:100.01%}

/* Navigation */
.nav {		text-align:center;
			list-style:none}
			
.nax[id] {	position:fixed}
			
.nav li {	border:1px solid #993366;
			margin:2px 0 0 0;
			padding:3px;
			width:215px}
			
.nav li a {display:block}

HTML-Code:

<body>
<div id="wrap">
	<!—Header Bilder -->
<div class="nav">
		<ul class="nav">
			<li><a href="index.php" title="Startseite">Startseite</a></li>
<!—Navigation -->
		</ul>
</div><p />
<span id="fontchange">
<!—Schriftgrößenveränderung -->
</span>
<div id="content">
	<!—Content Inhalt -->
</div>
	
	<div id="foot">
<!—Footer Inhalt -->
  	</div>
</div>
</body>

**AnnaStesia** · 28.05.2005 17:21

Ok., ich mach's kurz ohne weitere Erläuterungen (will raus, das Wetter

)
Spendiere #content ein float: left;. Gib dem Nav-Container ebenfalls ein float und eine feste Breite: div.nav {float: left;width: 250px;} Packe das fontchange Ding in den Nav-Container. Setze vor den Footer Container was Klärendes ein, z. B. <div style="clear: both;"> </div>

**hero-master** · 28.05.2005 17:36

Noch was zuer Ergänzung von Annastesia

:
(ich wollte auf das gleiche hinaus, habe deinen Namen unten gelesen und gedacht: Die macht das schon

)
Gib dem ul in der Nav-Box keine Klassenzuweisung. Das ist unnötig und außerdem kann das zu Problemen führen, z.B. wenn du der Klasse ein float:left zuweist

Mach es einfach so:
div#nav ul {list-style:none} oder so

**unclefu86** · 28.05.2005 18:16

Ok, vielen Dank ihr beiden, das hat schonmal geholfen!
Noch zwei Fragen jetzt:

1. Irgendwie machen meine Links und ihre text-decorations was sie wollen! Warum? (Ich will in den Navicontainern jeweils a:hover den orangen Hintergrund aber keine Unterstreichung!) Schaut euch einfach die aktuelle CSS Datei mal an.

2. Irgendwie ist der fontchange Container mehr rechts als links, obwohl ich die Abstände gleich definiert habe! Hab bisher trotz viel rumprobieren keine Lösung gefunden. *nerv*

Thx nochmal,

UncleFu

PS: 3. Habt ihr eine Stylingempfehlung für die PHP-Buttons? ^^

**hero-master** · 28.05.2005 20:46

Zitat von unclefu86

1. Irgendwie machen meine Links und ihre text-decorations was sie wollen! Warum? (Ich will in den Navicontainern jeweils a:hover den orangen Hintergrund aber keine Unterstreichung!) Schaut euch einfach die aktuelle CSS Datei mal an.

Wo hast du denn text-decoration:none für den a:hover angegeben?

Zitat von unclefu86

2. Irgendwie ist der fontchange Container mehr rechts als links, obwohl ich die Abstände gleich definiert habe! Hab bisher trotz viel rumprobieren keine Lösung gefunden. *nerv*

Siehe unten, vielleicht gehts mit ner Liste besser

Zitat von unclefu86

PS: 3. Habt ihr eine Stylingempfehlung für die PHP-Buttons? ^^

Vielleicht so, wie da (rechts): http://barrierefrei.e-workers.de

Noch was:

HTML-Code:

<span id="fontchange">
		<p class="button"><a href="/unclefu86/index.php?font=dec">Schrift verkleinern</a></p>

		<p class="button"><a href="/unclefu86/index.php?font=base">Schrift zurücksetzen</a></p>
		<p class="button"><a href="/unclefu86/index.php?font=inc">Schrift vergrößern</a></p>
</span>

Ist nicht erlaubt

Span ist ein Inlineelement, p ein Blockelement

Mach daraus doch auch eine Liste

**unclefu86** · 29.05.2005 14:53

Zitat von hero-master

Wo hast du denn text-decoration:none für den a:hover angegeben?

Siehe unten, vielleicht gehts mit ner Liste besser

Span ist ein Inlineelement, p ein Blockelement

Mach daraus doch auch eine Liste

Hallo Nico,

danke für die Tipps. Irgendwie funktioniert das trotz

Code:

#fontchange {margin:25px 35px 0 35px}

li.button {	border:1px solid #993366; 
			margin:2px 0 0 0;
			font-size:.8em !important;
			text-align:center}
			
li.button a:hover {text-decoration:none}

nicht so wie ich will. Die Schrift in den Buttons (und nur da) soll ausnahmsweise IMMER gleich bleiben, nämlich auf Standard!
2. Soll die Breite eben gleichmäßig verteilt sein, wieso gibt es denn kein normales konformes Attribut, um einen Container vertikal mittig zu zentrieren?! Oder stimmt hier wieder was nicht?:

HTML-Code:

<ul id="fontchange">
		<li class="button"><?php print(get_fontsize_link('dec', 'Schrift verkleinern')); ?></li>
		<li class="button"><?php print(get_fontsize_link('base', 'Schrift zurücksetzen')); ?></li>
		<li class="button"><?php print(get_fontsize_link('inc', 'Schrift vergrößern')); ?></li>
</ul>

Außerdem weiß ich ehrlich gesagt nicht, warum die gesamte Website mittig ausgerichtet ist und nicht ganz links am Rand?

Ein verständnisloser Uncle Fu.

**hero-master** · 29.05.2005 19:41

Zitat von unclefu86

2. Soll die Breite eben gleichmäßig verteilt sein, wieso gibt es denn kein normales konformes Attribut, um einen Container vertikal mittig zu zentrieren?!

Wie wäre es mit margin:0 auto; ?!

Zitat von unclefu86

Außerdem weiß ich ehrlich gesagt nicht, warum die gesamte Website mittig ausgerichtet ist und nicht ganz links am Rand?

Aus dem Grund:

Code:

#wrap [margin: 0 auto}

Zu den Buttons: Kannst du mal deine "neue" Version online stellen?

**unclefu86** · 30.05.2005 01:03

Zitat von hero-master

Wie wäre es mit margin:0 auto; ?!

Aus dem Grund:

Code:

#wrap [margin: 0 auto}

Zu den Buttons: Kannst du mal deine "neue" Version online stellen?

Ups! *peinlich* Ok, ja, damit hätten sich ja beide Probleme gelöst.

**unclefu86** · 03.06.2005 22:45

Was noch momentan problematisch ist:

Irgendwie ist der gesamte Text von der Problematik betroffen, dass alle <br /> und <p /> Tags missachtet werden! Liegt das am Doctype?

Außerdem muss der Container #wrap um alle anderen Container schließen, sonst sieht es wirklich schlimm aus. Ich wüsste jedoch gerne, wie ich das Bild mit der Faust von allem darunter absetzen kann.
Und dann wüsste ich noch gerne, warum zur Hölle jetzt schon wieder die Formatierung des Kontaktformulars nicht funktioniert!?

Und ich wüsste gerne, wie ich den Schriftgrößenveränderer etwas vom Rest der Navigation abhebe, eigentlich so wie oben das Problem Bild / Container.

**hero-master** · 04.06.2005 09:56

Zitat von unclefu86

Irgendwie ist der gesamte Text von der Problematik betroffen, dass alle <br /> und <p /> Tags missachtet werden! Liegt das am Doctype?

versuchs mal nicht mit <p />, sondern mit <p>Text</p>

Die <br />s sollten funktionieren unabhängig vom Doctype.

Zitat von unclefu86

Ich wüsste jedoch gerne, wie ich das Bild mit der Faust von allem darunter absetzen kann.

Das Bild unter was setzen?

Zitat von unclefu86

Und dann wüsste ich noch gerne, warum zur Hölle jetzt schon wieder die Formatierung des Kontaktformulars nicht funktioniert!?

Vielleicht hilft der Link:
http://barrierefrei.e-workers.de/wor...are/index.html

Tipp: Schreib das CSS selbst, dann macht man am Wenigsten falsch, du hast fieldset, legend, etc definiert aber benutzt es nicht..
<span classgr4> musst du auch noch umbenennen in <span class="gr4">

Zitat von unclefu86

Und ich wüsste gerne, wie ich den Schriftgrößenveränderer etwas vom Rest der Navigation abhebe, eigentlich so wie oben das Problem Bild / Container.

Mit margin: Gib der Liste mit der ID fontchange einfach ein margin-top mit

**unclefu86** · 21.06.2005 00:37

Habe mir überlegt, dass das ja eigentlich mit margin 0 auto gehen müsste. Aber ich will ja trotzdem einen Rand, eben je nach veränderter Breite und oben und unten noch 2px margin so haben, wie bekomme ich das ordnungsgemäß in ein margin: ?

Und ach ja, ich will das top.gif innerhalb eines Containers unten links mit einem Abstand von 10px fixieren, egal wie hoch der Container jeweils ist! Wie mache ich das? Weil mit position:absolute habe ich es nicht hinbekommen und außerdem soll es da ja Überlappungsschwierigkeiten geben...

**hero-master** · 21.06.2005 10:44

Zitat von unclefu86

Habe mir überlegt, dass das ja eigentlich mit margin 0 auto gehen müsste. Aber ich will ja trotzdem einen Rand, eben je nach veränderter Breite und oben und unten noch 2px margin so haben, wie bekomme ich das ordnungsgemäß in ein margin: ?

So? :

Code:

margin:2px auto}

Zitat von unclefu86

Und ach ja, ich will das top.gif innerhalb eines Containers unten links mit einem Abstand von 10px fixieren, egal wie hoch der Container jeweils ist! Wie mache ich das? Weil mit position:absolute habe ich es nicht hinbekommen und außerdem soll es da ja Überlappungsschwierigkeiten geben...

Leg den Footer-Inhalt in ein Container, leg ihn in den Content-Container rein
und gib ihm ein bottom:0; mit

:

HTML-Code:

div#footer {
bottom:0;
position:absolute;
margin-bottom:10px
}

**unclefu86** · 25.06.2005 18:40

Das Problem mit dem #top Button ist noch nicht gelöst.

Die PHP Schriftänderungslösung kreiiert im Internet Explorer außerdem folgenden Fehler:

Warning: Cannot modify header information - headers already sent by (output started at /home/htdocs/web30/html/unclefu86/kontakt.php:7) in /home/htdocs/web30/html/unclefu86/fontsize.inc.php on line 30

Warning: Cannot modify header information - headers already sent by (output started at /home/htdocs/web30/html/unclefu86/kontakt.php:7) in /home/htdocs/web30/html/unclefu86/fontsize.inc.php on line 34

Warning: Cannot modify header information - headers already sent by (output started at /home/htdocs/web30/html/unclefu86/kontakt.php:7) in /home/htdocs/web30/html/unclefu86/fontsize.inc.php on line 39

Warning: Cannot modify header information - headers already sent by (output started at /home/htdocs/web30/html/unclefu86/kontakt.php:7) in /home/htdocs/web30/html/unclefu86/fontsize.inc.php on line 40

Warning: Cannot modify header information - headers already sent by (output started at /home/htdocs/web30/html/unclefu86/kontakt.php:7) in /home/htdocs/web30/html/unclefu86/fontsize.inc.php on line 41

Warning: Cannot modify header information - headers already sent by (output started at /home/htdocs/web30/html/unclefu86/kontakt.php:7) in /home/htdocs/web30/html/unclefu86/fontsize.inc.php on line 42

Mehrere Problem sind auch in diesem Screenshot zu sehen. Ich danke schon im Voraus für eure Hilfe!

**hero-master** · 25.06.2005 19:01

Hi

1.Überschrift nicht mittig
Gib dem form ne Breite von 100% an bzw. lass die Breitenagabe weg, sie ist normal auf 100% vordefiniert

2.Zusatzanmerkung zu weit unten
Kommt soweit ich das beurteilen würde von dem margin bei input[type=text]

3.Was soll die PHP-Aussage hier
Siehe Mail, du hast dem Submit-Feld keinen Namen gegeben hast, nenn ihn sumbit

4.Creative Commons zu weit links
Dann musst du wohl entweder mit margin-left arbeiten oder den Footer in den Inhalts-Div stecken

5.Wieso diese Unregelmäßigkeit
Durch das zu lange Wort "Streitschlichterteams", nehm ich mal an

6.border:1px solid #666
[type..] erkennt der IE nicht an

**unclefu86** · 25.06.2005 19:30

1. Die Überschrift ist nicht innerhalb der Form und auch ohne Breitenangabe formatiert (nur ein <h1> bzw. class="center", d.h. {text-align:center}, weder mit border, margin oder padding) Das Problem besteht weiter.

2. Nein, denn das Input gehört nicht zu dem Label, welches ich so definiert habe:

Code:

label { 		      float:left;
				display:-moz-inline-box;
				display:inline-block;	
				color:#666;
				width:expression('7em'); /*Min-width for IE6*/}

Außerdem ist die Höhe im IE gleich wie die der <input> Felder, also muss es an Mozilla Firefox liegen. Das Problem besteht weiter.

3. Und wieso passiert das beim "reset" nicht? Das liegt doch an der Ausgabe. (dem PHP Script) Das Problem besteht weiter.

4. Ok, etwas anderes bleibt mir wohl nicht übrig. 5. Ok, stimmt. ^^ 6. Was kann man stattdessen machen?

zur Startseite vom TP

Thema: Containerpositionierungsprobleme, keine Lösung in Sicht

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Containerpositionierungsprobleme, keine Lösung in Sicht

Aktive Benutzer

Aktive Benutzer