Extrahierte Sclices aus PS mit DIVs horizontal mittig anordnen

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Extrahierte Sclices aus PS mit DIVs horizontal mittig anordnen

    Einleitung:
    Ich habe in Photoshop eine Webseite erstellt,
    die ich mittels Slices in Fragmente unterteilt habe.
    Im Anschluss daran habe ich die Sclices aus
    Imageready als JPEGs extrahiert und in DIVs einfügen lassen.
    HTML Code:
    <div id="container">
    <div id="slice_1"><img ...></div>
    <div id="slcie_n"><img ...></div>
    </div>
    Problem:
    Die komplette Webseite wird nicht horizontal zentriert dargestellt.
    Ich habe es beim Container mit dem Wert auto bei margin left und right
    ausprobiert, dies brachte jedoch leider nicht den gewünschten Erfolg

    Hier mein original Code:
    HTML Code:
    <style type="text/css">
    <!--
    #Container {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:954px;
    	height:688px;
    }
    
    #idelement-01_ {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:3px;
    	height:688px;
    }
    
    #idelement-02_ {
    	position:absolute;
    	left:3px;
    	top:0px;
    	width:948px;
    	height:35px;
    }
    
    #idelement-03_ {
    	position:absolute;
    	left:951px;
    	top:0px;
    	width:3px;
    	height:688px;
    }
    
    #idelement-04_ {
    	position:absolute;
    	left:3px;
    	top:35px;
    	width:20px;
    	height:29px;
    }
    
    (...)
    -->
    </style>
    
    <div id="Container">
    	<div id="idelement-01_">
    		<img id="idelement_01" src="images/20100915_01.jpg" width="3" height="688" alt="" />
    	</div>
    	<div id="idelement-02_">
    		<img id="idelement_02" src="images/20100915_02.jpg" width="948" height="35" alt="" />
    	</div>
               <div id="idelement-03_">
    		<img id="idelement_03" src="images/20100915_03.jpg" width="3" height="688" alt="" />
    	</div>
    	<div id="idelement-04_">
    		<img id="idelement_04" src="images/20100915_04.jpg" width="20" height="29" alt="" />
    	</div>
    
    (...)
    </div>
    Könnt ihr mir bitte sagen, wie ich die Webseite zentriert bekomme?

    Vielen Dank im voraus!!!

  • #2
    Hallo,

    warum packst du das Stylesheet in einen Kommentar? Wenn die Browser nicht zufällig tolerant damit umgingen, würdest du es damit deaktivieren.

    Du schreibst margin left und right, aber wie hattest du es wirklich geschrieben als du es versucht hast? Mit Bindestrich?

    Gruß,

    Amica
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Comment


    • #3
      Code:
      #Container {
      	position:absolute;
      	left:0px;
      	top:0px;
      	width:954px;
      	height:688px;
      }
      Absolut positionierte Elemente Ignorieren in der Regel margin-left und right.

      wenn du die Styles dem entsprechend zum Container relativ setzt und den Container Selbst ohne Position und mit margrin left und right auto austattest sollte das eigentlich gehen.
      Bitte Beachten.
      Foren-Regeln
      Danke

      Comment


      • #4
        Originally posted by Wyveres View Post
        Absolut positionierte Elemente Ignorieren in der Regel margin-left und right.
        Seit wann?
        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
        Super, danke!
        [/COLOR]

        Comment


        • #5
          Originally posted by AmicaNoctis View Post
          Seit wann?
          Seit immer ;D und ich hätte da noch Auto hin schreiben sollen. Wenn man ... auf absolut positionierte Elemente margin-left:auto; und marign-right:auto; versucht.

          Wenn man explizit pixelwerte angibt oder prozent dann nicht.

          zentiert da left:0; hier durch marin-left:auto; aufgehoben wird.
          Code:
          #Container {
          	position:relative;
          	left:0px;
          	top:0px;
          	width:954px;
          	height:688px;
          	margin-left:auto;
          	margin-right:auto;
          	border:1px solid black;
          }
          pappt am linken rand ...
          Code:
          #Container {
          	position:absolute;
          	left:0px;
          	top:0px;
          	width:954px;
          	height:688px;
          	margin-left:auto;
          	margin-right:auto;
          	border:1px solid black;
          }
          sitzt 100px von links entfernt.
          Code:
          #Container {
          	position:absolute;
          	left:0px;
          	top:0px;
          	width:954px;
          	height:688px;
          	margin-left:100px;
          	margin-right:auto;
          	border:1px solid black;
          }
          Bitte Beachten.
          Foren-Regeln
          Danke

          Comment


          • #6
            Ok, das mit auto stimmt, ich dachte, du meinst, dass es generell nicht geht.

            Jedenfalls:
            Code:
            position: absolute;
            top: 0;
            left: 50%;
            width: /*die Breite, z. B.*/ 200px;
            margin-left: /*die halbe negative Breite, z. B.*/ -100px;
            funktioniert.
            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
            Super, danke!
            [/COLOR]

            Comment


            • #7
              Danke für die schnelle Hilfe.

              @Wyveres: Dein Code wirkt Wunder Es funktioniert!!! Das muss ich jetzt erstmal verstehen.
              Last edited by kerbstone; 16-09-2010, 09:05.

              Comment


              • #8
                Mensch Kinners, lasst diesen position-Kram. Der ist hier überflüssig wie ein Kropf(f).

                Peter
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Comment


                • #9
                  Originally posted by Kropff View Post
                  Mensch Kinners, lasst diesen position-Kram.
                  Was hast du denn gegen position? Es lässt sich jedenfalls besser damit arbeiten als mit floats und irgendwelchen zusätzlichen div-Suppen.
                  [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                  Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                  Super, danke!
                  [/COLOR]

                  Comment


                  • #10
                    Originally posted by AmicaNoctis View Post
                    Was hast du denn gegen position?
                    Ist imho viel zu unflexibel.
                    Originally posted by AmicaNoctis View Post
                    Es lässt sich jedenfalls besser damit arbeiten als mit floats7
                    Nö. Spätestens wenn du anfängst, relative und absolute zu kombinieren, bekommst du teilweise riesengroße Probleme mit dem iE 6 und 7. Außerdem sind die float-Probleme im IE 6 und 7 wohlbekannt und es gibt die entsprechenden Fixes.
                    Originally posted by AmicaNoctis View Post
                    und irgendwelchen zusätzlichen div-Suppen.
                    Wenn die Leute alles in divs klatschen, so ist das ihr Problem. Das geht imho auch sehr häufig viel eleganter. Ist allerdings auch immer vom Design anhängig.

                    Peter
                    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                    Meine Seite

                    Comment


                    • #11
                      Originally posted by Kropff View Post
                      Ist imho viel zu unflexibel.

                      Nö. Spätestens wenn du anfängst, relative und absolute zu kombinieren, bekommst du teilweise riesengroße Probleme mit dem iE 6 und 7.
                      Da habe ich (zu beiden Punkten) gegenteilige Erfahrungen gemacht. Aber egal, ich hör mal auf, das hier zu sehr in den OT-Bereich zu ziehen.
                      [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                      Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                      Super, danke!
                      [/COLOR]

                      Comment


                      • #12
                        @Kropff:

                        Jetzt bin ich aber neugierig geworden.

                        Was für elegantere Lösungen bestehen denn zur Umsetzung?
                        Imageready lässt entweder Tabellen oder DIVs zu.

                        Sprichst Du nun XSL an, das eine weitere Möglichkeit darstellt?
                        In Form von http://symphony-cms.com ?
                        Last edited by kerbstone; 16-09-2010, 13:15.

                        Comment


                        • #13
                          Ich denke, Kropff will auf seine geliebten floats hinaus

                          Mit XSL hat das erstmal nichts zu tun, XSL-FO ist im Webumfeld untypisch und eher (aber nicht ausschließlich) zum Generieren von PDFs genutzt. XSL-T nutze ich zwar auch sehr oft, aber das kommt auch nicht ohne CSS aus, weil man damit nur Dokumente transformiert (in diesem Falle zu HTML).
                          [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                          Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                          Super, danke!
                          [/COLOR]

                          Comment


                          • #14
                            Originally posted by kerbstone View Post
                            Was für elegantere Lösungen bestehen denn zur Umsetzung? Imageready lässt entweder Tabellen oder DIVs zu.
                            Ohne Klickibunti arbeiten. Sondern HTML und CSS lernen.

                            Peter
                            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                            Meine Seite

                            Comment


                            • #15
                              Nun habe ich das Problem, dass ich nicht weiß, wie ich zwei
                              absolut getrennte DIVs relativ zueinander positionieren kann.
                              Anbei ein Screenshot. Folgend der CSS Code, ich habe wirklich keine Ahnung:

                              HTML Code:
                              /* div configurations */
                              #Tabelle_01 {
                              	position:relative; /* Main Frame */
                              	left:0px;
                              	top:-8px;
                              	width:954px;
                              	margin-left:auto;
                              	margin-right:auto;
                              }
                              
                              #id20100923-01_ {
                              	position:absolute;
                              	left:0px;
                              	top:0px;
                              	width:3px;
                              	height:688px;
                              }
                              
                              #id20100923-02_ {
                              	position:absolute;
                              	left:3px;
                              	top:0px;
                              	width:948px;
                              	height:56px;
                              }
                              
                              #id20100923-03_ {
                              	position:absolute;
                              	left:951px;
                              	top:0px;
                              	width:3px;
                              	height:688px;
                              }
                              
                              #id20100923-04_ {
                              	position:absolute;
                              	left:3px;
                              	top:56px;
                              	width:511px;
                              	height:45px;
                              }
                              
                              #id20100923-05_ { /* Logo */
                              	position:absolute;
                              	left:514px;
                              	top:56px;
                              	width:409px;
                              	height:45px;
                              }
                              
                              #id20100923-06_ {
                              	position:absolute;
                              	left:923px;
                              	top:56px;
                              	width:28px;
                              	height:271px;
                              }
                              
                              #id20100923-07_ {
                              	position:absolute;
                              	left:3px;
                              	top:101px;
                              	width:20px;
                              	height:226px;
                              }
                              
                              #id20100923-08_ { /* Banner */
                              	position:absolute;
                              	left:23px;
                              	top:101px;
                              	width:601px;
                              	height:182px;
                              }
                              
                              #id20100923-09_ { /* 2. Logo */
                              	position:absolute;
                              	left:624px;
                              	top:101px;
                              	width:299px;
                              	height:54px;
                              }
                              
                              #id20100923-10_ {
                              	position:absolute;
                              	left:624px;
                              	top:155px;
                              	width:299px;
                              	height:142px;
                              }
                              
                              #id20100923-11_ {
                              	position:absolute;
                              	left:23px;
                              	top:283px;
                              	width:601px;
                              	height:14px;
                              }
                              
                              #id20100923-12_ { /* Horizontal Header Menu */
                              	position:absolute;
                              	left:23px;
                              	top:297px;
                              	width:900px;
                              	height:30px;
                              	background-image: url(images/20100923_12.jpg);
                              	color:#5A5A5A;
                              	text-align:center;
                              	font-size:24px;
                              }
                              
                              #id20100923-13_ {
                              	position:absolute;
                              	left:3px;
                              	top:327px;
                              	width:948px;
                              	height:5px;
                              }
                              
                              #id20100923-14_ { /* Content Container */
                              	position:absolute;
                              	left:3px;
                              	top:332px;
                              	width:948px;
                              	background-image:url(images/20100923_13.jpg);
                              	background-repeat:y;
                              }
                              
                              #contentalignment {
                              	padding:0px /*top*/ 0px /*right*/ 0px /*bottom*/ 16px /*left*/;	
                              }
                              
                              #id20100923-15_ {
                              	position:absolute;
                              	left:3px;
                              	top:628px;
                              	width:20px;
                              	height:60px;
                              }
                              
                              #id20100923-16_ { /* Horizontal Footer Menu Container */
                              	position:absolute;
                              	left:23px;
                              	top:628px;
                              	width:900px;
                              	height:31px;
                              	background-image: url(images/20100923_16.jpg);
                              }
                              
                              #id20100923-17_ {
                              	position:absolute;
                              	left:923px;
                              	top:628px;
                              	width:28px;
                              	height:60px;
                              }
                              
                              #id20100923-18_ {
                              	position:absolute;
                              	left:23px;
                              	top:659px;
                              	width:900px;
                              	height:29px;
                              }
                              
                              #idElement-19 { /* Content Headline */
                              	margin-bottom:20px;
                              	font-family: Arial Narrow;
                              	font-size: 24px;
                              	color:#A6A6A6;
                              }
                              
                              #idElement-20 { /* Content Left */
                              	float: left;
                              	width: 430px;
                              	font-family: Arial Narrow;
                              	font-size: 21px;
                              	color:#5A5A5A;
                              	margin-right: 20px;
                              }
                              
                              #idElement-21 { /* Content Right */
                              	font-family: Arial Narrow;
                              	font-size: 21px;
                              	color:#5A5A5A;
                              	margin-right: 20px;
                              }
                              
                              #idElement-22 { /* another element */
                              	float:left;
                              	margin-top:8px;
                              	margin-left:12px;
                              	text-align:left;
                              }
                              
                              #idElement-23 { /* Impressum Link */
                              	margin-top: 0px;
                              	margin-right:52px;
                              	color:#5A5A5A;
                              	text-align:center;
                              	font-size:24px;
                              }
                              Attached Files
                              Last edited by kerbstone; 23-09-2010, 18:57.

                              Comment

                              Working...
                              X