kostenloser Webspace werbefrei: lima-city


Bild positionieren

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    maurice-woitzyk

    maurice-woitzyk hat kostenlosen Webspace.

    Hallo,

    ich möchte ein Bild so positionieren das es immer links neben dem layout ist.
    So wie in dem Bild hier: http://www.youscreen.de/6b29161dd9.jpg

    nur möchte ich das nicht mit background-position machen weil das je nach bildschirm dann wo anderst ist!
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. t*****b

    Du kannst dein Hintergrundbild mittig positionieren (background-position:top center;). Damit das Bild dann links von deiner Seite ist, machst du das Bild deutlich Breiter, die Gesamtbreite sollte sein: Breite deiner Webseite + 2 * Breite des Hintergrundbildes. Und schon ist das Bild links neben deiner Webseite.
  4. Autor dieses Themas

    maurice-woitzyk

    maurice-woitzyk hat kostenlosen Webspace.

    okey das hab ich ja schon :D
  5. Mal ein anderer Vorschlag:
    Du kannst dein dein Bild und dein Layout "floaten", und zwar folgendermaßen:

    <img src="mein_bild.png" style="float: left;">
    <div style="float: left;">
    	mein content..
    </div>
    <p style="clear: both;"></p>
  6. h**s

    also das hintergrundbild zu vergrößern ist in meinen augen eine eher ungeschickte möglichkeit da ein eh schon großes bild unnötig noch speicherintensiver gemacht wird.
    auch finde ich das (zumindest dem beispielbild nach) das bild nicht als hintergrundbild ausgezeichnet sein sollte, sondern als <img> mehr sinn macht.

    aus deinen angaben bezüglich
    weil das je nach bildschirm dann wo anderst ist!
    kann man entnehmen das dein layout eine fixe breite hat (und ich gehe mal davon aus das das ganze wie im beispiel im fenster zentriert sein soll) - es stellt sich also erstmal die frage was denn passieren soll wenn das fenster des besuchers zwar breit genug ist um das layout zu zeigen (was andernfalls ja eine horizontale-scrollleiste hervorrufen würde), das bild aber nicht mehr ganz daneben passt:



    layout und bild ganz angezeigen, also mit horizontaler-scrollleiste
    hier könnte man es mit dem vorschlag von alexxus probieren, allerdings befürchte ich das das floating in zusammenhang mit der zentrierung leider nicht von allen browsern gut bewerkstelligt wird. ich würde die eigenschaften einer tabelle zur platzierung nutzen, aus semanitschen gründen allerdings nur als <div>`s via css als tabelle ausgezeichnet:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title></title>
            <style type="text/css">
    			html, body { height:100%; margin:0px; padding:0px; text-align:center; overflow:auto; }
    			.nebeneinander { display:table; height:100%; margin:0px auto; }
    			.nebeneinander > div { display:table-row; }
    			.nebeneinander > div > div { display:table-cell; vertical-align:middle; }
    		</style>
        </head>
        <body>
            
            <div class="nebeneinander">
                <div>
                    <div>
                    	<img src="bild.gif" alt="" />
                    </div>
                    <div>
                        <!-- inhalt -->
                    </div>
                </div>
            </div>
    
        </body>
    </html>

    dabei kannst du auch ganz einfach die vertikale positionierung der beiden bereiche über das vertical-align der zellen steuern, wie oben beide mittig.



    das bild soll abgeschnitten werden, damit keine horizontale-scrollleiste kommt solange das layout ins fenster passt
    hier zb über css position:absolute, was die position anhand der top- und left-werte regelt, relativ zum nächst-äußeren element das auch position:absolute oder position:relative hat (oder letztendlich zum body).
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title></title>
            <style type="text/css">
    			html, body { text-align:center; }
    			.drumherum { position:relative; margin:0px auto;	
    				width:666px; 
    			}
    			.daneben { position:absolute; 
    				width:222px; 
    				left:-222px; 
    				top:88px; 
    			}
    		</style>
        </head>
        <body>
    
            <div class="drumherum">
                <img class="daneben" src="bild.gif" alt="" />
                <!-- inhalt -->
            </div>
    
        </body>
    </html>

  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!