Frage zu selfhtml bzw. Dreamweaver!

Dieses Thema im Forum "Software" wurde erstellt von Chance, 7. November 2006.

  1. Chance

    Chance New Member

    Hallo Leute,

    ...ich habe da eine Frage zu der Website

    http://de.selfhtml.org

    und zwar unten bei "Fertige Layouts" habe ich mir das Layout 10 in Dreamweaver angesehen, aber unter der Navileiste ist der komplette Teil Schwarz, d.h. der Text ist auch Schwarz und daher nicht zu sehen bzw. zu lesen - wie kann man dieses Testlayout in Dreamweaver öffnen, ohne den großen schwarzen Block???

    Zum Vergleich: in GoLive ist alles wie in der Browservoransicht, also weißer Hintergrund mit schwarzem Text!
    Ghet das nicht auch in Dreamweaver??

    Dank euch - Grüße Chance
     
  2. Chance

    Chance New Member

    Morgen,

    kann denn keiner weiterhelfen???

    Wäre super, wenn sich jemand von euch kurz das Layout 10 ansehen könnte...biiiitte

    Warum ist der Block(mit Text) unterhalb der Navigationsleiste in Dreamweaver schwarz und in GoLive nicht!???? Wir könnens leider nur in Dreamweaver weiterbearbeiten, aber ohne den Text zu sehen, wirds schwer(schwarzer Text auf schwarzem Hintergrund!)

    Daaaanke Chance
     
  3. Chance

    Chance New Member

    ...nach oben schieb....
     
  4. Chance

    Chance New Member

    SUPER, dank dir!

    Ich werd aber erst heute Abend dazu kommen - dann stell ich dir den Quellcode rein!

    Danke Chance
     
  5. Chance

    Chance New Member

    @ Scratchy

    So, hier ist der Quellcode der Seite index.htm
    und des eingebauten css(für die Seitendarstellung):

    index.htm - Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- Dies ist ein Template von selfhtml.org
    Erstellt wurde es von Jeena Paradies http://jeenaparadies.net/webdesign/leistungen
    Wenn Fragen dazu Auftauchen bitte im Forum posten. -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Homepage - Über uns</title> <!-- Hier sollte der Name deiner Homepage rein und der Tittel der einzelnen Webseite auf der man sich befindet hinein. Wichtig für Suchmaschinen dass hier relevante Suchwörter stehen. -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- wichtig damit Umlaute richtig dargestellt werden -->
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="Content-Language" content="de" />
    <meta name="author" content="Jeena Paradies" /> <!-- Hier sollte der Name des Autors der Inhalte dieser Seite rein. -->
    <meta name="KeyWords" content="Kostenlose, Vorlage Webseite" /> <!-- Wichtig für viele Suchmaschinen sind Schlüsselwörter die die Seite beschreiben. Auch Wortgruppen sind erlaubt. Alles getrennt durch Kommas. -->
    <meta name="Description" content="Hier finden Sie eine Kostenlose Webseitenvorlage
    die Sie für ihre eigene Seite nutzen können." /> <!-- Hier sollte ein Beschreibungstext der ganua den Inhalt dieser einen Seite in verkürzter Form wiedergibt. -->
    <link href="css/print.css" rel="stylesheet" type="text/css" media="print" /> <!-- siehe screen.css -->
    <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" /> <!-- Hier sollte der relative Pfad zum Zentralen CSS-File eingetragen werden. Je nachdem in welchem Verzeichniss sich diese Datei befindet muss der Pfad angepasst werden. -->
    <!--[if lte IE 6]><link rel="stylesheet" href="css/ielte6.css" type="text/css" media="screen" /><![endif]--> <!-- Über Conditional Comments wird für den IE <= 6 ein zusätzlich notwendiges Stylesheet eingebunden -->
    </head>
    <body>
    <div id="container"> <!-- Ist dazu da alles in einem Rahmen zu halten. -->
    <a class="skip" href="#main">Navigation überspringen</a> <!-- Für Blinde die nicht bei jedem aufruf die gleichen Infos hören wollen sondern gleich zum Inhalt der Seite weitergehen wollen. -->
    <div id="logo">
    <a href="./">homepag<span>e</span></a> <!-- Hier kommt noch einmal der Name deiner Homepage rein. Was innerhalb dieses span ist wird invertiert. -->
    </div>
    <ul id="menu">
    <li>Über mich</li> <!-- Zu der Seite auf der man sich gerade befindet sollte kein Link fürhen. -->
    <li><a href="#">Leistungen</a></li> <!-- Die Links müssen noch angepasst werden. -->
    <li><a href="#">Referenzen</a></li>
    <li><a href="#">AGB</a></li>
    <li><a href="#">Impressum</a></li>
    </ul>
    <dl id="subnav"> <!-- Diese Subnavigation kann vom Inhalt verändert werden. Sie wird nicht ausgedruckt. -->
    <dt>Wilkommen</dt>
    <dd><img src="img/kopf.jpg" alt="Passphoto, langhariger Typ" class="fright" style="width: 49px; height: 52px;" />
    Hallo, auf miener Seite hier findet ihr Informationen zu Thema und Thema.
    Erreichen kann man mich unter
    <a href="mailto:info@example.tld">info@example.tld</a>. Es wäre schön wenn
    ihr auf meinen Seiten etwas interessantes für euch finden würdet.</dd>
    <dt>Aktuelles</dt>
    <dd><a href="#">11.03.2005</a> neues Template</dd>
    <dd><a href="#">20.02.2005</a> ich habe eine neue Waschmaschine</dd>
    <dd><a href="#">15.01.2005</a> Familienzuwachs, meine Schwiegermutter zieht ein</dd>
    <dt>Informationen</dt>
    <dd>&copy; 2005 Max Mustermann</dd>
    <dd>design by <a href="http://jeenaparadies.net/webdesign/leistungen">Jeena Paradies</a></dd>
    </dl>
    <div id="main">
    <h1>Über mich</h1> <!-- Hier sollte die Überschrift für die einzelne Seite rein. Auch sehr wichtig für Suchmaschinen. -->
    <h2>Hallo allerseits.</h2> <!-- UnterÜberschriften werden von viele Suchmaschinen auch besonders beachtet. -->
    <p><img src="img/dummy_1.jpg" alt="dummy1" class="fleft" style="width: 100px; height: 71px;" /> <!-- Das alt="" Attribut sollte nicht fehlen, auch wenn es nur leer ist. Screenreader lesen ansonsten unnötig den Namen der Datei vor. -->
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam id erat at tellus
    tincidunt mollis. Praesent mattis tortor eu est. Donec congue sagittis arcu.
    Etiam viverra erat ut nulla. Donec hendrerit tortor et metus. Maecenas rhoncus
    dapibus leo. Donec vel ipsum ut felis vestibulum varius. Mauris ipsum nisl,
    accumsan eget, gravida non, mattis nec, nunc. Pellentesque pellentesque erat
    a arcu. Nulla semper, metus ac volutpat congue, ipsum felis mattis felis, sed
    placerat dolor velit ac urna. Nunc convallis. Donec non ligula nec nunc
    accumsan consequat. Ut in mauris. Vestibulum vitae neque sed eros convallis
    molestie. Phasellus quis ligula non tortor mattis mollis. Vestibulum sit amet
    ipsum ut ligula iaculis tincidunt.</p>
    <p><img src="img/dummy_2.jpg" alt="dummy2" class="fleft" style="width: 100px; height: 71px;" /> <!-- Bilder können rechts oder links umflossen werden. Dazu gibt es die zwei Klassen fright und fleft. -->
    Quisque molestie lorem vel risus. Sed volutpat. Sed consectetuer pulvinar turpis.
    Mauris sagittis, orci ut dictum porta, augue augue cursus leo, ut condimentum
    diam mi eu leo. Nullam lacinia. Vestibulum in urna nec dui suscipit dignissim.
    Maecenas odio diam, consequat et, bibendum non, ullamcorper a, risus. Nulla
    condimentum ligula a wisi. In eget risus quis purus ultricies rutrum. Mauris
    commodo tortor eu felis.</p>
    <h2>Jetzt noch mal</h2>
    <p>Aliquam erat volutpat. Aliquam erat volutpat. Nunc massa pede, egestas vel,
    sodales vitae, fringilla ac, justo. Suspendisse ac sem nec nulla vulputate
    tincidunt. Praesent eu purus vitae nisl porta ullamcorper. Nullam justo orci,
    tristique vel, fermentum eget, condimentum in, pede. Integer sed dolor et massa
    molestie mollis. Sed condimentum. Duis viverra. Proin quis urna. Morbi sodales.
    Nam vehicula risus cursus justo. Donec vel magna.</p>
    <h3>Und dann noch mal hier</h3>
    <p><img src="img/dummy_3.jpg" alt="dummy3" class="fright" style="width: 100px; height: 71px;" />
    Sed sed wisi vel odio dapibus molestie. Sed aliquet auctor arcu. Morbi nibh.
    Fusce orci urna, elementum nec, dignissim eget, aliquet non, leo. In sit amet
    justo in ante nonummy ultricies. Vestibulum congue. Sed quis quam sed orci
    condimentum tincidunt. Aenean wisi sapien, molestie eu, eleifend at, mattis
    vitae, lacus. Duis fringilla gravida pede. Duis condimentum cursus tellus.
    Donec mollis mollis dolor. Nunc a augue. Nulla id leo ut nulla sollicitudin
    accumsan. Phasellus magna mauris, condimentum id, suscipit vel, sollicitudin
    quis, nulla. Maecenas vitae nulla. Nam dui nulla, feugiat ac, rutrum in,
    suscipit et, massa. Morbi malesuada lacinia tellus. Phasellus malesuada velit
    at purus.</p>
    </div>
    </div>
    </body>
    </html>

    -----------------------------------------------------------------------------
    Der css Code folgt im nächsten thread(unten)!
     
  6. Chance

    Chance New Member

    css - Code:

    /* -- Allgemeines -- */
    body {
    background: url(../img/bg.gif) #e7f3f7; /* Hier sollte man auch wenn man ein Bild als Hintergrund nicht vergessen die Hintergrundfarbe zu setzen. Es könnte nämlich sein dass man aus versehen für den Text die gleiche Farbe hat wie für den Hintergrund wobei die Leute mit ausgeschalteten Bildern nichts erkennen können. */
    color: black;
    margin: 0;
    padding: 1%; /* Ein wenig Abstand damit der Anschein eines Blattes auf der Wand immer erhalten bleibt */
    min-width: 640px; /* Bei weniger als 640px Breite soll ein Scrollbalken erscheinen */
    font-size: 100.01%; /* umgeht den Font-Size-Bug im Safari, älteren Operas und IE */
    font-family: verdana, arial, sans-serif ;
    }
    a { color: #0B4D8C; text-decoration: underline; } /* Alle unbesuchten Links bekommen eine leicht bläuliche Farbe und werden unterstrichen, damit man Sie gleich im Text erkennt. */
    a:visited { color: black; } /* Besuchte Links werden schwarz, bleiben dennoch unterstrichen. Somit erkennt man wo man sich schon befunden hat. */
    .skip { /* Da ein wichtiger Screenreader das display: none; auch fälschlicherweise für sich versteht und nichts vorließt obwohl das hier sich vor allem an Blinde richtet, muss man es so lösen dass man diesen Link außerhalb des Sichtfeldes bringt. Somit wird er trotzdem vorgelesen. */
    position: absolute;
    margin-left: -10000px;
    }
    h1 { /* Die Überschrift jeder Seite stellen wir besonders da, denn sie ist sehr wichtig. */
    font-size: 3em;
    line-height: 0.8em;
    padding: 20px 0 5px 5%;
    margin: 0;
    border-bottom: 1px dashed #aaa;
    }
    h1, h2, h3, h4, h5, h6 { /* Alle Überschriften bekommen eine besondere Farbe und da sie sehr groß sind können wir es uns erlauben hier eine Schrift mit Serifen zu wählen. Wir spielen hier ein wenig mit Typographie, und entgegen dem Einheitsbrei auf vielen Seiten. */
    color: #6699CC;
    font-family: Georgia, "Times New Roman", Times, serif;
    }
    img { /* alle Bilder bekommen einen schönen Rahmen */
    border: solid 1px #aaa;
    padding: 1px;
    max-width: 95%; /* gute Broser machen ein zu großes Bild, welches das Design sprengen würde, funktioniert beim IE leider nicht */
    }
    .fleft { /* Sachen an denen der Text vorbeifließen soll werden diese Klassen zugewiesen. */
    float: left;
    margin: 0 1em 0.2em 0; /* Man sollte einen schönen Abstand wählen sonst kleben die Sachen so am Text. */
    }
    .fright {
    float: right;
    margin: 0 0 0.2em 1em;
    padding: 1px;
    }


    /* -- Layoutspezifisches -- */
    #container { /* Ist dafür gedacht dass die viele Formatierungen einfacher werden, und auch ein gemeinsammer Rand entstehen kann, der nicht ganz außen am Fenster ist. */
    font-size: 0.8em; /* Ein Kompromiss über den man sicherlich streiten kann, aber viele Leute empfinden die von Ihnen selbst eingestellte Textgröße für zu groß, wissen aber nicht wie man das ändert. */
    max-width: 900px; /* Eine Begrenzung der Breite auf höhstens 900px. Das machen wir um nicht zu lange Textbreiten zu erhalten welche dann schlecht zu lesen sind. Für den IE gibt es in ielte.css einen Woraround. */
    margin: auto; /* Hiermit zentrieren wir unsere Seite */
    border: 1px solid #aaa; /* Eine kleine optische Abgränzung */
    border-top: 0; /* Ganz oben allerdings würde es mit dem grauen komisch aussehen, deshalb weg damit. */
    }

    /* - Logo bzw. Kopf - */
    #logo {
    background: url(../img/blume.jpg) 0 0 no-repeat black; /* Das Bild mit der Blume hat einen Übergang zum Schwarzen das nutzen wir aus. Wir lassen es oben links beginnen und wiederholen es nicht. Dadurch dass die Hintergrundfarbe auch schwarz ist entsteht der Eindruck als ob das Bild unendlich lang wäre. */
    height: 64px; /* Das Blumenbild ist 64px hoch also wählen wir das auch als höhe für unseren Kopf. */
    padding: 0 20px;
    text-align: right;
    line-height: 54px;
    font-size: 54px; /* Das Logo soll auch in unseren Kopf passen deswegen ist es ein wenig kleiner. Durch die Angabe der Textgröße in px verhindern wir im IE die Vergrößerung und zerstörung des Layouts durch den Benutzer. Der Opera vergrößert das Bild proportional mit also kann da auch nichts passieren. */
    overflow: hidden; /* Einzig der Mozilla könnte den Text unverhältnissmäßig zum Hintergrund verändern. Damit dann wenigstens das Menü benutzbar bleibt schneiden wir alles was herausragt ab. */
    letter-spacing: -3px; /* Wieder ein wenig Typografie damit das Logo besser aussieht. */
    margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
    }
    #logo a {
    color: white; /* Die vorher eingestellte Farbe passt nicht um auch als Logofarbe zu dienen, deshalb wählen wir hier Weiß. */
    text-decoration: none;
    }
    #logo a span { /* Der letzte Buchstabe soll invertiert dargestellt werden. */
    color: black;
    background: white;
    padding-right: 0.1em; /* damit das weiße rechts und links genau so breit ist. */
    font-weight: bold;
    }

    /* - Menü - */
    #menu {
    background: url(../img/wechselschatten.png) #287635;
    padding: 5px 5%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
    margin: 0;
    text-align: right;
    color: yellow; /* Hier deffinieren wir die Farbe des Menüpunktes welcher kein Link ist, also den Menüpunkt der Seite auf der wir uns gerade befinden. */
    }
    #menu li {
    font-size: 1.2em;
    display: inline; /* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
    list-style-type: none; /* Die Bullets vor den Menüpunkten schalten wir ab. */
    border-left: 1px solid white; /* Ein optischer Trennungsstrich */
    padding: 0 10px 0 15px;
    font-weight: bold;
    }
    #menu li a {
    color: white; /* Hier ist das mit der Linkfarbe genau so, sie soll weiß sein. */
    text-decoration: none;
    }

    /* - Subnavigation, Rechte Spalte - */
    #subnav {
    width: 26%; /* Je kleiner das Fenster desto kleiner soll auch die Breite der Subnavigation werden, damit immer genügend Platz für den richtigen Inhalt bleibt. */
    min-width: 10em; /* Damit uns die Subnavigarion nicht zu sehr zusammengeschoben wird. */
    float: right; /* Damit erreichen wir dass der Inhalt links neben der Subnavigation vorbeifließt und nicht erst unten drunter anfängt. */
    padding: 70px 1%;
    margin: 1%;
    border-left: 1px dotted #aaa; /* Hiermit trennen wir optisch die Subnavigation vom eigentlichen Inhalt ab. */
    font-size: 0.9em; /* Die Schriftgröße setzen wir hier ein wenig herunter damit erkennbar wird dass das Informationen zweiter Rangordnung sind. */
    }
    #subnav dt { /* Die einzelnen Überschriften in der Subnavigation */
    font-size: 1.2em;
    font-family: Georgia, "Times New Roman", Times, serif;
    padding: 0.5em;
    margin-top: 1em;
    border-top: 1px dotted #aaa; /* Hier eine optische Trennungslinie zwischen den einzelnen Bereichen der Subnavigation. */
    }
    #subnav dd { /* Die Unterpunkte der Subnavigation. */
    padding: 0;
    margin: 0.2em 0;
    }

    /* - Her Hauptinhaltsteil - */
    #main {
    background: url(../img/blaue-blume.png) no-repeat 100% 0 white; /* Die kleine blaue halbdurchsichtige Blume wird als Hintergrundbild, welches rechts oben in der Ecke steht, deffiniert. */
    padding: 0 31% 10px 20px; /* Der rechte Abstand 31% Stellt sicher dass auch nach dem Umfließen der Subnavigation der Text genau so breit wird wie oben und ein zwei Columnen Eindruck entsteht. */
    line-height: 1.5em; /* Zesseren Lesbarkeit erhöhen wir die Linienhöhe. */
    }

    Danke Chance
     
  7. Chance

    Chance New Member

    ....joo, schlaf dich aus!!!

    Und danke fürs überprüfen, bin schon gespannt, was du dazu sagst!

    Grüße Chance
     
  8. Convenant

    Convenant Haarfestiger

    Ich hab’ da keine Probleme.
     

    Anhänge:

  9. Convenant

    Convenant Haarfestiger

    Und dann in Safari:
     

    Anhänge:

  10. mac-christian

    mac-christian Active Member

    Hallo Convi

    Hast du dir das hier auch schon mal angesehen? So hätte es aussehen sollen...

    Christian.
     
  11. Convenant

    Convenant Haarfestiger

    Ja, aber ich hatte doch keine Bilder. Nur die zwei Textdateien.
     
  12. Chance

    Chance New Member

    @ Convenant

    In den div. Browsern hab ich ja auch keine Probleme!!

    Mir gehts um die Darstellung in Dreamweaver MX!!!!
    Wenn man die Datei index.htm in Dreamweaver MX öffnet, dann ist der Text unterhalb der Navileiste nicht zu sehen, weil eine schwarze Fläche erscheint! Ich wollte wissen, wie man in Dreamweaver diese schwarze Fläche wegbekommt, denn in GoLive ist diese schwarze Fläche nicht vorhanden und daher auch der schwarze Text zu sehen und zu lesen!

    Irgendwie interpretiert da Dreamweaver was rein...keine Ahnug!??

    Ich hoffe, du weißt jetzt um was es mir geht!

    GrüßeChance
     

Diese Seite empfehlen