HTML Tabellenabstand IE/firefox

    Danke erstmal für eure hilfe !

    Mein porblem ist leider noch nicht aus der welt, aber ers sieht schonmal ordentlicher aus.

    Ich habe mit Golive angefangen, und golive macht scheinbar keine Grundstrukturen :-/ (Golive 2)
    Kann auch daran liegen, dass das schon etwas älter ist.

    Da ihr euch meine seite nicht wirklich vorstellen könnt, zeige ich sie euch mal in einem screen.

    <img>http://www.fotos-hochladen.net/big/unbenanntxs6aqtyu.png</img>

    Habe den Code jetzt soweit übernommen, aber ich verstehe nicht wofür das hier gut ist:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    welche website muss da reiN ?

    Na also, jetzt weiss ich mal, wie das ding aussehen soll. Da ich keine Tabellenlayouts unterstütze, erst recht nicht bei so einem Simpellayout, schlage ich dir mal einen alternativen Weg vor.

    Ich hab dir hier mal ein grobes CSS-Layout zusammengestellt, die Höhen- und Breitenangaben sind ohne Gewähr, die musst du noch an deine Grafiken anpassen. Das selbe gilt für die Schrift, die hab ich auch nur grob angepasst.
    Ausserdem solltest du den text im header mit text-indent: -999em; ausblenden und dann das Header-Bild als Hintergrundbild einbinden. Auch die restlichen Hintergrundbilder musst du noch entsprechend zuschneiden und dann im CSS die Angaben anpassen.
    Ein Spezialfall ist hier noch das Hintergrundbild im #wrapper, da kommt das Wolkenmuster hin, welches unter der Navi um den eigentlichen Inhalt mit background-position entsprechend positioniert wird.

    So, hier die HTML-Datei:

    und die style.css:

    Das sollte dich schonmal ziemlich weit bringen, wenn du noch weitere Fragen hast meld dich ;)

    -Lukas

    Einmal editiert, zuletzt von lukasn (3. März 2010 um 18:02)

    mhm... ich habe das einfach mal in einem text dok als .htm gespeichert...

    allerdings weiß ich jetzt nicht wo ich die hintergrundbilder einfügen muss.

    Ich habe für das Menu ein javascript benutzt...

    Den hier : (habe ihn im html verfasst und im i-net übersetztenlassen)

    sieht allerdings ziemlich chaotisch aus....

    <script type="text/javascript">
    writeHTMLasJS();
    </script>
    document.write("<script type=\"text\/javascript\">");
    document.write("");
    document.write("function drop_down(id) {");
    document.write(" ");
    document.write(" element = document.getElementById('submenu_'+id);");
    document.write(" ");
    document.write(" if(element) {");
    document.write(" element.style.display = 'block';");
    document.write(" }");
    document.write("}");
    document.write("");
    document.write("function close_menu(id) {");
    document.write(" ");
    document.write(" element = document.getElementById('submenu_'+id);");
    document.write(" ");
    document.write(" if(element) {");
    document.write(" element.style.display = 'none';");
    document.write(" }");
    document.write("}");
    document.write("");
    document.write("<\/script>");
    document.write("");
    document.write("<style type=\"text\/css\">");
    document.write("");
    document.write("* {");
    document.write(" margin: 0;");
    document.write(" padding: 0;");
    document.write("}");
    document.write("");
    document.write("#menu {");
    document.write(" margin: 0px;");
    document.write(" text-align: center;");
    document.write(" line-height: 2;");
    document.write("");
    document.write("}");
    document.write("");
    document.write("#menu ul {");
    document.write(" list-style: none;");
    document.write(" float: left;");
    document.write(" ");
    document.write("}");
    document.write("");
    document.write("#menu li {");
    document.write(" width: 162.7px;");
    document.write(" border: 4px groove blue;");
    document.write("}");
    document.write(" ");
    document.write("<\/style>");
    document.write("");
    document.write("<body>");
    document.write("");
    document.write("<div id=\"menu\">");
    document.write(" ");
    document.write(" <ul id=\"menu_1\" style= \"background: #fff url(../pic/button.gif)\" onmouseover=\"drop_down(1)\" onmouseout=\"close_menu(1);\">");
    document.write(" <li><a href=\"unternehmen.htm\"><font size=\"+1\" style=\" color: black;\"><strong>Home<\/strong><\/font><\/a><\/li>");
    document.write(" <ul id=\"submenu_1\" font-size: medium; font-family: serif; background: #fff url('(EmptyReference!)'); text-align: center; visibility: visible; list-style: none; display: none; margin: 0; padding: 0; position: absolute; float: left;\">");
    document.write(" ");
    document.write(" <\/ul>");
    document.write(" <\/ul>");
    document.write(" ");
    document.write(" <ul id=\"menu_2\" style= \"background: #fff url(../pic/button.gif)\" onmouseover=\"drop_down(2)\" onmouseout=\"close_menu(2);\">");
    document.write(" <li><a href=\"#\"><strong><font size=\"+1\" style=\" color: black; \">Grubengas<\/font><\/strong><\/a><\/li>");
    document.write(" <ul id=\"submenu_2\" style= \" ; font-size: medium; font-family: serif; background: #fff url(..\/WillkommenBG.gif); text-align: center; visibility: visible; list-style: none; display: none; margin: 0; padding: 0; position: absolute; width: auto; float: left;\">");
    document.write(" <li><a href=\"Definition.htm\"><font size=\"-1\" style=\" color: darkblue;\"><strong>Definition<\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Bergbau.htm\"><font size=\"-1\"style=\" color: darkblue; \"><strong>Bergbau<\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Umweltschutz.htm\"><font size=\"-1\" style=\" color: darkblue;\"><strong>Umweltschutz<\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Grubengasfelder.htm\"><font size=\"-1\"style=\" color: darkblue; \"><strong>Grubengasfelder<\/strong><\/font><\/a><\/li>");
    document.write("");
    document.write(" <\/ul>");
    document.write(" <\/ul>");
    document.write(" ");
    document.write(" <ul id=\"menu_3\" style= \"background: #fff url(../pic/button.gif)\" onmouseover=\"drop_down(3)\" onmouseout=\"close_menu(3);\">");
    document.write(" <li><a href=\"#\"><font size=\"+1\" style=\" color: black; \"><strong>Dienstl. (DL)<\/strong><\/font><\/a>");
    document.write(" <ul id=\"submenu_3\" style=\" ; font-size: medium; font-family: serif; background: #fff url(..\/WillkommenBG.gif); text-align: center; visibility: visible; list-style: none; display: none; margin: 0; padding: 0; position: absolute; float: left;\">");
    document.write(" <li><a href=\"Contracting.htm\"><font size=\"-1\" style=\" color: darkblue;\"><strong>Contracting<\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Leistung.htm\"><font size=\"-1\"style=\" color: darkblue; \"><strong>Leistung<\/strong><\/font><\/a><\/li>");
    document.write("");
    document.write(" <\/ul>");
    document.write(" <\/ul>");
    document.write(" ");
    document.write(" <ul id=\"menu_4\" style= \"background: #fff url(../pic/button.gif)\" onmouseover=\"drop_down(4)\" onmouseout=\"close_menu(4);\">");
    document.write(" <li><a href=\"#\"><font size=\"+1\" style=\" color: black; \"><strong>Referenzen<\/strong><\/font><\/a>");
    document.write(" <ul id=\"submenu_4\" style=\" ; font-size: medium; font-family: serif; background: #fff url(..\/WillkommenBG.gif); text-align: center; visibility: visible; list-style: none; display: none; margin: 0; padding: 0; position: absolute; float: left;\">");
    document.write(" <li><a href=\"Ueberblick.htm\"><font size=\"-1\"style=\" color: darkblue; \"><strong>&Uuml;berblick<\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Wilberd 1.htm\"><font size=\"-1\" style=\" color: darkblue;\"><strong>Wilberd I <\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Mathanna.htm\"><font size=\"-1\" style=\" color: darkblue;\"><strong>Mathanna <\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Luentec.htm\"><font size=\"-1\"style=\" color: darkblue; \"><strong>L&uuml;ntec<\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Crovin 1.htm\"><font size=\"-1\" style=\" color: darkblue;\"><strong>Corvin I<\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Corvin 2.htm\"><strong><font size=\"-1\" style=\" color: darkblue;\">Corvin II<\/font><\/strong><\/a><\/li>");
    document.write(" <li><a href=\"Sabuela.htm\"><strong><font size=\"-1\" style=\" color: darkblue;\">Sabuela<\/font><\/strong><\/a><\/li>");
    document.write(" <li><a href=\"Joarin.htm\"><strong><font size=\"-1\"style=\" color: darkblue; \">Joarin<\/font><\/strong><\/a><\/li>");
    document.write(" <li><a href=\"Katlina.htm\"><font size=\"-1\" style=\" color: darkblue;\"><strong>Katlina<\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Rialisa.htm\"><font size=\"-1\" style=\" color: darkblue;\"><strong>Rialisa<\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Reinphan.htm\"><font size=\"-1\" style=\" color: darkblue;\"><strong>Reinphan<\/strong><\/font><\/a><\/li>");
    document.write(" <\/ul>");
    document.write(" <\/ul>");
    document.write(" ");
    document.write(" <ul id=\"menu_5\" style= \"background: #fff url(../pic/button.gif)\" onmouseover=\"drop_down(5)\" onmouseout=\"close_menu(5);\">");
    document.write(" <li><a href=\"#\"><strong><font size=\"+1\" style=\" color: black; \">Aktuell<\/font><\/strong><\/a><\/li>");
    document.write(" <ul id=\"submenu_5\" style=\" color: black; font-size: medium; font-family: serif; background: #fff url(..\/WillkommenBG.gif); text-align: center; visibility: visible; list-style: none; display: none; margin: 0; padding: 0; position: absolute; float: left;\">");
    document.write(" <li><a href=\"Presse.htm\"><font size=\"-1\" style=\" color: darkblue;\"><strong>Presse<\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Download.htm\"><strong><font size=\"-1\"style=\" color: darkblue; \">Download<\/font><\/strong><\/a><\/li>");
    document.write(" <li><a href=\"Links.htm\"><font size=\"-1\"style=\" color: darkblue; \"><strong>Links<\/strong><\/font><\/a><\/li>");
    document.write("");
    document.write(" <\/ul>");
    document.write(" <\/ul>");
    document.write(" <ul id=\"menu_6\" style= \"background: #fff url(../pic/button.gif)\" onmouseover=\"drop_down(6)\" onmouseout=\"close_menu(6);\">");
    document.write(" <li><a href=\"#\"><font size=\"+1\" style=\" color: black; \"><strong>Kontakt<\/strong><\/font><\/a><\/li>");
    document.write(" <ul id=\"submenu_6\" style=\" ; font-size: medium; font-family: serif; background: #fff url(..\/WillkommenBG.gif); text-align: center; visibility: visible; list-style: none; display: none; margin: 0; padding: 0; position: absolute; float: left;\">");
    document.write(" <li><a href=\"Ansprechpartner.htm\"><font size=\"-1\" style=\" color: darkblue;\"><strong>Ansprechpartner<\/strong><\/font><\/a><\/li>");
    document.write(" <li><a href=\"Wegbeschreibung.htm\"><strong><font size=\"-1\"style=\" color: darkblue; \">Wegbeschreibung<\/font><\/strong><\/a><\/li>");
    document.write(" <\/ul>");
    document.write(" <\/ul>");
    document.write(" ");
    document.write(" ");
    document.write(" ");
    document.write(" ");
    document.write(" ");
    document.write(" ");

    Das macht Sinn! Ich gebe auch immer HTML-Code mit JavaScript aus, immer in der Hoffnung, dass der Besucher JS abgeschaltet und dann nix sieht.

    Verwend in Zukunft bitte

    Gruss,
    -Lukas

    EDIT: Das Bild war zu gross ums Anzuhängen, stattdesen also ein Link

    Wie gebe ich hier die sachen in [Code]tags an?


    ja ich wollte das eig. auch nur so machen, weil wenn ich was am menu verändern will, muss ich nur eine datei umändern
    dein quelletext zeigt mit i.wie was komplett falsches an...

    screen:
    [Blockierte Grafik: http://www.fotos-hochladen.net/unbenanntiw1t04uj.png]

    #navi a {
    display: block;
    height: 44px;
    width: 171px;
    text-align: center;
    color: #000;
    text-decoration: underline;
    font: 17px/44px Times, serif;
    text-indent: -999em;
    background: url(../pic/button.gif) no-repeat;

    danke

    Na, hast du das CSS als separate Datei gespeichert? mein HTML geht davon aus, dass du eine style.css im gleichen Ordner hast, mit dem oben genannten CSS Code. Falls du das so gespeichert hast, in welchem Browser (version?) hast du den obigen Screenshot gemacht?

    Wenn du das Menu extern willst, machste das besser per PHP include als mit diesem Javascript.

    EDIT: Zum Dropdown: Das lässt sich ganz einfach per CSS machen, ich mach dir später heut Abend ne Grundlage. Jetzt muss ich erst mal Abendessen machen =)

    Einmal editiert, zuletzt von lukasn (3. März 2010 um 19:36)

    ahh jetzt nimmt es gestalt an :)

    ich versuch dann mal die hintergründe einzufügen

    Ich hoffe nur, dass diese Seite nicht die aktuelle Seite der Firma A-TEC ersetzen soll, denn die aktuelle Seite sieht wesentlich besser aus.

    Na, das sieht doch schonmal ganz gut aus. Aber Header- und Navi sehen ja ganz anders aus als auf deinem originale Screenshot, warum hast du da nicht alles kopiert (z.B. Rahmen und die Bilder im Header)?

    Und ganz ehrlich: Wenn du nicht weisst was <h2> ist, dann bist du nicht bereit eine Website zu machen. Ein letztes mal noch verweise ich dich auf Selfhtml, solange du dich weigerst die absoluten Basics zu lernen bringt dir das ständige Vorgekaue von mir auf die lange Sicht auch nichts. Du kannst meinen Code zwar kopieren, aber nicht an deine eigenen Bedürfnisse anpassen.

    -Lukas

    EDIT: Ach ja, nochwas. Sei doch so lieb und Verlinke auf deine Bilder, anstatt sie direkt einzubinden, bei Bildern dieser Grösse ist das eher irritierend.

    Zitat von Unregistriert


    die website ist für atec.de


    Ja eben, die Seite sieht jetzt besser aus, als das was du hier machst. Das ist eine Verschlechtbesserung

    Zitat von Unregistriert


    so sinnlose kommentare kann ich hier nicht gebrauchen.


    Nicht kritikfähig?

    Und wenn du schon für eine Firma eine Homepage bastelst, dann solltest du das auch können und nicht mit unserer kostenloser Hilfe Geld verdienen.

    ich werde mir die seite mal angucken ..
    .

    bandit600:

    es ist lächerlich was du erzählst....

    atec.de ist eine ganz ander seite als A-TEC.de
    (fals du das noch nicht bemerkt hast)

    Desweitern kenne ich den geschäftsleiter privat und er hat mich gefragt, ob ich das denn nicht mal ausprobieren wolle.
    Genau das tue ich gerade.

    Also hör auf dir i.was aus den fingern zu saugen!

    Lieber Herr Unregistriert, arbeite doch bitte mal an deinem Ton, das geht ja mal gar nicht.
    atec.de ist ja die Seite deines Auftraggebers, und die sieht nunmal um vieles besser aus als das, was du hier produzierst. Ich helf dir gerne weiter dabei, aber so ein Design war vor 7-10 Jahren schön, 2010 ist anders.

    Was mich aber echt nevt, ist dass du hier als Gast über Stammmitglieder lästerst weil du deren Kritik nicht verträgst.

    Gruss,
    -Lukas

    Bis auf die Tatsache, dass die startseite besch* ist und die Inhalte bei anderen Sprachen fehlen etc... Öhm, doch, das Layout ist aufjedenfall viel angenehmer als dein bunti-wolken kram den ich aufm screen seh :/

    Ist aber denke ich mal noch nicht die endgültige Fassung.

    Wenn du nicht weist was "h2" bedeutet, warum schaust du nicht einfach mal nach? Gleich das erste Ergebniss der Google-Suche (nach h2 html) bringt mir eine ausführliche und klare Erklärung.
    Ausprobieren ist sehr gut, aber alles fragen nicht...

    //edit: komisch, vorhin ließen sich auf der englischen Fassung die Subnavi links nicht anklicken - nu gehts. Kann man das also schoma streichen.

    Einmal editiert, zuletzt von Grevas (3. März 2010 um 21:17)

    Ich entschuldige mich für mein Verhalten.

    Ich werde jetzt erstmal wieder allein arbeiten.

    ich weiß was h1 h2 h3 h4 bedeutet, ich wollte eig. die navi li usw. wissen.

    Danke

    man schreibt sich vllt. nochmal

    Ich verstehe bis heute nicht, wieso man sowas nicht mal in der Schule druchnimmt ^^