zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout-Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.08.2004, 23:34
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard Layout-Problem

hallo,

der mozilla/firefox stellt die box nicht so dar wie es im code festgelegt ist.
Code:
#container
{
 margin: 2em auto ;
 width: 80% ;
 height: 560 px ;
 border: 1px solid #616161 ;
 background: #fff ;
 padding: 10px ;
}
der ie und opera nehmen die anweisung für die schrifgr. nicht an!

Code:
#nav li
{
 display: inline ;
 padding: 0 10px ;
 font: bold x-small verdana, arial, sans-serif ;
}
außerdem habe ich etwas schwierigkeiten mit der positionierung des formulars.
im ie ist es nicht in der mitte.
Code:
#box
{
 position: relative ;
 margin: -2em auto ;
 border: 1px solid #000 ;
 width: 280px;
 text-align: left;
 background-color: #eee ;
 padding: 0px ;
}
das "margin: -2em auto ;" is doch schon seltsam oder?

damit der container zentriert im ie dargestellt wird, muß ich auf dieses mittel zurückgreifen. auf allen anderen seiten dieser site ist die anweisung nicht nötig.
Code:
body
{
text-align: center ;
}


view site

danke für tipps u. hinweise!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.08.2004, 07:42
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard Re: Layout-Problem

Zitat:
Zitat von legman
der mozilla/firefox stellt die box nicht so dar wie es im code festgelegt ist.
Sondern? Tolle Fehlerbeschreibung, wirklich! ;)
Zitat:
width: 80% ;
padding: 10px ;
Du möchtest die Box also 80% + 10px breit. Was geht denn da nicht?
Zitat:
height: 560 px ;
Laß kein Leerzeichen vor dem »px«, das ist ungültig. Außerdem sollte ein Container, der Text enthält keine feste Größe haben, weil er sonst bei größerer Schrift »ausläuft«. Genau das passiert nämlich in meinem Opera mit erzwungenen 16px und im IE bei gesetztem »Schriftgradangaben auf Webseiten ignorieren«. Sieht grausam aus.

Zitat:
der ie und opera nehmen die anweisung für die schrifgr. nicht an!

font: bold x-small verdana, arial, sans-serif ;
Da würde ich ganz brutal sagen: Sei froh, x-small ist ohnehin unlesbar klein und hat in einer Navigation nichts verloren.

Zitat:
außerdem habe ich etwas schwierigkeiten mit der positionierung des formulars.
im ie ist es nicht in der mitte.
In meinem IE 6 ist es in der Mitte, aber es ist so winzig, daß ich nie auf die Idee käme, es zu benutzen. Und wirf den Reset-Button raus, der provoziert nur Fehlklicks. Wer das Formular nicht absenden will, kriegt das auch so hin.

Zitat:
das "margin: -2em auto ;" is doch schon seltsam oder?
Na du hast es doch hingeschrieben; du wirst hoffentlich wissen, wozu.

Zitat:
damit der container zentriert im ie dargestellt wird, muß ich auf dieses mittel zurückgreifen. auf allen anderen seiten dieser site ist die anweisung nicht nötig.
Diese Seite ist im Quirksmodus und die anderen nicht. Damit kann der IE 6 »margin:auto« ebensowenig wie seine Vorgänger, für die du den Workaround immer noch brauchst.

Gruß
Thomas
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.08.2004, 14:00
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard Re: Layout-Problem

Zitat:
Zitat von legman
der mozilla/firefox stellt die box nicht so dar wie es im code festgelegt ist.
Zitat:
Sondern? Tolle Fehlerbeschreibung, wirklich!
na so wie es im code stand: 560px! der fehler war halt das leerzeichen! hat sich also erledigt.
Zitat:
width: 80% ;
padding: 10px ;
Zitat:
Du möchtest die Box also 80% + 10px breit. Was geht denn da nicht?
also der container ist width: 80% ; die box ist width:280px; ?
Zitat:
Außerdem sollte ein Container, der Text enthält keine feste Größe haben, weil er sonst bei größerer Schrift »ausläuft«. Genau das passiert nämlich in meinem Opera mit erzwungenen 16px und im IE bei gesetztem »Schriftgradangaben auf Webseiten ignorieren«. Sieht grausam aus.
also height auch mit % angeben?
Zitat:
der ie und opera nehmen die anweisung für die schrifgr. nicht an!
font: bold x-small verdana, arial, sans-serif ;
Zitat:
Da würde ich ganz brutal sagen: Sei froh, x-small ist ohnehin unlesbar klein und hat in einer Navigation nichts verloren.
so klein ist es doch garnicht. nur weiß ich jetzt immer noch nicht warum die anweisung nicht oder nur im mozilla funtkioniert?

Zitat:
außerdem habe ich etwas schwierigkeiten mit der positionierung des formulars.
im ie ist es nicht in der mitte.
Zitat:
In meinem IE 6 ist es in der Mitte, aber es ist so winzig, daß ich nie auf die Idee käme, es zu benutzen. Und wirf den Reset-Button raus, der provoziert nur Fehlklicks. Wer das Formular nicht absenden will, kriegt das auch so hin.
winzig? kann ich nicht nachvollziehen. "width: 280px;" ist das winzig?
der resetbutton ist jetzt nicht so ein problem.
Zitat:
das "margin: -2em auto ;" is doch schon seltsam oder?
Zitat:
Na du hast es doch hingeschrieben; du wirst hoffentlich wissen, wozu.
ich habe es bisher nur mit dieser angabe so positionieren können.
meine erfahrungen mit webdesign sind noch sehr gering um immer zu wissen was ich mache. mir fehlt da noch wissen und routine!
außerdem habe ich mich ein wenig übernommen, eine seite komplett mit css zu gestalten. ist ja selbst für profis nicht leicht, oder?
Zitat:
damit der container zentriert im ie dargestellt wird, muß ich auf dieses mittel zurückgreifen. auf allen anderen seiten dieser site ist die anweisung nicht nötig.
Zitat:
Diese Seite ist im Quirksmodus und die anderen nicht. Damit kann der IE 6 »margin:auto« ebensowenig wie seine Vorgänger, für die du den Workaround immer noch brauchst.
stimmt mit dem doctype! ist wie ein paar andere dinge auch, ein schuselfehler.
zum experimentieren kopiere ich die originaldatei.
bin wohl da irgendwie durcheinander gekommen und habe die falsche datei hochgeladen.

dann erstmal danke für die hilfe.
Mit Zitat antworten
  #4 (permalink)  
Alt 15.08.2004, 22:16
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard Re: Layout-Problem

Zitat:
Zitat von legman
also der container ist width: 80% ; die box ist width:280px; ?
Hm? Versuch bitte nochmal ganz ausführlich dein Problem zu beschreiben.

Zitat:
also height auch mit % angeben?
Nein, gib möglichst überhaupt keine Höhe an; das schafft nur Ärger. Wenn du wirklich mal eine feste Höhe brauchst, was hier nicht der Fall zu sein scheint, dann nimm »em« und kalkuliere die Zeilenhöhe mit ein.

Zitat:
so klein ist es doch garnicht. nur weiß ich jetzt immer noch nicht warum die anweisung nicht oder nur im mozilla funtkioniert?
Es ist viel zu klein. Warum es im Mozilla nicht funktioniert, weiß ich nicht. Hast du eine Mindestschriftgröße gesetzt?

Zitat:
"width: 280px;" ist das winzig?
Ja, ist es. Die Größe eines Eingabefeldes suggeriert immer die Menge, die hineingeschrieben werden soll; deshalb ist die Suchmaske bei Google auch so breit: damit die Leute mehrere Stichworte benutzen.
Bei deinem Formular läuft nicht nur die Textarea rechts aus; sie suggeriert auch, daß man bitte nichts hineinschreibt. Das kann unmöglich dein Anliegen sein.

Zitat:
der resetbutton ist jetzt nicht so ein problem.
Doch, das ist er. Du brauchst ihn nicht, deine Leser brauchen ihn nicht, aber er kann die Ursache dafür sein, daß jemand irrtümlich draufklickt. Raus damit.

Zitat:
meine erfahrungen mit webdesign sind noch sehr gering um immer zu wissen was ich mache. mir fehlt da noch wissen und routine!
außerdem habe ich mich ein wenig übernommen, eine seite komplett mit css zu gestalten. ist ja selbst für profis nicht leicht, oder?
Naja, so schlimm ist es nun auch wieder nicht. Wichtig sind immer nur zwei Dinge:
• Benutze nur das, was du wirklich verstanden hast.
• Das Dokument muß auch ohne Stylesheet gut zugänglich sein.
Dann kannst du dich langsam ranarbeiten.

Zitat:
stimmt mit dem doctype! ist wie ein paar andere dinge auch, ein schuselfehler.
Versteh mich nicht falsch: Ich selbst sorge dafür, daß meine Dokumente möglichst immer im Quirksmodus rausgehen. Aber man muß es eben wissen.

Gruß
Thomas
Mit Zitat antworten
  #5 (permalink)  
Alt 17.08.2004, 14:35
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard Re: Layout-Problem

Zitat:
Zitat von toscho
Hm? Versuch bitte nochmal ganz ausführlich dein Problem zu beschreiben.
hat sich erledigt!
Zitat:
Zitat von toscho
Nein, gib möglichst überhaupt keine Höhe an; das schafft nur Ärger. Wenn du wirklich mal eine feste Höhe brauchst, was hier nicht der Fall zu sein scheint, dann nimm »em« und kalkuliere die Zeilenhöhe mit ein.
also keine angabe für hight geht nicht. dann sieht es so aus.

Zitat:
Zitat von toscho
Es ist viel zu klein. Warum es im Mozilla nicht funktioniert, weiß ich nicht. Hast du eine Mindestschriftgröße gesetzt?
mit der änderung des doctype zeigt der moz. es auch korrekt an.
ich habe im body immer ein 80% font-size angegeben. die werden allerdings oft durch neue anweisungen überschrieben.

Zitat:
Zitat von toscho
Ja, ist es. Die Größe eines Eingabefeldes suggeriert immer die Menge, die hineingeschrieben werden soll; deshalb ist die Suchmaske bei Google auch so breit: damit die Leute mehrere Stichworte benutzen.
Bei deinem Formular läuft nicht nur die Textarea rechts aus; sie suggeriert auch, daß man bitte nichts hineinschreibt. Das kann unmöglich dein Anliegen sein.
hm.. wie groß sollte es denn sein? wer kontakt sucht wird das formular benutzen, egal ob es "klein" oder "groß" ist, sach ich mal einfach so.
Zitat:
Zitat von toscho
Doch, das ist er. Du brauchst ihn nicht, deine Leser brauchen ihn nicht, aber er kann die Ursache dafür sein, daß jemand irrtümlich draufklickt. Raus damit.
überzeugt mich irgendwie nicht.
Zitat:
Zitat von toscho
Naja, so schlimm ist es nun auch wieder nicht. Wichtig sind immer nur zwei Dinge:
• Benutze nur das, was du wirklich verstanden hast.
• Das Dokument muß auch ohne Stylesheet gut zugänglich sein.
Dann kannst du dich langsam ranarbeiten.
ohne stylesheets ist es doch nicht valide. ich müßte ja sonst sämtliche "deprecated" font-tags einsetzen und mit tabellen layouten.
Zitat:
Zitat von toscho
Versteh mich nicht falsch: Ich selbst sorge dafür, daß meine Dokumente möglichst immer im Quirksmodus rausgehen. Aber man muß es eben wissen.
verstehe ich nicht, sorry.
Mit Zitat antworten
  #6 (permalink)  
Alt 17.08.2004, 14:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard Re: Layout-Problem

Hallo legman!

Zitat:
also keine angabe für hight geht nicht. dann sieht es so aus.
Du könntest auch eine min-height angeben und nur für den IE eine height.
Aber warum sich der Background jetzt nicht bis runter zieht, wundert mich. Wie hast Du das denn positioniert, dass es aus dem Fluß raus ist? Allerdings ist mir Deine CSS-Datei zu unübersichtlich, da schau ich jetzt nicht weiter nach (untereinander liest sich besser als alles hintereinander und Kommentare schaden auch nicht).

Zitat:
hm.. wie groß sollte es denn sein? wer kontakt sucht wird das formular benutzen, egal ob es "klein" oder "groß" ist, sach ich mal einfach so.
Ich finde es auch schon recht klein (und toscho hat eine riesige Monitorauflösung von 1600x1200px - da verlieren sich dann die pixelchen......)

Zitat:
Zitat von legman
Zitat:
Zitat von toscho
Versteh mich nicht falsch: Ich selbst sorge dafür, daß meine Dokumente möglichst immer im Quirksmodus rausgehen. Aber man muß es eben wissen.
verstehe ich nicht, sorry.
Soll heißen: entscheide Dich - entweder sind alle Browser im Standard- oder Quirksmode - sie reagieren dann unterschiedlich. Man kann beides machen, braucht aber unterschiedliche Hacks dafür um die Browserunterschiede auszugleichen. Und mach es halt auf allen Seiten eines Projektes gleich und mische nicht innerhalb des Projektes die Methoden.

Und generell zur CSS-Umsetzung: sag nicht, ich hätte Dich nicht gewarnt!

Aber Du hast schon viel geschafft, und die letzten Seiten schaffst Du auch noch. Beim nächsten Mal wird es einfacher.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.08.2004, 15:57
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard Re: Layout-Problem

Zitat:
Zitat von legman
also keine angabe für hight geht nicht. dann sieht es so aus.
Das kommt von deinem negativen »margin«.
Zitat:
ich habe im body immer ein 80% font-size angegeben. die werden allerdings oft durch neue anweisungen überschrieben.
80% ist Mist. Das sind ja 20% weniger als ich mir als gut lesbar eingestellt habe. Jemand, der 20px braucht, hat bei dir nur noch 16px — ein drastischer Unterschied und Grund genug, die Seite zu verlassen.

Zitat:
hm.. wie groß sollte es denn sein? wer kontakt sucht wird das formular benutzen, egal ob es "klein" oder "groß" ist, sach ich mal einfach so.
Nein, das wirst du bald selber feststellen. Wenn die Eingabemaske keine Übersicht zuläßt, benutzt man sie auch nicht. Sie sollte wenigstens 20em breit sein (besser mehr) und mindestens 12 Zeilen hoch.
Zitat:
Zitat:
Reset-Button raus.
überzeugt mich irgendwie nicht.
Bring doch mal selber Argumente für den Nutzen dieses Buttons. Du wirst kein einziges finden.
Zitat:
Zitat:
Zitat von toscho
Naja, so schlimm ist es nun auch wieder nicht. Wichtig sind immer nur zwei Dinge:
• Benutze nur das, was du wirklich verstanden hast.
• Das Dokument muß auch ohne Stylesheet gut zugänglich sein.
Dann kannst du dich langsam ranarbeiten.
ohne stylesheets ist es doch nicht valide. ich müßte ja sonst sämtliche "deprecated" font-tags einsetzen und mit tabellen layouten.
Quark, ohne Stylesheets werden die Standardeinstellungen des Browsers genommen. Und man kann auch mit <font> usw. valide Dokumente erstellen. Was nicht heißt, daß du sowas benutzen solltest.
Zitat:
Zitat:
Zitat von toscho
Ich selbst sorge dafür, daß meine Dokumente möglichst immer im Quirksmodus rausgehen. Aber man muß es eben wissen.
verstehe ich nicht, sorry.
Das Hauptproblem ist die Tatsache, daß sowieso jedes Dokument irgendwann im Quirks gerendert wird (such dich dazu bitte durchs Forum) — und ich habe einfach keine Lust, doppelte Tests durchzuführen. Davon abgesehen ist im IE Win der »Standard compliants mode« der eigentlich kaputte.

Gruß
Thomas
Mit Zitat antworten
  #8 (permalink)  
Alt 18.08.2004, 14:02
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard Re: Layout-Problem

hallo terry wie geht's?
Zitat:
Zitat von terrikay
Du könntest auch eine min-height angeben und nur für den IE eine height.
Aber warum sich der Background jetzt nicht bis runter zieht, wundert mich. Wie hast Du das denn positioniert, dass es aus dem Fluß raus ist? Allerdings ist mir Deine CSS-Datei zu unübersichtlich, da schau ich jetzt nicht weiter nach (untereinander liest sich besser als alles hintereinander und Kommentare schaden auch nicht).
ich schreibe den code nicht nebeneinander sondern untereinander. k.a. warum das bei dir nebeneinander steht?!

Zitat:
Zitat von terrikay
Ich finde es auch schon recht klein (und toscho hat eine riesige Monitorauflösung von 1600x1200px - da verlieren sich dann die pixelchen......)
irgendein user wird wohl immer benachteiligt sein. gibt es ein layout das auf allen systemen/plattformen/browsern perfekt dargestellt wird? ich sage NEIN!
aber gut ich werde es größer machen! :-/

Zitat:
Zitat von terrikay
Soll heißen: entscheide Dich - entweder sind alle Browser im Standard- oder Quirksmode - sie reagieren dann unterschiedlich. Man kann beides machen, braucht aber unterschiedliche Hacks dafür um die Browserunterschiede auszugleichen. Und mach es halt auf allen Seiten eines Projektes gleich und mische nicht innerhalb des Projektes die Methoden.
das war auch nur ein versehen! außerdem, wer hat mir zu diesem doctype geraten? na?
Zitat:
Zitat von terrikay
Und generell zur CSS-Umsetzung: sag nicht, ich hätte Dich nicht gewarnt!
Mit Zitat antworten
  #9 (permalink)  
Alt 18.08.2004, 14:13
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard Re: Layout-Problem

Zitat:
80% ist Mist. Das sind ja 20% weniger als ich mir als gut lesbar eingestellt habe. Jemand, der 20px braucht, hat bei dir nur noch 16px — ein drastischer Unterschied und Grund genug, die Seite zu verlassen.
dies habe ich aus diesem tutorial

Zitat:
Nein, das wirst du bald selber feststellen. Wenn die Eingabemaske keine Übersicht zuläßt, benutzt man sie auch nicht. Sie sollte wenigstens 20em breit sein (besser mehr) und mindestens 12 Zeilen hoch.
Zitat:
Bring doch mal selber Argumente für den Nutzen dieses Buttons. Du wirst kein einziges finden.
ich hab einen! was wenn jemand seinen text löschen will? ein klick und alles ist gelöscht!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.08.2004, 14:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard Re: Layout-Problem

Zitat:
Zitat von legman
hallo terry wie geht's?
Och jo - ganz gut......

Zitat:
ich schreibe den code nicht nebeneinander sondern untereinander. k.a. warum das bei dir nebeneinander steht?!
Hast recht - das passiert nur, wenn ich bei der Webdeveloper-Extension des FF auf CSS-View klicke - dann stellt der das anders dar.......

Zitat:
das war auch nur ein versehen! außerdem, wer hat mir zu diesem doctype geraten? na?
Ich hatte Dir geraten, die Browser im Standard-Modus laufen zu lassen, und da steh ich auch zu (toscho sieht das anders). Jetzt hast Du es ja auch dahingehend geändert. Zu einer Doctype-Mischung hatte ich Dir nie geraten.

Zitat:
Zitat:
Zitat von terrikay
Und generell zur CSS-Umsetzung: sag nicht, ich hätte Dich nicht gewarnt!
*g*
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
problem mit layout --> testcase andip CSS 5 29.02.2008 14:10
Problem mit dreispaltigem Layout im IE Breezah CSS 7 13.08.2006 21:27
Problem mit 3-Zeiligem Layout guenterfrosch CSS 6 10.08.2006 12:41
Layout Problem smooth-graphics CSS 3 08.08.2006 17:59
Flexibles 3-Spalten Head-Foot Layout Problem crucho CSS 4 26.08.2004 21:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:29 Uhr.