Frage zu selfhtml bzw. Dreamweaver!

Chance · 7. November 2006

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

Chance · 8. November 2006

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

Chance · 8. November 2006

...nach oben schieb....

Chance · 8. November 2006

SUPER, dank dir!

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

Danke Chance

Chance · 8. November 2006

@ 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">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Homepage - Über uns</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="Content-Language" content="de" />
<meta name="author" content="Jeena Paradies" /> 
<meta name="KeyWords" content="Kostenlose, Vorlage Webseite" /> 
<meta name="Description" content="Hier finden Sie eine Kostenlose Webseitenvorlage
die Sie für ihre eigene Seite nutzen können." /> 
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" /> 
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" /> 
 
</head>
<body>
<div id="container"> 
<a class="skip" href="#main">Navigation überspringen</a> 
<div id="logo">
<a href="./">homepag<span>e</span></a> 
</div>
<ul id="menu">
<li>Über mich</li> 
<li><a href="#">Leistungen</a></li> 
<li><a href="#">Referenzen</a></li>
<li><a href="#">AGB</a></li>
<li><a href="#">Impressum</a></li>
</ul>
<dl id="subnav"> 
<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>© 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> 
<h2>Hallo allerseits.</h2> 
<p><img src="img/dummy_1.jpg" alt="dummy1" class="fleft" style="width: 100px; height: 71px;" /> 
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;" /> 
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)!

Chance · 8. November 2006

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

Chance · 9. November 2006

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

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

Grüße Chance

Convenant · 9. November 2006

Ich hab da keine Probleme.

Convenant · 9. November 2006

Und dann in Safari:

mac-christian · 9. November 2006

Hallo Convi

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

Christian.

Convenant · 9. November 2006

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

Chance · 9. November 2006

@ 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

Anmelden oder registrieren

Frage zu selfhtml bzw. Dreamweaver!

Chance New Member

Chance New Member

Chance New Member

Chance New Member

Chance New Member

Chance New Member

Chance New Member

Convenant Haarfestiger

Anhänge:

$Bild 2.png

Convenant Haarfestiger

Anhänge:

$Bild 3.png

mac-christian Active Member

Convenant Haarfestiger

Chance New Member

Diese Seite empfehlen

Anmelden oder registrieren

Frage zu selfhtml bzw. Dreamweaver!

Chance New Member

Chance New Member

Chance New Member

Chance New Member

Chance New Member

Chance New Member

Chance New Member

Convenant Haarfestiger

Anhänge:

$Bild 2.png

Convenant Haarfestiger

Anhänge:

$Bild 3.png

mac-christian Active Member

Convenant Haarfestiger

Chance New Member

Diese Seite empfehlen

Nützliche Suchen