• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Warum überlagern sich die header?

htmlnutzer

Neues Mitglied
Hallo Freunde. Ich habe folgendes Problem und finde keine Lösung, weil ich offenbar den Wald vor lauter Bäumen nicht mehr sehe. Ich bin Anfänger der html Programmierung und der Gestaltung per CSS.

Ich möchte eine Webseite erstellen, die u.A. aus 2 Headern besteht, die nebeneinander stehen sollen.

Dies funktioniert bei mir nicht. Der 2. Header überlagert einfach den ersten.

Hier einmal ein Ausschnitt des Quellcodes für das CSS und anschließend einen der bisherige Quellcode für die künftige Website:


Code:
#header1
{
height: 300px;
width: 17%;
position: float:left;
background-image: url(xxx.gif);
background-repeat: no-repeat;
background-position: 0 0;
border: 5px none #fff;
border-bottom: 5px solid #fff;

}
#header2
{
height: 200px;
width: 63%;
border-bottom: 1px solid #fff;
border: 5px solid #fff;
border-bottom: 5px solid #fff;
font-style: italic;
font-color: white;
background-color: #CCCCCC;

Nun der HTML Code für die Webseite:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>yyyy!</title>
<meta name="robots" content="index,follow">
<meta name="language" content="deutsch, de">
<meta name="keywords" content="a,b,c,l ">
<meta name="description" content="ggggg.">
<link rel="stylesheet" href="stylesheet1.css" media="screen">
<style type="text/css" media="screen">@import url("stylesheet2.css");</style>
<link rel="stylesheet" href="print.css" media="print">
<meta name="msnbot" content="all">
<meta name="city" content="bbb">
<meta name="country" content="Germany">
<meta name="zipcode" content="57777"></head>
</head>
<body text="#FFFFFF" bgcolor="#EEEEEE" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="container">
        <div id="header1"</div>
        <div id="header2" title="bbbbb.">
jjjjj</div>
        <div id="header3"</div>
        <div id="hintergrundrechts"</div>
        <div id="mainnav"></div>
        <div id="menu" </div>
        <div id="contents"></div>
        <div id="footer"></div>
</div>
</body>


</html>

Vielleicht kann mir jemand mitteilen, was ich falsch mache und dies im Code korrigieren und damit ich es kapiere, die Änderungen farblich markieren. das wäre für mich als Anfänger sehr hilfreich. Vielen lieben Dank schon einmal im voraus.
 
Zuletzt bearbeitet:
Code:
position: float:left;

gibt es nicht als CSS-Eigenschaft. Bitte schau in die CSS-Referenz um zu erkennen was richtig ist und was falsch. Eine Mischung der dort angegebenen Eigenschaften in dieser Form ist nicht möglich.

Dein HTML-Code ist soweit ok, nur sind im body noch einige nicht mehr genutzte HTML-Attribute zu sehen. Schmeiß die mal raus.

Und: HTML ist keine Programmiersprache. Somit lernst Du hier nicht das programmieren.
 
Vielen lieben Dank für die schnelle Hilfe. Werde es gleich ausprobieren und auch den HTML Code ändern. Mal sehen, ob es dann klappt.
 
und um solche Fehler zu finden ist die Fehlerkonsole sehr hilfreich (auch wenn es die Entwickler des vBulletin Forum nicht Wissen), denn dort werden auch CSS Fehler als Warnungen angezeigt.
 
@struppi: Fehlerkonsole? Ich kann Dir da nicht ganz folgen.

@threadi: Der html code ist nun auch validiert und ist laut "validator.w3.org - Check" jetzt fehlerfrei und damit mit den aktuellen Standards konform.

Ob der Stylesheet so in Ordnung ist, kann ich nicht sagen, weil ich da keinen Validator kenne. Aber vielleicht hilft ja diese Fehlerkonsole. Aber wie gesagt, ich kann da nicht ganz folgen, wo ich sie finde und wie ich sie anwende.

@ all: Ich habe das Design mittlerweile ganz gut hinbekommen, dass ich die Seite so aufgebaut bekomme, wie ich es möchte.

Anbei mal nun der komplette stylesheetcode und der dazugehörige html Code.

Code:
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
background-color: #000000;
}
a:link {
  text-decoration: none;
  color: #FFFF10;

}

a:hover {
background-color:#000000;
font-color : #ffff00;
}

a:visited {
color : #ffffff;
}

#container
{
margin: 1em auto;
width: 920px;
height:740px;

background-color: #000000;
border: 2px solid #A23626;
}

#menue
{

float:right;
z-index: 4;
height: 95%;
width: 17%;
background-image: url(Menuehintergrund.jpg);
background-repeat: no-repeat;
font-size: 15px;
font-style: italic;
color:#FFFF10;
margin: 2px;
padding: 2px;
border: 2px solid #A23625;

}

#right
{
float:right;
z-index: 2;
width: 217px;
height: 456px;
background-repeat: no-repeat;
background-position: 0 0;
background-color: #000000;


}

#mitte
{
float:right;
z-index: 4;
height: 15%;
width: 56%;
background-color: #000000;
font-size: 27px;
font-style: italic;
text-align:right;
color: #FFFF10;
margin: 0px;
padding: 0px;
border: 5px solid #000000;

}

#seiteninhalt
 {
float:right;
position:absolute;
top:150px;
left:330px;
z-index: 0;
height: 50%;
width: 40%;
background-color: #000000;
font-size: 14px;
font-style: italic;
text-align: left;
text-indent: 30px;
line-height: 25px;
overflow: scroll;
color: #A23626;
margin: 2px;
padding: 2px;
border: 5px solid #FFFFFF;
clear:left;
}

#footer
{

height: 2%
width: 100%;
background-color: #A23626;
text-align:center;

}

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="robots" content="index,follow">
<meta name="language" content="deutsch, de">
<title>Der Zauberkünstler Robert Marteau. Ein Meister perfekter Unterhaltung!</title>
<meta name="keywords" content="Zauberkünstler, NRW, Entertainer, Tisch, Bühnen, Messe, Robert Marteau, Kulturevent, mental ">
<meta name="description" content="Der Zauberkünstler Robert Marteau ist ein wahrer Meister perfekter zauberhafter und mentaler Unterhaltung.">
<link rel="stylesheet" href="stylesheet3.css" media="screen">
<meta name="msnbot" content="all">
<meta name="city" content="Attendorn">
<meta name="country" content="Germany">
<meta name="zipcode" content="57439"></head>
<div id="container">
        <div id="right">
<img src="Zauberkuenstler_Robert_Marteau_mit_Glaskugel.gif" width="100%" height="100%" alt="Zauberkünstler Robert Marteau" ></div>

<div id="seiteninhalt">
Robert Marteau ist in der Tat ein wahrer Meister perfekter Unterhaltung. Von der ersten bis zur letzten Minute zelebriert er
höchst interessant, unterhaltsam und fesselnd, seine äußerst verblüffenden und täuschenden Shows.<p>
Der erstklassige und erfahrene Zauberkünstler aus NRW ist bestimmt auch für Sie garantiert der richtige Entertainer und ein
äußerst kompetenter Partner für Ihr Anliegen, Ihre Veranstaltung professionell mit zu gestalten.<br>
Ob am Tisch, auf Bühnen, während der Messe oder Hausmesse, für den besonderen Kulturevent, Firma oder einfach als...
"Privatzauberkünstler"?!<p>
Gerne wird Robert Marteau auch für Sie veranstaltungsspezifisch kreativ und effektiv tätig. So entwickelte er beispielsweise
für die Leichtathletik EM spezielle Kunststücke, mit denen er die VIPs themenorientiert und glänzend unterhielt, unter
anderem den Kugelstoßer Ralf Bartels.<p>
Die erstklassigen Referenzen von Robert Marteau sprechen für sich selbst. Schauen Sie sich diese doch einmal im entsprechenden
Menüpunkt an. Dort finden Sie entsprechende PDF Dateien zum Download. <br>
Wenn Sie also mehr als unterhalten werden wollen, dann kommen Sie an Robert Marteau nicht vorbei.
</div>
<div id="mitte" title="Zauberkünstler Robert Marteau, Hauptseite." >
  Der Zauberkünstler Robert Marteau.<br>Ein Meister perfekter<br> Unterhaltung! </div>
<div id="menue"> <br> <br><br> <br>
<ul>
<li><a href="shows.html">Die Shows</a><br><br></li>
<li><a href="referenzen_pdf.html">Referenzen</a><br><br></li>
<li><a href="videos.html">Videos</a><br><br></li>
<li><a href="pressefotos.html">Pressefotos</a><br><br></li>
<li><a href="pressemappe_pdf.html">Presseberichte</a><br><br></li>
<li><a href="kundenstimmen.html">Kundenstimmen</a><br><br></li>
<li><a href="kontaktformular.php">Kontakt</a><br><br></li>
<li><a href="newsletter_abonnieren.html">Newsletter</a><br><br></li>
<li><a href="http://www.twitter.com/ZaubererMarteau"TARGET="_blank">Auf Twitter folgen</a><br><br> </li>
<li><a href="kooperation.html">Kooperationspartner</a><br><br></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>

</div>  <!--DIV Menü ende-->
 <div id="footer"></div>
</div> <!-- Div Container ende-->


</body>


</html>

Nun sind jedoch zwei weitere Probleme aufgetaucht, welche ich derzeit noch nicht bewältigt bekomme.:-(

1. In den 3 Browsern, opera 10.63, Firefox 3,6.12 und den IE 8,06, die ich als Testbrowser nutze, wird im Firefox und dem IE die Seite jeweils anders angezeigt. Nicht viel, nur eine Verschiebung des "Inhalts-Div" gegenüber dem Opera. Ich weiß aber nicht, woran das liegt und frage mich, wie kann ich die Formatierung so ändern, dass die Seite in allen 3 Browsern identisch aussieht.

2. Ein Footer, der eigentlich, wie es der Name schon sagt, untern auf der Webseite erscheinen soll, erscheint gar nicht. Offenbar sehe ich den Wald vor lauter Bäumen nicht mehr.

Ich hoffe, ich kann da wieder auf Euer Fachwissen zurückgreifen.

Vielen lieben Dank.

Robert
 
Hallo.

Würdest du die unnötigen <div> weglassen würde vermutlich auch dein Footer zu sehen sein.

Ansonsten verzichte auf <br>. Wenn du Abstände willst arbeite mit margin und padding.

Deine Seite muss nicht in allen Browsern 100% identisch aussehen. Wenn die Darstellung stimmt und nur um einige Pixel abweicht ist es gut.
Ich kenne niemanden der gleichzeitig mit mehreren verschiedenen Browsern surft und dabei die Darstellung vergleicht.
Wenn es also keine Fehldarstellung ist wird es niemandem auffallen.

Gruss
Elroy
 
Würdest du die unnötigen <div> weglassen würde vermutlich auch dein Footer zu sehen sein.

Wie meinst Du das?

Ansonsten verzichte auf <br>. Wenn du Abstände willst arbeite mit margin und padding.

Ich werde da im Menü einfach mal im Stylesheet mit line-height arbeiten. Mal sehen,wie ich sonst den Text im Content des Scrollfensters formatiere.

Deine Seite muss nicht in allen Browsern 100% identisch aussehen. Wenn die Darstellung stimmt und nur um einige Pixel abweicht ist es gut.
Ich kenne niemanden der gleichzeitig mit mehreren verschiedenen Browsern surft und dabei die Darstellung vergleicht.

Da hast Du natürlich recht, jedoch muss man ja in verschiedenen Browsern testen, da man nicht weiß, wie die Darstellung in den verschiedenen Browsern aussieht. Ich dachte, dass es ggf. für IE oder Firefox unterschiedliche Befehle gibt, die auch nur von verschiedenen Browsern verstanden oder interpretiert werden.

Wenn es also keine Fehldarstellung ist wird es niemandem auffallen.

Nun ist es so, dass ich gerne mit dem Scrollfenster eine Überlappung hätte, die auch im Opera richtig angezeigt wird. Im IE und Firefox ist die gewünschte Überlappung nicht zu sehen. In so fern wäre es schon eine Fehldarstellung, entweder im Opera oder in den beiden anderen Browsern.

Danke schon mal fürs Feedback.
 
Da Du deine Beiträge dazu über viele Foren verteilst, wirst Du sicher schon die entsprechende Hilfe bekommen haben.
 
Nein, leider noch nicht. Schade, dass man so eine Antwort bekommt, nur weil man in zwei Foren die Frage postet. Schließlich gibt es in zwei Foren auch zwei mal (und somit auch ein erweitertes) Know How, es sei denn, dass die zwei Foren ausschließlich die gleichen Mitglieder haben. Dies aber würde in letzter Konsequenz bedeuten, dass eines davon überflüssig wäre. Nur dann würde ich auch Deinen Beitrag verstehen, der mir unterschwellig einen Vorwurf macht. Warum also soll man das Know How aus mehreren Foren nicht auch nutzen können?
Das dies aber gleich in scheinbaren Eifersüchteleien endet.......Schade.
 
Nachdem ich htmlnutzer gefragt habe, was ihn hindert nach Fehlerkonsole zu googlen, antwortet er mir:

htmlnutzer schrieb:
Gegenfrage: Warum gibt es Foren, wenn ich bei Googel alles finden könnte?:smile:

Ich gebe es auf. Ich dachte, ich finde in diesem Forum Hilfe. Was ich bekomme sind Vorwürfe, dss ich in einem zweiten Forum weiteres Know how nutzen will und einieg Wortphrasen, mal abgesehen von zwei Beiträgen, die mir doch etwas weitergeholfen haben.

Sehr motivierend, einige Leute hier:evil:

Und Tschüss.

Da er keine Antwort mehr zu läßt, platziere ich sie hier:

Foren gibt es, wenn du du etwas nicht verstehst oder etwas bei google nicht auffindbar ist, dass dir jemand hilft entweder bei google die Antwort zu finden oder eine Erläuterung zu vertiefen, die du nicht verstehst.

Du glaubst die Foren sind nur für dich da, und jeder müßte dir zu Hilfe eilen, wenn du zu faul bist zu suchen. Das ist eine ziemliche egozentrische Vorstellung eines Forums. Insofern ist es kein Verlust
 
Es ist schon eine Unverfrorenheit, ein PN im öffentlichen Bereich zu posten, dies mal ganz nebenbei. So ein Verhalten spricht für sich selbst.

Und mir Faulheit zu unterstellen, dies ist, mit Verlaub gesagt, eine Beleidigung, die jeglicher Grundlage entbehrt, ohne überhaupt zu wissen, wie lange ich mich mit der Thematik bei meiner knapp bemessenen Zeit beschäftigt habe.

Ich habe aus beruflichen Gründen leider nicht stunden- oder tagelang Zeit, mich damit so intensiv zu beschäftigen, dass ich meine eigentliche Arbeit dabei vernachlässigen kann. Schließlich soll das ein Hobby werden und bleiben.
Aus diesem Grunde habe ich mich an dieses Forum (und an ein Nachbarforum) gewandt, mit dem Hintergrund, dass ich hier Hilfe bekomme. Und ich habe ganz klar am Anfang geschrieben, dass ich Anfänger bin und nicht weiterkomme, sowie Codes gepostet, damit man ihn sich einmal anschaut und mir ggf. Hilfe zukommen lassen wird.

Allerdings sind dann solche o Kalorien Postings, wie sie "Struppi" gepostet hat, nicht gerade motivierend, wenn einem gleich Faulheit unterstellt wird.

Um die Sache nun abszuschließen, möchte ich nun den Admin bitten, meinen Account als "Verlustfrei", so wie das "Supergenie" der HTML Programmierung "Struppi" es bezeichnet, zu schließen und auch diesen Thread zu sperren.

Vielen Dank.
 
Und mir Faulheit zu unterstellen, dies ist, mit Verlaub gesagt, eine Beleidigung, die jeglicher Grundlage entbehrt, ohne überhaupt zu wissen, wie lange ich mich mit der Thematik bei meiner knapp bemessenen Zeit beschäftigt habe.
Zumindest nicht so lange um einfach mal ein Wort bei google einzutippen, oft reicht das schon um zu erfahren was es bedeutet. Aber stattdessen lang rumlamentieren, dafür reicht die Zeit.
 
Aus diesem Grunde habe ich mich an dieses Forum (und an ein Nachbarforum) gewandt, mit dem Hintergrund, dass ich hier Hilfe bekomme. Und ich habe ganz klar am Anfang geschrieben, dass ich Anfänger bin und nicht weiterkomme, sowie Codes gepostet, damit man ihn sich einmal anschaut und mir ggf. Hilfe zukommen lassen wird.
Und ich habe dir geholfen, die du aber nicht ennehmen wolltest.
 
Zurück
Oben