Beiträge von it-freak2008

it-freak2008

Jup, gute kritik, das muss sauberer werden, mache ich auch.
Den Colorcop probiere ich nach Unterrichtsende aus.

Fall mir jemand noch bis dahin einen Hinweis geben könnte, ob man z.B. auf ein Farbprofil verzichten sollte (falls das geht in Photoshop) oder ob man ein bestimmtes nehmen soll, danke.

Wenn ich das Problem gelöst und analysiert habe, poste ich das auch selbstverständlich.

it-freak2008

Zur Gestaltung einer Pizzawebsite: http://www.siegener-computer-service.de/webdesign/test…reff/index.html
verwende ich Dreamweaver, Fireworks und Photoshop CS4 Testversionen.

Nun differieren Hintergrundfarben von CSS Boxen und Grafiken. Sie sollen aber einheitlich sein. Ich habe jedoch denselben Farbwert genommen.
Nun vermute ich, es könnte mein Monitorprofil sein, sodass Photoshop die Farbe anders speichert, als meine CSS-Farbe.
Dem entgegen spricht, dass Fireworks die Farbe auch noch anders speichert als Photoshop. Messen mit der Pipette anhand eines Screenshots belegt dies.

Was tun, sprach Zeus?

P.S. Die Farbe des Autos unten weicht tatsächlich ab. Aber zwischen obigen Pizzalogo, Caféhausbild, sowie CSS Box dazwischen sind alle drei Farben unterschiedlich, obwohl ich gleiche Werte benutzt habe.

it-freak2008

Erst einmal danke für die Hilfe.
Ich denke ich werde den Code etwas verbessern können.
Der Fehler lag daran, dass ich in der bildschirm.css die schließende Klammer vergessen habe. D.h. es hätte wahrscheinlich jede Lösung funktioniert.

Trotzdem danke und das nächste mal nutze ich auch die Code Tags.

it-freak2008

klang erst plausibel, aber entweder es klappt noch nicht.
Hier der aktualisierte Code:
HTML:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pizza Treff Siegen</title>
<meta name="robots" content="index, follow" />
<meta name="Description" content="Die beste Pizza der Stadt." />
<meta name="author" content="Siegener Computer Service" />
<link href="favicon.ico" rel="shortcut icon" />
<link href="css/zentrale.css" rel="stylesheet" type="text/css" />
</head>
<body id="startseite">
<div id="container">
  <div id="left">
    <p><img src="grafiken/saeule.jpg" width="245" height="454" /></p>
    <p><b>Montag - Freitag:</b><br />
  12:00 - 14:00 / 17:00 - 23:00 </p>
    <p><b>Samstag, Sonntag, Feiertag:</b><br />
      17:00 - 23:00<br />
 <img src="grafiken/karte-klein.jpg" width="232" height="145" /><b>Anfahrt:</b> klicken zum vergr&ouml;&szlig;ern<img src="grafiken/auto.png" width="245" height="130" /></p>
    <ul>
      <li>&copy; <a href="[URL='http://www.siegener-computer-service.de%22%3ESiegener']http://www.siegener-computer-service.de">Siegener[/URL] Computer Service 2009</a></li>
      <li><a href="impressum.html" title="Gesetzliche Pflichtangaben zu dieser Site">Impressum</a></li>
    </ul>
  </div> <!-- Ende left -->
  <div id="right">
   <div id="logo"><img src="grafiken/top2.jpg" width="554" height="200" align="right" /></div>
   <div id="navibereich">
     <ul>
         <li id="navi01"><strong>Startseite</strong></li>
          <li id="navi02"><a href="pizza.html">Pizza</a></li>
          <li id="navi03"><a href="pasta.html">Pasta</a></li>
          <li id="navi04"><a href="salate.html">Salate</a></li>
          <li id="navi05"><a href="imbiss.html">Imbiss</a></li>
          <li id="navi06"><a href="getraenke.html">Getränke</a></li>
     </ul>
 </div>
   </div>
</div>
</body>
</html>

Alles anzeigen

CSS navi

Code

/*  =========================================================
Stylesheet zur Gestaltung der Navigation 
Datei: navi-sliding01.css
Datum: 2008-05-09
Autor: David Mack
========================================================== */ 
@media screen {
#navibereich {
 width: 654px;
 overflow:hidden; /* containing floats (Alternativ Easy Clearing) */
 color: black;
 background: #f3c600 url(../grafiken/border-bottom.gif) repeat-x left bottom;
 padding: 5px 10px 0px 10px;
 background-color: #f6e660;
}
/* Sternchen-Hack für IE6 & Co. */
* html #navibereich { height:auto;}
   #navibereich ul {
      float: right; 
      width: auto; 
      margin-bottom: 0;
   }
   #navibereich li {
      float:left; 
      width: auto; 
      background: #ffeda0 url(../grafiken/rechts.gif) no-repeat right top; 
      list-style-type: none;
      margin: 0 ;
      margin-right: 0.4em; 
   }
   #navibereich a,
   #navibereich strong {
      display: block; 
      color: black;
      background-color: #ffeda0;
      font-weight: normal; 
      padding: 6px 8px;
      border-bottom: 1px solid #8c8c8c;
   }  
   #navibereich a {
      background: transparent url(../grafiken/links.gif) no-repeat left top; 
   }
   #navibereich a:hover,
   #navibereich a:focus,
   #startseite #navi01 strong, 
   #pizza #navi02 strong,
   #pasta #navi03 strong,
   #salate #navi04 strong,
   #imbiss #navi05 strong,
   #getraenke #navi06 strong
   { 
      background: transparent url(../grafiken/links_aktiv.gif) no-repeat left top; 
      color: black; 
      font-weight: normal; 
      border-bottom-color: white; 
   }
   #navibereich li:hover, 
   #navibereich li:focus, 
   #startseite #navi01,
   #pizza #navi02,
   #pasta #navi03,
   #salate #navi04,
   #imbiss #navi05,
   #getraenke #navi06 {
      background: transparent url(../grafiken/rechts_aktiv.gif) no-repeat top right; 
      color: black; 
      border-bottom-color: white; 
   }
   #navibereich a:active { 
      background: transparent url(../grafiken/links_aktiv.gif) no-repeat left top; 
      color: #d90000;
      text-decoration: underline; 
   }  
/* Sternchen-Hack, IE < V7 versteht li:hover nicht => einfacher Hover-Effekt */
* html #navibereich a:hover,
* html #navibereich a:focus,
* html #navibereich a:active  {  
     background: transparent url(../grafiken/links.gif) no-repeat left top;
     color: #d90000; 
     text-decoration: underline; 
     border-bottom: 1px solid #8c8c8c;
}



} /* Ende @media - nicht löschen! */
/* ======================================
   E N D E navi-sliding.css
   ====================================== */

Alles anzeigen

CSS Bildschirm

Code

/*  =========================================================
Stylesheet zur Formatierung am Bildschirm 
Datei:  bildschirm.css
Datum:  2009-05-09
Autor:  David Mack 
========================================================== */
@media screen { 
/* ====================================== 
   1. Allgemeine Styles 
   ====================================== */
body {
  background-color: #353535;
  color: white;
}
h1 { padding:0; margin:0; }
/* Hyperlinks */
a { text-decoration: none; outline: none;} 
a:link { color: #d90000; } 
a:visited { color: #cc6666; }
a:hover, 
a:focus { 
  border-bottom: 1px solid #d90000 
}
a:active {
 color: white;
 background-color: #d90000;
}


/* ==================================== 
   2. Styles für die  Layoutbereiche 
   ==================================== */
#container {
 height: 920px;
 width: 920px;
 clear: left;
 background-color:#FFFFFF;
}
#left {
 width:245px;
 height:920px;
 float: left;
 background-color: #f6e660;
}
#right {
 width:675px;
 height:920px;
 margin-left: 245px;
}
#logo {
 width:675px;
 height:210px;
 background-color:#f6e660;;
}
#logo img{
 padding-right: 15px;
 padding-top: 5px;
}
/* ==================================== 
   3. Sonstige Styles 
   ==================================== */
/* ======================================= 
   E N D E   bildschirm.css 
   ======================================= */

Alles anzeigen

it-freak2008

Ich habe unter folgender URL eine Seite zum Test hochgeladen:
Pizza Treff Siegen
Im Internet Explorer sieht sie korrekt aus. Im Firefox ist alles durcheinander. Ich wäre für einen Patch, Fix, Lösungsansatz sehr dankbar.

Ich versuche mal den Quellcode der html und css hier noch einzufügen:

1. HTML

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL='http://www.w3.org/1999/xhtml']XHTML namespace[/URL]" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pizza Treff Siegen</title>
<meta name="robots" content="index, follow" />
<meta name="Description" content="Die beste Pizza der Stadt." />
<meta name="author" content="Siegener Computer Service" />
<link href="favicon.ico" rel="shortcut icon" />
<link href="css/zentrale.css" rel="stylesheet" type="text/css" />
</head>
<body id="startseite">
<div id="oben"></div>
<div id="container">
<div id="saeule"><img src="grafiken/saeule.jpg" width="245" height="454" /></div>
<div id="logo"><img src="grafiken/top2.jpg" width="554" height="200" align="right" /></div>
<div id="navibereich">
<ul>
<li id="navi01"><strong>Startseite</strong></li>
<li id="navi02"><a href="pizza.html">Pizza</a></li>
<li id="navi03"><a href="pasta.html">Pasta</a></li>
<li id="navi04"><a href="salate.html">Salate</a></li>
<li id="navi05"><a href="imbiss.html">Imbiss</a></li>
<li id="navi06"><a href="getraenke.html">Getränke</a></li>
</ul>
</div>
<div id="auto"><img src="grafiken/auto.png" width="245" height="130" /></div>
<div id="karte">
<p><img src="grafiken/karte-klein.jpg" width="232" height="145" /><br />
<b>Anfahrt:</b> klicken zum vergr&ouml;&szlig;ern</p>
</div>
<div id="fussbereich">
<ul>
<li>&copy; <a href="[URL='http://www.siegener-computer-service.de%22%3ESiegener']http://www.siegener-computer-service.de">Siegener[/URL] Computer Service 2009</a></li>
<li><a href="impressum.html" title="Gesetzliche Pflichtangaben zu dieser Site">Impressum</a></li>
</ul>
</div>
<div id="zeiten">
<p><b>Montag - Freitag:</b><br />
12:00 - 14:00 / 17:00 - 23:00
</p>
<p><b>Samstag, Sonntag, Feiertag:</b><br />
17:00 - 23:00
</p>
</div>
</div>
</body>
</html>

Alles anzeigen

2. zentrale.css

Code

/* ================================================== =======
Zentrales Stylesheet - wird im HEAD der Webseiten aufgerufen 
Datei: zentrale.css
Datum: 2009-05-09
Autor: David Mack
================================================== ======== */ 
/* Reset, Restaurierung und grundlegende Formatierung */ 
@import url(fundament.css);
/* Formatierung der Navigation */
@import url(navi-sliding01.css);
/* Formatierung für den Bildschirm */
@import url(bildschirm.css);
/* Formatierung für den Drucker */
@import url(druckversion.css);
/* ======================================
E N D E zentrale.css
====================================== */


3. Bildschirm css


/* ================================================== =======
Stylesheet zur Formatierung am Bildschirm 
Datei: bildschirm.css
Datum: 2009-05-09
Autor: David Mack 
================================================== ======== */
@media screen { 
/* ====================================== 
1. Allgemeine Styles 
====================================== */
body {
background-color: #353535;
color: white;
}
h1 { padding:0; margin:0; }
/* Hyperlinks */
a { text-decoration: none; outline: none;} 
a:link { color: #d90000; } 
a:visited { color: #cc6666; }
a:hover, 
a:focus { 
border-bottom: 1px solid #d90000 
}
a:active {
color: white;
background-color: #d90000;
}


/* ==================================== 
2. Styles für die Layoutbereiche 
==================================== */
#oben {
width: 1px;
height: 50%;
float: left;
margin-bottom: -460px;
}
#container {
position:relative;
margin: 0 auto;
height: 920px;
width: 920px;
clear: left;
background-color:#FFFFFF;
}
#saeule {
position:absolute;
width:245px;
height:454px;
z-index:5;
left: 0px;
top: 0px;
background-color: #f6e660;
}
#logo {
position:absolute;
width:674px;
height:210px;
left: 245px;
top: 0px;
background-color: #f6e660;
}
#logo img{
padding-right: 15px;
padding-top: 5px;
}
#auto {
position:absolute;
width:245px;
height:130px;
z-index:8;
left: 0px;
top: 708px;
}
#zeiten {
position:absolute;
width:233px;
height:86px;
z-index:11;
left: 0px;
top: 454px;
color: #000;
padding-left:12px;
background-color: #f6e660;
}
#karte {
position:absolute;
width:240px;
height:167px;
z-index:10;
left: 0px;
top: 541px;
background-color: #f6e660;
padding-left: 5px;
}
#fussbereich {
position:absolute;
width: 200px;
height: 60px;
left: 0px;
top: 844px;
}
#fussbereich ul {
text-align:center; 
font-size: 80%; 
font-style: normal; 
letter-spacing: 2px; 
padding: 10px; 
}
#fussbereich ul li {
list-style-type: none;
padding: 0;
margin: 0;
color: #F00;
}
/* ======================================= 
E N D E bildschirm.css 
======================================= */


4. navi css


/* ================================================== =======
Stylesheet zur Gestaltung der Navigation 
Datei: navi-sliding01.css
Datum: 2008-05-09
Autor: David Mack
================================================== ======== */ 
@media screen {
#navibereich {
position: absolute;
top: 210px;
left: 245px;
width: 654px;
overflow:hidden; /* containing floats (Alternativ Easy Clearing) */
color: black;
background: #f3c600 url(../grafiken/border-bottom.gif) repeat-x left bottom;
padding: 5px 10px 0px 10px;
background-color: #f6e660;
}
/* Sternchen-Hack für IE6 & Co. */
* html #navibereich { height:auto;}
#navibereich ul {
float: right; 
width: auto; 
margin-bottom: 0;
}
#navibereich li {
float:left; 
width: auto; 
background: #ffeda0 url(../grafiken/rechts.gif) no-repeat right top; 
list-style-type: none;
margin: 0 ;
margin-right: 0.4em; 
}
#navibereich a,
#navibereich strong {
display: block; 
color: black;
background-color: #ffeda0;
font-weight: normal; 
padding: 6px 8px;
border-bottom: 1px solid #8c8c8c;
} 
#navibereich a {
background: transparent url(../grafiken/links.gif) no-repeat left top; 
}
#navibereich a:hover,
#navibereich a:focus,
#startseite #navi01 strong, 
#pizza #navi02 strong,
#pasta #navi03 strong,
#salate #navi04 strong,
#imbiss #navi05 strong,
#getraenke #navi06 strong
{ 
background: transparent url(../grafiken/links_aktiv.gif) no-repeat left top; 
color: black; 
font-weight: normal; 
border-bottom-color: white; 
}
#navibereich li:hover, 
#navibereich li:focus, 
#startseite #navi01,
#pizza #navi02,
#pasta #navi03,
#salate #navi04,
#imbiss #navi05,
#getraenke #navi06 {
background: transparent url(../grafiken/rechts_aktiv.gif) no-repeat top right; 
color: black; 
border-bottom-color: white; 
}
#navibereich a:active { 
background: transparent url(../grafiken/links_aktiv.gif) no-repeat left top; 
color: #d90000;
text-decoration: underline; 
} 
/* Sternchen-Hack, IE < V7 versteht li:hover nicht => einfacher Hover-Effekt */
* html #navibereich a:hover,
* html #navibereich a:focus,
* html #navibereich a:active { 
background: transparent url(../grafiken/links.gif) no-repeat left top;
color: #d90000; 
text-decoration: underline; 
border-bottom: 1px solid #8c8c8c;
}
} /* Ende @media - nicht löschen! */
/* ======================================
E N D E navi-sliding.css
====================================== */

Alles anzeigen

Beiträge von it-freak2008

Farbmanagement

Farbmanagement

Firefox inkompatible Website

Firefox inkompatible Website

Firefox inkompatible Website