mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 15:58 Benutzername: Passwort: Auto-Login

Thema: ein div im Hintergrund soll von allen überlagert werden. vom 09.01.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> ein div im Hintergrund soll von allen überlagert werden.
Seite: 1, 2  Weiter
Autor Nachricht
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Fr 09.01.2009 11:40
Titel

ein div im Hintergrund soll von allen überlagert werden.

Antworten mit Zitat Zum Seitenanfang

Hallo!

Ich möchte im Hintergrund eine Webseite Schlagwörter als Hintergrund einbauen. Sprich, einen Div der sichs über ganze Browserfenster zieht mit verschieden positionierten Wörtern.

Das andere Layout soll dann einfach drüberlegen.

Problem:

Mit margin: auto wird das Layout in die Mitte gebracht, somit kann ich es nicht positionieren... Wenn ich Text in den div schreibe, legt sich aber das Layout nicht drunter, sondern rutscht ja natürlich nach unten...

Gibt es irgendeine Möglichkeit das zu realisieren ohne das ich jetzt das ganze Coding vom Layout umschreiben muss, oder muss ich meine Idee jetzt wieder verwerfen?

LG Denise

Es soll halt so tagcloud-ähnlich werden, halt aber dezent im Hintergrund....
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 09.01.2009 11:45
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.google.de/search?q=css+z-index
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Fr 09.01.2009 11:46
Titel

Antworten mit Zitat Zum Seitenanfang

wie schon gesagt, ich kann das komplette layout nicht positionieren, sonst ist es nicht mehr in der mitte. und z-index hab ich ja schon probiert.... der div bleibt wo er ist... er schiebt sich nach unten und liegt nicht oben drüber...
  View user's profile Private Nachricht senden
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst Fr 09.01.2009 11:59
Titel

Antworten mit Zitat Zum Seitenanfang

code? link?

  View user's profile Private Nachricht senden
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Fr 09.01.2009 12:18
Titel

Antworten mit Zitat Zum Seitenanfang

css:
Code:

#wrapper {
  width: 650px;
  margin: 0px auto;
  position: relative;
  z-index: 100;
}

#site {
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 1;
}

#oben {
  width: 650px;
  height: 145px;
  margin: 0; padding: 0;
  background: #0079a4;
}

#navi {
  width: 650px;
  height: 25px;
  margin: 0; padding: 0;
  background: #bedce7;
}

#menu {
  width: 400px;
  height: 25px;
  margin: 0; padding: 0;
}

#container_content {
   width: 650px;
   height: 100%;
}

#container_headlinepicture {
   width: 650px;

}

#container_navbarcontent {
   width: 650px;
   margin: 0; padding: 0 0 30px 0;
}

#headline {
   width: 250px; height: 70px;
   margin: 0 0 0 10px; padding: 30px 0 0 0;
   float: left;
   text-align: right;
}

#picture {
   width: 374px; height: 100px;
   float: right;
}

#navbar {
   width: 220px;
   color: #74b3ca; text-align: left; font-style: italic; line-height: 12px;
   float: left;
   margin: 0 0 0 30px;
}

#content { 
  width: 353px;
  margin: 0 10px 0 0; padding: 15px 0 0 0;
  float: right;
}

.clear { clear: both; height: 0px; font-size: 0; visibility: hidden; }

#footer {
  width: 630px;
  margin: 0; padding: 1px 10px 0 10px;
  background: url(../images/footer.gif) repeat-x;
  font-size: 7pt;
  color: #bedce7;
}


html
Code:

<div id="site"><?php include('tagcloud.php'); ?>
      <div id="wrapper">
   <div id="oben"><?php include('header.php'); ?></div>
    <div id="menu"><?php include('menu.php'); ?></div>
       <div id="container_content" style="background:url(images/ind2.jpg) no-repeat bottom left #ffffff;">   
      <div id="container_headlinepicture">
   <div id="headline"><h1>Willkommen</h1></div>
    <div id="picture"><img src="images/ind.jpg" width="374" height="100" /></div>
       <div class="clear">&nbsp;</div>
      </div>
      <div id="container_navbarcontent">
<div id="navbar" style="padding: 100px 0 0 0;">
.....
</div>
<div id="content">
..............
</div>
      <div class="clear">&nbsp;</div>       
        </div>
        </div>
   <div id="footer"><?php include('footer.php'); ?></div>
        </div>
</div>
  View user's profile Private Nachricht senden
DesignKater

Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 09.01.2009 14:50
Titel

Antworten mit Zitat Zum Seitenanfang

Probier mal folgendes, die Bennenung musst natürlich anpassen:[/code]

Code:
html, body{margin:0px; padding:0px;}
#hintergrund{width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:1;}
#inhalte{width:500px; height:400px; background-color:#FF3300; z-index:2; position:relative; margin-left:auto; margin-right:auto;}


Zuletzt bearbeitet von DesignKater am Fr 09.01.2009 14:51, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Mo 12.01.2009 08:31
Titel

Antworten mit Zitat Zum Seitenanfang

hey,

hab das mal ausprobiert, das geht aber auch nicht... hat niemand eine idee wie man sowas erreichen kann?
  View user's profile Private Nachricht senden
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst Mo 12.01.2009 10:47
Titel

Antworten mit Zitat Zum Seitenanfang

was mir so aufgefallen ist:
dein"wrapper"(der ja die site erzeugen soll) sitz im hintergrund und nicht darüber
und stell die position: relative auf absolute
Code:
<div id="site"><?php include('tagcloud.php'); ?> </div>
      <div id="wrapper">
   <div id="oben"><?php include('header.php'); ?></div>
    <div id="menu"><?php include('menu.php'); ?></div>
       <div id="container_content" style="background:url(images/ind2.jpg) no-repeat bottom left #ffffff;">   
      <div id="container_headlinepicture">
   <div id="headline"><h1>Willkommen</h1></div>
    <div id="picture"><img src="images/ind.jpg" width="374" height="100" /></div>
       <div class="clear">&nbsp;</div>
      </div>
      <div id="container_navbarcontent">
<div id="navbar" style="padding: 100px 0 0 0;">
.....
</div>
<div id="content">
..............
</div>
      <div class="clear">&nbsp;</div>       
        </div>
        </div>
   <div id="footer"><?php include('footer.php'); ?></div>
        </div>
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] Content Div überlagert Footer
Bild überlagert div nicht [IE]
Powerpoint - Sound überlagert sich
Flowplayer überlagert Pirobox (Lightbox)
div mit position fixed wird von anderem div überlagert
[CSS] span mit transparentem gif-Bild überlagert Links !
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.