CSS Boxen

[sapperlott]

Hallo!

Beim Verfeinern meiner Firmenwebsite hab ich mich das erste Mal auf meine "alten Tage" mit CSS beschäftigt, die Seite programmiert und jetzt steh ich vor dem Problem, dass sie in Safari und Firefox korrekt, im Internet Explorer aber fehlerhaft dargestellt wird. Mehrmaliges Googlen und durchforsten dieses Forums konnte mir leider nicht helfen.

Das Problem: die Box "content" wird im IE ganz oben rechts neben der box "logo" im Browserfenster angezeigt, sollte aber rechts der Boxen "menu1" und "menu2" stehen.
korrekt wäre also:
1.Zeile box "logo
2. Zeile box "menu1", box "menu2", "box content"

Ich poste hier einmal den Code meines CSS und bitte euch inständig um Hilfe. :-)



*{
color:#000000;
}
body{
font-family:Courier New,Courier;
font-size:12px;
line-height:28px;
background:url(images/re_web_bgstreifen.gif);
background-repeat:repeat-y;
}
a{
color:#ee3344;
}
a:hover{
color:#554411;
}

h1{
margin-bottom:0px;
margin-top:0px;
font-size:20px;
}
h2{
margin-bottom:0px;
margin-top:0px;
font-size:16px;
}


ul{
list-style-image:url(images/arrow.png);
}
#logo{
position:fixed; top:0px; left:0px; width:739px; height:88px;
}
#menu1{
position:fixed; top:100px; left:20px; width:90px;
}
#menu1 a{
display:block;
}

#menu2{
position:fixed; top:100px; left:131px; width:126px;
}

#menu2 a{
display:block;
}

#content{
margin-left:272px; margin-top:100px; width:378px;
}




PS: wenn ich bei der box "content" ein "position:fixed;" dazugebe, kann ich leider nicht mehr nach unten scrollen, auch wenn der Inhalt über den Rand des Browserfensters hinausgeht.


lg und bereits DANKE im Voraus für eure Hilfe!

J.

[webcreate]

Hast Du auch mal eine Online Demo?
Würde das Helfen vereinfachen.

[sapperlott]

Zitat von webcreate

Hast Du auch mal eine Online Demo?
Würde das Helfen vereinfachen.

Natürlich! :-)

Unter "http://daskleinod.net/experimental" steht mein minimalistisch angelegtes Webprojekt.

lg und danke

[webcreate]

Das css

*{
     color:#000000;
	 margin: 0;
	 padding: 0;
}
body{
   	font-family:Courier New,Courier;
     font-size:12px;
     line-height:28px;
     background:url(images/reichsoellner_web_bgstreifen.gif);
	 background-repeat:repeat-y;
 }
a{
     color:#ee3344;
}
a:hover{
     color:#554411;
}

h1{
     margin-bottom:0px;
	 margin-top:0px;
	 font-size:20px;
}
h2{
     margin-bottom:0px;
	 margin-top:0px;
	 font-size:16px;
}


ul{
    list-style-image:url(images/arrow.png);
 }

#logo{
	width:739px; height:88px;
}

#menu{
	float: left;
	width: 272px;
}

#menu1{
	width:90px;
	padding: 10px 0 0 15px;;
}

#menu1 a{
	display:block;	
}

#menu2{
	width:126px;
}

#menu2 a{
	display:block;
}

#content{
	width: 378px;
	margin: 0 0 0 272px;
	padding: 10px 0 0 0;
}

html

<div id="logo">
	<img src="images/reichsoellnernetlogo.jpg" alt="Reichsoellner.net"></img>  
</div>

<div id="menu">
	<div id="menu1">
		<a href="javascript:ajax_get('leistung2.html', 'menu2', 'Loading...', 'Error:');">Die Leistung</a>
		<a href="javascript:ajax_get('projekte2.html', 'menu2', 'Loading...', 'Error:');">Die Projekte</a>
		<a href="javascript:ajax_get('team2.html', 'menu2', 'Loading...', 'Error:');">Das Team</a>
		<a href="javascript:ajax_get('impressum2.html', 'menu2', 'Loading...', 'Error:');">Der Kontakt</a>
	</div>

	<div id="menu2">

	</div>
</div>

<div id="content">
	Der Menschheit W&uuml;rde ist in eure Hand gegeben,<br />
	Bewahret Sie!<br />
	Sie sinkt mit euch! Mit euch wird sie sich heben!<p>

	Friedrich Schiller
</div>

[sapperlott]

Habe den Code gerade eingefügt, die contentbox ist jetzt genau dort wo sie sein soll, allerdings ist menu2 in der dritten Zeile, obwohl es rechts neben menu1 sein sollte.
Wenn ich es nur selber könnte...

Weißt du dafür einen Rat? Ich werd menu2 mal mit position fixed versuchen, viel mehr kann ich leider nicht.

lg

[webcreate]

Ach soo soll das, na dann änder mal folgendes ab

#menu1{
width: 90px;
padding: 10px 0 0 15px;
float: left;
}

#menu2{
width: 126px;
margin: 0 0 0 120px;
padding: 10px 0 0 15px;
}

[sapperlott]

Wahrscheinlich habe ich zu wenig genau erklärt, was mein Ziel ist.
Ich habe hier ein jpeg raufgeladen, wie es aussehen soll, bereits in FF und Safari auch ausgesehen hat, im IE aber NICHT.: http://daskleinod.net/experimental/r...er_web_neu.jpg

Abgesehen vom Zitat, dass beim Aufrufen der index.html in der contextbox angezeigt wird, solls so ablaufen:
-Klick auf DIE LEISTUNG (menu1)>>> Untermenü (menu2) geht wie im screenshot gleich rechts davon auf.
- Klick auf ALLGEMEIN >> rechts davon erscheint in der contextbox der text dazu.

nach der einarbeitung deiner änderungen erscheint menu2 allerdings deckungsgleich mit der contentbox und leider nicht an der richtigen stelle.
(edit: in FF, IE und Safari)

lg!
Jakob

[webcreate]

Das liegt daran, dass ich für den Test einfach was in menu2 eingetragen habe und dann geht es auch.
Dein Problem ist es, dass durch den Ajax Aufruf wieder eine komplette HTML Seite in die schon existierende eingeladen wird. Dieses ist aber nicht richtig und nicht valide. Wenn ich bei Dir nun einen Link aufrufe, schaut der Code wie folgt aus:

	<div id="menu2">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
  <link rel="stylesheet" type="text/css" href="style.css" media="screen">
  <script type="text/javascript" src="scripts.js"></script>
<div id="menu2">
		<a href="javascript:ajax_get('pages/leistung.html', 'content', 'Loading...', 'Error:');">Allgemein</a>
		<a href="javascript:ajax_get('pages/ci.html', 'content', 'Loading...', 'Error:');">CI</a>
		<a href="javascript:ajax_get('pages/texte.html', 'content', 'Loading...', 'Error:');">Texte</a>
		<a href="javascript:ajax_get('pages/radio.html', 'content', 'Loading...', 'Error:');">Radio</a>
		<a href="javascript:ajax_get('pages/design.html', 'content', 'Loading...', 'Error:');">Design</a>

		<a href="javascript:ajax_get('pages/inserate.html', 'content', 'Loading...', 'Error:');">inserate</a>	
</div>
</div>

[sapperlott]

Danke, jetzt weiß ich, wie ichs machen muss.

lg!