Layout mit CSS haut im IE nicht hin

chris90night

Hey Leute!
Beschäftige mich zur Zeit sehr mit CSS und habe ein bisschen rumprobiert und ein Layout ohne Hilfe von Tabellen geschaffen.
Mit Firefox sieht alles so aus wie es soll, aber leider haut mit IE gar nichts mehr hin.
Hier die Seite:
http://testserver-chris90night.de.vu/
Bemerkung: Bitte keine Tipps am Design, wollte einfach nur mal rumprobieren und mich mit der Materie befassen.

Und hier mein Style - Sheet:

Code

html {height:100%;}
body  { font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#CC0033;
		background-repeat:no-repeat;
		background-image:url(bg.jpg);
		height:80%;
		margin:0%;
		padding:0%;
	  }
a:link { 
		 color:red;
		 font-family:Verdana, Arial, Helvetica, sans-serif;
		 font-size:16px;

	   }
a:visited {
			color:#009933;
		  }
a:hover {
		  color:blue;
		}


a:active {
		   background-color:#CC0033;
		 }


div#a { width:80%;
	    height:15%;
            margin-top:5%;
	    margin-bottom:1%;
	    margin-right:10%;
	    margin-left:10%;
	    background-image:url(banner.jpg);
            background-repeat:no-repeat;
            background-position:center;
	    background-color:#FFFFFF;
	 }


div#b { width:15%;
		height:90%;
		margin-right:1%;
		margin-left:10%;
		background-color:#FFFFFF;
		float:left;
        font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		padding-left:1%;
		padding-top:1%;
		padding-bottom:1%;
		padding-top:1%;


	  }		
div#c { width:61%;
		height:90%;
		margin-right:10%;
		background-color:#FFFFFF;
		float:right;
		padding-bottom:1%;
		padding-left:1%;
		padding-right:1%;
		padding-top:1%;

	  }

Alles anzeigen

Hinweis:
div#a ist der Bannerbereich, div#b der Linkbereich und div#c der Inhaltsbereich rechts daneben.

Ich hoffe ihr könnt mir helfen, danke!

MfG

chris90night

chris90night

Ok hab das Problem gefunden, der IE aktualisiert bei mir nicht mehr richtig.
Aber jetzt habe ich eine andere Frage:
Der Banner hat eine feste Größe, und wird nicht verkleinert wenn das LAyout verkleinert wird, sondern behält seine Größe und wird demnach abgeschnitten bei allen Auflösungen kleiner als 1280 x 1024.
Wie kann ich erreichen, dass sich das Bild auch dem <div> anpasst?

pure

gib die Bildgröße in % an, so müsste es gehen...

chris90night

Mit CSS gibt es nur die Anweisung

Code

background-image:url()

Und wie soll ich die Bildbreite in Prozentzahl angeben?
Für Bildgrößen gibt es doch gar keine CSS - Eigenschaften oder?
MfG

sejuma

Mit background-image und CSS geht das (noch) nicht.
Als reines image kannst du Prozentwerte verwenden, indem du die Pixelwerte proportional in Prozent umrechnest. Für ein Banner mit 800 x 80 px z.B. so:

Code

[img]bild.gif[/img]

Beachte: Aufgrund der damit verbundenen dynamischen Bildgröße kann es je nach Bildschirmauflösung zu Verzerrungen und Qualitätsverlusten kommen.

Tags