Zur Navigation

css unterschiedliche Darstellung in IE und Firefox 7.01 [2]

11 Lysander

Hallo, nun habe ich mich in die css-Syntax ein wenig hineingelesen, nur das theoretische und das praktische klappt bei mir schon etwas auseinander. Deshalb meine Bitte. Schaut Euch doch mal meine Testseite an (alle Links dort sind noch nicht verändert, also nur diese Testseite)
http://www.gyros-brasil.com.br/test-css.php
Mich würde auch interessieren, ob nun die Struktur dieser Seite den neueren Anforderungen entspricht oder ob ich noch immer alte Vorgehensweisen integriere.

Ich habe nun folgende Fragen:

A. Firefox

1.Wie kann ich die Navigationsspalte auf der linken Seite weiter nach links bringen ?
2.Ich gebe im screen.css Schriftgröße und -farbe für h1 an. Schrift müßte in weiß erscheinen. Wird aber nicht umgesetzt
(Schrift erscheint nur in weiß weil ich dies hier eingetragen habe.
    * {
    margin:0;
    padding:0;
    background-color: orange;
    color: white
    }
3.Das Gleiche passiert für h2 Wenn ich Schriftgrößen ändere, hat das keine Auswirkungen
4. ich habe für p> Schrift zentriert eingegeben, erscheint aber linksbündig.
5. ich habe für p> schrift auf bold gesetzt, bleibt aber dünn

B. Internet Explorer
1. Warum erscheint die komplette Schrift unterstrichen ?
2. Wo und wie muß ich eine Veränderung vornehmen, daß oben im Kopfbereich "Recomende esta pagina a um amigo"
ebenfalls wie bei Firefox zweizeilig gezeigt wird.

Nachfolgend kopiere ich noch das css-script ein:

/* screen.css */

* {
    margin:0;
    padding:0;
    background-color: orange;
    color: white
    }

html, body {
    height:100%;
}

#wrapper {
    min-height:100%;
    background-color: orange;
	width: 1101px;
	/*background-image: url(unechter-spalten-hintergrund.png);
	background-repeat: repeat-y;
	border:1px solid black;*/
}

#logo {

    background-color: orange;
	width: 1000px;
	padding-left: 0px;         /* links */
    padding-top: 0px;          /* oben */
}

#logo a {


	padding: 2px 2px 2px 2px;
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;
}

#navigation a {

    background-color: orange;
	width: 150px;
	float:left;
	font-weight: bold;
	font-size: 12px;
	
}

#navigation a:hover {
	color: ffffff;
	background-color: #cba24b;
	border: 1px solid #453514;
}

#inhalt {

   margin-left: 151px;
   width: 900px;  

h2 {
    padding-bottom: 0.5em;
	font-size: 1.6em;
	color: white;
} 

h1 {
    padding-bottom: 0.5em;
	text-align: center;
	color:"#FFFFFF";
	background-color: orange;
	font-family: Vivaldi, "Brush Script", fantasy;
	font-size: 2em;
	font-weight:normal;
}

p {
     padding-bottom: 1em;
     line-height: 2em;
     letter-spacing: 0.3em;
     word-spacing: 2em; 
     text-align: center;
     font-weight: bold;
     background-color: orange;
}

25.10.2011 13:34

12 Jörg

Mich würde auch interessieren, ob nun die Struktur dieser Seite den neueren Anforderungen entspricht oder ob ich noch immer alte Vorgehensweisen integriere.

Der Code macht schon noch eine recht "alten" Eindruck

Du verwendest zum Formatieren noch viele veraltete HTML-Tags und Attribute wie z.B. <FONT>, <INS>, VALIGN; COLOR, SIZE. Ich würde diese durch entsprechende CSS-Formatierungen ersetzen. Eine Übersicht zur Schriftformatierung in CSS findet sich z.B. auf SELFHTML:

http://de.selfhtml.org/css/eigenschaften/schrift.htm

Statt Layout-Tabellen verwendet man heute das <div> Element

Die Abstände würde ich nicht durch eine Vielzahl von <BR> Tags erzeugen, sondern durch die CSS-Eigenschaft margin-bottom

Dann würde ich die HTML-Tags alle einheitlich klein schreiben, also <body> statt <BODY> - die Großschreibung sieht auch irgendwie nach letztem Jahrhundert aus

Das musst du nicht alles sofort umsetzen, aber das sind denke ich sinnvolle Punkte bei einer Weiterentwicklung

A. Firefox

1.Wie kann ich die Navigationsspalte auf der linken Seite weiter nach links bringen ?

Den linken Abstand hast du für das übergeordnete Element definiert, in dem das Navigationselement enthalten ist:

#inhalt {
    margin-left: 151px;
    width: 900px;
}

2.Ich gebe im screen.css Schriftgröße und -farbe für h1 an. Schrift müßte in weiß erscheinen. Wird aber nicht umgesetzt
(Schrift erscheint nur in weiß weil ich dies hier eingetragen habe.
    * {
    margin:0;
    padding:0;
    background-color: orange;
    color: white
    }
3.Das Gleiche passiert für h2 Wenn ich Schriftgrößen ändere, hat das keine Auswirkungen
4. ich habe für p> Schrift zentriert eingegeben, erscheint aber linksbündig.
5. ich habe für p> schrift auf bold gesetzt, bleibt aber dünn

Hier fehlt die schließende Klammer:

#inhalt {

   margin-left: 151px;
   width: 900px; 

Der Fehler führt dazu, dass folgende Definitionen nicht mehr berücksichtigt werden

B. Internet Explorer
1. Warum erscheint die komplette Schrift unterstrichen ?

Das liegt möglicherweise an dem <INS>, welches jeder Browser anders darstellt. Dieses HTML-Element bezeichnet einen nachträglich eingefügten Inhalt und ist hier wohl sowieso fehl am Platz

2. Wo und wie muß ich eine Veränderung vornehmen, daß oben im Kopfbereich "Recomende esta pagina a um amigo"
ebenfalls wie bei Firefox zweizeilig gezeigt wird.

Das hatte ich in einem früheren Beitrag ja schon geschrieben:

Die Browser berechnen die Breiten der Tabellenzellen anscheinend unterschiedlich, so dass im Falle des IE die letzte Tabellenzelle enger ist. Ich würde die Breiten nicht in Prozent sondern in Pixel angeben, so dass für die Browser diesbezüglich kein Ermessensspielraum gegeben ist.

25.10.2011 17:45 | geändert: 25.10.2011 17:48

13 Lysander

Hallo Jörg, wieder mal vielen Dank für Deine Impulse und Anregungen. Ich habe nun weiter gebastelt und den Quelltext hoffentlich nun "moderner" gemacht. Bitte schau Dir diesen Text nochmals an, ob es noch Dinge gibt, die heute nicht mehr zeitgemäß sind.
http://www.gyros-brasil.com.br/test-css.php

Die meisten offenen Fragen habe ich nun dank Deiner Impulse und Studium der Internetseiten hinbekommen.

Für folgende Punkte habe ich bisher jedoch noch keine Lösung gefunden:
1. Wieso sind die Textzeilen von h1, h2, h3 nicht linksbündig, obwohl ich das in der css-Datei so angegeben habe ?
2. Wenn Du mit der Maus über meine Links oben im Kopf oder im Inhaltbereich fährst, dann erscheint ein brauner Hintergrundrahmen, genausolange wie der Text des Links (das ist so gewollt)
Aber links im verzeichnis klappt das nicht, da wird der braune Untergrund dann so lange wie die Breite vom Verzeichnis. Wie kann ich das ändern ?

Nachfolgend die nun aktuelle css-Datei:

/* screen.css */

* {

    margin:0;                  /*Aussenrand*/
    padding:0;                  /*Innenabstand*/
    text-decoration: none;     /*Unterstrich beim Link wird unterdrückt*/
   
    }

html, body {

    height:100%;
}

#wrapper {                                          /*ein wrapper ist ein Container*/

    min-height:100%;                                /*minimale Höhe"
    background-color: orange;                       /*Hintergrundfarbe*/
	width: 1101px                                    /*Breite*/  
	}

#logo {

   	width: 1000px;              /*Breite*/ 
	padding-left: 0px;         /* Innenabstand links */ 
    padding-top: 0px;          /* Innenabstand oben */
}

#logo a {

	padding: 2px 2px 2px 2px;      /*Innenabstand alle vier Richtungen*/
	background-color: orange;    /* Hintergrundfarbe */
	font-family: Arial, Helvetica, Verdana, sans-serif;    /*Schriftart in dieser Reihenfolge*/
    color:white;                  /* Schriftfarbe */
	font-weight: bold;              /*Schriftstärke*/
	font-size:0.8em;                 /*Schriftgrösse*/
	
}

#logo a:hover {

	color: ffffff;                                        /*Schriftfarbe*/
	background-color: #cba24b;                           /*Hintergrundfarbe*/

}


#navigation a {

    margin-left:2em;                                    /*Außenrand/Abstand links*/
    text-align:left;                                      /*Text linksbündig*/ 
    font-family: Arial, Helvetica, Verdana, sans-serif;     /*Schriftart in dieser Reihenfolge*/
    line-height:1.4em;                                /*Zeilenhöhe*/ 
    color:white;                                     /*Schriftfarbe*/
    background-color: orange;                       /*Hintergrundfarbe*/
	width: 150px;                                    /*Breite*/ 
	float:left;                                     /*setzt den kompletten Block nach links*/ 
	font-weight: bold;                                /*Schriftstärke*/
	font-size:0.8em;                                 /*Schriftgrösse*/

}

#navigation a:hover {

	color: ffffff;                                   /*Schriftfarbe*/
	background-color: #cba24b;                     /*Hintergrundfarbe*/
	}

#inhalt {

   width: 900px;                                   /*Breite*/  
   background-color: orange;                      /*Hintergrundfarbe*/
   }

#inhalt p {

   margin-left:15em;                                 /*Außenrand/Abstand links*/
   margin-right:5em;                                  /*Außenrand/Abstand rechts*/
   text-align:left;                                 /*Text linksbündig*/
   white-space:pre;                             /*Browser übernimmt bei Textdarstellung Abstände, Leerzeichen, Leerzeilen wie im Quelltext eingegeben*/ 
   font-size:1.0em;                               /*Schriftgrösse*/
   font-weight:bold;                                 /*Schriftstärke*/
   font-family: Arial, Helvetica,  Verdana, sans-serif;  /*Schriftart in dieser Reihenfolge*/
   line-height:1.4em;                                    /*Zeilenhöhe*/
   color:white;                                           /*Schriftfarbe*/
   
   }
   
#inhalt h1 {
  
   margin-left:15em;                     /*Außenrand/Abstand links*/
   margin-right:5em;                      /*Außenrand/Abstand rechts*/
   text-align:left;                        /*Text linksbündig*/
   font-size:1.5em;                        /*Schriftgrösse*/
   line-height:1.8em;                       /*Zeilenhöhe*/
   font-weight:bold;                      /*Schriftstärke*/
   color:white;                           /*Schriftfarbe*/
   }
   
#inhalt h2 {

   margin-left:15em;                       /*Außenrand/Abstand links*/
   margin-right:5em;                        /*Außenrand/Abstand rechts*/
   text-align:left;                          /*Text linksbündig*/
   color:yellow;                             /*Schriftfarbe*/
   font-size:1.2em;                           /*Schriftgrösse*/
   line-height:1.6em;                         /*Zeilenhöhe*/
   font-weight:bold;                         /*Schriftstärke*/
  }
   
#inhalt h3 {
   padding-top:275px;                     /*Innenabstand nach oben*/ 
   margin-left:15em;                       /*Außenrand/Abstand links*/
   margin-right:5em;                        /*Außenrand/Abstand rechts*/
   text-align:center;                         /*Text zentriert*/
   color:black;                              /*Schriftfarbe*/
   font-size:0.8em;                           /*Schriftgrösse*/
 }

#inhalt a:hover {

	color: ffffff;                           /*Schriftfarbe*/
	background-color: #cba24b;               /*Hintergrundfarbe*/
	
}

27.10.2011 22:49

14 Jörg

Du hast die screen.css dreimal eingebunden, einmal reicht; die beiden <link> Tags innerhalb von <body> solltest du löschen, zumal <link> auch nur innerhalb von <head> vorkommen darf.

1. Wieso sind die Textzeilen von h1, h2, h3 nicht linksbündig, obwohl ich das in der css-Datei so angegeben habe ?

Du hast einen linken Rand definiert:

#inhalt h1 {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.8em;
    margin-left: 15em;
    margin-right: 5em;
    text-align: left;
}

Die relative Maßeinheit em ist hier ungünstig, weil der Abstand dann in Relation zur Schriftgröße errechnet wird. Das Ergebnis unterscheidet sich entsprechend von dem des darunter positionierten "#inhalt p", für welches eine kleinere Schriftgröße definiert ist. Für Abstände sollte deswegen die absolute Maßeinheit px verwendet werden.

2. Wenn Du mit der Maus über meine Links oben im Kopf oder im Inhaltbereich fährst, dann erscheint ein brauner Hintergrundrahmen, genausolange wie der Text des Links (das ist so gewollt)
Aber links im verzeichnis klappt das nicht, da wird der braune Untergrund dann so lange wie die Breite vom Verzeichnis. Wie kann ich das ändern ?

Indem du die feste Breitenangabe für "#navigation a" herausnimmst

28.10.2011 11:52 | geändert: 28.10.2011 11:54

15 Lysander

Hallo Jörg, vielen Dank für Deine weiteren Erklärungen, nun habe ich auch diese Hürde geschafft.
Nun habe ich nur noch einen letzten kleinen Punkt.
Ich habe im unteren Bereich meiner Seite einen Besucherzähler eingebunden, der aber nun linksbündig erscheint, obwohl ich bei css zentriert angegeben habe. Vielleicht liegt das daran, daß das kein Text ist, aber wie zentriere ich dann diesen Zähler ?

28.10.2011 16:04

16 Jörg

Bei mir erscheint der Counter mittig - die Lösung hast du anscheinend selbst schon gefunden? oder geht es noch um die Testseite - dort sehe ich keinen Counter?

Die originale Seite erscheint bei mir jetzt oben leer und man muss erst ein stückweit scrollen um zum Inhalt zu gelangen

29.10.2011 18:44

17 Lysander

Hallo Jörg, Entschuldigigung, das habe ich nicht nochmals erwähnt, es geht noch immer um die Testseite (in der Originalseite ist der Counter in einem table eingebunden und da klappt das mit dem mittig sein).
Ich habe aber inzwischen weiter herumgebastelt, denn ich habe einen Counter auf dieser Testseite eingebunden für "Visitantes" und einen anderen Counter für "Bestellungen" (testweise auf der gleichen Seite)
Der Counter für Visitantes erscheint, aber eben leider linksbündig, nicht mittig wie gewünscht, komischerweise erscheint der zweite Counter für Bestellungen überhaupt nicht, ebensowenig eine Fehlermeldung.

<h3><? include "counter/Visitantes/counter.php"; ?> </h3>
     <h3><? include "counter/Bestellungen/counter.php"; ?> </h3>

Testseite ist: http://www.gyros-brasil.com.br/test-css.php

29.10.2011 21:05

18 Jörg

Der Counter befindet sich in einem table. Blockelemente wie table, div, p etc. werden nicht mit text-align zentriert, sondern mit margin:auto. Zu den Unterschieden zwischen Block- ud Inline-Elementen siehe auch:

http://de.selfhtml.org/html/text/bereiche.htm

Wenn du den Code in der counter.php nicht direkt ändern kannst, würde ich den Counter in ein übergeordntes Element packen. Ich empfehle hier div anstelle von h3 - da h3 eine Überschrift bezeichnet. Den divs verpasst du dann noch eine Klasse, um dieses im CSS-Teil ansprechen zu können

<div class="counter"><?php include "counter/Visitantes/counter.php"; ?></div>

Notwendig ist dabei auch eine feste Breitenangabe:

div.counter {
width:150px;
margin:auto;
}


PS: statt "<?" würde ich zur Einleitung eines PHP-Abschnittes "<?php" verwenden

29.10.2011 21:21 | geändert: 29.10.2011 21:24

19 Lysander

Hallo Jörg, danke für Deine Erklärungen, ich habe nun dieses div-Element eingebunden und zentriert, klappt einwandfrei, Danke für den Tipp.
Zusatzfrage. Ich habe im css-Script folgendes eingefügt:

#counter {                             
width:150px;
margin:auto;
}

Frage: Ich habe mal testhalber die Breite auf 350 verändert, warum ändert sich dann nichts in der Darstellung des counters ?

Ich habe nun die Veränderungen die ich auf meiner test-css gemacht habe sinngemäß übertragen auf alle anderen Seiten. FRUST.
Wenn Du nun die Originalseite aufrufst
http://www.gyros-brasil.com.br/
dann erscheint der oberste Link (O que e gyros) absolut in Ordnung, auch der nachfolgende Link ist in Ordnung, aber alle Verlinkugen darunter, erscheinen wieder versetzt, bspw. ein Teil rechts neben Kopfzeile, Rest im normalen Bereich. Woran liegt das ?

30.10.2011 19:23

20 Lysander

Hallo Jörg, inzwischen habe ich noch weiter gebastelt, weil ich auch die Kontaktformulare umstellen möchte auf css. Ich habe da eine Vorlage im Internet gefunden, die ich nun auf meine Werte umgestellt habe, technisch funktioniert da nun auch alles, aber optisch stimmts noch nicht. Warum erscheint da dieses relativ große graue Feld (das grau kann ich sicherlich umstellen) aber dieses Feld, wo und wie kann ich das beeinflussen.
http://www.gyros-brasil.com.br/gyros-trabalhar.php

Ganz unabhängig davon, beginnt die Schrift von dem vorangegangen Text noch immer rechtsbündig neben der Kopfzeile.

Meine css-liste habe ich wie folgt ergänzt:

/* kontaktformular styles: */
#kontaktformular { padding:300px; width:550px; background:#e7e7e7; border:1px #c4c4c4 solid;}
#kontaktformular label { width:200px; height:22px; margin-top:5px; display:block; float:left; }
#kontaktformular .eingabe { width:248px; height:20px; margin-top:5px; border:1px #c4c4c4 solid; float:left; }
#kontaktformular textarea { width:248px; height:98px; border:1px #c4c4c4 solid; margin-top:5px; font-family:arial; font-size:12px; float:left; }
#kontaktformular input.button { height: 23px; width: 98px; margin-top:10px;  margin-left: 252px; background:#FFF; border:1px #c4c4c4 solid; }
#kontaktformular br { clear:both; }

31.10.2011 11:21