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

Content scrollt über ganze Seite

bodo92

bodo92

Aktives Mitglied
Tag zusammen ;)

Ich habe mir mal ein mögliches Design für mein neues Projekt erstellt!
http://87.106.6.247/feuerwehr/

Ich habe nun einige Fragen zum "richtigen" Formatieren der Elemente:
• Header und Navigation sollen dauerhaft fixiert sein.
Das habe ich über position: fixed erledigt, aber irgendwie kommt der Browser jetzt mit margin angeben nicht mehr klar!
Ist das die beste Lösung oder gibt es alternativen?​
• Der Content fährt unter dem Header durch das gefällt mir nicht so, ich würde ihn gerne on top mit der Navigation bündig setzten und da auch den Bildlauf brechen ist das möglich?​

Vielen Dank.
 
Binde das hier als Grundlage für deine HTML-Struktur ein. Bei Verwendung des Grids und der vorhandenen Klassen lassen sich 90% der auftretenden Styling-Probleme vermeiden, und obendrein ist die Seite noch responsive.

http://getbootstrap.com
 
Bin irgendwie nicht so der Fan von Templates :confused:
Habs mir mal angesehen, es würde meiner Meinung nach aufgrund des geplanten Projektes auch nicht passen.

Trotzdem danke für deine Antwort :)
 
Ich prophezeie dir, dass der Zeitaufwand für das Feuerwehrprojekt höher ausfallen wird, wenn du auf Frameworks verzichten und alles manuell machen willst.
 
Ich möchte halt meine Fähigkeiten erweitern und daher alles selbst machen..
Will nicht Stur wirken aber da weiß ich halt was ich hab..

Ich kann mir schon vorstellen das man sich da jede menge Arbeit spart aber es ist dann halt nicht mein Werk :rolleyes:
 
Hab mir euren Rat mal zum Herzen genommen und ich versuch jetzt zumindest mal damit zu arbeiten evtl. kann ich mich ja damit anfreunden ;)
http://87.106.6.247/bootstrap/

Jedoch der selbe Fehler.. (oder ist das nur im IE? (nutze IE 11))
Die Überschrift wird unter die Navbar geschoben..
 
Wenn du es alleine machen möchtest, dann hilft dir das hier vielleicht als einfache Vorlage.
Code: 
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>

* {
 margin:0;
 padding:0;
}
#wrapper {
 background:#eee;
}

#header {
 position:fixed;
 height:3em;
 padding:1em;
 width:100%;
 background:#a33;
 color:#fff;
}

#content {
 background:#edd;
 float:left;
 width:100%;
}

#content_innen {
 margin:5em 0 0 0;
 padding:20px;
 background:#eda;
 min-height:1200px; /* nur zum scrollen */
}

#footer {
 padding:1em;
 background:#a33;
 color:#fff;
 clear:left;
}
</style>
</head>
<body>
<div id="wrapper">

 <div id="header">
  <h1>Freiwillige Feuerwehr</h1>
 </div>

  <div id="content">
  <div id="content_innen">
  <h2>Hallo</h2>
  <p>Inhalt</p>
  </div>
  </div>

  <div id="footer">
  <p>footer</p>
  </div>
</div>
</body>
</html>
 
Danke für deine Antwort hab jetzt mal nachgebessert..

Eins habe ich jetzt scheinbar verstanden wenn ich position: fixed setze beziehen sich die margin werte nicht mehr aufs vorherige Element da dies "in der Luft schwebt"!
Soweit richtig??​

Aber der Content scrollt nach wie vor unter dem Header durch kann ich da nicht eine "Klippe" hinsetzen wo der Content einfach verschwindet? :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben