CSS für Kompatibiltät zu IE, Firefox, Opera & Safari

[Gast] Foren Web allgemein HTML und CSS / Stylesheets CSS für Kompatibiltät zu IE, Firefox, Opera & Safari

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

marqito

Beiträge gesamt: 83

22. Mai 2008, 13:16
Beitrag # 1 von 7
Bewertung:
(2555 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo zusammen,
ich bin daran, mir ein neues Template für Joomla zu erstellen. Dabei scheitere ich schon bei den Div's. Diese sehen nicht in allen Browsern gleich aus. Kann mir jemand sagen, was ich beachten muss, damit es überall gleich aussieht? Hier mal meine beiden Files.

index.php:

Code

<html> 
<head> 
  <link  
  href="/templates/sameli.org/css/template.css"    
  rel="stylesheet" type="text/css"/> 
</head> 
<body> 
 <div id="Teil1">Kopfbereich/header 
   <div id="Bereich1">Bereich1</div> 
   <div id="Bereich2">Bereich2</div> 
 </div> 
 <div id="Teil2">Hauptanzeigebereich/main 
   <div id="Bereich3">breadcrumbs</div> 
   <div id="Bereich6">rechte Seite</div> 
   <div id="Bereich4">linke Seite</div> 
   <div id="Bereich5">Inhalt</div> 
 </div> 
 <div id="Teil3">Fusszeile /footer 
   <div id="Bereich7">Bereich7</div> 
 </div> 
</body> 
</html>

template.css:

Code

body{ 
  font-size: 12px; 
  font-family: Helvetica,Arial,sans-serif; 
} 
 
 
#Teil1{ /*header*/ 
  float: left; 
  border: 2px dotted   green; 
} 
#Teil2{ /*main*/ 
  float: left; 
  border: 2px   dotted yellow;  
} 
#Teil3{ /*footer*/ 
  clear:all; 
  border: 2px dotted red;  
} 
#Bereich1{ /*rechts oben*/ 
  float:   left; width: 18em; 
  margin: 0 0 1.2em;  
  border: 1px   dashed silver; background-color: #eee;  
} 
#Bereich2{ /*links   oben*/ 
  float: right; width: 12em; 
  margin: 0 0 1.1em;  
  background-color: #eee; border: 1px dashed silver;  
} 
#Bereich3{   /*breadcrumbs*/ 
  border: 1px dashed silver; 
  background-color: #eee;  
} 
#Bereich4{ /*linke Seite*/ 
  float:   left; width: 15em; 
  margin: 0 0 1.2em;  
  border: 1px   dashed silver;  
} 
#Bereich5{ /*Inhalt*/ 
  margin: 0 12em 1em   16em; 
  padding: 0 1em; 
  border: 1px dashed silver;    
} 
#Bereich6{  /*rechte seite*/ 
  float: right; width: 12em; 
  margin: 0 0 1.1em;  
  background-color: #eee; border: 1px   dashed silver;  
} 
#Bereich7{  /*footer*/ 
  margin: 0 0 1.1em;  
  background-color: #eee; border: 1px dashed silver;  
}

Die Seite ist http://www.sameli.org.

Grez Marqito

CSS für Kompatibiltät zu IE, Firefox, Opera & Safari

marqito

Beiträge gesamt: 83

22. Mai 2008, 13:37
Beitrag # 2 von 7
Beitrag ID: #351263
Bewertung:
(2548 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Ich habe das Dokument index.php noch validiert. Hier die richtige Version:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
  <title>Test</title> 
  <link rel="stylesheet" type="text/css" href="/templates/sameli.org/css/template.css" > 
</head> 
<body> 
 <div id="Teil1">Kopfbereich/header 
   <div id="Bereich1">Bereich1</div> 
   <div id="Bereich2">Bereich2</div> 
 </div> 
 <div id="Teil2">Hauptanzeigebereich/main 
   <div id="Bereich3">breadcrumbs</div> 
   <div id="Bereich6">rechte Seite</div> 
   <div id="Bereich4">linke Seite</div> 
   <div id="Bereich5">Inhalt</div> 
 </div> 
 <div id="Teil3">Fusszeile /footer 
   <div id="Bereich7">Bereich7</div> 
 </div> 
</body> 
</html>

Grez Marqito

als Antwort auf: [#351259]

CSS für Kompatibiltät zu IE, Firefox, Opera & Safari

swisscheese

Beiträge gesamt: 387

22. Mai 2008, 13:48
Beitrag # 3 von 7
Beitrag ID: #351265
Bewertung:
(2543 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Marquito

Warum muss Teil1 und Teil2 floaten? Ausserdem: clear:both; und nicht clear:all; (Zeile 16)

Gruss swisscheese

als Antwort auf: [#351263]

CSS für Kompatibiltät zu IE, Firefox, Opera & Safari

SabineP

Beiträge gesamt: 7586

22. Mai 2008, 13:52
Beitrag # 4 von 7
Beitrag ID: #351266
Bewertung:
(2537 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo marqito,

>> Kann mir jemand sagen, was ich beachten muss, damit es überall gleich aussieht?

Nun mußt Du nur noch erläutern, wie die Webseite aussehen soll.

Müssen Webseiten in jedem Browser gleich aussehen?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/

als Antwort auf: [#351259]
(Dieser Beitrag wurde von SabineP am 22. Mai 2008, 13:55 geändert)

CSS für Kompatibiltät zu IE, Firefox, Opera & Safari

marqito

Beiträge gesamt: 83

22. Mai 2008, 14:06
Beitrag # 5 von 7
Beitrag ID: #351270
Bewertung:
(2518 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Ich hab die Änderungen von Swisscheese gemacht. Jetzt siehts auch im Safari gut aus. Eigentlich möchte ich das Aussehen haben wie im IE. Im Opera sieht es noch nicht korrekt aus. Die Fusszeile kommt dort oben rechts und nicht zu unterst.

Gruss Marqito

als Antwort auf: [#351266]