Ideen gesucht

Für 24Bit Transparenzen gibt es das PNG-Format.

2nd

Fairerweise musst ihm dann aber auch die Lösung für das Transparenz-
Problem des IE6 noch geben ;)

Für transparente Hintergrund-pngs im externen Stylesheet:
HTML:
#meindiv {
	background: url(transparentespng.png);
	}
* html #meindiv {
 background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='absoluter_pfad/transparentespng.png')
}

Für transparente pngs per <img>-Tag: die pngfix.js-Datei
Code:
/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i];
         var imgName = img.src.toUpperCase();
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);

:)
 
Hallo,

zum Gestalterischen/Grafischen kann und will ich mangels Kompetenz nichts sagen.

Aber:
Ich empfehle dringend, die Texte nochmal gründlich zu prüfen. Da stecken ein paar grammatikalische Stolperer drin, zudem sind sie, so kurz sie auch sind, stilistisch alles andere als toll.

Du schreibst, dass die Texte angeliefert wurden: falls sie von einem Nicht-Muttersprachler stammen, ist das überhaupt kein Beinbruch.
Tu dem Blumenmenschen (und auch Dir, der ja ne Referenz haben will !) den Gefallen, die Texte zu überarbeiten.

Nochwas zum Impressum:
Hier fehlen wichtige Angaben zur Firma, die vorgeschrieben sind. Auch hier besser nochmal die Pflichtangaben checken...
 
So, bis auf ein paar Kleinigkeiten haben wir mal einiges umgestellt.
Es fehlen noch kleinere Korrekturen, wie Rechtschreibung. z.B.
 
Also, "Made on Mac" würde ich da nicht empfehlen, draufzuschreiben.

Ausserdem gehören wohl ein paar wirklich gute Produkt-Photos da drauf.

Der LKW und der Esel sind wohl eher wirklich nicht nötig.
 
Zuletzt bearbeitet:
Also, "Made on Mac" würde ich da nicht empfehlen, draufzuschreiben.

Ausserdem gehören wohl ein paar wirklich gute Produkt-Photos da drauf.

Der LKW und der Esel sind wohl eher wirklich nicht nötig.

Fotos von den Märkten gibts doch schon! Esel? Wo kommst Du den her, erkennst Du das nicht? :D
Der LKW soll bleiben. :rolleyes:
 
hbk2.jpg

Nur mal so zur Anregung, und weil Basteln Spaß macht:
  • möglichst zweidimensional bleibem, wegen des Logos - Web2.0-Look in der Fotogallerie sieht aus, als ob die Seite gehackt wurde
  • ein offenes Layout-Gerüst verleiht Halt - simples Zweispaltenlayout, zentriert und das Hauptmenü mit div-Layer hinterlegen, durchgängig von rechts nach links - Attribute wie Hauptmenü, dann wächst es proportinal mit der Schriftvergrößerung
  • Textabstände im body vergrößern
  • H1 kleiner - Arial (wegen Windows, zumal das Logo ja Arial ermöglicht) - margin-bottom definieren, bringt die Win-Browser zur Raison
  • fetter Text nicht schwarz sondern dunkles grau
  • ein schiefer Blumentopf machts sofort dynamischer - könnte man ja auch, als Gegengewicht zur linken Spalte, andernorts draufbappen
  • die linke Spalte mit wechselnden Bildern bestücken - was eben so an Bremer Markt-Motiven zur Rubrik passt
  • Linkfarbe blau? Sieht aus wie vergessen - Farbkode: rot, grün, weiß, schwarz - edler sähs aus, wenn die Überschriften grün wären und die Links rot - nur, edel passt irgendwie nicht zum Logo, aber die fetten H1 sind doch etwas zuuu marktschreierisch
  • Die grauen Textleisten unter den Bildern find ich nicht so schick
  • Ach ja, globales "text-align: left" gefiele mir auch besser
  • Logo als JPG?, was fehlt ist das Weiß
Wie gesagt: Anregung, Brainstorming mit Verwendung der von dir festgelegten Seitenelemente - mehr nicht, aber ein paar andere Ideen wolltest du ja auch
Gruß UDH5

EDIT: ein Link auf der Startseite zu Wikipedia bringt die Besucher vielleicht auf dumme Gedanken
 
Zuletzt bearbeitet:
Zurück
Oben Unten