Beiträge von sejuma

Die Browser-Hacks waren diesmal nicht schuld, sondern zu viele positions absolute und fehlende float-Angaben.
Ich hab die CSS mal etwas umgeschrieben. Achtung: Statt der background-images hab ich Farben eingesetzt, damit's besser deutlich wird.
Die müsstest du dann wieder ersetzen. Mach dir vorsichtshalber ne Sicherungskopie von deiner Datei. Sollte die Anordnung nicht deinen Vorstellungen entsprechen, dann melde dich nochmal.
Jedenfalls sieht's im IE und FF gleich aus.

CSS

#rahmen {
   /* Hauptrahmen um die Page */
   width: 642px;
   height: 550px;
   margin: 0 auto;
   top: 20px;
}
#head {
   /* Headbereich */
   background-color:green;
   width: 642px;
   height: 169px;
}
#middle {
   /* Div layer für den Mittleren Bereich */
   width: 642px;
   height: 367px;
      background-color:#000099;
}
#footer {
   /* Div layer für Fußbereich */
   background-color:yellow;;
   width: 642px;
   height: 14px;
   clear:both;
}
#left {
   /* Middle Bereich linke Spalte */
   background-color:#ff0000;
   background-repeat: no-repeat;
   width: 103px;
   height: 367px;
   float:left;
      padding-left: 38px;
}
#left li {
   display: block;
   cursor: pointer;
   list-style-type: none;
}
#menu {
   /* Menu im Middle Bereich */
   background-color:black;;
   width: 642px;
   height: 26px;
   clear:both;
   float:left;
   top: 0px;
   left: 103px;


   text-align: left;
}
#menu li {
   display: inline;
   cursor: pointer;
   padding: 0px;
   margin: 0px;
   color: #FF0000;
}
#menu li:hover {
   color: #000000;
}
#content {
   /* Content im Middle Bereich */
   background-image: url('images/content.jpg');
   background-repeat: no-repeat;
   width: 524px;
   height: 330px;
   overflow: auto;
   position: absolute;
   left: 103px;
   top: 26px;
   padding-left: 0px;
   padding-top: 10px;
   padding-right: 0px;
   padding-bottom: 0px;
}
#right {
   /* Rechte Seite im Middle Bereich */
   background-image: url('images/right.jpg');
   width: 15px;
   height: 367px;
   position: absolute;
   left: 627px;
}


/* ###### KLASSEN ###### */
.txt {
   font-size: 11px;
   font-family: verdana;
}

edit: sehe gerade, dass der content noch fehlt. Wo soll der denn hin in der Anordnung der farbigen Kästen oder wie sollen die angeordnet werden?

Mit dem Javascript kenn ich mich nicht aus. Vielleicht kann dir da jemand anders weiterhelfen oder du probierst es nochmal nach dieser Anleitung: http://css.fractatulum.net/sample/wechsel.htm

Hier findest du ein Script und im Quelltext dieser Seite kannst du sehen wie es eingebunden wird.

Du müsstest die einzelnen Tabellenzellen durch bestimmte "Klassen" in einer CSS-Datei formatieren. In diesen Klassen könntest du auch die jeweiligen Hintergrundbilder als background-image hinterlegen.
Diese Formatierungen kannst du dann beliebig oft verwenden. Soll sich dann einmal ein Hintergrundbild ändern, einfach in der CSS-Datei austauschen. Schlägt dann aber auf alle Tabellenzellen mit der entsprechenden Klasse einheitlich durch.
Sieh dir hierzu mal diesen Artikel an. Statt background-color definierst du dann background-image.

Lies dir mal diese Anleitung über faux columns durch.
Das ist ein "CSS-Trick" mit dem man die Containerhöhen zum "mitwachsen" zwingen kann.

dto. mit etwas Anstrengung solltest du es hinbekommen, dass für die meisten Seiten die Bildschirmgröße ausreicht und scrollen entbehrlich wird.
Bei den Links würde ich noch block-hovern ermöglichen, damit der Hover-Effekt nicht nur beim Überfahren des Textes sondern des gesamten Zellenbereichs auftritt.
Die Seite selbst gefällt mir sehr gut. Übersichtlich, klar gegliedert, auch hervorragende Farbharmonie.
Die Werbeeinblendungen von funpic sind bei einer solchen gewerblichen Seite deplatziert und mindern die Qualität (vielleicht ist's ja auch nur ein Testlauf). Deshalb solltest du für diesen Zweck ne eigene Domain mit werbefreiem Webspace besorgen. Melde dich bei Interesse mal per PN.

Bilder und Hintergrundbilder lassen sich in div's genauso einfügen wie in Tabellen. Formatierung und Ausrichtung erfolgt dann über CSS. Sieh dir hierzu mal einige Layout-Beispiele an:
http://www.css4you.de/wslayout1/index.html
http://de.selfhtml.org/css/layouts/index.htm

@ Gast:
Wenn du schon mit CSS arbeitest (löblich!), dann sollte sich dadurch doch gerade das Tabellenlayout mit seinem meist unübersichtlichen Quelltext erübrigen: http://www.css4you.de/wslayout1/index.html

Wenn du dennoch mit Tabellen arbeiten und diese formatieren möchtest, gibt's hier einige Tipps für den richtigen Code.

Das hat mit google nichts zu tun.
Mit einem angegebenen Doctype kannst du deine Seite validieren lassen und bekommst angezeigt ob dein Quelltext den festgelegten Normen entspricht. Dadurch können (von einigen Bugs abgesehen) Fehler in der Anzeige mit unterschiedlichen Browsern vermieden werden.
Je nach Doctype sind z.B. verschiedene Elemente zulässig oder nicht (strict).
Empfehlung deshalb: Immer Doctype mit Referenz-html angeben.
Näheres siehe http://de.selfhtml.org/html/allgemein…htm#dokumenttyp

Das align bezieht sich auf die Ausrichtung innerhalb einer Zeile.
Nimm in Abhängigkeit von der Containerhöhe z.B. folgenden Wert:

padding-top:345px;

Beachte: Geht der Text über eine Zeile hinaus, verlängert sich der Container bzw. du musst dann mit overflow arbeiten.

@Gast:
meinst du so?

CSS

.B1 {
  position: absolute;
  margin-left:     20px;
  margin-right:    20px;
  width:    100%;
  background-color:#999999;
}


.B11 {
  width:   100px;
  height:  100px;
  postion: relative;
  left:    0px;
  top:     0px;
  background-color:green;
}


.B12 {
  position:          ;
  margin-left:       100px;
  margin-right:	    100px;
  top:               0px;
  display:           block;
  width:             100%;
  height:            16px;
  padding-left:      100px;
  padding-right:     100px;
  background-color:  #FF0000;
}

HTML

<div class="B1">
 <div class="B12">B12</div>
  <div class="B11">B11</div>
</div>

Nimm mal bei B1 und B12 das "position:absolute;" raus, dann sollte es gehen.
Zum Rand: Da hast du padding-left/right (innerer Abstand) mit 100px angegeben. Wenn das so passt ist's gut. Ansonsten für den äußeren Rand margin-left/right mit 100px angeben.

Gib mal das an die Stelle ein, wo der Rahmen beginnen soll:

<div style="border: solid 2px #ff0000;">

und das da wo er enden soll:

</div>

Farbe und Rahmenstärke ggf. anpassen.

Bei meinem post hat der Admin die fiktive emailadresse und damit den wesentlichen Code-Teil gelöscht. Deshalb nochmals der Code. Ersetze "emailadresse" durch deine richtige mail-Adresse:

[url='emailadresse?subject=Ein%20vorgegebener%20Betreff&body=Bitte senden Sie mir Info-Material zu.%0D%0A%0D%0AMeine Adresse:%0D%0AName:%0D%0AVormame: %0D%0AStraße: %0D%0APLZ  %0D%0AOrt:%0D%0ATelefon: %0D%0Ae-mail:']Kontaktlink[/url]

Was das andere Formular betrifft hast du bestimmt was falsch gemacht. Hast du deine Adresse eingetragen, die Datei als .php gespeichert, auf dem Webspace hochgeladen?

Wenn du in der CSS bei

body, p a {
    color: white;
	background-color: black;
    font-size: 100.01%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
	padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }

das background-color:black; rausnimmst, geht's auch im IE. Das schlägt auf den nicht näher formatierten a-Link durch.
Allerdings fehlt das Schwarz dann möglicherweise an einer anderen Stelle.
Alternativ könntest du die betreffenden Links nochmal speziell definieren.

Mit diesem Code geht's mit normalem HTML:

[url='mailto:deinname@xy.de?subject=Ein%20vorgegebener%20Betreff&body=Bitte senden Sie mir Info-Material zu.%0D%0A%0D%0AMeine Adresse:%0D%0AName:%0D%0AVormame: %0D%0AStraße: %0D%0APLZ  %0D%0AOrt:%0D%0ATelefon: %0D%0Ae-mail:']Kontaktlink[/url]

Du musst nur noch die e-mail-Adresse entsprechend ändern.

Zu beachten:
Das klappt nur, wenn der Benutzer ein eigenes e-mail-Programm installiert hat (z.B. Outlook). Dieses öffnet sich, wenn man auf den Link klickt.
Nutzt man dagegen web.de, gmx o.ä. lediglich über's Internet hat man Pech.
Weiterer möglicher Nachteil: Die e-mail-Adresse ist auch Spammern leicht zugänglich.

Wenn die Daten auf deinem Server gespeichert werden sollen, brauchst du dort eine Datenbank und ein PHP-Script.
Du könntest es aber auch über ein "Kontaktformular" lösen, mit dem dir der Interessent eine e-mail zukommen lässt und du darauf entsprechend antwortest.
Dazu muss dein Web-Paket PHP-fähig sein. Du selbst, brauchst dafür keinerlei PHP-Kenntnisse.
Ich benutze z.B. dieses

Da hast du leider einen großen div-Brei angerührt, bei dem man nur schwer durchblickt. Du verwendest ausschließlich Klassenselekoren.
In deiner CSS solltest du jedoch folgende Unterscheidungen vornehmen:

ID-Selektoren , das sind die einzelnen Boxen oder Container, in die du den Inhalt packst.
Für deinen Aufbau reichen 6, z.B.
#gesamtcontainer
#header
#navioben
#navilinks
#content
#footer

Diese ID's kommen jeweils nur einmal auf einer Seite vor und sollten in der HTML ihrer Reihenfolge nach aufgebaut werden.

Zum zweiten gibt es die
Klassenselektoren

Die Klassenselektoren dienen dazu, bestimmte Formatierungen innerhalb der ID-Selektoren vorzunehmen und können sich innerhalb einer Seite wiederholen.
In der HTML gibt man sie zweckmäßigerweise mit <p class="..."> an, falls kein Absatz erwünscht ist, auch mal mit div.

Schließlich noch die Pseudoselektoren für die Navi.

Du verwendest m.E. auch zu viele Klassenselektoren. Da geht einerseits der Überblick verloren, andererseits lassen sich verschiedene Klassen (z.B. die Linien) mit anderen zusammenfassen.

Versuch mal, nach diesem System etwas aufzuräumen, so dass eine klare Gliederung erkennbar wird: Was sind die Container, wo werden sie geöffnet und geschlossen und was dient lediglich der Formatierung.
Dann ist es sicherlich auch möglich, den Footer nach unten zu bringen.

So was?

Wenn du eine .css-Datei hast, muss die sich dort befinden, wo der Pfad im Head-bereich hinweist.
Such mal im Head-Bereich der html-Datei eine Stelle, die so aussieht (Dateiname kann natürlich auch ein anderer sein):

<link rel="stylesheet" type="text/css" href="style.css">

In diesem Fall muss sich die css-Datei im gleichen Ordner wie die html-Datei befinden. Falls sie in einem anderen Ordner ist, musst du im Pfad noch den Ordner voranstellen.

Probiers mal so:
in Word:
rechter Mausklick / Grafik bearbeiten bzw. öffnen
Grafik markieren / kopieren
in Bildbearbeitungsprogramm: einfügen