Browseraufteilung

Status
Nicht offen für weitere Antworten.

selle1

Erfahrenes Mitglied
Hallo zusammen,

ich würde gerne die Browseranzeige 3 teilen. D.h. in der Mitte meine Flashanimation und oben und unten jeweils eine Leiste haben, die je nach Browsergröße eine Grafik, die ich noch erstelle, anzeigen soll. Da ich nicht der CSS Crack bin nun die Frage an euch. Wie mache ich das am besten/einfachsten?

Danke für die Mühe.

Anbei der HTML Code:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script type="text/javascript" src="swfobject.js"></script>


</head>

<body bgcolor="#51442d" background="bg.gif" leftmargin="0" topmargin="0">

<div id="flashcontent" style="position:absolute; left:50%; top:50%; width:900px; height:600px; margin-top:-300px; margin-left:-450px; z-index:1; visibility: visible;">
  <div align="center">
    
  </div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
<param name="allowScriptAccess" value="sameDomain"
</script>

<script type="text/javascript">
_uacct = "UA-2004550-2";
urchinTracker();
</script>
<script type="text/javascript">
   var so = new SWFObject("webdesign-frankfurt.swf", "movie", "900", "600", "8", "#51442d"); 
   so.write("flashcontent");
</script>
</body>


</html>
 
Hi,

das könnte beispielsweise so aussehen:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html,body {
margin:0;
padding:0;
height:100%;
}

body {
background:#51442d url(bg.gif);
}

#wrapper {
position:relative;
left:50%;
width:900px;
height:100%;
margin-left:-450px;
background:#fff; /* Hier kannst du das Hintergrundbild einfügen */
}

#flashcontent {
position:absolute;
left:50%;
top:50%;
width:900px;
height:600px;
margin-top:-300px;
margin-left:-450px;
z-index:1;
visibility:visible;
background:#ccc;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="flashcontent">flashcontent</div>
</div>

</body>
</html>
 
Danke,

klappt gut, nur habe ich jeweils links und rechts noch einen Bereich, weil das Flash nur 900px breit ist, den ich gerne auch mit irgendwas füllen möchte. Wie spreche ich diesen Bereich an?
 
Der linke und rechte Bereich dürfte dann der Seitenhintergrund sein, denn das umschliessende DIV #wrapper ist derzeit ebenfalls 900px breit.

Entweder sprichst du diesen Bereich über das body-Element an, oder du erhöhst die #wrapper-Breite auf 100%:

Code:
#wrapper {
position:relative;
width:100%;
height:100%;
background:#fff; /* Hier kannst du das Hintergrundbild einfügen */
}
 
Status
Nicht offen für weitere Antworten.
Zurück