Hilfe beim "Reparieren" von CSS Code für Header und Footer

japanworm · #1 (**permalink**) 04.02.2014, 18:05

Hallo,

ich habe jetzt seit fast 1 Jahr das Problem auf meinem Blog, dass sowohl mein Footer als auch mein Header nach rechts einfach aufhören. Das fällt nicht auf, wenn man es auf einem normalen Desktopcomputer betrachtet, aber da viele meiner Besucher ein Tablet oder ein Smartphone benutzen, sieht das extrem hässlich aus.

Ich hab Screenshots auf meinem Samsung Galaxy S3 gemacht, damit ihr euch das mal besser vorstellen könnt:

HEADER:

Nach rechts hört der Header einfach auf, obwohl er endlos nach rechts laufen sollte. Außerdem sind die zwei kleinen Icons für RSS und Mail auf der linken Seite im IE und Firefox auf dem Computer allerdings auf der rechten.

Und so sollte es eigentlich aussehen.

FOOTER:

Beim Footer finde ich es jetzt nicht ganz so tragisch, aber auch da sollte es sich endlos nach rechts weiterziehen.

So sollte der Footer eigentlich aussehen.

Vor allem der Header ist eine totale Katastrophe.

Hier mal das HTML zum besseren Verständnis:

HTML-Code:

<body>
<div id="header_bk"></div>

<div id="wrapper">
	<!-- Begin #header -->
	<div id="header">
<div id="header_flowers_left">image</div>
<div id="header_logo">logo image</div>

<div id="header_ad">Google Adsense Code</div>

<div id="header_flowers_right"><img src="http://zoomingjapan.com/wp-content/themes/alltuts-child/images/header_flowers_right.png" border="0" alt="Zooming Japan Logo" /></div>

<div id="navi_social_container">


	<!-- Top Menu start -->
			<?php wp_nav_menu( array('container' => 'div', 'container_class' => 'jqueryslidemenu', 'container_id' => 'menu', 'walker' => new description_walker() )); ?>
		<!-- Top Menu end -->
	</div>

<div id="breadcrumbs_search_container">
</div>
	

<form id="searchform" action="<?php bloginfo('url'); ?>/" method="get">
      <input type="submit" value="" id="searchsubmit"/>
      <input type="text" class="field" name="s" id="s" value="Search or be lost" onfocus="this.value=''" />
    </form>

	
<div class="top_social">die zwei kleinen Icons</div>

 </div>

Das Problem ist, dass das GESAMTE Layout in diesem Wrapper ist. Wenn ich allerdings Header und Footer außerhalb des Wrappers platziere, dann ist alles, was im Wrapper ist, nicht mehr zentral.

Ich hab's echt seit fast 1 Jahr immer mal wieder versucht, aber ich bekomme es einfach selbst nicht hin.

Ich wäre sogar bereit, etwas zu zahlen, wenn sich jemand dazu bereit erklärt, der meint, er kann das 100% richten. Mein Budget ist nicht sehr groß, aber ich zahle lieber was als dass ich mich weiter vergeblich damit rumschlage.

Schon mal vielen Dank für eure Hilfe und lasst mich wissen, wenn ihr noch weitere Infos braucht.

japanworm · #2 (**permalink**) 05.02.2014, 14:31

Ich nehme an, das Schweigen bedeutet, dass selbst Profis das Problem nicht lösen können?

explanator · #3 (**permalink**) 05.02.2014, 16:05

Zitat:

Zitat von japanworm

Ich nehme an, das Schweigen bedeutet, dass selbst Profis das Problem nicht lösen können?

Eine wohl eher gemutmasste Unterstellung.

Das Forum hier heisst übrigens CSS und nicht jobforum.

gabischatz · #4 (**permalink**) 05.02.2014, 16:10

Hi japanworm, habe mir mal deine Webseite auf dem Smartphone angesehen.
Es ist wahrscheinlich von Gerät zu gerät unterschiedlich, daher konnte ich es nicht bestätigen.
Deshalb habe ich mir mal deinen Code genauer angesehen.
Dein div footer liegt außerhalb vom div wrapper,
dein div header liegt aber wieder innerhalb des wrapper.
Für den header solltest du noch das Property max-width den Wert 100% mitgeben.

- max-width Die Box wächst mit dem Inhalt. Wenn der Inhalt der Box größer ist, wächst die Box nicht mit,
sondern der Inhalt fließt über.
Bei überlangem Inhalt verhalten sich width und max-width gleich,
der kleinere Wert bestimmt die Box-Breite.

Den footer müsstest du wie den wrapper formatieren also den Wert width: 1150px; und margin: 0 auto;

Grüße

japanworm · #5 (**permalink**) 05.02.2014, 17:15

Hallo, gabischatz.

Vielen Dank für deine Antwort.
Ich habe es mal mit deinen Angaben versucht:

Code:

#footer {
padding-top:0px;
padding-bottom:0px;
margin-top:15px;
width:1150px;
margin:0 auto;
background:#fff;
border-top:5px dotted #bbb;
border-bottom:1px solid #ccc;
}

#header{
margin-bottom:110px;
max-width:100%;
}

Hat leider nicht den erwünschten Effekt gebracht. Beim Header immer noch das gleiche Problem, der Footer war dann zu klein, siehe hier:

http://i60.tinypic.com/1zxwrhz.jpg

Hab es dann auf #min-width umgewandelt, aber das hat das ursprüngliche Problem auch nicht behoben, dass es nach rechts einfach aufhört.

Das lässt sich übrigens auch jedem Desktop gut nachstellen, wenn man das Browserfenster verkleinert und dann mit dem Scrollbalken nach rechts scrollt. Da sieht man dann, dass beim Header und Footer rechts einfach was fehlt.

@explanator: Ich wollte damit keinesfalls jemandem auf den Schlips treten. Ich dachte mir nur, wenn hier jemand so nett ist und sich meiner annimmt, kann man die Person dafür ja auch bezahlen. Gegen kostenlose Hilfe hab ich natürlich auch nichts einzuwenden.

Manfred62 · #6 (**permalink**) 05.02.2014, 18:18

min-width stimmt schon. Schau dir den Code an:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
		        padding: 0;
		}
		.header, .footer {
			height: 150px;
			background: red;
			min-width: 800px;
		}
		.center {
			height: 500px;
			width: 800px;
			margin: 0 auto;
			background: #ccc;
		}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="center"></div>
	<div class="footer"></div>
</body>
</html>

gabischatz · #7 (**permalink**) 05.02.2014, 21:01

Jetzt habe ich es auch endlich gesehen.
Machs mal so: <div id="header_bk"> </div>
Manche Browser mögen keine leeren Elemente.

plastiko · #8 (**permalink**) 05.02.2014, 22:01

#header_bk kann nicht mitwachsen. min-width:100%; ist je nach Viewport zu wenig. #wrapper ist 1150px breit. so breit muss auch #header_bk sein.

Besser währe, das leere #header_bk zu entfernen und die Hintergrundgrafik body zu geben. zusätzlich kannst du body noch ein min-width mit 1150px geben.

gabischatz · #9 (**permalink**) 06.02.2014, 10:25

Guten Morgen
Ich habe es mal ausprobiert, das einfachste ist #header_bk einen min-width mit 1150px geben.

Zitat:

Mobile Safari hat einen Viewport von 980 Pixeln, genauso Opera … aber wir brauchen gar nicht erst mit der Aufzählung anzufangen: Smartphones haben unterschiedliche Auflösungen.

Der Viewport der mobilen Geräte

japanworm · #10 (**permalink**) 06.02.2014, 17:55

Hallo,

vielen Dank für die zahlreichen Vorschläge.
Hab alles mal ausprobiert. Leider hat sich nichts am ursprünglichen Problem verändert.

Es sieht jedoch etwas schöner aus als vorher.

Auf meinem Android Browser sind die zwei kleinen Icons for RSS und Mail immer noch auf der linken Seite. Da stimmt bei der Platzierung irgendwas nicht.
Das betrifft im CSS Code: #header .top_social

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Mehrere Divs in einem Layer nebeneinander zentrieren..?	michaf	CSS	14	19.08.2013 01:02
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Header - Leftmenue, Kontent 100% - footer CSS und keine Scrollbars!	Mavarik	CSS	8	26.07.2008 17:11
Opera: Last.fm-Widget überdeckt Header und Footer	DieterWelzel	CSS	0	25.02.2008 02:07
Hilfe bei gesamten CSS Layout	mexxat	CSS	0	22.08.2007 13:40