David _S: Problem mit HTML sowie CSS

Hallo, ich habe seit heute wo ich ein mitlaufender Kopf sowie ein mitlaufendes Menüband habe ein Problem. Im Kopf/Überschrift ist ein Bild, die von einer Box umgeben ist. Die Box wird aber bis zum Rand nach Rechts gezogen. Hier was in der CSS steht:

[#]kopf {
width: auto;
height: 70px;
background-color: #FAF9F8;
margin: 0px 0px 15px 0px;
padding: 0px 15px 0px 15px;
box-shadow: 2px 2px 2px 0px #515151;
-moz-box-shadow: 2px 2px 2px 0px #515151;
-webkit-box-shadow: 2px 2px 2px 0px #515151;
overflow: hidden;
position: fixed;
top: 1rem;
border-color: #FFF;
}

Und hier die HTML:

<div id="kopf">
	<h1><a href="index.html">
	<img src="bilder/logo.png" alt="Logo" width="50%" height="50%"></a></h1>
</div>

Vielen Dank im voraus David

  1. Hallo

    In einm Wort: Was?

    Kannst du bitte dein Anliegen ausführlicher beschreiben? Nicht nur was ist, sondern auch was soll. Danke.

    Tschö, Auge

    --
    Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen!
  2. Also die Webseite hat so fürher ausgesehen: Früher Nachdem ich den Mitlaufenden Kopf sowie das Mitlaufende Menü gemacht habe schaut es so aus: Bildbeschreibung

    Ich hätte es gerne das es wie früher aussieht.

    David

    1. Hallo

      Hatte #kopf schon immer die Breitenangabe width: auto;? Bedenke bitte, dass sich ein Blockelement immer die verfügbare Breite einverleibt. Und rechts war halt noch Breite übrig. Eventuell ist auch die grundsätzliche Beschränklung der Breite des Elternelements sinnvoll. Um das einschätzen zu können, muss aber der vollständige HTML- und CSS-Quelltext zugänglich sein. Am besten geht das per Link auf eine strukturell vollständige Beispielseite.

      Tschö, Auge

      --
      Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen!
      1. Hab nun eine Beispielseite gemacht. Sie ist unter Link erreichtbar.

        1. Hallo

          Hab nun eine Beispielseite gemacht. Sie ist unter Link erreichtbar.

          Ok, die Breite des Headers (#kopf) – der übrigens tatsächlich ein <header> sein darf – scheint mittlerweile zu passen.

          Der Container der Navigation (#menu) hingegen – er möchte übrigens gern ein <nav> sein – hat allerdings widersprüchliche Angaben. Er wird gefloatet und fest positioniert. Ich vermute, die Navigation soll an Ort und Stelle bleiben, womit position: fixed; die richtige Wahl wäre.

          Soweit erstmal dazu.

          Tschö, Auge

          --
          Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen!
  3. Hallo David,

    <div id="kopf"> <h1><a href="index.html"> <img src="bilder/logo.png" alt="Logo" width="50%" height="50%"></a></h1> </div>

    Was gibt es denn für Vorfahrenselemente deines DIV-Elements mit der ID="kopf"?, die in deiner vorigen Version, bei der du noch nicht mit "postion:fixed" gearbeitet hast, möglicherweise den Abstand erzeugt haben, der jetzt fehlt? Vielleicht solltest du diesem abstandsgebenden Vorfahrenselement ein "position:relative" spendieren, damit sich das Kopf-Element, das jetzt "position:fixed" hat, auch weiterhin an diesem Vorfahrenselement und nicht am Viewport ausrichtet.

    Gruß Gernot