ilch Forum » Allgemein » HTML, PHP, SQL,... » DIV über DIV?

Geschlossen
  1. Mo. 11.10.2010 22:02 Uhr #1
    User Pic
    Swamp Mitglied
    Registriert seit
    02.02.2006
    Beiträge
    2.094
    Beitragswertungen
    21 Beitragspunkte
    Nabend!
    Ich hänge ürgendwie gerade voll... :/
    Mein klener Code: 
    <html>
<head>
<title></title>
</head>

<body>
<div id="tabelle_content">
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2">&nbsp;</td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    </tr>
</table>
</div>
<div id="bg_full"><img src="Images/bg_full.jpg" width="100%" /></div>

</body>
</html>

    So, ich habe ein Hintergrundbild das sich in die Weite automatisch zieht - also 100%. Nun möchte ich aber, dass die Tabelle in dem oberen DIV über das 
    <div id="bg_full"><img src="Images/bg_full.jpg" width="100%" /></div>
    "gelegt" wird und das noch Zentral in die Seite. Wie stelle ich das an? ... ich habe es mit z-index und position probiert doch es ich bekomme es einfach nicht hin -.-

    Beispiel wie es aussehen soll:
    gesperrtes Bild
    Danke schon mal für eure Hilfe xD...
    MfG.


    Zuletzt modifiziert von Swamp am 05.11.2010 - 18:32:09
    Wer zuletzt lacht, hat den schlechtesten Ping.
    0 Mitglieder finden den Beitrag gut.
  2. Mo. 11.10.2010 22:11 Uhr #2
    User Pic
    oink Mitglied
    Registriert seit
    23.09.2010
    Beiträge
    740
    Beitragswertungen
    227 Beitragspunkte
    wenn du mit z-index arbeitest müssen unter umständen in der nähe gelegene elemente nocheinmal ihre positionsart gesetzt bekommen.
    das bedeutet das du ersteinmal damit anfängst rund um deinen content ein style="position:relative;" zu setzen
    before creation there must be destruction
    0 Mitglieder finden den Beitrag gut.
  3. Mo. 11.10.2010 23:42 Uhr #3
    User Pic
    Chapter Hall Of Fame
    Registriert seit
    21.10.2007
    Beiträge
    5.951
    Beitragswertungen
    229 Beitragspunkte
    Verlink das hintergrundbild doch einfach in der style.CSS im Body-Tag.
    Spamming, sinnlose Beiträge, Pushing, Doppelposting und Werbung sind verboten
    externer Link
    0 Mitglieder finden den Beitrag gut.
  4. Di. 12.10.2010 00:17 Uhr #4
    User Pic
    Swamp Mitglied
    Registriert seit
    02.02.2006
    Beiträge
    2.094
    Beitragswertungen
    21 Beitragspunkte
    Hiho,
    habe ich schon gemacht. Allerdings wird "width: 100%" dann nicht benutzt und der BG hört rechts normal auf... :/
    Wer zuletzt lacht, hat den schlechtesten Ping.
    0 Mitglieder finden den Beitrag gut.
  5. Di. 12.10.2010 00:47 Uhr #5
    User Pic
    lordrepha Mitglied
    Registriert seit
    11.03.2006
    Beiträge
    1.362
    Beitragswertungen
    22 Beitragspunkte
    <html>
<head>
<title></title>
</head>
 
<body>
<div id="bg_full" style="position:absolute; width:100% "><img src="Images/bg_full.jpg" width="100%" /></div>
<div id="tabelle_content" style="margin: auto; width: 980px; position: relative;">
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2">text</td>
    </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td colspan="2">text</td>
    </tr>
</table>
</div>

 
</body>
</html>


    so müsste es gehen allerdings gibt es keine css funktion ein bild immer exakt mittig zu platzieren in der höhe. Das geht nur mit Javascript sprich aktuelle darstellungshöhe auslesen etc.
    Micro Blogging for Designer||Artworks||kostenlose Dropbox
    0 Mitglieder finden den Beitrag gut.
  6. Di. 12.10.2010 07:15 Uhr #6
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    ZitatZitat geschrieben von lordrepha
    so müsste es gehen allerdings gibt es keine css funktion ein bild immer exakt mittig zu platzieren in der höhe. Das geht nur mit Javascript sprich aktuelle darstellungshöhe auslesen etc.

    Wieso sollte das denn nur mit javascript funktionieren? Das geht auch ohne. (auch im IE6)
    Hab das Thema nur überflogen, aber ich denke hier findest du, was du suchst: externer Link

    Das Hintergrundbild der gesamten Seite kannst du in der .css-Datei bei "body" festlegen.

    Liebe Grüße
    Jan
    0 Mitglieder finden den Beitrag gut.
  7. Di. 12.10.2010 14:53 Uhr #7
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    787
    Beitragswertungen
    40 Beitragspunkte
    Hallo

    Also wenns dir nur darum geht, einen einzelnen DIV komplett zentriert zu haben, mach es wie folgt 

    <body>
<div id="wrapper">(Hier Inhalt bzw. Bild falls gewünscht)</div>
</body>


    Die CSS wie folgt: 

    html,body{
height: 100%;
margin: 0;
padding: 0;
}

body {
background: (Farbe oder Bild);
min-width: 836px; // Breite der Box
min-height: 403px; // Höhe der Box
text-align: center;
}

div#wrapper {
background: (Farbe oder Bild);
width: 836px; // Breite der Box
height: 403px; // Höhe der Box
position: absolute;
top: 50%;
left: 50%;
margin-top: -201px; // Halbe Höhe der Box
margin-left: -418px; // Halbe Breite der Box
overflow: hidden;
}


    Gruss

    MaddinXx

    //edit: Wenn das dann wieder nicht 100% breit ist, dann probier noch folgendes: 

    <body>
<div id="bg">
  <div id="wrapper">(Hier Inhalt bzw. Bild falls gewünscht)div>
</div>


    html,body{
height: 100%;
margin: 0;
padding: 0;
}

body {
background: (Farbe oder Bild);
min-width: 836px; // Breite der Box
min-height: 403px; // Höhe der Box
text-align: center;
}

div#bg {
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
background: (Farbe oder Bild);
/* z-index: 2;
position: absolute; */
}

div#wrapper {
background: (Farbe oder Bild);
width: 836px; // Breite der Box
height: 403px; // Höhe der Box
position: absolute;
top: 50%;
left: 50%;
margin-top: -201px; // Halbe Höhe der Box
margin-left: -418px; // Halbe Breite der Box
overflow: hidden;
}



    Zuletzt modifiziert von MaddinXx am 12.10.2010 - 14:57:26
    0 Mitglieder finden den Beitrag gut.
  8. Do. 14.10.2010 19:16 Uhr #8
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    @lordrepha:
    background-position:50% 50% zentriert ein Bild immer mittig. Sowohl horizontal, als auch vertikal.
    Und dafür möchtest du ein javascript verwenden?
    0 Mitglieder finden den Beitrag gut.
  9. Do. 14.10.2010 21:12 Uhr #9
    User Pic
    lordrepha Mitglied
    Registriert seit
    11.03.2006
    Beiträge
    1.362
    Beitragswertungen
    22 Beitragspunkte
    jau die frage hats sich mir noch nicht so gestellt hatte nur mal probleme in einem iframe fremde seitn dynamisch nachladen zu lassen und sich die höhe dadurch verändert hat da war es nicht anders möglich
    Micro Blogging for Designer||Artworks||kostenlose Dropbox
    0 Mitglieder finden den Beitrag gut.
  10. Mi. 01.12.2010 21:20 Uhr #10
    User Pic
    Swamp Mitglied
    Registriert seit
    02.02.2006
    Beiträge
    2.094
    Beitragswertungen
    21 Beitragspunkte
    Hiho,
    sry...konnte ne Weile nicht weiter machen.
    Also bei beiden Varianten klappt das nicht...ich hab die Werte angepasst und probiert allerdings hat sich nichts verändert...? Wirft mich sogar eher ein Schritt zurück zunge
    Der Background im BODY soll ja in die Breite immer 100% sein. Allerdings bleibt es immer auf der gleichen Größe...

    EDIT:
    Wenn ich das so mache: 
    <body>
<div id="bg_full"><img src="Images/bg_full.jpg" width="100%" /></div></div>
</body>

    Dann funktioniert das ganze. Mein Problem ist jetzt da drüber einen Inhalt anzulegen...und im BODY bekomme ich es nicht 100%?...

    Wenn ich "<img src="Images/bg_full.jpg" width="100%" />" weglasse, dafür in CSS mit deklariere dann wird es nicht 100% in die Breite gezogen. oO?

    Zuletzt modifiziert von Swamp am 01.12.2010 - 21:30:47
    Wer zuletzt lacht, hat den schlechtesten Ping.
    0 Mitglieder finden den Beitrag gut.
  11. Mi. 01.12.2010 21:38 Uhr #11
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    externer Link
    0 Mitglieder finden den Beitrag gut.
  12. Do. 02.12.2010 11:43 Uhr #12
    User Pic
    oink Mitglied
    Registriert seit
    23.09.2010
    Beiträge
    740
    Beitragswertungen
    227 Beitragspunkte
    *kopfschüttel*
    before creation there must be destruction
    0 Mitglieder finden den Beitrag gut.
  13. Do. 02.12.2010 13:57 Uhr #13
    User Pic
    Swamp Mitglied
    Registriert seit
    02.02.2006
    Beiträge
    2.094
    Beitragswertungen
    21 Beitragspunkte
    *dein kopf hebt und einmal 360° dreht*
    Hey jankrugi zunge danke!....es klappt... frech
    Wer zuletzt lacht, hat den schlechtesten Ping.
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten