kostenloser Webspace werbefrei: lima-city


Problem

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    smyles

    smyles hat kostenlosen Webspace.

    hi leute ich bin neu hier und fange gerade erst mit dem scripten an. nun bin ich auf mein erstes, aber wahrscheinlich ziemlich banales Problem gestoßen.

    Sorry wegen dem Threadtitel, mir ist einfach nicht eingefallen wie ich mein Problem benennen soll.

    Ich möchte von Kasten erstellen der an allen 4 seiten von bildern umgeben ist.
    Zur Veranschaulichung, habe ich folgendes Bild angefertigt.

    http://www.imgupload.org/images/tn_876_kasten.jpg

    Die schwarzen Balken stellen in diesem Fall die Bilder dar und das rote Feld stellt die Fläche dar, die ich erstellen möchte.

    Es tut mir leid, falls es solch einen Thread schon gibt, aber ich habe nichts bezüglich meines Problems gefunden.

    Vielen Dank für eure Hilfe

    lg smyles
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. ho ;)

    Ich habe dir mal ein kleines Beispiel gebastelt. (Getestet im FireFox)

    <html>
    <head>
    	<title>Image Wrap</title>
    
    	<style type="text/css">
    		#wrap {
    			height: 100px;
    			width: 100px;
    			background-color: #258;
    		}
    		
    		#wrap #top {
    			height: 20px;
    			width: 100px;
    			background-color: #F2A;
    			margin-top: 0;
    		}
    		
    		#wrap #left {
    			height: 100px;
    			width: 20px;
    			background-color: #FA5;
    			margin-top: -20px;
    			margin-left: 0px;
    		}
    		
    		#wrap #right {
    			height: 100px;
    			width: 20px;
    			background-color: #3C1;
    			margin-top: -100px;
    			margin-left: 80px;
    		}
    		
    		#wrap #bottom {
    			height: 20px;
    			width: 100px;
    			background-color: #CD7;
    			margin-top: -20px;
    			margin-left: 0;
    		}
    	</style>
    </head>
    
    <body>
    
    	<div id="wrap">
    		<div id="top"></div>
    		<div id="left"></div>
    		<div id="right"></div>
    		<div id="bottom"></div>
    	</div>
    
    </body>
    </html>


    Kurze Erklärung:
    Der HTML Teil besteht eig. nur aus ein paar Div's. (Einem Main Div "wrap", und vier untergeordnete Div's.) Die ganze Formatierung dieser steuerst du nur via CSS.

    Überall wo ich background-color verwendet habe, kannst du natürlich background-image verwenden. (Die genaue Syntax findest du sicher schnell heraus. z.B. bei www.css4you.de )

    Am besten, du spielst dich einfach damit rum :D
    Ich weiß nicht, wie gut du dich auskennst, deswegen (und weil ich schon etwas müde bin ^^) spare ich mir weitere Worte. Falls du noch fragen hast, scheue dich nicht, sie hier los zu werden ;)

    lg
    Sincer

    PS: Zum Titel: Wie wäre es mit "Box mit Bilderrand" :P
    Es geht nicht darum, wie elegant ein Titel ist, sondern nur darum, dass er einen Wiedererkennungswert hat. Wenn alle ihre Threads "Problem" benennen, kannst du sie einfach nicht mehr auseinander halten.
  4. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    Naja, wenn der ganze Rahmen mit dem gleichen Bild ausgefüllt werden soll würd ich einfach ein div mit zb 120 pixel im Quadrat und einem gekacheltem Hintergrundbild machen und da rein mittig dann ein div mit 100 pixel im Quadrat (die Werte als Beispiel) - dann haste auch rundrum einen 10-px-Bilderrand (zb wenn Du passender Wiese ein 10p x 10px großes Bild kachelst), ersparst Dir aber jede Menge rumgecode :biggrin:
    Muß man halt ein wenig Tricksen und Rechnen, damit der Rahmen an allen Seiten paßt ...
  5. Autor dieses Themas

    smyles

    smyles hat kostenlosen Webspace.

    hey

    erst einmal danke für eure Antworten. Ich merke gerade das ich mich noch ein bisschen in css einlesen muss um das richtig machen zu können.
    Ich werde dann vorerst ein paar Seiten zum css-lernen nutzen.

    kann geclosed werden.

    gruß
  6. 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!