[immer_ich]

Hallo zusammen!

Ich erstelle zur Zeit den Internet-Auftritt eines Kindergartens neu.

Die Basis könnt ihr hier sehen: Internet-Seite

Ich habe ein paar kleine Probleme. Vielleicht mag und kann mir ja einer helfen.

Dank im voraus!

-------------------------------------------------------------------------------------------
1.

Die beiden Grafiken haben erkennbar eine andere Hintergrundfarbe als die Seitenbereiche. Ich habe aber in Photoshop den gleichen HTML-Farbcode genommen wie beim Internet. Muss ich die Farben anders deffinieren? Woran liegts?

-------------------------------------------------------------------------------------------
2.

Eine Testseite mit Menüstruktur findet ihr hier.
Das Menü funzt per CSS.
Den CSS-Text findet ihr hier:

Spoiler:

/* CSS Document */

/* ----------text-styles-------------- */

.Stil1 {font-size: 12px}
.Stil2 {font-size: 14px}

/* ----------basic styles-------------- */

body {
background-color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#319A63;
padding:0px;
margin:0px;
}
a {color: #DB7093;}
a:visited {color:#DB7093;}
a:hover {color: #564b47;}
a:active { color:#000000;}

h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #9CCF00;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
padding:5px 15px;
margin:0px }
h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}

img.download {vertical-align:middle;}

/* ----------container zentriert das layout-------------- */
#container {
width: 950px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
}

/* ----------banner for logo-------------- */
#banner {
text-align: right;
background-color: #E7F3B5;
padding: 0px;
margin: 0px; }

#banner img {padding:10px 0px;}

/* ----------outer and inner----------------- */

#outer{
border-left: solid 200px #E7F3B5; /* linke Menue Spalten Farbe */
border-right: solid 200px #E7F3B5; /* rechte Menue Spalten Farbe */
background-color: #ffffff; /* Farbe fuer Inhalt Spalten */
}

#inner{margin:0; width:100%; }

/* --------------left and right navigavtion------------- */
#left {
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
}
#right {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
}

/* -----------------Inhalt--------------------- */
#content{
position: relative;
margin: 0px;
}
p {
padding: 5px 10px;
margin:0px; }

pre{
font-size: 12px;
padding: 5px 10px;
margin:0px;}

/* ----------------Navigation---------------------- */

#list ul{
margin:0;
padding:5px;;
list-style:none;
white-space: nowrap;}

#list a{
color:#319A63;
font:normal 12px arial,sans-serif;
padding:3px 15px 3px 15px;
width:80%;
height:100%;
display:block;
text-decoration:none;
background-color:#E7F3B5;
border:1px solid #9CCF00;
border-left:4px solid #9CCF00;
text-align:left;}

#list a:hover{
color:#319A63;
background-color:#9CCF00;
border:1px solid #319A63;
border-left:4px solid #319A63;
text-align:right;}

/* ----------------footer---------------------- */
#footer {
clear:left;
padding:0px;
margin:0px;
text-align: right; }

Mir ist völlig rätselhaft, wieso beim Menü die Listenzeichen angezeigt werden (list-style: none). Dadurch wird das Menü auch zu weit nach rechts geschoben.
Woran liegts?

-----------------------------------------------------------------------------------------

Hmm....evtl. gehört das ja auch unter WebTechnik?!

[aNtiCHrist]

Bei den Bildern wird eine Farbe verwendet, die in der "HTML-Notation" #E2F0B3 entspricht. Solange da dir nicht gerade die verlustbehaftete Datenkompression einen Streich spielt, bleibt eigentlich nur noch irgendein Farbmanagement oder ein Bedienfehler. Probier mal das verlustfreie PNG-Format, zumindest für den Schriftzug dürfte das eh besser geeignet sein als JPEG.

Bei dem Listenproblem gibt es kein Element, auf das dein Selektor #list ul (eine ul-Element, das sich innerhalb eines Elements mit der ID "list" befindet) passen würde, daher wird die list-style-Definition niemals angewandt. Du meintest sicherlich ul#list.

Deine Validierungslinks solltest du übrigens noch anpassen (und dann auch ruhig mal anklicken).

[immer_ich]

@aNtiCHrist

Danke für deine Hilfe!

Das mit dem PNG-Format werde ich testen.
Die Validierungslinks hab ich angepasst
Das mit der Liste kapier ich ehrlich gesagt nicht

[aNtiCHrist]

Was verstehst du nicht? Dein Selektor passt wie gesagt nicht zu der Liste, er müsste ul#list (Passt auf ein ul-Element mit der ID "list") lauten. #list ul würde nur auf ein geschachteltes Konstrukt wie

<div id="list">
  <ul>
    <li>foo</li>
  </ul>
</div>

passen, was du hier aber nicht hast.

Der HTML-Validierungslink zeigt nun auf die Homepage, sinnvoller wäre es, wenn er die aktuelle Seite validieren würde ...

Gerade noch drüber gestolpert:

xml:lang="en" lang="en"

Für mich sieht das eher nach Deutsch aus.

[Greg5000]

Mit der Liste ist das Problem eigentlich von Antichrist gut beschrieben. Du schreibst im CSS #list ul und möchtest damit die Navigationsliste formatieren. #list ul wählt aber ein ul-Element aus, das einem Element mit der ID list zugeordnet ist. Das ist aber nicht der Fall, da das ul-Element selber die ID list hat. Um die Liste zu stylen, hast Du 3 mögliche Selektoren:

1. ul#list
2. #list
3. #left ul

Letzteres wäre am sinnvollsten, dann sparst Du auch die ID-Vergabe für die Liste

Weiter Verbeserungsvorschläge:

• p und br nicht als Platzhalter nehmen (dafür gibt es margin bzw. padding)
• bei der Liste im Inhalt könntest Du die Klassen für die einzelnen Listenpunkte (Stil1) weglassen, der Liste einfach eine Klasse (Stil1) geben und die Listepunkte dann über .Stil1 li formatieren
• Das Copyright als h1 finde ich unlogisch
• Die Adresse könntest Du mit address als solche auszeichnen
• Außengelände (im Inhalt) scchreibt man mit ß

//edit
verdammt, zu spät. Ich wurde durch einen Anruf aufgehalten

[Yakima]

*gelöscht*

Das ist definitiv nicht mein Tag!

[immer_ich]

Danke für eure Hilfe!!!

Ich habe
- beim Logo eine .png-Datei genommen. Funzt!
- bei der Navigation den 'left ul' tag genommen und auch die ID geändert. 'list' war doof, denk ich, jetzt heißt sie 'navi'

Jetzt sieht's schon viel besser aus. Nochmals Danke!