Wie wurde dieses Design realisiert?

Hallo zusammen

Ich habe folgendes Design entdeckt:

http://lh5.ggpht.com/gtsiligkakis/RwQNe6fNR2I/AAAAAAAAAYc/mwsyZK1PdPY/g ...

Ich möchte gerne dieses Design ähnlich bei meiner neuen Website verwenden. Leider ist mir nicht ganz klar, wie diese Seite realisiert wurde.

Mein Problem ist der Content mit dem weissen Hintergrund und dem Text. Er liegt über dem altem Papier. Das alte Papier ist aber oben mit Klebstreifen gefestigt und weiter unten wird ja links und rechts ein Rahmen mit dem alten Papier repeatet.

Wie wurde das aber gelöst? Ich dachte mir zuerst, der weisse Text sei mit einem div darüber gelegt. Aber dann könnte sich der BG ja nicht mehr am Text anpassen. Ich komme einfach nicht auf eine Lösung...

Hat jemand eine Idee?

Danke und Gruss
Marco

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 171535

Url: https://administrator.de/contentid/171535

Ausgedruckt am: 22.11.2024 um 17:11 Uhr

11 Kommentare

Neuester Kommentar

das ist nicht übermäsig schwer den oberen Teil machst als headergrafik und position:absolute und das klebeding ist transparent dadurch sieht man den text durch kann man noch mit dem z-index arbeiten...und
der hintergrund wie sagt man so schön man tut eine grafik mit der gesamten breite und einer niedrigen höhe runterkacheln.... also viel daran is eben vom grafiker gemacht oder man muss sich in grafik bearbeitung auskennen die CSS programmierung bei so etwas ist nicht sonderlich schwierig

ach und nochwas wenn du es ganz genau ansehen willst dann benutz firebug und schau auf die homepage also wenns die auch online gibt ;)

Du kannst ja auch den Quelletext ansehen und in dein Programiertool laden und ansehen.
Da siehste wie die einzelnden Flächen zusammengesetzt sind.
SO kannst du des dann auch für deine Seite zb machen.

Danke für die Tipps. Was du sagst klingt logisch aber ich kapier es immer noch nicht so ganz. Aber ich probier mal was...

Ja ich weiss aber das Design habe ich nur als Bild gefunden ;(

also bei webseiten ist sowieso bei vielen sachen mehr schein als sein wenn zum beispiel diese "ROBUST" unter dem klebezettel variabel sein soll dann ist es ein wenig schwerer als wenn man es fest einbinden kann weil dann kan man die transparenz sogar mit dem wort so einbinden;) und die sache mit dem runterkacheln googel mal nach repeat-y CSS da findest auch noch was darüber

Servus marco

wo hast du denn das Bild herß

gruß
Norbert

Von Google!

Ich hab einfach nach Design-Ideen gesucht. Aber auf der Website der Design-Firma (grantmx) die diese Seite erstellt hat ist sie als Referenz nicht mehr vorhanden... :-S

Und warum schreibst du Grant nicht einfach mal an?

Ich habe eine Lösung gefunden....!

Wenn man es so macht, sieht es sehr ähnlich aus. Mein Problem ist jetzt nur noch die kleinen, roten Vierecke (die kleinen Klebstreifen) Sie sind jetzt noch mit dem oberen Rand bündig. Sie sollten den weissen Bereich aber ein bisschen nach oben überlappen. Wie soll ich das am besten lösen?

<html>
<head>
<style>
	body {background:#000000;}
		
	div#main {
		background:000;
		width:840px;
		position:fixed;
		margin:auto;
		margin-top:40px;
		}
		
	div#paper_top, div#paper_bottom {
		background:#FF9900;
		width:800px;
		height:25px;
		margin-left:20px;
		margin-right:20px;
		margin-top:0px;
		margin-bottom:0px;
		z-index:1;
		}
		
	div#paper_top { margin-top: 30px; }	
	
	div#paper_flow {
		background:#FF9900;
		width:800px;
		height:auto;
		margin-left:20px;
		margin-right:20px;
		margin-top:0px;
		margin-bottom:0px;
		z-index:3;	
		}
		
	div#content {
		background:#FFFFFF;		
		margin-left:10px;
		margin-right:10px;
		margin-top:0px;
		margin-bottom:0px;
		padding:5px;
		z-index:4;
		}

/* ---- Big glues ---- */
	div#frame_bigglues {
		width:840px;
		height:auto;
		z-index:2;
		}
			
	div#bigglue1 {
		background:#00FF00;
		width:50px;
		height:50px;
		display:block;
		float:left;
		}
		
	div#bigglue2 {
		background:#00FF00;
		width:50px;
		height:50px;
		float:left;
		display:block;
		margin-left:740px;
		}		
/* ----------------------- */

/* ---- Small glues ---- */		

	div#frame_glues {
		width:800px;
		height:auto;
		margin-left:20px;
		z-index:5;
		}

	div#glue1 {
		background:#FF0000;
		width:20px;
		height:20px;
		float:left;
		margin-left:6px;
		margin-bottom:4px;
		}
			
		
	div#glue2 {
		background:#FF0000;	
		width:20px;
		height:20px;
		float:left;
		margin-left:748px;
		}
/* ----------------------- */		
	</style>

</head>

<body>


<div id="main">  

    <!-- grosse Klebstreifen -->
    <div id="frame_bigglues">  
        <div id="bigglue1"></div>  
        <div id="bigglue2"></div>  
    </div>

	<!-- oberer Teil des alten Papiers -->
    <div id="paper_top"></div>  
    
    <!-- kleine Klebstreifen -->
    <div id="frame_glues">  
        <div id="glue1"></div>  
        <div id="glue2"></div>  
     </div>
    
  	<!-- Hintergrund, altes Papier -->
    <div id="paper_flow">  
   	  <!-- Content, weiss, Text -->
      <div id="content">  
   	    <p>Content</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    </div>
    </div>
    <!-- unterer Teil des alten Papiers -->
    <div id="paper_bottom"></div>  
    
</div>
</body>
</html>

Hallo zusammen.
Ich habe mein Design überarbeitet. Es sieht langesam besser aus.

Ich habe aber noch ein paar Probleme:
1. die grünen und roten Divs sollten noch ein paar Pixel nach oben, über die andern Divs platziert werden. Aber sie passen sich immer am oberen Rand an. Wie kann ich das ändern?
2. der Content ist jetzt am richtigen Ort. Jedoch wird jetzt das Div "paper_flow" (also der Rand links und rechts vom Content) nicht mehr angezeigt. Wenn ich ihm eine Höhe gebe, schibt er den Content Div nach unten. Der Content sollte aber über dem "paper_flow" sein. Was ist falsch? Wenn dann das funktionieren würde ist aber ein anderes Problem da: wie passt sich die Höhe des "paper_flow" dann am Inhalt des Content Divs an???

Kann mir jemand weiterhelfen?

Danke und Gruss
Marco

<html>
<head>
<style>
	body {background:#000000;}
	
	div { position:relative;}
		
	div#main {
		background:000;
		width:880px;
		margin:auto;
		margin-top:40px;
		}
		
	div#paper_top, div#paper_bottom {
		background:#FF9900;
		width:800px;
		height:25px;
		margin-left:40px;		
		margin-top:0px;
		margin-bottom:0px;
		z-index:1;
		}
		
	div#paper_top { margin-top: 30px; }	
	
	div#paper_flow {
		background:#FF9900;
		width:800px;
		height:auto;
		margin-left:40px;		
		margin-top:0px;
		margin-bottom:0px;
		z-index:3;	
		}
		
	div#content {
		background:#FFFFFF;	
		width:790px;	
		margin-left:40px;
		margin-top:0px;
		margin-bottom:0px;
		padding:5px;
		z-index:4;
		}

/* ---- Big glues ---- */
	div#frame_bigglues {
		width:880px;
		height:auto;
		position:absolute;
		z-index:2;
		}
			
	div#bigglue1 {
		background:#00FF00;
		width:150px;
		height:150px;
		display:block;
		float:left;
		}
		
	div#bigglue2 {
		background:#00FF00;
		width:150px;
		height:150px;
		float:left;
		display:block;
		margin-left:580px;
		}		
/* ----------------------- */

/* ---- Small glues ---- */		

	div#frame_glues {
		width:800px;
		height:auto;
		margin-left:40px;
		position:absolute;
		z-index:5;
	
		}

	div#glue1 {
		background:#FF0000;
		width:20px;
		height:20px;
		float:left;
		margin-left:6px;
		margin-bottom:4px;
		}
			
		
	div#glue2 {
		background:#FF0000;	
		width:20px;
		height:20px;
		float:left;
		margin-left:748px;
		}
/* ----------------------- */		
	</style>

</head>

<body>


<div id="main">  


    
    <!-- grosse Klebstreifen -->
    <div id="frame_bigglues">  
        <div id="bigglue1"></div>  
        <div id="bigglue2"></div>  
    </div>

	<!-- oberer Teil des alten Papiers -->
    <div id="paper_top"></div>  

    
    <!-- kleine Klebstreifen -->
    <div id="frame_glues">  
        <div id="glue1"></div>  
        <div id="glue2"></div>  
     </div>
    
  	<!-- Hintergrund, altes Papier -->
    <div id="paper_flow"></div>  
    
    <!-- Content, weiss, Text -->
      <div id="content">  
   	    <p>Content</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	  </div>
    
    
    <!-- unterer Teil des alten Papiers -->
    <div id="paper_bottom"></div>  
    
</div>



</body>
</html>

Hallo zusammen,

acuh wenn der Beitrag schon "gelöst" ist:

Du machst Dir das wohl viel zu kompliziert. Das Template wurde defnitiv in Photoshop o.ä. layoutet, mit minimal 2 und maximal 4 Slices für den bildgebenden Hintergrund. 3, falls es keinen Abschluss des -Du nennst es- alten Papiers gibt.

Die Klebestreifen sind mit an ziemlicher Sicherheit grenzend Bestandteil des Bildes und -da würd ich wetten, wenn ich wetten würde- in keinem Fall eigene DIVs, die dann irgendwie mit z-index ebenengeordnet werden. Viel zu buggy und anfällig...

Unterhalb des Menübereichs gibt es ein, evtl. auch ein zweigeteiltes Bild. Ich machs mal vereinfacht mit einem...
OBEN.JPG

Für den weiteren Verlauf des Papiers ein weiteres:
UNTEN.JPG

Ich würde behaupten, dass OBEN.JPG im Originallayout relativ groß gewählt wurde. Auf Deinem Screenshot bis zur Kommentarfunktion des ersten Beitrags "My Interview with...". Das kann auch durchaus Sinn machen, falls das ursprüngliche Layout so geplant war, dass der Papier-Hintergrund eine annähernd bildschirmfüllende Mindesthöhe aufweisen sollte.
Das sich wiederholende Teilstück -ich nenn es hier UNTEN.JPG- wurde im Original ausgeschnitten:
Die obere Begrenzung lag dabei wohl in Höhe der 7.Zeile des ersten Textblocks von oben, die untere knapp oberhalb von "From the Notebook". Wenn du den ausfransenden linken Rand betrachtest wird Dir die repieterung auffallen...

Alles andere ist schnell gemacht:
Ein Container nimmt OBEN.JPG als Inhaltselement und UNTEN.JPG als background-image auf. Darin befindet sich dann einfach der Inhalt, der über margin eingerückt wird.

<html>
<head>
<style type="text/css">  
<!--
body {background:#333333;}
#container {width:400px; background-image:url(unten.jpg);}
#inhalt {margin: -130px 80px 0px 85px;}
-->
</style>
</head>
<body>
 <div id="container"><img src="oben.jpg">  
  <div id="inhalt">  
   <h1>Die Wortberge</h1>
   <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</p>
  </div>
 </div>
</body>
</html>

Muss man im Produktivbetrieb natürlich sauberer umsetzten und die Divs klarer abgrenzen...
Aber dann siehts mit wenigen Zeilen Code halt auch so aus..