Halbnewbie und schwieriges? Problem

Firewolf · 13.01.2006, 20:13

Hallo

Ich habe jetz im Photoshop mal ein design entworfen, und stehe nun vor folgendem problem:

Ich möchte links ins grüne unter "navigation" mein Menü (nur Text-links) und in das durchscheinende weiß meinen Inhalt rein. Der Inhalt sollte in ein Inlineframe rein... nun meine Frage, ob das via CSS irgendwie möglich ist, dem Inlineframe einen transparenten hintergrund zu geben, somit kommt dann das Bild "durchscheint" (würde ich dann als gesamtes als Hintergrundbild unter die Seite legen)

Die andere, weitaus umständlichere Möglichkeit wäre, das Bild aufzusplitten und halt einen Teil dem Inlineframe als Hintergrundbild zuordnen, das ist jedoch meiner Meinung nach nicht so die elegante Art.

Hm, irgendwie könnte es sein, dass das obenstehende nicht so ganz verständlich klingt, also nochmals im Klartext:

Kann ich via Css den Hintergrund eines Inlineframes transparent machen, bzw. macht der oben beschriebene Lösungsweg Sinn, bzw. wenn nicht wie soll ichs am besten angehen?

Klingt jetz nach einer "hilfe ich kann nichts, machts für mich"-Frage, ist es auch, aber ich weiß wirklich nicht weiter, bzw. weiß nicht ob Transparenz bei Inlineframes irgendwie möglich ist ...

Bitte um Hilfe

Tom

~edit~
sry Bild vergessen

hero-master · 13.01.2006, 21:10

Nabend

du könntest mit allowtranspareny (allowtransparency="true") arbeiten, dies funktioniert jedoch nicht in allen Browsern.

Falls dein Server auf dem du deine Seite hast PHP unterstützt würde ich das per include machen.
Somit schlägst du 2 Fliegen mit einer Klappe:
1. Es wird nur der jeweilige Inhaltstext eingebunden ohne gesamten HTML-Gerüst und somit auch ohne spezieller Hintergrundeigenschaft
2. Iframes sollten nur verwendet werden, wenn du externe Seiten einbinden möchtest, beispielsweise ein Gästebuch von einem Anbieter oder ähnlichem.

Firewolf · 14.01.2006, 19:46

hm, jo das Problem ist nur, ich möchte dass der Inhalt innerhalb des weißen Feldes bleibt, dh. am Rand des weißen Feldes die Scrollleisten, und das lässt sich ohne Inlineframe nicht machen oder?

hero-master · 14.01.2006, 21:39

Zitat:

Zitat von Firewolf

und das lässt sich ohne Inlineframe nicht machen oder?

Doch, lässt sich machen

du includest die Inhalte mit PHP in ein Container.
DIesem Container gibst du eine exakte Höhe und versiehst ihn mit der Eigenschaft overflow:auto;

Firewolf · 14.01.2006, 22:52

ok, dankeschön, mal sehen ob ichs hinbringe

Firewolf · 15.01.2006, 19:43

*thread up, ich hab Probleme*

Ok, soweit so gut, funktioniert jetzt, glaub zwar nicht dass ichs nur annähernd gut gelöst habe, aber besser kann ich halt nich

Wahrscheinlich treten auch nur durch meinen Lösungsweg die Probleme auf.

Also ich habe folgendes Problem: Im IE funktioniert alles wunderbar, nur im Firefox ist das div wo der Content drinnen sein soll, um 20px zu hoch.

Am besten hier mal Livedemo und hier der Code:

#index.htm

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
 <table align="center">
    <div style="background-image: url(preview2.jpg); width: 900px; height: 550px">
    <div style="with:900px; height:130px;">&nbsp;</div>
      <div style="with:900px; height:400px;">
        <div id="menu">hi</div>
        <div id="content">Content*vielezeilenumbrüche*hallo</div>
      </div>
      <div style="width:900px; height:20px;">&nbsp;</div>
    </div>
    
   </table>
</body>	
</html>

#dazugehöriges Stylesheet

Code:

/* DIV-Klassen */

#menu 			{
    			color: white;
    			font-size: 12px;
    			font-weight: bold;
    			
    			width: 251px; 
    			height:400px; 
    			float:left; 
    			overflow:auto; 
    			padding-left: 10px; 
    			padding-top:80px;
    			
			    }
			    
#content		{
					width: 600px;
					height: 400px; 
					float:reight; 
					overflow:auto; 
					padding-left: 5px; 
					padding-top: 10px; 
					padding-bottom:10px; 
					padding-right: 5px;
			     }

Steck mal wieder fest, und weiß nicht, wiso im IE alles funktioniert und im Firefox nicht

hero-master · 15.01.2006, 19:59

Hi

Code:

float:reight;

pack da mal das "e" weg

Zur Problemlösung musst du dir das Boxmodell ansehen

http://tuts.nicogutmann.de/css/boxmodell.php