• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Viele hassen ihn, manche schwören auf ihn, wir aber möchten unbedingt sehen, welche Bilder Ihr vor Eurem geistigen Auge bzw. vor der Linse Eures iPhone oder iPad sehen könnt, wenn Ihr dieses Wort hört oder lest. Macht mit und beteiligt Euch an unserem Frühjahrsputz ---> Klick

Bilder ausrichten

landplage

landplage

Admin
AT Administration
Registriert
06.02.05
Beiträge
23.457
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
 
Slashwalker

Slashwalker

Winterbanana
Registriert
15.05.06
Beiträge
2.213
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.
 
ImperatoR

ImperatoR

Roter Astrachan
Registriert
02.12.06
Beiträge
6.261
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.
 
creative7even

creative7even

Jerseymac
Registriert
23.02.05
Beiträge
454
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
mschoening

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
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
 
landplage

landplage

Admin
AT Administration
Registriert
06.02.05
Beiträge
23.457
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-2024 Apfeltalk | Made on a Mac
Oben Unten