Noch 1 Css-Fehler

Noch 1 Css-Fehler

Beitragvon Sigiman » 02.06.2009, 15:54

Hallo Xaver :) ,
erst mal vielen Dank für deinen Tipp, er war Gold wert. Deinen Vorschlag habe ich durchgeführt, 1 großer Schritt bin ich weiter.
Nun zur Frage: In Anlehnung zur letzten Frage gibt es für mich ein grundsätzliches Problem.
Aus einer erstellten Seite habe ich einen Teil herausgenommen, mit dem ich im Moment nicht weiterkomme. Ich meine, es handelt sich um nicht-ersetzte Inline-Elemente?!? Ich habe einen Text positioniert, der von der Element-Box richtig am Platz steht, die darin geschriebenen Texte aber fast nach Belieben 1x oben links stehen (ohne Rand), 1x nur mit oberem Rand, 1x mit oberem und seitlichem Rand. Daher habe ich bei den unterschiedlichen Browsern verschiedene Textstände. Da hilft kein Padding oder ähnliches. Ich hoffe, ich habe mich deutlich ausgedrückt.
In Explorer7 und neuester Opera-Version funktioniert unten stehendes Beispiel gleichmäßig, so wie ich es mir vorstelle: Der 2-Zeiler steht oben im Kästchen (Hellgrau). In Firefox3 wird der 2-Zeilen-Text in die Mitte des Blocks gestellt - und das darf nicht sein.
1. Frage: Wie kriege ich in Firefox die Zeilen nach links oben?
2. Frage: Gibt es eine elegantere Lösung als die 2. Zeile als 2. ID zu machen? Schriftgröße und Zeilenabstand darf nicht verändert werden.

Die erste Frage ist für mich im Moment die Allerwichtigste.
Hier der Text:
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Club-Startseite101</title>
<style type="text/css">
#body{font-family:sans-serif; color:#FFFFFF; border:0;}
#nr30{position:absolute; top:1cm; left:13.9cm; width:auto; height:auto;
background-color:#666; text-align:center;}
#nr31{background-color:#333; font-size:24pt; width:auto;}
</style>
</head>
<body bgcolor="333333">
<div id="body">
<div id="nr30">
<h5>Film- + Fotoclub Bardenberg
<br><span id="nr31">2009</span></h5>
</div>
</div>
</body>
</html> 


Wäre Super, wenn ich eine Antwort bekäme.
Sigiman
Sigiman
neu hier
 
Beiträge: 11
Registriert: 22.05.2009, 06:27

Re: Noch 1 Css-Fehler

Beitragvon Laus » 02.06.2009, 21:14

Hallo

Du solltest bei deinen Seiten immer einen CSS Prolog verwenden, wenigstens
Code: Alles auswählen
*{
margin: 0;
padding: 0;
}
solltest Du verwenden.
dieser stellt die Browserspezifischen Maße und Abstände auf Null und Du kannst dann selbst die Abstände über margin und padding bestimmen. dadurch erreichst Du eine weitgehend gleichmäßige Darstellung in den verschiedenen Browsern.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Re: Noch 1 Css-Fehler

Beitragvon Sigiman » 02.06.2009, 22:55

Hallo Xaver,
vielen Dank für deine Antwort. Ich habe es gleich einmal getestet, aber es bleibt wie es ist. Trotzdem werde ich die Sache weiterverfolgen. Sollte ich ein Ergebnis finden, melde ich mich. Wenn dir noch etwas einfällt... ich werde weiter die Seite beobachten.
LG
Sigiman
Sigiman
neu hier
 
Beiträge: 11
Registriert: 22.05.2009, 06:27

Re: Noch 1 Css-Fehler

Beitragvon Laus » 03.06.2009, 07:09

Aus Deiner Antwort werde ich nicht ganz schlau!
Wenn ich deinem Code von oben den CSS Prolog hinzufüge dann wird er in allen Browsern gleich dargestellt. Die Außen- und Innenabstände musst Du natürlich jetzt noch korrigieren.
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Re: Noch 1 Css-Fehler

Beitragvon Sigiman » 03.06.2009, 19:29

Ich weiß nicht, was man falsch machen kann. Auch mit Prolog ändert sich nichts, wenigstens bei mir. Firefox stellt einen eigens in der Höhe definierten Kasten dar (Höhe habe ich ja auf auto gesetzt) und da ist oben wie unten ca. 0,5 cm freier Raum. Die Schrift steht genau in der Mitte.
Die Breite habe ich ebenfalls auf auto gesetzt und da ist links wie rechts kein Raum, was ok ist. Warum in der Höhe?
Bei IE und Opera ist alles genau, das war es aber vorher auch schon.
Sigiman
neu hier
 
Beiträge: 11
Registriert: 22.05.2009, 06:27

Re: Noch 1 Css-Fehler

Beitragvon Laus » 04.06.2009, 10:17

Also ich kann eigentlich keinen Unterschied feststellen.
Club-Startseite_FF.png
Club-Startseite_FF.png (1.55 KiB) 241-mal betrachtet
Club-Startseite_IE.png
Club-Startseite_IE.png (1.55 KiB) 240-mal betrachtet
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Re: Noch 1 Css-Fehler

Beitragvon Sigiman » 04.06.2009, 18:45

Erst mal möchte ich mich für deine Mühe bedanken. So wie es bei dir aussieht, ist es ok. In IE und Opera sieht es bei mir genau so aus. Bei Firefox habe ich ca. 1/2 cm darüber und ca. 1/2cm darunter noch einen grauen Rand.
Ich zeige dir mein geändertes Programm, denn nur hier kann der Fehler liegen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Club-Startseite101</title>
<style type="text/css">
#body{font-family:sans-serif; color:#FFFFFF; border:0;}
#h5{margin:0; padding:0;}
#nr30{position:absolute; top:1cm; left:13.9cm; width:auto; height:auto;
background-color:#666; text-align:center;}
#nr31{background-color:#333; font-size:24pt; width:auto;}
</style>
</head>
<body bgcolor="333333">
<div id="body">
<div id="nr30">
<h5>Film- + Fotoclub Bardenberg
<br><span id="nr31">2009</span></h5>
</div>
</div>
</body>
</html>

Alternativ habe ich padding und margin auch in die #body-Zeile gestellt, aber auch hier hat sich nichts verändert. Weißt du einen Rat?
Sigiman
neu hier
 
Beiträge: 11
Registriert: 22.05.2009, 06:27

Re: Noch 1 Css-Fehler

Beitragvon Laus » 04.06.2009, 18:51

Habe deinen Code mal etwas abgeändert:
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Club-Startseite101</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background-color:#333;}
#body{font-family:sans-serif; color:#FFFFFF; border:0;}
#nr30{position:absolute; top:1cm; left:13.9cm; width:auto; height:auto;
background-color:#666; text-align:center;}
#nr31{background-color:#333; font-size:24pt; width:auto;}
</style>
</head>
<body>
<div id="body">
<div id="nr30">
<h5>Film- + Fotoclub Bardenberg
<br><span id="nr31">2009</span></h5>
</div>
</div>
</body>
</html>


Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Re: Noch 1 Css-Fehler

Beitragvon Sigiman » 05.06.2009, 06:26

Hallo Xaver,
super, jetzt klappts auch bei mir, danke.
Sigi
Sigiman
neu hier
 
Beiträge: 11
Registriert: 22.05.2009, 06:27


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Noch 1 Css-Fehler"

Zurück zu: Fragen zur Homepage

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast