MrMurphy1: Darstellung "background-image" im Firefox aber nicht im IE

Beitrag lesen

SELF-Forum

Darstellung "background-image" im Firefox aber nicht im IE

MrMurphy1
– Informationen zu den Bewertungsregeln

Hallo

Vielen vielen Dank Murphy für die Mühe und die tolle Lösung! Kann ich das bezüglich der Abwärtskompatibilität jetzt schon benutzen?

Ja. Wenn du auch etwas ältere Browser unterstützen willst kannst du noch ein paar Prefixe hinzufügen, wobei der Autoprefixer dies halbwegs automatisch erledigt:

Linkbeschreibung

Browser, die mit Flexbox nichts anfangen können, sind heutzutage bedeutungslos und werden nur noch von Fortschrittsgegnern als "Argument" ins Feld geführt.

Wie macht man das den sonst?

Indem für die senkrechten Striche die border-Anweisung eingesetzt wird.

Der html-Teil könnte dann folgendermaßen aussehen:

   <header>
      <nav id="navtop">
         <ul>
            <li><a href="default.php">Home</a></li>
            <li><a href="kontakt.php">Kontakt</a></li>
            <li><a href="impressum.php">Impressum</a></li>
         </ul>
      </nav>
   </header>

und der CSS-Teil dazu

      header {
         background: fuchsia;
         padding: 0.2rem 0;
         /*border: thin blue solid;*/
      }
      #navtop {
         background: fuchsia;
         text-align: center;
         list-style: none;
      }
      #navtop ul {
         display: flex;
         justify-content: center;
      }
      #navtop li {
         list-style-type: none;
         border-right: 1px solid black;
         padding: 0 10px;
      }
      #navtop li:last-child {
         border-right: none;
      }
      #navtop li a {
         color: black;
         text-decoration: none;
         display: block;
         padding: 0 10px;
      }

Zusätzliche Links könntest du dann einfach hinzufügen.

Wenn man auf so ein starres Layout setzt, sollte man dann immer noch auf 960px setzen?

Nein, Webseiten haben keine Größe. Die Besucher haben in ihrem Browser eine ihnen genehme Fensterbreite aufgezogen und es spricht nichts dagegen, diese auch für den Inhalt zu nutzen.

Das könnte dann insgesamt so aussehen:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Gleichlange Spalten</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         font-family: sans-serif;
         width: 98%;
         padding: 0px;
         margin: 10px auto;
      }
      header {
         background: fuchsia;
         padding: 0.2rem 0;
         /*border: thin blue solid;*/
      }
      #navtop {
         background: fuchsia;
         text-align: center;
         list-style: none;
      }
      #navtop ul {
         display: flex;
         justify-content: center;
      }
      #navtop li {
         list-style-type: none;
         border-right: 1px solid black;
         padding: 0 10px;
      }
      #navtop li:last-child {
         border-right: none;
      }
      #navtop li a {
         color: black;
         text-decoration: none;
         display: block;
         padding: 0 10px;
      }
      main {
         background-color: fuchsia;
         display: flex;
      }
      #navmain {
         width: 20%;
         padding: 10px;
         background-color: aqua;
      }
      article {
         width: 60%;
         padding: 10px;
         background-color: green;
      }
      aside {
         width: 20%;
         text-align: center;
         padding: 10px;
         color: #FFDF00;
         font-weight: bold;
         background-color: maroon;
      }
   </style>
</head>
<body>
   <header>
      <nav id="navtop">
         <ul>
            <li><a href="default.php">Home</a></li>
            <li><a href="kontakt.php">Kontakt</a></li>
            <li><a href="impressum.php">Impressum</a></li>
         </ul>
      </nav>
   </header>
   <main>
      <nav id="navmain">
         Navigation Links
      </nav>
      <article>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
      et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
      magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
      Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
      elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
      et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
      magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
      Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
      elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
      et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
      magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
      Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
      elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
      et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
      sanctus est Lorem ipsum dolor sit amet.
      </article>
      <aside>
         Seite rechts
      </aside>
   </main>
   <footer>
   </footer>

</body>
</html>

Für schmale Fensterbreiten müsste dann per Responsive Design über MediaQueries für eine sinnvolle Aufteilung gesorgt werden.

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln