✔ Probleme mit Bildausrichtung

K

Kalito

Erfahrenes Mitglied
hallo,

ich lasse aus einem Verzeichnis´Bilder in einen div-Container anzeigen

HTML: 
<div class="arten">
                        <p>&nbsp;&nbsp;Premium Netzwerk Partner</p>
                            <?PHP
                            $files = array();
                            $verz = opendir('images/logo/Premium');
                            while($file = readdir($verz)){
                                $info = @getimagesize($file);
                                if($file != "." && $file != ".." &&  !is_dir($file) && $file != "bildanzeige.php"){
                                    $files[] = $file;
                                }
                                $i++;
                            }
                            sort($files);
                            for($i=0; $i<count($files); $i++){
                                if($i%6 == 0) echo '<br /><br />';
                                echo '&nbsp;<img src="http://www.tutorials.de/images/logo/Premium/'.$files[$i].'" border="0">&nbsp; ';
                            }
                            closedir($verz);
                            ?>
                    </div>

Mein Problem nur ist, das die letzte Reihe, da nicht vollständig, mittig und nicht links positioniert wird. Wie kiann ich das am besten lösen?

hier noch der css teil des div:

Code: 
.arten p{
    border-top-color: #000000;
    border-top-style: dotted;
    border-top-width: 1px;
    width: 700px;
    text-align: left;
    border-bottom-color: #000000;
    border-bottom-style:dotted;
    border-bottom-width: 1px;
    font-size: 18px;
    position: relative;
    border-color: #C0C0C0;
}
.arten{
    position: relative;
    left: -150px;
}
 
Hey Kalito,

bin mir nicht sicher, ob ich verstanden hab, wie dus ausgerichtet haben willst... Hier mal ne mögliche Lösung:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
	
		<style type="text/css">
		<!--
		
		.arten {
			float:left;
		}
		
		.arten h1 {
			border-top-color: #000000;
			border-top-style: dotted;
			border-top-width: 1px;
			border-bottom-color: #000000;
			border-bottom-style:dotted;
			border-bottom-width: 1px;
			
			border-color: #C0C0C0; // diese Farb-Angabe überschreibt die beiden oberen!
			
			text-align: left;
			font-size: 18px;
			font-weight:normal;
			
			padding-left:5px;
			width:700px;
		}
		
		.arten img {
			padding:0px 5px;
		}
		
		//-->
		</style>
	
	</head>
	<body>

		<div class="arten">
			<h1>Premium Netzwerk Partner</h1>
			<p>
				<img src="http://style.tutorials.de/v10/loginbox/settings.png" border="0">
				<img src="http://style.tutorials.de/v10/loginbox/settings.png" border="0">
				<img src="http://style.tutorials.de/v10/loginbox/settings.png" border="0">
				<img src="http://style.tutorials.de/v10/loginbox/settings.png" border="0">
				<img src="http://style.tutorials.de/v10/loginbox/settings.png" border="0">
				<img src="http://style.tutorials.de/v10/loginbox/settings.png" border="0">
			</p>
			<p>
				<img src="http://style.tutorials.de/v10/loginbox/settings.png" border="0">
				<img src="http://style.tutorials.de/v10/loginbox/settings.png" border="0">
				<img src="http://style.tutorials.de/v10/loginbox/settings.png" border="0">
				<img src="http://style.tutorials.de/v10/loginbox/settings.png" border="0">
			</p>
		</div>
										
	</body>
</html>

Du darfst zur Ausrichtung nicht &nbsp; und <br /> verwenden. Diese Zeichen solltest du wie Buchstaben verwenden, also im Text. Wenn du Layout-Elemente ausrichten willst, packst du die besser in Blöcke wie p oder div und richtest sie per css aus. Auch den seitlichen Abstand kann man über padding hervorragend anpassen.

Mehr Infos zu HTML und CSS findest du bei SELFHTML: http://de.selfhtml.org/

Grüße,
Frezl
 
Kalito hat gesagt.:
Mein Problem nur ist, das die letzte Reihe, da nicht vollständig, mittig und nicht links positioniert wird. Wie kiann ich das am besten lösen?
Zum Vergrößern anklicken....
CSS: 
.arten p img { float:left; }

... bewirkt für die nun sich selbst von rechts umfliessenden Bildelemente eine linksbündige Ausrichtung innerhalb ihres Anzeigebereichs, die auch dann beibehalten wird, wenn der Browser im Textfluß für sie einen Umbruch vornimmt, weil das Zeilenende erreicht ist, und/oder ihre Anzahl die begonnene Zeile nicht vollständig ausfüllt.

Andernfalls in einem der von dir hier nicht gezeigten weiteren übergeordneten Elemente die geerbte zentrierte Ausrichtung (z.B. von <body> an alle Nachfolgeelemente des Dokumentbaums vererbt, oder durch einen übergeordenten und umschließenden <center></center>-Tag hervorgerufen) mittels text-align:left aufheben.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück