Zur Navigation

Alte Website tabellenlos umgestalten [2]

HTML, CSS, JAVA-SCRIPT

11 Globetrotter_A (Gast)

Hallo zusammen,

habe den Code angepasst: HTML-Fehler sind behoben, einige DIVs haben endlich die richtige Positionen ;-)

Einige Problemen kriege ich leider nicht in den Griff. Vielleicht habt Ihr Ideen?

1. Im IE der Slogan "Free Cartoons & Cartoon Clip Art Images..." steht einbischen zu hoch. Dabei der Werbeblock 725x15 ist nach unten verschoben. In FF, CHROME, OPERA und SAFARI sieht aber alles super aus!!! (?)

2. Der Abstand vom oberen Rand würde ich gerne auf 2px reduzieren.

3. Unerwünshcter Abstand zwischen dem Banner "Menu" und dem Buttom "Home".

06.07.2010 22:16

12 Jörg

1. Im IE der Slogan "Free Cartoons & Cartoon Clip Art Images..." steht einbischen zu hoch. Dabei der Werbeblock 725x15 ist nach unten verschoben. In FF, CHROME, OPERA und SAFARI sieht aber alles super aus!!! (?)

Das deutet auf einen Bug im Internet Explorer hin. Bei Darstellungsproblemen im IE ist noch die Versionsangabe wichtig - der IE 7 hat noch einige Bugs, die im IE 8 (ohne Kompatibilitätsmodus) behoben sind. Wenn du es dir einfach machen willst, kannst du die Fehler auch mithilfe von in Conditional Comments untergeschobenem CSS korrigieren.

2. Der Abstand vom oberen Rand würde ich gerne auf 2px reduzieren.

Ich habe den Quelltext mal mit dem Linux-Editor Vim geöffnet und bekomme das angezeigt:

<feff><div class="top_banner">

Da ist anscheinend ein BOM enthalten, welches diesen Abstand erzeugt. Du kannst dir das Zeichen anzeigen lassen, indem du die Datei (testweise) in einem anderen Zeichensatz abspeicherst. Am besten verwendest du einen Editor, der UTF8 ohne BOM abspeichern kann (unter Windows z.B. Notepad++)

3. Unerwünshcter Abstand zwischen dem Banner "Menu" und dem Buttom "Home".

Welches ist der Home Button?

07.07.2010 13:59 | geändert: 07.07.2010 14:02

13 Jörg

@ Globetrotter_A

Die Benachrichtigungmails an deine Emailadresse werden zurückgewiesen und trudeln alle bei mir ein. Bitte trag in deinem Account eine erreichbare Email-Adresse ein.

07.07.2010 23:08 | geändert: 07.07.2010 23:09

14 Globetrotter_A

Hallo Jörg,

vielen Dank für Deine Ratschläge! Du hattest Recht es waren BOMs. Jetzt sieht die Seite in allen Browser ganz gut aus! :-)

Jetzt habe ich aber ein anderes ein "Problem". Nachdem ich alle HTML-Pages im Notepad ++ über "Kodierung/UTF-8 ohne BOM" abgeändert habe, wird im Windows Editor beim Abspeichern Codierung ANSI angeboten. Sollte eigentlich UTF-8 bleiben, oder?

Habe noch ein Breadcrumb eingefügt - bequem für User und SEO-mäßig nützlich. ;-)

P. S. E-Mail im Account ist korrekt. Ich bekomme regelmäßig die Benachrichtigungsmails.

08.07.2010 16:36 | geändert: 08.07.2010 17:03

15 Jörg

Jetzt habe ich aber ein anderes ein "Problem". Nachdem ich alle HTML-Pages im Notepad ++ über "Kodierung/UTF-8 ohne BOM" abgeändert habe, wird im Windows Editor beim Abspeichern Codierung ANSI angeboten. Sollte eigentlich UTF-8 bleiben, oder?

Das müsstest du testen, ob die Zeichen nach dem wieder Öffnen noch korrekt codiert sind. Wenn ich unter Windows arbeite, meide ich u.a. auch wegen dem Handling von UTF8-Dateien den Standard-Editor und verwende stattdessen Notepad++

P. S. E-Mail im Account ist korrekt. Ich bekomme regelmäßig die Benachrichtigungsmails.

Ja, komisch dass ich dann die gebouncten Mails erhalte :-/ (aber das können wir dann ja per Mail besprechen...)

08.07.2010 19:51

16 Globetrotter_A

Es ist merkwürdig,

wenn ich etwas im Windows Notepad ändere und anschließend mit der UTF-8-Codierung abspeichere, dann erscheinen BOMs automatisch innerhalb des Codes (?)

Kann es an den HTML-Dateien liegen, die ich ohne jegliche DOCTYPE ect. Angaben erstelle?

Bsp. HTML-Datei "menu.html"

div id="menu_new" style="background-color: #ffffff; margin-top: 0px;">

<img src="Banner/banner_menu_orange_above.gif" style="background-color: #ffffff;" alt="banner above" />

<div><a href="http://www.cn.clipproject.info/">???</a></div>

<div><a href="http://www.cn.clipproject.info/coloring_pages.html">???</a></div>

<div>
<a href="http://www.cn.clipproject.info/links.html">??</a>
</div>

<div>
<a href="http://www.cn.clipproject.info/terms_of_use.html">????</a>
</div>

<div>
<a href="http://www.cn.clipproject.info/imprint.html">????</a>
</div>

<img src="Banner/banner_menu_orange_bottom.gif" alt="banner bottom" />

</div>

Bsp. Template "index.php"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>New design in PHP</title>

<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Clip art - free images, cartoon cliparts for office presentations download, graphics gifs pics pictures, greeting cards" />
<meta name="keywords" content="Images clipart cliparts graphic cartoon clip art religious clip art borders free royalty free clipart images free cartoon cliparts office presentations web art free cartoons greetings greeting cards free pics photo objects gif animation gifs download backgrounds icons office presentations online" />
<meta name="description" content="Free clip art images, cliparts, free cartoons, pictures, graphics, gifs, pics, greeting cards download online" />

<meta name="revisit" content="after 2 days" />
<meta name="copyright" content="Copyright (c) by www.clipproject.info. All Rights Reserved." />
<meta name="rating" content="general" />
<meta name="page-type" content="Clip art, free, web graphics, cliparts, images, pictures, illustrations" />
<meta name="distribution" content="global" />
<meta name="robots" content="index,follow" />
<meta name="language" content="en" />

<meta name="y_key" content="004c1161bf450e44" />
<meta name="msvalidate.01" content="C658F88F150A6DD7B15C9647EC419919" />
<meta name='yandex-verification' content='6e78419120fe8ba9' />


<link rel="shortcut icon" href="/images/favicon.gif" />
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="java_script_1.js"></script>

<script type="text/javascript" src="java_script_2.js"></script>

<script type="text/javascript" src="java_script_3.js"></script>

</head>

<body>

<div id="wrap">

<?php
  include("top_table.html");
?>

<div id="ads_area_728_15">

<?php
  include("ads_728_15.html");
?>

</div>

<div id="content">

<div class="menu"> 

<?php
  include("ads_120_600.html");
?>

</div>

<div class="right"> 

<div class="breadcrumb">

<span style="text-decoration: underline;">You are here:</span> <a href="index.html">Home</a> &gt; <a href="Cliparts.html">Free Cliparts</a> &gt; <a href="Soccer_Cliparts.html">Soccer Cliparts</a> 

</div>

<?php
  include("ads_234_60.html");
?>

<h2>Soccer referee - free cartoon clipart</h2>

<div style="text-align: center">

<img src="Cliparts_Free/Fussball_Free/Clipart-Cartoon-Design-01.gif" alt="Soccer referee uniforms clipart images free download, football clipart free" />
<p class="class2" style="padding-left: 6px; padding-bottom: 4px; padding-top: 9px; text-align: left;">Soccer referee uniforms clipart images free download, football clipart free</p>

</div>

<?php
  include("footer_2.html");
?>

</div>

<div class="left">

<?php
  include("menu.html");
?>

<div class="ads_120_90">

<?php
  echo("ads_120_90");
?>

</div>

</div>

<div style="clear: both;"> </div>

</div>

<div id="bottom"> </div>

<div id="footer">

<?php
  include("footer.html");
?>

Our partner: <a href="http://www.coloringpagesfree.net/">Free Coloring Pages</a> | <a href="http://www.cartoon-design.com/">Cartoon Logo Design</a>

</div>

</div>

</body>

</html>

08.07.2010 20:52

17 Jörg

wenn ich etwas im Windows Notepad ändere und anschließend mit der UTF-8-Codierung abspeichere, dann erscheinen BOMs automatisch innerhalb des Codes (?)

Ja. Der BOM ist optional. Der Windows Standard Editor handhabt dies aber so, dass er den BOM grundsätzlich verwendet, wenn eine Datei in UTF8 abgespeichert wird. Das Problem ist, dass PHP mit dem BOM nichts anfangen kann und die betreffenden Bytes als "normale" Zeichen ausgibt. Bei der Bearbeitung von PHP-Dateien in der UTF8 Codierung muss man unter Windows einen Editor verwenden, der einem diesbezüglich die Wahl lässt, wie z.B. Notepad++ (unter Linux muss man sich mit diesem Problem nicht rumschlagen, da alle mir bekannten Editoren dort kein BOM verwenden)

08.07.2010 21:05 | geändert: 08.07.2010 21:07

18 Rudy

Mit dem BOM hatte ich früher auch oft zu schaffen, seit notepad++ und Netbeans zum Glück nicht mehr. Ich hab hier noch ein altes Hilfsskript das die BOM entfernt. Wenn Du kurzzeitig Skripts Schreibrechte auf alle html, css und php Dateien gibst, folgendes Hilfs-Skript als "debom.php" abspeicherst, in das Wurzelverzeichnis der Domain kopierst und im Browser aufrufst, werden alle Dateien gesäubert.

debom.php:
<?php
error_reporting(E_ALL);

$filestotal = $filesskipped = $fileswritten = 0;

function debom($dir) {
  global $filestotal, $filesskipped, $fileswritten;
  $files = glob ($dir . '/*', GLOB_MARK);
  foreach ($files as $file) {
    $file = str_replace('\\', '/', $file);
    if (substr($file, -1) == '/') {
      debom($file);
    } else {
      switch(substr(strrchr($file, '.'), 1)) {
        case 'css':
        case 'php':
        case 'html':
          $content = file_get_contents($file);
          if(substr($content, 0,3) == pack("CCC",0xef,0xbb,0xbf)) {
            $content = substr($content, 3);
            file_put_contents($file, $content);
            echo '<b>Found BOM!</b> : '.$file.' - <b>removed.</b><br>';
            $fileswritten++;
          }
          $filestotal++;
          break;
        default:
          $filesskipped++;
          $filestotal++;
          break;
      }
    }
  }
}
echo '<p><strong>Debom '.$_SERVER['DOCUMENT_ROOT'].'/ ...</strong></p>';
debom($_SERVER['DOCUMENT_ROOT']);
echo '<p>Total:'.$filestotal.', skipped: '.$filesskipped.', de-bomed:'.$fileswritten.'</p>';

?>

09.07.2010 13:59 | geändert: 09.07.2010 14:00

19 Globetrotter_A

Hallo Rudy,

danke für den Tipp. Notepad++ ist aber eine tolle Sache! :-)

Habe noch eine Frage zu CSS: habe ins Menü zwei Unterpunkte mit "Hot topics" eingefügt. Den Abstand links kriege ich leider nicht hin. Wenn man Padding-Left-Attribut definiert, dann verschiebt sich gesamter Block nach rechts (?) :-/



09.07.2010 23:28

20 Jörg

Der Innenabstand wird zur Breite des Elements hinzugezählt, siehe auch das Boxmodell von CSS; die Angabe "width:100%" kannst du aber ja eigentlich auch weglassen?

11.07.2010 08:10 | geändert: 11.07.2010 08:10

Beitrag schreiben (als Gast)





[BBCode-Hilfe]