Altes "Header und content verschieben sich im Browser" Problem

Michi1974

Hallo, auf meiner Testseite http://www.markus-tietje.de
verschieben sich der Head (eingebunden mit dynamic-header plugin) und der content im chrome, safari und IE8. Im Firefox sieht es gut aus.

Wie bewerkstellige ich es das der Head und die linke Sidebar auf einer Linie liegen?

Hier mal die css.

PHP

/*  
Theme Name: Tietje
Description: Wordpress 
Version: 1.0
Author: Markus Tietje
Author URI: http://markus-tietje.de
Tags: Markus Tietje,wordpress,social media,social web, facebook,twitter,xing


*/


* {margin: 0; padding: 0;}


body { background-color:#FFFFFF;
color:#000000;
font-family:Arial,Verdana,sans-serif;
font-size:90%;
margin-bottom:200px;
margin-left:150px;
margin-right:center;
margin-top:0px;
padding-bottom:100px;
padding-left:150px;
padding-right:center;
padding-top:1px; }


#wrap { width: 1024px; margin: 20px auto; padding: 0; background:#ffffff; color: #000000; }
#head { height: 0px; margin: 0; padding: 0; background: #ffffff; color: #5D2816 }








#title { padding: 50px 0 0 10px; margin: 0 10px; font-size: 1.9em; text-align: left; color: #30261B; background-color: transparent }
#title a:link, #title a:visited { color: #30261B; text-decoration: none; background-color: transparent }
#title a:hover { color: #ffffff; background-color: transparent }
#desc { padding: 0px 20px 0px 10px; margin: 0 10px; text-align: left; }


#left { float: left; width: 200px; margin: 0 0px; padding: 0 25px 0 0; background: #transparent; color: #000000; }
#left h2 { margin: 0 0 10px ; padding: 10px; font-size: 1.2em; background-color: transparent; color: #ffffff }
#left a:link, #left a:visited { color: #ffffff; background-color: transparent; font-size: 0.85em; }
#left a:hover { color: #ffffff; background-color: transparent; }
#left ul { background-color:#2C3B8E; margin: 0px; padding: 0; }
#left ul li { list-style-type: none; margin: 0px; padding: 0px 0px 30px 0px; }
#left ul ul li { list-style-type: none; color: #000000; margin: 0px 5px 0px 10px; padding: 0px 5px 5px 5px; }
#left ul.children { margin: 0px; padding: 5px 5px 0px 0px; }
#left ul.children li { margin: 0px; padding: 0px 5px 5px 12px; }


#content { float: right; width: 680px; margin: 0; padding: 0px 20px 0px 0px; }
#content .post { margin: 0px; padding: 0px 0px 30px 0px; line-height: 20px; }
#content .post p { padding: 0 0 0px 0 }
#content .post blockquote { padding-top: 0px; padding-bottom: 0px; }
#content .post blockquote p { margin: 5px 0 0 0; padding: 10px 5px 10px 5px; border-left: 2px solid #8B7448; border-right: 2px solid #8B7448; }
#content ul { margin: 0px; padding: 0 5px 0 40px; }
#content li { list-style-type: disc;  color: #000000; margin: 0px 5px 0px 5px; padding: 0px 5px 5px 0px; }
#content ol { margin: 0px; padding: 0 5px 0 40px; }
#content ol li { list-style-type: none;  color: #000000; margin: 0px 5px 0px 5px; padding: 0px 5px 5px 0px; }
#content img { display: inline; border:1px solid #8B7448; margin:5px 7px 0 7px; padding:4px; vertical-align: middle; }


#foot { clear: both; height: 60px; background: #transparent ; color:#000000 }
#foot p { padding: 10px; text-align: center; font-size: 0.75em; font-weight: bold }






.meta { margin: -2px 0px 0px 0px; padding: 0; font-size: 0.00em; font-weight: bold; }


.postmetadata { font-size: 0.00em; font-weight: bold; text-align: center; }




a:hover { color: #ffffff; }
blockquote { background-color: transparent; color: #ffffff; margin-left: 10px; margin-right: 15px; padding: 10px 20px 10px 30px; }
h1 { margin: 0; padding: 2px 0 2px 0; background-color: transparent; color:#ffffff;  font-size: 0.1em; }
h1 a { text-decoration: none; }
h1 a:link, h1 a:visited { color: #ffffff; background-color: ffffff;}
h1 a:hover { color: #ffffff; background-color: ffffff; }


h2 { background-color: transparent; color:#ffffff;  font-size: 1.3em; } 


h4 { background-color: transparent; color:#30261B;  font-size: 1.0em; } 




img.centered {display:block; margin: 0 auto 5px auto; border:1px solid #8B7448; padding:2px; }


img.alignright { display: inline; border:1px solid #8B7448; margin:5px 7px 0 7px; padding:4px; vertical-align: middle; }


img.alignleft { display: inline; border:1px solid #8B7448; margin:5px 7px 0 7px; padding:4px; vertical-align: middle; }


img.border { border:1px solid #8B7448; padding:2px; }


.alignleft { float:left; text-align:left; }


.alignright { float:right; text-align:right; }
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}




acronym { cursor: help; border-bottom: 1px dotted #96A66D }








#supernav {
-x-system-font:none;
display:block;
font-family:Sans-Serif,Lucida Grande,Arial,Helvetica,Sans-Serif;
font-size:19px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
left:50%;
line-height:8px;
margin:0 0 0 -915px;
padding:0px  599px;
position:relative;
text-align:left;
top:-36px;
width:1024px;
	}
#supernav li {
	margin: 0;
	padding: 0;
	text-transform: lowercase;
	display: inline;
	}






#supernav a {
	color: #ffffff;
	background: #transparent;
        text-decoration: none;
	font-weight: normal;
	height: 19px;
	padding: 0px 20px;
	/* round corner tab - not for IE */
	-moz-border-radius-topright: 0px; 
	-moz-border-radius-topleft: 0px;	
	}
	
#supernav a:hover {
	color: #111;
	background: transparent none repeat scroll 0 0;
	text-decoration: none;
	/* round corner tab - not for IE */
	-moz-border-radius-topright: 0px;
	-moz-border-radius-topleft: 0px;	
	}


#supernav .current_page_item a {
	color: #ff7f24;
	background: transparent none repeat scroll 0 0;
	text-decoration: none;
	/* round corner tab - not for IE */
	-moz-border-radius-topright: 0px;
	-moz-border-radius-topleft: 0px;
}

Alles anzeigen

Nun funktioniert die Bündigkeit, aber in FF ist es aus der Mitte, während es in Safari passt...komisch

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

alchymyth

was fuer eine bildschirmgroesse hast du?

bei mir im firefox (1024 px weit) haengt alles weit rechts aus dem bild raus - kein wunder bei einigen deiner paddings:

Code

body  {
background-color : #ffffff;
color : #000000;
font-family : Arial, Verdana, sans-serif;
font-size : 90%;
margin-bottom : 200px;
margin-left : 0;
margin-top : 0;
padding-bottom : 100px;
padding-left : 310px; /*sollte 0px sein*/
padding-top : 1px;
position : absolute; /*muss weg um die ausrichtung von #wrap zu erlauben*/
}

Alles anzeigen

Code

#supernav {
-x-system-font:none;
display:block;
font-family:Sans-Serif,Lucida Grande,Arial,Helvetica,Sans-Serif;
font-size:19px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
left:50%; /*eher 20% oder so*/
line-height:8px;
margin:0 0 0 -915px; /*sollte auch 0 sein, wenn der rest angepasst ist*/
padding:0px  599px; /*sollte auch 0px sein, wenn der rest angepasst ist*/


position:relative;
text-align:left;
top:-36px;
width:1024px;
 }

Alles anzeigen

frage: wie ist das header-bild eingefuegt?

im moment ist der code

HTML

<img src="http://markus-tietje.de/wp-content/header-images/head3.jpg" alt="head3.jpg" title="head3.jpg" />

naemlcih an der falschen stelle - im <head> bereich des header.php.

der code muss nach dem <body> tag erscheinen; und sollte ideal direkt nach dem <div id="wrap"> eingefuegt sein.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Altes "Header und content verschieben sich im Browser" Problem

Jetzt mitmachen!