[css/php]

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

  • [css/php]

    Hi,

    also ich versuche Bilder horizontal wie vertikal in einem div zu zentrieren.

    Horizontal ist ja alles klar.

    vertikal ist da schon ein bisschen schwerer wenn die Bild höhe variieren kann.

    Also mit meiner Formel zur Berechnung des Margin-top's kam ich nicht weit:

    Mein Ansatz:
    Code:
    	list($width,$height)=getimagesize("img");
    	$marginTop = (100-$height)/2;
    Das Div in dem sich ein Bild befindet ist 190px hoch
    Lurchi ! Lurchi ! Lurchi !

  • #2
    Warum rechnest du mit 100px wenn die Höhe doch 190px beträgt? Dein Ansätz wäre schon richtig so.

    Kommentar


    • #3
      hmm mit 190px passt es auch nicht. Kleinere Bilder verhalten sich in dem zusammenhang anders als größere.
      Lurchi ! Lurchi ! Lurchi !

      Kommentar


      • #4
        Dann machst du an anderer Stelle einen Fehler. Poste entweder mal einen Link, wo man das Live sehen kann oder den erzeugten HTML-Code der entsprechenden Stelle.
        Die Zeit hat ihre Kinder längst gefressen

        Kommentar


        • #5
          wenn du die Bilder vertikal mittig haben willst, geh ich davon aus, dass der betreffende div ne statische Größe hat (height: 200px oder sowas...

          dann wäre aus deinem Codeschnipsel

          Code:
          [FONT=monospace]
          [/FONT]   list($width,$height)=getimagesize("img");[FONT=monospace]
          [/FONT]   $marginTop = ($divheight-$height)/2;
          natürlich muss dann $divheight mit dem height: x px; des divs übereinstimmen - aber das packst du schon
          [FONT=monospace]
          das Problem an deinem Code-Schnipsel ist doch, dass es schiefläuft, sobald $height > 100 ist ..
          entsprechend musst du natürlich absichern, dass der $divheight IMMER größer als die größte Bildhöhe ist ...

          [/FONT]
          Zuletzt geändert von eagle275; 28.07.2010, 09:51.
          [font=Verdana]
          Wer LESEN kann, ist klar im Vorteil!
          [/font]

          Kommentar


          • #6
            Hier wäre der HTML-Teil
            Code:
            <div id="producerContainer">
            	<div id="producerInfo"><span class="producerHeadline">Header</span> database by <a href="">Link</a></div>
            	<div id="producerTop">
            		<div id="producerContent">
            			<div id="producerLeft">
            				<div class="producerGlass">
            					<a class="producerNoCat"></a>Bl&auml;tterkatalog</div><div class="producerGlass">
            					<a class="producerGlass"><img src="pic" alt="3100898" style="margin-top: 56px" /></a>Artikel
            				</div>
            				<div class="producerGlass">
            					<a href="files/preisliste_absolut.pdf" target="_blank" class="producerPrice"></a>Preisliste
            				</div>
            				<div class="producerGlass">
            					<a href="" target="_blank" class="producerGlass">
            						<img src="pic" alt="Absolut Lighting" style="margin-top: 3.5px" />
            					</a>
            					Website des Herstellers
            				</div>
            				<div class="clear"></div>
            			</div>
            			<div id="producerRight"></div>
            			<div class="clear"></div>
            		</div>
            	</div>
            	<div id="producerBottom"></div>
            </div>
            Hier wäre der Css Teil
            Code:
            #producerContainer {
            	width: 798px;
            	margin: 0 auto;
            	margin-top: 50px;
            	background-color: #FFCE00;
            	color: #777777;
            }
            #producerInfo {
            	width: 768px;
            	margin: 0 auto;
            	padding-left: 30px;
            	background-color: #FFFFFF;
            }
            #producerInfo .producerHeadline {
            	color: #777777;
            	font-size: 24px;
            }
            #producerContainer a {
            	color: #777777;
            }
            #producerTop {
            	width: 100%;
            	background-image: url("../pix/producerBorder.jpg");
            	background-repeat: repeat-y;
            	background-position: 2px 0;
            	background-color: #FFFFFF;
            }
            #producerContent {
            	width: 798px;
            	background-image: url("../pix/producerTop.jpg");
            	background-repeat: no-repeat;
            	background-color: transparent;
            	padding-top: 80px;
            }
            #producerLeft {
            	width: 450px;
            	float: left;
            	margin-left: 60px;
            	background-color: transparent;
            }
            div.producerGlass {
            	float: left;
            	width: 189px;
            	height: 210px;
            	margin-left: 20px;
            	background-image: url("../pix/glassBG.png");
            	background-repeat: no-repeat;
            	background-color: transparent;
            	text-align: center;
            }
            div.producerGlass img {
            	/*margin-top: 30px;*/
            }
            a.producerGlass {
            	display: block;
            	width: 189px;
            	height: 190px;
            	background-image: url("../pix/glass.png");
            	background-repeat: no-repeat;
            	background-color: transparent;
            }
            a.producerPrice {
            	display: block;
            	width: 189px;
            	height: 190px;
            	background-image: url("../pix/hs_preisliste.png");
            	background-repeat: no-repeat;
            	background-color: transparent;
            }
            a.producerNoPrice {
            	display: block;
            	width: 189px;
            	height: 190px;
            	background-image: url("../pix/glass.png");
            	background-repeat: no-repeat;
            	background-color: transparent;
            }
            a.producerCat {
            	display: block;
            	width: 189px;
            	height: 190px;
            	background-image: url("../pix/hs_katalog.png");
            	background-repeat: no-repeat;
            	background-color: transparent;
            }
            a.producerNoCat {
            	display: block;
            	width: 189px;
            	height: 190px;
            	background-image: url("../pix/glass.png");
            	background-repeat: no-repeat;
            	background-color: transparent;
            }
            #producerRight {
            	float: left;
            	width: 230px;
            	padding-right: 20px;
            	text-align: justify;
            	background-color: transparent;
            }
            #producerBottom {
            	width: 100%;
            	height: 88px;
            	background-image: url("../pix/producerBottom.jpg");
            	background-repeat: no-repeat;
            	background-color: transparent;
            }
            Lurchi ! Lurchi ! Lurchi !

            Kommentar


            • #7
              @eagle275

              versuch ich gleich mal danke
              Lurchi ! Lurchi ! Lurchi !

              Kommentar

              Lädt...
              X