1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Bilder ausrichten

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von landplage, 26.01.08.

  1. landplage

    landplage Admin
    AT Administration

    Dabei seit:
    06.02.05
    Beiträge:
    21.484
    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

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

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    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.
     
  3. ImperatoR

    ImperatoR Ananas Reinette

    Dabei seit:
    02.12.06
    Beiträge:
    6.235
    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.
     
  4. creative7even

    creative7even Jerseymac

    Dabei seit:
    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>
    
     
    landplage und ImperatoR gefällt das.
  5. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    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
     
  6. landplage

    landplage Admin
    AT Administration

    Dabei seit:
    06.02.05
    Beiträge:
    21.484
    Die Variante von creative7even hat funktioniert! :-D:-D:-D

    Ich probiere gerade mein neu erworbenes CSSEdit aus - die Anschaffung hat sich gelohnt!
     
  7. ImperatoR

    ImperatoR Ananas Reinette

    Dabei seit:
    02.12.06
    Beiträge:
    6.235
    Jaaa! Der mit Abstand beste CSS-Editor. :-D
     

Diese Seite empfehlen