• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Die Bildungsoffensive hier im Forum geht weiter! Jetzt sollen Kreativität und technische Möglichkeiten einen neue Dimension erreichen. Das Thema in diesem Monat lautet - Verkehrte Welt - Hier geht es lang --> Klick

Bilder ausrichten

landplage

landplage

Admin
AT Administration
Registriert
06.02.05
Beiträge
23.852
Ich möchte zwei Bilder (jeseils 104 x 106 px) in einem div jeweils links und rechts ausrichten.

Für das div habe ich in der CSS-Datei folgendes festgelegt

#header {
height: 120px;
background-color: #ffff99;
margin-top: 10px;
margin-bottom: 5px;
margin-left: 20px;
margin-rigth: 20 px;
}
Zum Vergrößern anklicken....
Das ist also oben ein Kopfbereich auf meiner Seite. Darin sollen die beiden Bilder jeweils links und rechts mit einem Abstand von 10 px zum linken bzw. rechten Rand des div ausgerichtet werden, dazwischen soll noch Text angeordnet werden.

Ich kriegs nicht hin. :-c
 
Bissel mehr Infos wären nicht schlecht. Poste am besten den kompletten HTML Code mit samt CSS, damit man sieht, wie was wo verschachtelt ist.
 
Möglicherweise hilft es dir, <div> zu verschachteln. Also für jedes Bild ein extra <div>, welches du innerhalb von <div id="header"> beliebig anordnen kannst.
 
Der Innenabstand wird mit padding definiert. Rechtschreibfehler interpretieren die Browser auch nicht :)

so könnte es funktionieren:

Code: 
<!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="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>foo</title>
	<style type="text/css" media="screen">
	/*<![CDATA[*/
		
	#header {
		height: 120px;
		background-color: #ffff99;
		margin-top: 10px;
		margin-bottom: 5px;
		margin-left: 20px;
		margin-right: 20px;
		
			/* abstand 10px links und rechts */
		padding: 0 10px 0 10px;
		text-align: center;
	}
	#headerLeftImage {
		float: left;
	}
	#headerRightImage {
		float: right;
	}
		
	/*]]>*/
	</style>
</head>
<body>

	<div id="header">
		<img src="fooimage.jpg" id="headerLeftImage" />
		text dazwischen
		<img src="fooimage.jpg" id="headerRightImage" />
	</div>

</body>
</html>
 
  • Like
Reaktionen: landplage und ImperatoR
Hi,
oder so:

Code: 
<!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="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Life is awesome.</title>
    
    <style type="text/css" media="screen">
        #header {
            text-align: right;
        }
        
        .left {
            float: left;
        }
        
        .clear {
            clear: both;
        }
    </style>
</head>

<body>

<div id="header">
    <div class="left">
        This is the left image.
    </div>
    
    <div>
        This could be the right image.
    </div>
    
    <div class="clear"></div>
</div>

</body>
</html>

Nachtrag: Totaler Schwachsinn! Ich sollte vielleicht mal den ersten Post ganz durchlesen. :D
 
Die Variante von creative7even hat funktioniert! :-D:-D:-D

Ich probiere gerade mein neu erworbenes CSSEdit aus - die Anschaffung hat sich gelohnt!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2025 Apfeltalk | Made on a Mac
Oben Unten