Footer am Ende (unterhalb des Texts)

spiderchristian · 15.11.2013

Hallo,

hab schon einige Beiträge gelesen, aber das hat mir nicht weitergeholfen...

Ich habe drei Bereiche (Header, Content, Footer). Header und Content sind untereinander. Soweit so gut. Aber beim Footer klappt das (warum auch immer) nicht ganz.

Könnt ihr mir einen Tipp oder die Lösung geben??

Danke!

Auszug aus dem Quelltext:

HTML:

html {
	height: 100%;
}

body {
	color: #555;
	font-size: 15px;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #FFDDC4;
	height: 100%;
	margin: 0px;
	padding: 0px;
}



a {
	text-decoration: none;
	color: #0088cc;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4 {
	color: #cb4d1f;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

strong {
	color: #333;
}


/* HEADER
-------------------------------------------*/

#header {
	background: url(../img/bg_line.png) repeat-y;
	padding: 0 0px;
	width: 1000px;
	position: absolute;
	left: 50%;
    margin-left: -500px;
	margin-height: 10px;
	height: 280px;
}

#firmenlogo {
  color: #000;
  background: url(../img/header_logo.jpg) no-repeat;
  width: 900px;
  height: 180px;
  left: 50%;
  margin-left: -400px;
  position: relative;
}


#header-inner {
	max-width: 1000px;
	margin: 0 auto;
}


/* eigenes Menu */

#logomenu_place {
  float: left;
  width: 95px;
  height: 40px;
}

#logomenu {
  float: left;
  background: url(../img/menu_logo.png) top center no-repeat #FA6900;
  border-left: 1px solid #ffffff;
  width: 75px;
  height: 40px;
}

#nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: block;
  height: 40px;
  font-size: 14px;
  background: #FA6900;
  letter-spacing: 0.2em;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  width: 800px;
  position: absolute;
  left: 170px; /* 80 */
}
#nav li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  border-left: 1px solid #ffffff;
}
#nav li a {
  display: block;
  float: left;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 45px 0 45px;
  height: 28px;
}
#nav li a:hover {
  background: #ffddc4;
  color: #000;
}

#nav .current {
 color: #000;
 background: #ffddc4;
}


.nav_toggle {
	display: none;
}


/* CONTENT
-------------------------------------------*/

#content {
	max-width: 830px;
	left: 50%;
	margin-left: -500px;
	top: 260px;
	padding: 0 130px;
	position: absolute;
	background: url(../img/bg_line.png) repeat-y #FFDDC4;
}

.hero {
	margin-bottom: 20px;
	border-radius: 5px;
}

.intro {
	font-size: 16px;
}

.blocks-3 {
	margin-bottom: 0;
}

#blocks li {
	background-color: #eee;
	margin-bottom: 15px;
}

#blocks li p {
	margin-bottom: 0;
}

.circle {
    width:70px;
    height:70px;
    border-radius:250px;
    font-size:20px;
    color:#fff;
    line-height:70px;
    text-align:center;
    background-color:#e67548;
    margin-bottom: 15px;
}

.twitter-icon {
	padding: 2px 6px;
	background-color: #44B6EF;
	color: white;
	margin-right: 10px;
}

.fb-icon {
	padding: 2px 6px;
	background-color: #3B5D95;
	color: white;
	margin-right: 10px;
}

.gplus-icon {
	padding: 2px 6px;
	background-color: #CF5D45;
	color: white;
	margin-right: 10px;
}

.portfolio {
	padding: 20px;
	margin-top: 40px;
	background-color: #eee;
}


/* FOOTER
-------------------------------------------*/

#footer {
	max-width: 1000px;
	left: 50%;
	margin: -90px -500px;
	font-size: 14px;
	color: #666;
	height: 90px;
	background: url(../img/footer.png) no-repeat;
	width: 100%;
	bottom: 0px;
	clear: both;
	position: absolute;
}



.copyright {
	margin: 0px 130px;
}

/* MEDIA QUERIES
--------------------------------------------*/

@media only screen and (max-width: 768px) {

.nav_toggle {
	display: block;
	margin-right: 10px;
}

a.nav_toggle {
	text-decoration: none;
	color: white;
	float: right;
	margin-top: 32px;
	background-color: #4a5564;
	padding: 4px 10px;
	font-size: 22px;
}


#nav {
	display: none;
	clear: both;
}

#nav ul {
	margin: 0;
	float: left;
	width: 100%;
}

#nav li {
	display: block;
	padding: 7px 0;
	border-top: 1px solid #424C5B;
	padding:10px;
}


#blocks li {
	margin-bottom: 10px;
}

}

@media only screen and (min-width: 769px) {

#nav {
	display: inline !important; 
}

}

cebito · 15.11.2013

AW: Footer am Ende (unterhalb des Texts)

Benutze doch bitte die Codewerkzeuge des Editors
CSS ohne HTML nutz gar nix, da kein Mensch weiß wie die Elemente im Quelltext angeordnet sind
wozu die absoluten Positionen? Lass die Elemente im Dokumentfluss!

SWFP · 15.11.2013

AW: Footer am Ende (unterhalb des Texts)

Schick doch mal einen Link oder gib uns ein Bild, damit wir auch eine Vorstellung davon haben.

behemoth65 · 15.11.2013

AW: Footer am Ende (unterhalb des Texts)

HTML bestimmt das Erscheinungsbild ist quasi das Gerüst. CSS entscheidet über das Aussehen der einzelnen Elemente.
Hilfreich fürs Verständnis: http://little-boxes.de/little-boxes-teil1-online.html

cythux · 15.11.2013

AW: Footer am Ende (unterhalb des Texts)

Ein Link oder html + css wenn posten

Das wäre für uns hier sehr hilfreich, ansonsten kann ich mich meinen vorposter nur anschliessen.

Eventuell hilft es schon wenn du einen Browserreset nutzen tust, das macht deiner css datei dann auch cleaner

hub · 15.11.2013

AW: Footer am Ende (unterhalb des Texts)

Moin moin,
hatte mal gerade Zeit, mir deine Css etwas genauer anzusehen. Du benutzt für die (vermuteten, da kein Quelltext) Container Content und Footer die Position "absolute". Bist du sicher, das du das willst? In diesem Fall fehlen dir die vollständigen Positionen (top und/oder bottom genau so wie left und/oder right) deiner Gebilde, wie auch vollständigen Dimensionen wie width und height ...

Gruß Ulli

spiderchristian · 15.11.2013

AW: Footer am Ende (unterhalb des Texts)

Sorry, kann ich alles liefern

Die Seite ist aktuell unter www.vowa-it.de/binder erreichbar.

Das HTML sieht so aus:

Code:

<body>
	<div id="header" class="group">
		
		<div id='firmenlogo'>
		</div>
		
		<div id='navbar'>
			<div id='logomenu_place'>
			</div>
			<div id='logomenu'>
			<a href="http://www.vowa-it.de/binder" id="logomenu_place"></a>
			</div>
		
			<?php include("$pulse_dir_one/data/blocks/nav.php"); ?>
								
		</div>
	</div>
	
	<div id="content">
		<?php echo $content; ?>
	</div>

		
	
	<script src="/<?php echo $pulse_dir; ?>/includes/tracker.php?uri=<?php echo $_SERVER['REQUEST_URI']; ?>&ref=<?php echo $_SERVER['HTTP_REFERER']; ?>"></script>


		<div id="footer">
			<p class="copyright">&copy Heilpraktikerin Manuela Binder 2013 | <a href="/binder/impressum">Impressum</a></p>
		</div>	
</body>

cebito · 15.11.2013

AW: Footer am Ende (unterhalb des Texts)

Wie bereits geschrieben, lass die Elemente im Dokumentfluss. Für den linken orangenen Streifen incl. der Schatten reicht ein wrapper und du musst ihn nicht mehr stückeln. Dort hinein gehören header, content und footer OHNE position. Lies dich bitte mal bei dem Link von behemoth65 ein...

spiderchristian · 15.11.2013

AW: Footer am Ende (unterhalb des Texts)

Danke für die schnelle Hilfe!

Wird schön langsam

Habt mir auf jeden Fall weitergeholfen! Auf das einfügen von Position bin ich durch google gekommen, der hat eben auch nicht immer recht

cythux · 16.11.2013

AW: Footer am Ende (unterhalb des Texts)

Hier noch ein weiter Tipp, da du den Doctype für HTML5 verwendest
kannst du auch die Div-Suppe in deinem Quelltext umgehen mit Tags wie
Header, Article, Aside, Section, Footer, Main, nav

und javascripte wie jquery vor dem schliessenden </body> Text setzen

ausser du nutzt eventuell google Fonts oder modernizer

in kube.css ist ein Reset drin, dort gibt es auch noch helper classes, jedoch auf der Website nur als Less Variante die du jedoch nicht nutzen tust

lg

SWFP · 16.11.2013

AW: Footer am Ende (unterhalb des Texts)

Wenn ich das mal so anmerken darf- ich weiß ja nicht ob das noch kommt, aber zumindest enthält einen 404-Text. nicht weiter schlimm, wenn der nicht auf Dauer dort bleibt. Aber er könnte noch etwas nach rechts ins Design verschoben werden.
Gruß

jeronymo · 17.11.2013

AW: Footer am Ende (unterhalb des Texts)

Moin Moin,
das hat zwar nichts mit der Frage zu tun, aber soweit ich weiß, muß bei einer gewerblichen Homepage das Impressum von jeder Unterseite aus erreichbar sein.
Evtl. mal im Netz schauen nach Impressum bei gewerblicher Homepage.

Gruß
Holger