php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 27-07-2010, 17:02
Anbu
 Registrierter Benutzer
Links : Onlinestatus : Anbu ist offline
Registriert seit: Dec 2006
Beiträge: 505
Anbu zeigte ein beschämendes Verhalten in der Vergangenheit
Standard [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 !
Mit Zitat antworten
  #2 (permalink)  
Alt 27-07-2010, 17:45
sili
 Registrierter Benutzer
Links : Onlinestatus : sili ist offline
Registriert seit: Feb 2004
Beiträge: 115
sili ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Warum rechnest du mit 100px wenn die Höhe doch 190px beträgt? Dein Ansätz wäre schon richtig so.
Mit Zitat antworten
  #3 (permalink)  
Alt 28-07-2010, 08:07
Anbu
 Registrierter Benutzer
Links : Onlinestatus : Anbu ist offline
Registriert seit: Dec 2006
Beiträge: 505
Anbu zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

hmm mit 190px passt es auch nicht. Kleinere Bilder verhalten sich in dem zusammenhang anders als größere.
__________________
Lurchi ! Lurchi ! Lurchi !
Mit Zitat antworten
  #4 (permalink)  
Alt 28-07-2010, 08:16
derHund
 PHP Master
Links : Onlinestatus : derHund ist offline
Registriert seit: Aug 2003
Ort: Hundehütte
Beiträge: 5.293
derHund ist zur Zeit noch ein unbeschriebenes Blatt
Standard

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: hund (back in black) | ??? | ??? | ...
Mit Zitat antworten
  #5 (permalink)  
Alt 28-07-2010, 09:49
eagle275
 Registrierter Benutzer
Links : Onlinestatus : eagle275 ist offline
Registriert seit: Jun 2010
Beiträge: 403
eagle275 befindet sich auf einem aufstrebenden Ast
Standard

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:

   list($width,$height)=getimagesize("img");
   $marginTop = ($divheight-$height)/2;
natürlich muss dann $divheight mit dem height: x px; des divs übereinstimmen - aber das packst du schon

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 ...

__________________

Wer LESEN kann, ist klar im Vorteil!

Geändert von eagle275 (28-07-2010 um 09:51 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 28-07-2010, 11:07
Anbu
 Registrierter Benutzer
Links : Onlinestatus : Anbu ist offline
Registriert seit: Dec 2006
Beiträge: 505
Anbu zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

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 !
Mit Zitat antworten
  #7 (permalink)  
Alt 28-07-2010, 11:08
Anbu
 Registrierter Benutzer
Links : Onlinestatus : Anbu ist offline
Registriert seit: Dec 2006
Beiträge: 505
Anbu zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

@eagle275

versuch ich gleich mal danke
__________________
Lurchi ! Lurchi ! Lurchi !
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 01:17 Uhr.