zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe beim "Reparieren" von CSS Code für Header und Footer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.02.2014, 19:05
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard Hilfe beim "Reparieren" von CSS Code für Header und Footer

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.

Geändert von japanworm (05.02.2014 um 15:30 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.02.2014, 15:31
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

Ich nehme an, das Schweigen bedeutet, dass selbst Profis das Problem nicht lösen können?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.02.2014, 17:05
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von japanworm Beitrag anzeigen
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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #4 (permalink)  
Alt 05.02.2014, 17:10
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 05.02.2014, 18:15
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von japanworm (05.02.2014 um 18:17 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 05.02.2014, 19:18
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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>
Mit Zitat antworten
  #7 (permalink)  
Alt 05.02.2014, 22:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Jetzt habe ich es auch endlich gesehen.
Machs mal so: <div id="header_bk">&nbsp;</div>
Manche Browser mögen keine leeren Elemente.
Mit Zitat antworten
  #8 (permalink)  
Alt 05.02.2014, 23:01
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

#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.
__________________
MfG
Jens
Mit Zitat antworten
  #9 (permalink)  
Alt 06.02.2014, 11:25
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 06.02.2014, 18:55
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von japanworm (06.02.2014 um 19:02 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:14 Uhr.