Gruppen
- Top Gruppen
- Betriebsysteme
- Windows classik
- Linux
- BS-Sonstige
- Software
- Datenbanken
- Bildbearbeitung
- Audio/mp3/Video
- Security/Viren
- SW-Sonstige
- Hardware
- Mainboard/CPU
- Grafikkarten
- Peripherie
- Laptop/Notebook
- HW-Sonstiges
- Netzwerk
- Telefon,ISDN,Modem
- W-Lan
- NW-Sonstiges
- Programmierung
- PHP,ASP,Perl...
- Java,C++...
- Webseiten/HTML
- Sonstiges
- PC-Sonstiges
- Plauderecke
- SN Intern
- Test
/ Forum / Webseiten/HTML
Webseiten/HTML
Fragevon besucherpete vom 04.12.2019, 11:36 Options
Inhalte per CSS zentrieren im Firefox
Guten Morgen!
Ich möchte auf einer Webseite ein paar kleine Grafiken nebeneinander innerhalb eines DIV darstellen. Die Anzeige soll zentriert erfolgen. Das habe ich versucht, innerhalb einer Stylesheetdatei mit text-align: center; umzusetzen. Im IE und Opera klappt das auch, leider aber nicht imFirefox. Dort erfolgt die Anzeige linksbündig.
Da der Container außer den Grafiken keine weiteren Daten enthält, ist es im Grunde auch egal, ob der Container selbst zentriert wird oder der Inhalt innerhalb des Containers.
Wie muss ich den Code modifizieren, damit das zumindest in den gängigsten Browsern so funktioniert, wie ich es möchte?
Ich möchte auf einer Webseite ein paar kleine Grafiken nebeneinander innerhalb eines DIV darstellen. Die Anzeige soll zentriert erfolgen. Das habe ich versucht, innerhalb einer Stylesheetdatei mit text-align: center; umzusetzen. Im IE und Opera klappt das auch, leider aber nicht imFirefox. Dort erfolgt die Anzeige linksbündig.
Da der Container außer den Grafiken keine weiteren Daten enthält, ist es im Grunde auch egal, ob der Container selbst zentriert wird oder der Inhalt innerhalb des Containers.
Wie muss ich den Code modifizieren, damit das zumindest in den gängigsten Browsern so funktioniert, wie ich es möchte?
Antwort 1 von Supermax vom 04.12.2019, 11:43 Options
Es müßte gehen, wenn du den Bildern selbst ein <img style="margin-left:auto;margin-right:auto;" ... > zuweist, bzw. ein entsprechendes globales Format oder eine Formatklasse definiertst.
Antwort 2 von derpfleger vom 04.12.2019, 12:02 Options
Antwort 3 von besucherpete vom 04.12.2019, 12:02 Options
Damit würde jedes einzelne Bild mittig ausgerichtet. Das soll aber nicht sein. Wenn z.B. drei Grafiken nebeneinander sind, soll dieses "Paket" zentriert werden.
Antwort 4 von katy vom 04.12.2019, 12:14 Options
hallo besucherpete,
wenn du den margin-Ratschlag von Supermax anwendest auf das umgebende Element (dein "Paket") sollte eigentlich genau der gewünschte Effekt eintreten.
einen schönen Tag wünscht
katy
wenn du den margin-Ratschlag von Supermax anwendest auf das umgebende Element (dein "Paket") sollte eigentlich genau der gewünschte Effekt eintreten.
einen schönen Tag wünscht
katy
Antwort 5 von besucherpete vom 04.12.2019, 12:36 Options
Hab ich probiert und dem umgebenden DIV ein margin: auto; gegeben - leider mit dem gleichen Ergebnis wie zuvor auch.
Ich hab es aber jetzt hinbekommen mit text-align: center; im Body.
Aber ich hab auch noch was anderes:
Ich möchte außerdem zwei Elemente nebeneinander ausrichten. Dazu hab ich dem Linken Container ein float: left; mitgegeben. Das Element daneben soll die restliche verfügbare Breite des Anzeigefensters einnehmen.
In der Praxis sieht das nun so aus, dass im IE das zweite Element rechts neben dem ersten angezeigt wird und in der Breite bis zum rechten Rand reicht - so wie gewünscht.
Im Firefox überlappt das Element das erste und nimmt dann die komplette Breite des Fensters ein.
Daher auch hierzu die Frage: Was läuft verkehrt bzw. ist zu beachten?
Ich hab es aber jetzt hinbekommen mit text-align: center; im Body.
Aber ich hab auch noch was anderes:
Ich möchte außerdem zwei Elemente nebeneinander ausrichten. Dazu hab ich dem Linken Container ein float: left; mitgegeben. Das Element daneben soll die restliche verfügbare Breite des Anzeigefensters einnehmen.
In der Praxis sieht das nun so aus, dass im IE das zweite Element rechts neben dem ersten angezeigt wird und in der Breite bis zum rechten Rand reicht - so wie gewünscht.
Im Firefox überlappt das Element das erste und nimmt dann die komplette Breite des Fensters ein.
Daher auch hierzu die Frage: Was läuft verkehrt bzw. ist zu beachten?
Antwort 6 von katy vom 04.12.2019, 12:47 Options
Hallo besucherpete,
bitte entschuldige falls ich dir jetzt ein bisschen ungehalten erscheine, aber meine Nachfrage kann ich nicht anders formulieren: Glaubst du wirklich, dass mit der spärlichen Information deine Frage beantwortet werden kann?
Schon bei der ersten Problematik war Raten angesagt, bei diesem Problem nützt selbst das nichts mehr.
Also sei nicht sauer sondern stell den Quellcode (oder die Seitenadresse) zur Verfügung, damit das Problem im Zusammenhang sichtbar wird.
bis dann
katy
bitte entschuldige falls ich dir jetzt ein bisschen ungehalten erscheine, aber meine Nachfrage kann ich nicht anders formulieren: Glaubst du wirklich, dass mit der spärlichen Information deine Frage beantwortet werden kann?
Schon bei der ersten Problematik war Raten angesagt, bei diesem Problem nützt selbst das nichts mehr.
Also sei nicht sauer sondern stell den Quellcode (oder die Seitenadresse) zur Verfügung, damit das Problem im Zusammenhang sichtbar wird.
bis dann
katy
Antwort 7 von besucherpete vom 04.12.2019, 13:11 Options
Zitat:
Glaubst du wirklich, dass mit der spärlichen Information deine Frage beantwortet werden kann?
Glaubst du wirklich, dass mit der spärlichen Information deine Frage beantwortet werden kann?
Ja, denn glaubst Du wirklich, dass ich eine Frage stelle in der Gewissheit, sie kann so nicht beantwortet werden? Wie sinnvoll ist das denn? ;o)
Nun denn, hier der CSS-Code:
.logo {
position: relative;
margin: 7px;
float: left;
}
.head {
position: relative;
margin: 15px;
color: #666666;
font-family: verdana;
font-size: 1.5em;
}
.bar {
position: relative;
height: 7px;
background-color: #FFCC66;
border: 1px #666666 solid;
}Im Quelltext findet sich das so wieder:
<div class="logo">DATEINAME</div>
<div class="head">TEXT</div>
<div class="bar"></div>Nochmal kurz das Problem:
Der Container "bar" soll rechts neben dem "logo", aber unterhalb von "head" angezeigt werden. Im Firefox wird es zwar unter dem "head" angezeigt, aber nicht rechts neben dem "logo", sondern linksbündig ausgerichtet und überdeckt damit das andere Element.
Antwort 8 von katy vom 04.12.2019, 13:40 Options
Hallo besucherpete,
mit position:relative sagst du den Elementen, dass sie bei dem Platz, den sie einnehmen, keine besondere Rücksicht auf andere Elemente nehmen müssen.
Zum floaten brauchst du position nicht. Wenn du es sonst nicht brauchst - um das zu beurteilen ist deine Quellcode immer noch nicht aussagekräftig ;-) - solltest du es einfach entfernen.
Viel Erfolg
katy
mit position:relative sagst du den Elementen, dass sie bei dem Platz, den sie einnehmen, keine besondere Rücksicht auf andere Elemente nehmen müssen.
Zum floaten brauchst du position nicht. Wenn du es sonst nicht brauchst - um das zu beurteilen ist deine Quellcode immer noch nicht aussagekräftig ;-) - solltest du es einfach entfernen.
Viel Erfolg
katy
Antwort 9 von derpfleger vom 04.12.2019, 13:50 Options
Oder du verschachtelst anders und fügst ein weiteres float:left; im head-Style ein:
.logo {
position: relative;
margin: 7px;
float: left;
height:300px;
width:auto;
}
.head {
position: relative;
margin: 15px;
color: #666666;
font-family: verdana;
font-size: 1.5em;
float:left;
}
.bar {
position: relative;
height: 7px;
background-color: #FFCC66;
border: 1px #666666 solid;
}<div class="logo">DATEINAME</div>
<div class="head">TEXT
<div class="bar"></div> </div>Antwort 10 von Supermax vom 04.12.2019, 14:57 Options
Was hast du denn auf deiner Seite für einen DOCTYPE angegeben? Ohne gültige DOCTYPE-Angabe (im sogenannten "Quirks"-Modus) wird CSS je nach Browser mehr oder weniger fehlerhaft interpretiert, um kompatibel mit veralteten Webseiten zu sein.
Antwort 11 von besucherpete vom 04.12.2019, 15:02 Options
Zur Verdeutlichung versuche ich es mal mit einer grafischen Darstellung, wie es aussehen sollte: http://www.bilder-space.de/show.php?file=cEHQa52dShSlg4g.gif
Im IE ist das so auch gut möglich, Firefox dagegen zeigt den hier gelben Bereich von links beginnend an und überdeckt dabei zum Teil das Logo.
@Supermax: DOCTYPE ist im Quelltext noch gar nicht angegeben. Werde ich umgehend nachholen ... Danke!
Im IE ist das so auch gut möglich, Firefox dagegen zeigt den hier gelben Bereich von links beginnend an und überdeckt dabei zum Teil das Logo.
@Supermax: DOCTYPE ist im Quelltext noch gar nicht angegeben. Werde ich umgehend nachholen ... Danke!
Antwort 12 von katy vom 04.12.2019, 15:17 Options
Hallo besucherpete,
bitte hör doch mal mit der Geheimniskrämerei auf und präsentiere den gesamten Quellcode. Wenn ich lese, dass du nicht einmal eine Doctype-Declaration darin stehen hast, also gar kein vollständiges Seitenskelett aufgestellt hast, vermute ich noch mehr Fehler, die sich auf die Darstellung auswirken. Dann können wir mit deinen Info-Krümeln hier noch lange herumraten.
katy
bitte hör doch mal mit der Geheimniskrämerei auf und präsentiere den gesamten Quellcode. Wenn ich lese, dass du nicht einmal eine Doctype-Declaration darin stehen hast, also gar kein vollständiges Seitenskelett aufgestellt hast, vermute ich noch mehr Fehler, die sich auf die Darstellung auswirken. Dann können wir mit deinen Info-Krümeln hier noch lange herumraten.
katy
Antwort 13 von derpfleger vom 04.12.2019, 15:18 Options
@besucherpete:
Am einfachsten wäre es, du postest hier einen link zu der fraglichen Seite.
Worin ein Problem besteht, kann man ganz oft nicht anhand weniger Codeschnipseln erkennen, da der Fehler u.U. in einem ganz anderen Bereich des Codes liegt.
Und um dein Problem zu verdeutlichen, ist es auch wesentlich einfacher, dies anhand der tatsächlichen Seite zu machen, als anhand einer Grafik. Deine gepostete Grafik mag das Problem in diesem Fall gut darstellen, aber es bleibt eben das Problem bestehen, dass wir deine Umsetzung nicht nachvollziehen können.
Also: poste die URL, dann kann dir am besten geholfen werden. Du kannst ja eine Testseite online stellen, wo du die Inhalte durch Dummie-Texte ersetzt hast, falls niemand deinen content sehen soll.
Ein üblicher Dummie-Text wäre zB das hier:
derpfleger
PS: so, jetzt hab ich hier schlau rumgeredet, muss mich aus der Problembewältigung aber mal für ne Weile zurückziehen, da ich erst mal weg bin... Bis später
Am einfachsten wäre es, du postest hier einen link zu der fraglichen Seite.
Worin ein Problem besteht, kann man ganz oft nicht anhand weniger Codeschnipseln erkennen, da der Fehler u.U. in einem ganz anderen Bereich des Codes liegt.
Und um dein Problem zu verdeutlichen, ist es auch wesentlich einfacher, dies anhand der tatsächlichen Seite zu machen, als anhand einer Grafik. Deine gepostete Grafik mag das Problem in diesem Fall gut darstellen, aber es bleibt eben das Problem bestehen, dass wir deine Umsetzung nicht nachvollziehen können.
Also: poste die URL, dann kann dir am besten geholfen werden. Du kannst ja eine Testseite online stellen, wo du die Inhalte durch Dummie-Texte ersetzt hast, falls niemand deinen content sehen soll.
Ein üblicher Dummie-Text wäre zB das hier:
Zitat:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
derpfleger
PS: so, jetzt hab ich hier schlau rumgeredet, muss mich aus der Problembewältigung aber mal für ne Weile zurückziehen, da ich erst mal weg bin... Bis später
Antwort 14 von besucherpete vom 04.12.2019, 15:27 Options
Zitat:
Wenn ich lese, dass du nicht einmal eine Doctype-Declaration darin stehen hast, also gar kein vollständiges Seitenskelett aufgestellt hast ...
Wenn ich lese, dass du nicht einmal eine Doctype-Declaration darin stehen hast, also gar kein vollständiges Seitenskelett aufgestellt hast ...
Der Doctype hat ja nicht unbedingt etwas mit einem vollständigen Seitenskelett zu tun, dennoch besteht auch das noch nicht wirklich. Aus wesentlich mehr als ich oben gespostet habe, besteht der Quellcode im Grunde noch nicht. Aber ich seh mal zu, dass ich das Ding heut abend mal ins Netz bringe oder den "vollständigen" Code hier poste.
Zunächst mal danke! :o)
Antwort 15 von katy vom 04.12.2019, 15:51 Options
Hallo besucherpete,
das genau könnte schon der Fehler sein. Wie ein Browser fehlerhaften und unvollständigen Quellcode interpretiert lässt sich kaum vorhersagen.
Das Seitenskelett einer Seite sieht daher immer so aus wie hier bei
SelfHTML - Grundgerüst einer HTML-Datei beschrieben.
katy
Zitat:
Aus wesentlich mehr als ich oben gespostet habe, besteht der Quellcode im Grunde noch nicht.
Aus wesentlich mehr als ich oben gespostet habe, besteht der Quellcode im Grunde noch nicht.
das genau könnte schon der Fehler sein. Wie ein Browser fehlerhaften und unvollständigen Quellcode interpretiert lässt sich kaum vorhersagen.
Zitat:
Der Doctype hat ja nicht unbedingt etwas mit einem vollständigen Seitenskelett zu tun
da muss ich dir leider widersprechen. Ohne Doctype-Declaration weiß der Browser nicht einmal worum es sich bei der Datei handelt und fängt an zu raten. Genau dies ist die Bedeutung des Begriffs Quirksmodus, den Supermax ins Spiel gebracht hat. Übrigens würde dir kein Validator eine Seite ohne Doctype-Declaration durchgehen lassen.Der Doctype hat ja nicht unbedingt etwas mit einem vollständigen Seitenskelett zu tun
Das Seitenskelett einer Seite sieht daher immer so aus wie hier bei
SelfHTML - Grundgerüst einer HTML-Datei beschrieben.
katy
Antwort 16 von besucherpete vom 04.12.2019, 18:25 Options
Zitat:
Übrigens würde dir kein Validator eine Seite ohne Doctype-Declaration durchgehen lassen.
Übrigens würde dir kein Validator eine Seite ohne Doctype-Declaration durchgehen lassen.
Stimmt. Aber so weit war ich ja noch gar nicht, sondern bin sozusagen schon in den ersten Zeilen hängengeblieben. Am Ende wird das schon valide sein ... ;o)
Hier also mal der HTML-Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" type="text/css" href="css/styledat.css">
</head>
<body>
<hr>
<div class="logo"><img src="img/demo.gif" width="284" height="181" border="0" alt=""></div>
<div class="headline">Überschrift</div>
<hr>
</body>
</html>
Dazu gehört folgende Stylesheet-Datei:
body {
background: #FFFFFF;
text-align: center;
}
.logo {
margin: 7px;
float: left;
}
.headline {
font-family: verdana;
color: #666666;
font-size: 1.5em;
margin: 18px;
}
hr {
color: #FFCC66;
background-color: #FFCC66;
border: solid 1px #666666;
height: 5px;
}
Online könnt Ihr Euch das mal hier anschauen.
Ich habe inzwischen noch ein paar Veränderungen vorgenommen. So gibt es nun kein "bar" mehr, stattdessen wird ein angepasstes "<hr>" genutzt. Und damit hat es plötzlich auch im Firefox gepasst. Nun ist aber abweichend vom Thread-Titel mein Opera-Browser das Problem, der das nun so darstellt, wie anfangs der Firefox. Da ich nicht weiß, welche Browser Euch zur Verfügung stehen, habe ich auch mal ein paar Screenshots hochgeladen:
Internet Explorer
Firefox
Opera
Mehr Infos kann ich nicht bieten - oder doch? Dann lasst es mich wissen ... :o)
Antwort 17 von katy vom 04.12.2019, 22:50 Options
Hallo besucherpete,
sehr schön dass du die Anregungen zu validem HTML übernommen hast.
Ein erster Tipp zu deinem Problem: du floatest ohne zu clearen. Du solltest auf jedes gefloatete Element eins folgen lassen, das mit clear:... das Floating beendet. Erst dann beginnt der Browser wieder mit der normalen Darstellung. Hier böte sich das zweite hr dazu an.
Gute Nacht
katy
sehr schön dass du die Anregungen zu validem HTML übernommen hast.
Ein erster Tipp zu deinem Problem: du floatest ohne zu clearen. Du solltest auf jedes gefloatete Element eins folgen lassen, das mit clear:... das Floating beendet. Erst dann beginnt der Browser wieder mit der normalen Darstellung. Hier böte sich das zweite hr dazu an.
Gute Nacht
katy
Antwort 18 von besucherpete vom 05.12.2019, 17:04 Options
Na ja, man lernt ja nie aus, auch in Dingen, die einem "bekannt" erscheinen ... :o)
Ich werd mich heut Abend nochmal damit befassen und melde mich ggf. wieder.
Ich werd mich heut Abend nochmal damit befassen und melde mich ggf. wieder.
Ähnliche Themen
Horizontales und vertikales Zentrieren eines div-Containers mit CSS
derpfleger 05.08.2006 - 7578 Hits - 1 Antwort
CSS und Forefox 2.0.0.2
SilverTiger 10.03.2007 - 95 Hits - 26 Antworten
mit css inhalt zentrieren sowohl horizontal als auch vertikal?
ische 20.03.2007 - 190 Hits - 8 Antworten
Webseit zentrieren (trotz absoluter und relativer Bezüge)
Jessica 25.07.2007 - 34 Hits - 3 Antworten
Zentrieren der Website inklusive Ebenen
BenterA 20.04.2008 - 88 Hits - 15 Antworten
Hinweis
Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..
Neue Einträge
