Autor |
Nachricht |
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Fr 09.01.2009 11:40
Titel ein div im Hintergrund soll von allen überlagert werden. |
|
|
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....
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Fr 09.01.2009 11:46
Titel
|
|
|
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...
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Fr 09.01.2009 11:59
Titel
|
|
|
code? link?
|
|
|
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Fr 09.01.2009 12:18
Titel
|
|
|
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"> </div>
</div>
<div id="container_navbarcontent">
<div id="navbar" style="padding: 100px 0 0 0;">
.....
</div>
<div id="content">
..............
</div>
<div class="clear"> </div>
</div>
</div>
<div id="footer"><?php include('footer.php'); ?></div>
</div>
</div>
|
|
|
|
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 09.01.2009 14:50
Titel
|
|
|
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
|
|
|
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Mo 12.01.2009 08:31
Titel
|
|
|
hey,
hab das mal ausprobiert, das geht aber auch nicht... hat niemand eine idee wie man sowas erreichen kann?
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Mo 12.01.2009 10:47
Titel
|
|
|
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"> </div>
</div>
<div id="container_navbarcontent">
<div id="navbar" style="padding: 100px 0 0 0;">
.....
</div>
<div id="content">
..............
</div>
<div class="clear"> </div>
</div>
</div>
<div id="footer"><?php include('footer.php'); ?></div>
</div> |
|
|
|
|
|
|
|
|
Ä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 !
|
|