Extrahierte Sclices aus PS mit DIVs horizontal mittig anordnen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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]

    Kommentar


    • #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

      Kommentar


      • #4
        Zitat von Wyveres Beitrag anzeigen
        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]

        Kommentar


        • #5
          Zitat von AmicaNoctis Beitrag anzeigen
          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

          Kommentar


          • #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]

            Kommentar


            • #7
              Danke für die schnelle Hilfe.

              @Wyveres: Dein Code wirkt Wunder Es funktioniert!!! Das muss ich jetzt erstmal verstehen.
              Zuletzt geändert von kerbstone; 16.09.2010, 10:05.

              Kommentar


              • #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

                Kommentar


                • #9
                  Zitat von Kropff Beitrag anzeigen
                  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]

                  Kommentar


                  • #10
                    Zitat von AmicaNoctis Beitrag anzeigen
                    Was hast du denn gegen position?
                    Ist imho viel zu unflexibel.
                    Zitat von AmicaNoctis Beitrag anzeigen
                    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.
                    Zitat von AmicaNoctis Beitrag anzeigen
                    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

                    Kommentar


                    • #11
                      Zitat von Kropff Beitrag anzeigen
                      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]

                      Kommentar


                      • #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 ?
                        Zuletzt geändert von kerbstone; 16.09.2010, 14:15.

                        Kommentar


                        • #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]

                          Kommentar


                          • #14
                            Zitat von kerbstone Beitrag anzeigen
                            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

                            Kommentar


                            • #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;
                              }
                              Angehängte Dateien
                              Zuletzt geändert von kerbstone; 23.09.2010, 19:57.

                              Kommentar

                              Lädt...
                              X