Anzeige

Problem mit div-Positionierung

Problem mit div-Positionierung | PSD-Tutorials.de

Erstellt von d34th, 22.10.2008.

  1. d34th

    d34th Clan-Designer

    Dabei seit:
    15.12.2006
    Beiträge:
    18
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    Photoshop CS2
    Problem mit div-Positionierung
    Moin,

    ich habe mich in den letzten Tagen mal etwas intensiver mit CSS beschäftigt, bin jedoch bei der Positionierung von durchsichtigen Linkboxen auf ein Problem gestoßen, was ich mir so eigentlich nicht erklären kann.

    Es geht um folgenden Code:

    index.php
    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" >
    3.  
    4. <head>
    5. <title>Svens Multimedia-System Okt. 2008</title>
    6. <link rel="stylesheet" href="/system-hp/css/design.css" type="text/css" />
    7. <link rel="stylesheet" href="/system-hp/css/sys-elemente.css" type="text/css" />
    8. <script type='text/javascript' src='/system-hp/java/jquery-1.2.6.min.js'></script>
    9. <script type='text/javascript' src='/system-hp/java/tooltip.js'></script>
    10. <?php include('/www/htdocs/w00a6677/system-hp/php/sys-elemente.php'); ?>
    11. </head>
    12.  
    13.  
    14. <body>
    15. <div class='site'>
    16.     <div class='main-header'></div>
    17.         <div class='main-system'>
    18.            
    19.                 <div id='lcd'><a href="#" title="<?php echo $lcd; ?>"><img src="/system-hp/images/spacer.png" id='lcd'></img></a></div>
    20.                 <div id='receiver'><a href="#" title="<?php echo $receiver; ?>"><img src="/system-hp/images/spacer.png" id='receiver'></img></a></div>
    21.                 <div id='dvdplayer'><a href="#" title="<?php echo $dvdplayer; ?>"><img src="/system-hp/images/spacer.png" id='dvdplayer'></img></a></div>
    22. [...]
    23.     <div class='main-legend'></div>
    24. </div>
    25.  
    26.  
    27. </body>
    28.  
    29. </html>
    system-hp/design.css
    Code (Text):
    1. .site{
    2. text-align:center;
    3. }
    4.  
    5. .site img{
    6.  
    7. }
    8.  
    9. .main-header{
    10.     background-image: url(/system-hp/images/main-header.jpg);
    11.     background-repeat:no-repeat;
    12.     width:450px;
    13.     height:96px;
    14.     margin:auto;
    15. }
    16.  
    17. .main-system{
    18.     background-image: url(/system-hp/images/main-system.jpg);
    19.     background-repeat:no-repeat;
    20.     width:1000px;
    21.     height:987px;
    22.     margin:auto;
    23.     text-align:left;
    24. }
    25.  
    26.  
    27. .main-legend{
    28.     background-image: url(/system-hp/images/main-legend.jpg);
    29.     background-repeat:no-repeat;
    30.     width:835px;
    31.     height:151px;
    32.     margin:auto;
    33. }
    34.  
    35. [...]
    36.  
    /system-hp/sys-elemente.css
    Code (Text):
    1. img#lcd{
    2.     width:354px;
    3.     height:247px;
    4.    
    5. }
    6.  
    7. div#lcd{
    8.     position:relative;
    9.     left:86px;
    10.     top:12px;
    11.     width:354px;
    12. }
    13.  
    14. img#receiver{
    15.     width:226px;
    16.     height:91px;
    17. }
    18.  
    19. div#receiver{
    20.     position:relative;
    21.     left:706px;
    22.     top:49px;
    23.     width:226px;
    24. }
    25.  
    26. [...]
    27.  
    Bei [...] wurden jeweils unwichtige Codebestandteile weggelassen. Die *.js Dateien habe ich ganz weggelassen, da diese nur die Popups koordinieren. Ebenso habe ich die sys-elemente.php weggelassen, da durch diese nur dynamisch den Inhalt der title Elemente in der index.php gefüllt werden (funktioniert auch).

    Problem ist, dass die divs anscheinend alle von einem anderen Ursprungspunkt aus positioniert werden müssen, um sie im Firefox 3 richtig positioniert anzuzeigen (siehe *website*). Im Internet Explorer 7 hingegen liegen alle divs durcheinander gewürfelt.

    Die komplizierte Methode mit einem gestreckten durchsichtigen Bild innerhalb einem in der Position definierten div habe ich gewählt, da ich jeweils mit nur Bild bzw. nur div Fehler hatte (z.B: unsichtbare Linkfelder, wo keine hätten sein sollen).

    Die Frage ist also: Wie positioniere ich die divs so, dass sowohl IE als uch FF alles richtig darstellt.

    Ich hoffe ihr könnt mir helfen.
     
    Zuletzt bearbeitet: 02.09.2009
    #1      
  2. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    Zunächst einmal würde ich margin und padding auf 0px setzen.

    Wäre es nicht einfacher, das Bild als Gesamtes mit einer Imagemap zu versehen?
     
    #2      
  3. cebylon

    cebylon IBM5120-Oldie

    Dabei seit:
    28.07.2008
    Beiträge:
    920
    Geschlecht:
    männlich
    Ort:
    Niederbayern
    Software:
    ArchiCAD/Artlantis/Adobe
    Kameratyp:
    Canon EOS
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    imagemap wäre doch viel zu simpel ! :D:lol:
     
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    warum nicht einfach die boxen absolut positonieren?
    eigentlich ist das das einfachste, und sollte in jedem Browser gleich aussehen.
    Bezugspunkt ist immer oben links.
    Natürlich wie stb schon schrieb margins und paddings auf 0 setzen, damit man an der Stelle schon mal gleiche Bedingungen für alle Browser hat.
     
    #4      
  5. LarsVern

    LarsVern Noch nicht viel geschrieben

    Dabei seit:
    03.08.2007
    Beiträge:
    11
    Geschlecht:
    männlich
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    Hi,

    ich würde bei dieser Aufgabe auch absolute Positionen vergeben. Allerdings sollte deine Hintergrundgraphik dann auch eine feste Position haben. Wenn du das Bild immer zentriert haben musst, dann könntest du höchstens ausprobieren die Rahmen absolut innerhalb eines relativen DIVs zu positionieren.

    <div style="margin:auto;">
    <div id="Rahmen1" style="position:absolute;"></div>
    <div id="Rahmen2" style="position:absolute;"></div>
    </div>

    Zum Verständnis für position:absolute/relative
    http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

    Bei dieser Variante gibt es aber sicher noch ein paar Fallstricke zwischen den Browsern.

    Wenn du nicht lange basteln willst, dann setz die Graphik auf eine feste Position und packe die Rahmen absolut darauf.

    Der Vorschlag eine HTML ImageMap zu verwenden ist genauso gut. Für deinen Zweck vollkommen ausreichend. Wenn du die DIV Geschichten besser kennenlernen möchtest - ist ja vielleicht nicht deine letzte Geschichte - dann probiere es mit den position:absolute aus.

    Link ImageMap: SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)

    Gruss

    Lars
     
    #5      
  6. d34th

    d34th Clan-Designer

    Dabei seit:
    15.12.2006
    Beiträge:
    18
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    Photoshop CS2
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    Danke erstmal für die vielen Antworten innerhalb von einer Stunde. Wow! :D

    Das es irgendwie sowas wie ImageMaps gab schwirrte mir auch noch irgendwo im Hinterkopf drum, aber nach kurzen googlen hab ich da keine Treffer erzielt (gut waren blos 3 SUchanfragen vielleicht) und ich dachte die Variante mit den Divs geht grad genauso schnell.

    Die komplette Seite soll ja bei jeder Auflösung zentriert sein und das geht meines Wissens nur relativ, da der Abstand zur Mitte bei 1024x768 natürlich geringer ist als bei 1680x1050.
    Daher habe ich mich bis jetzt gegen eine absolute Positionierung entschieden, weil bei absoluter Positionierung als Ausgangspunkt ja immer der Punkt links oben im Browserfenster zählt. (oder lässt sich der Ausgangspunkt auch z.B. als Punkt oben links in einem (relativ) positionierten div setzen?)
    edit: Frage beantwortet durch selfhtml
    edit2: Schön, dass self HTML das behauptet, aber bei mir richten sich absolute div Elemente innerhalb eines divs höherer Ordnung am absoluten Nullpunkt aus und nicht am Nullpunkt des divs.

    Ich werde eure Vorschläge mal durchprobieren und berichten. :)

    @LarsVern
    Genau so, wie du es in deiner ersten Idee beschrieben hast stell ich mir das ganze vor; absolute Positionen in einem relativen div. Mal gucken. Ziel des ganzen soll nicht umbedingt eine "wirkliche" Homepage sein (wer interessiert sich schon für mein Multimedia-System ^^), sondern ne Möglichkeit CSS, etc. besser kennenzulernen. ;)

    edit:
    Ich hätte wohl doch etwas länger googlen sollen. Die Variante mit den ImageMaps ist natürlich geradezu dafür zugeschnitten oO :D

    edit2:
    Erkenntnis 1:

    /system-hp/css/design.css
    Code (Text):
    1. .site{
    2. margin:auto;
    3. }
    Tut es schonmal wesentlich besser als
    Code (Text):
    1. .site{
    2. text-align:center;
    3. }

    edit3:
    Also hab jetzt mal padding und margin auf 0 gesetzt in allen divs (die später anklickbar sind)
    Bei rund der hälfte der divs klappt das auch wunderbar in beiden Browsern. Die Position der Boxen ist ca. richtig und auch wenn ich das Fenster schmaler schiebe, bleiben die Linkboxen an der richtigen Position über der Grafik. Allerdings nicht alle, obwohl sie meiner Meinung genau gleich aufgebaut sind.

    Könnt euch ja mal als Beispiel auf *website* begeben und das Browserfenster schmaler schieben. Die Linkbox für die Lautsprecher bleibt genau an der richtigen Position über der Grafik, die Linkbox des Druckers aber nicht. Als Beweis, dass beide mit dem gleichen Code arbeiten folgendes:

    index.php
    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" >
    3.  
    4. <head>
    5. [...]
    6. </head>
    7.  
    8.  
    9. <body>
    10. <div class='site'>
    11.     <div class='main-header'></div>
    12.     <div class='main-system'>
    13.            
    14.                
    15.                 <div id='lautsprecher'><a href="#" title="<?php echo $lautsprecher; ?>"><img src="/system-hp/images/spacer.png" id='lautsprecher'></img></a></div>
    16.                 <div id='pcdrucker'><a href="#" title="<?php echo $pcdrucker; ?>"><img src="/system-hp/images/spacer.png" id='pcdrucker'></img></a></div>
    17.                 [...]
    18.     </div>
    19.     <div class='main-legend'></div>
    20. </div>
    21.  
    22.  
    23. </body>
    24.  
    25. </html>
    sys-elemente.css
    Code (Text):
    1. img#lautsprecher{
    2.     width:240px;
    3.     height:165px;
    4.     padding: 0;
    5.     margin: 0;
    6. }
    7.  
    8. div#lautsprecher{
    9.     position:relative;
    10.     left:710px;
    11.     top:-385px;
    12.     width:240px;
    13.     padding: 0;
    14.     margin: 0;
    15. }
    16.  
    17. img#pcdrucker{
    18.     width:182px;
    19.     height:203px;
    20.     padding: 0;
    21.     margin: 0;
    22. }
    23.  
    24. div#pcdrucker{
    25.     position:relative;
    26.     left:647px;
    27.     top:-538px;
    28.     width:182px;
    29.     padding: 0;
    30.     margin: 0;
    31. }
    design.css
    Code (Text):
    1. .site{
    2. margin:auto;
    3. }
    4.  
    5. .site img{
    6.  
    7. }
    8.  
    9. .main-header{
    10.     background-image: url(/system-hp/images/main-header.jpg);
    11.     background-repeat:no-repeat;
    12.     width:450px;
    13.     height:96px;
    14.     margin:auto;
    15. }
    16.  
    17. .main-system{
    18.     background-image: url(/system-hp/images/main-system.jpg);
    19.     background-repeat:no-repeat;
    20.     width:1000px;
    21.     height:987px;
    22.     margin:auto;
    23.     left:300px;
    24. }
    25.  
    26.  
    27. .main-legend{
    28.     background-image: url(/system-hp/images/main-legend.jpg);
    29.     background-repeat:no-repeat;
    30.     width:835px;
    31.     height:151px;
    32.     margin:auto;
    33. }
    34.  
     
    Zuletzt bearbeitet: 02.09.2009
    #6      
  7. templar_style

    templar_style Noch nicht viel geschrieben

    Dabei seit:
    05.01.2008
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    Garching
    Software:
    Master Collection CS4
    Kameratyp:
    Sony
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    würde das hier nicht auch gehen ?


    * {
    margin: 0 0 0 0;
    }


    ? Oder muss man immer in jedem einzelnen Punkt diese 0 Werte eintragen?
     
    #7      
  8. LarsVern

    LarsVern Noch nicht viel geschrieben

    Dabei seit:
    03.08.2007
    Beiträge:
    11
    Geschlecht:
    männlich
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    * {
    margin:0;
    }

    könnte auch funktionieren. Vom Prinzip her sollte CSS Eigenschaften vererben. Eine Null reicht aber, weil alle Kanten ja auf Null stehen sollen. Mehrere Angaben sind nur interessant, wenn die Kanten unterschiedlich sein sollen.

    Gruss

    Lars
     
    #8      
  9. LarsVern

    LarsVern Noch nicht viel geschrieben

    Dabei seit:
    03.08.2007
    Beiträge:
    11
    Geschlecht:
    männlich
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    Hi,

    also bei position:relative hast du immer das Problem, dass sich das DIV nach dem vorherigen DIV richtet und das Folge DIV wiederum durch die Größe des aktuellen beeinflusst wird.

    Um die genaue Wirkungsweise zu testen würde ich an deiner Stelle die ganze Geschichte einmal entschlacken. Fang mit zwei Elementen an und versuche die so zu positionieren wie du dir das denkst. Wenn das hin haut, dann probiere Varianten aus, die aus deiner Sicht genauso hin hauen müssten.

    Im nächsten Schritt packst du dann mehr Elemente hinzu. Und um zu sehen wie sich gewisse Dinge verhalten kannst du entweder deinen Rahmen verwenden oder was ich gerne mache, background-color (mit unterschiedlichen Farben), darüber lassen sich die Auswirkungen besser sichbar machen.

    Wenn du position:relative verwendest kommen beim IE gegenüber den anderen Browsern noch die unterschiede der Rahmen hinzu. Der IE interpretiert die einfach anders als FireFox, Opera und Safari oder Chrome und Flock. Sprich das Folgeelement sitzt dann nicht ganz dort wo es soll und die Verschiebung nimmt pro Element zu.

    Allerdings gibt es in deinem Source ein Problem, wie relevant das ist kann ich nicht genau sagen. Du verwendest die IDs doppelt. Klar, einmal als DIV und einmal als IMG, allerdings weiß ich nicht ob diese Unterscheidung ausreicht, es könnte sein, dass Einstellungen aus den Bildern in die DIVs vererbt werden.

    Ich habe das jetzt aber nicht ausprobiert.

    Gruss

    Lars
     
    #9      
  10. LarsVern

    LarsVern Noch nicht viel geschrieben

    Dabei seit:
    03.08.2007
    Beiträge:
    11
    Geschlecht:
    männlich
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    FEHLER:

    <div id='router'><a href="#" title="router"><img src="/system-hp/images/spacer.png" id='router'></img></div></a></div>

    In der Zeile vom Router hast du ein DIV zu viel geschlossen und ab da klappt das mit der Positionierung auch nicht mehr.
     
    #10      
  11. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    Also ich hab das so gelöst:

    CSS

    Code (Text):
    1. BODY {
    2. .........[COLOR=Red][B]TEXT-ALIGN: center;[/B][/COLOR]
    3. }
    4.  
    5. #container {
    6.         PADDING-RIGHT: 0px; ..... WIDTH: 800px; [COLOR=Red][B]POSITION: relative;[/B][/COLOR]
    7. }
    Der Container ist relativ positioniert und wird immer mittig angezeigt (nicht schmaler als 800 px.

    ... dann im Quelltext

    HTML:
    1. <div id=container>
    2.  
    3. Hier alle div absolut positioniert...
    4.  
    5. </div>
    6. </body>
    7. </html>
    8.  
    Alle div innerhalb des container positionieren sich jetzt absolut innerhalb des containers an seinen Begrenzungen...
    Das funktioniert in allen mir bekannten Browsern.
     
    #11      
  12. d34th

    d34th Clan-Designer

    Dabei seit:
    15.12.2006
    Beiträge:
    18
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    Photoshop CS2
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    Ah Danke LarsVern (und natürlich auch den anderen) so viele Augen sehen natürlich mehr als meine beiden. Jetzt bleiben schon alle Boxen auf der richtigen Stelle und werden in beiden Browsern gleich angezeigt.

    Der Rest sollte nurnoch Anpassung der Koordinaten sein.
     
    #12      
  13. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    edit: Beitrag falsch / Fehler in der Logik
    Danke für die Hilfestellung@cebito
     
    Zuletzt bearbeitet: 22.10.2008
    #13      
  14. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    Soso, dann mach dir mal zwei Dateien und teste das mal aus:

    container.css

    Code (Text):
    1. BODY {
    2.         PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #FFFFFF; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px; FONT-FAMILY: VERDANA,ARIAL,HELVETICA; HEIGHT: 100%; FONT-SIZE: 11px; COLOR: #303030; TEXT-ALIGN: center;
    3. }
    4.  
    5. #container {
    6.         PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 800px; HEIGHT: 800px; PADDING-TOP: 0px; POSITION: relative; BACKGROUND: #000000; BORDER: 3px; TEXT-ALIGN: left;
    7. }
    8.  
    9. #tab1 {
    10.         Z-INDEX: 3; LEFT: 82px; POSITION: absolute; TOP: 200px; HEIGHT: 50px; WIDTH: 100px; BACKGROUND: #FF0000;
    11. }
    12.  
    13.  
    14. #tab2 {
    15.         Z-INDEX: 3; LEFT: 432px; POSITION: absolute; TOP: 360px; HEIGHT: 120px; WIDTH: 250px; BACKGROUND: #FFFF00;
    16. }
    wieauchimmer.html

    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3.  
    4. <link href="container.css" type=text/css rel=stylesheet>
    5.  
    6. </head>
    7.  
    8.  
    9.  
    10. <div id=container>
    11.  
    12.  
    13. <div id=tab1> Ich bin wo ich bin!!! Absolut im Container, relativ zum Browserfenster!</div>
    14.  
    15. <div id=tab2> Ich bin wo ich bin!!! Absolut im Container, relativ zum Browserfenster!</div>
    16.  
    17.  
    18.  
    19. </div>
    20.  
    21. </body>
    22.  
    23. </html>
     
    Zuletzt bearbeitet: 22.10.2008
    #14      
  15. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    Hallo cebito,
    Danke für die Mühe und den Hinweis. ich habs ausprobiert, stimmt...da hab ich diesen Sachverhalt ganz fehlinterpretiert
     
    #15      
  16. d34th

    d34th Clan-Designer

    Dabei seit:
    15.12.2006
    Beiträge:
    18
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    Photoshop CS2
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    Habe es schön gelöst. Schuld am Ganzen war tatsächlich der eine div-Tag, der zu viel geschlossen wurde.

    Das schon funktionstüchtige, wenn auch nicht komplett fertige Ergebnis: Svens Multimedia-System Okt. 2008

    Danke für die Hilfe euch allen!
     
    #16      
  17. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Problem mit div-Positionierung
    AW: Problem mit div-Positionierung

    No Prob, hab vor ca. nem Jahr ganz schön rumgegoogelt, bis ich was gefunden. Wollt mich halt nich zufriedengeben damit...
     
    #17      
x
×
×
teststefan