Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Wie wurde dieses Design realisiert?

Frage Entwicklung Webentwicklung

Mitglied: TheMarcoS

TheMarcoS (Level 1) - Jetzt verbinden

15.08.2011 um 21:55 Uhr, 3649 Aufrufe, 11 Kommentare

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
Mitglied: Luckyguy
15.08.2011 um 21:59 Uhr
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
Bitte warten ..
Mitglied: Luckyguy
15.08.2011 um 22:08 Uhr
ach und nochwas wenn du es ganz genau ansehen willst dann benutz firebug und schau auf die homepage also wenns die auch online gibt ;)
Bitte warten ..
Mitglied: kaiand1
15.08.2011 um 22:10 Uhr
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.
Bitte warten ..
Mitglied: TheMarcoS
15.08.2011 um 22:11 Uhr
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 ;(
Bitte warten ..
Mitglied: Luckyguy
15.08.2011 um 22:28 Uhr
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
Bitte warten ..
Mitglied: MrTrebron
16.08.2011 um 14:15 Uhr
Servus marco

wo hast du denn das Bild herß

gruß
Norbert
Bitte warten ..
Mitglied: TheMarcoS
16.08.2011 um 14:23 Uhr
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
Bitte warten ..
Mitglied: MrTrebron
16.08.2011 um 14:30 Uhr
Und warum schreibst du Grant nicht einfach mal an?
Bitte warten ..
Mitglied: TheMarcoS
16.08.2011 um 15:30 Uhr
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?

01.
<html> 
02.
<head> 
03.
<style> 
04.
	body {background:#000000;} 
05.
		 
06.
	div#main { 
07.
		background:000; 
08.
		width:840px; 
09.
		position:fixed; 
10.
		margin:auto; 
11.
		margin-top:40px; 
12.
13.
		 
14.
	div#paper_top, div#paper_bottom { 
15.
		background:#FF9900; 
16.
		width:800px; 
17.
		height:25px; 
18.
		margin-left:20px; 
19.
		margin-right:20px; 
20.
		margin-top:0px; 
21.
		margin-bottom:0px; 
22.
		z-index:1; 
23.
24.
		 
25.
	div#paper_top { margin-top: 30px; }	 
26.
	 
27.
	div#paper_flow { 
28.
		background:#FF9900; 
29.
		width:800px; 
30.
		height:auto; 
31.
		margin-left:20px; 
32.
		margin-right:20px; 
33.
		margin-top:0px; 
34.
		margin-bottom:0px; 
35.
		z-index:3;	 
36.
37.
		 
38.
	div#content { 
39.
		background:#FFFFFF;		 
40.
		margin-left:10px; 
41.
		margin-right:10px; 
42.
		margin-top:0px; 
43.
		margin-bottom:0px; 
44.
		padding:5px; 
45.
		z-index:4; 
46.
47.
 
48.
/* ---- Big glues ---- */ 
49.
	div#frame_bigglues { 
50.
		width:840px; 
51.
		height:auto; 
52.
		z-index:2; 
53.
54.
			 
55.
	div#bigglue1 { 
56.
		background:#00FF00; 
57.
		width:50px; 
58.
		height:50px; 
59.
		display:block; 
60.
		float:left; 
61.
62.
		 
63.
	div#bigglue2 { 
64.
		background:#00FF00; 
65.
		width:50px; 
66.
		height:50px; 
67.
		float:left; 
68.
		display:block; 
69.
		margin-left:740px; 
70.
		}		 
71.
/* ----------------------- */ 
72.
 
73.
/* ---- Small glues ---- */		 
74.
 
75.
	div#frame_glues { 
76.
		width:800px; 
77.
		height:auto; 
78.
		margin-left:20px; 
79.
		z-index:5; 
80.
81.
 
82.
	div#glue1 { 
83.
		background:#FF0000; 
84.
		width:20px; 
85.
		height:20px; 
86.
		float:left; 
87.
		margin-left:6px; 
88.
		margin-bottom:4px; 
89.
90.
			 
91.
		 
92.
	div#glue2 { 
93.
		background:#FF0000;	 
94.
		width:20px; 
95.
		height:20px; 
96.
		float:left; 
97.
		margin-left:748px; 
98.
99.
/* ----------------------- */		 
100.
	</style> 
101.
 
102.
</head> 
103.
 
104.
<body> 
105.
 
106.
 
107.
<div id="main"> 
108.
 
109.
    <!-- grosse Klebstreifen --> 
110.
    <div id="frame_bigglues"> 
111.
        <div id="bigglue1"></div> 
112.
        <div id="bigglue2"></div> 
113.
    </div> 
114.
 
115.
	<!-- oberer Teil des alten Papiers --> 
116.
    <div id="paper_top"></div> 
117.
     
118.
    <!-- kleine Klebstreifen --> 
119.
    <div id="frame_glues"> 
120.
        <div id="glue1"></div> 
121.
        <div id="glue2"></div> 
122.
     </div> 
123.
     
124.
  	<!-- Hintergrund, altes Papier --> 
125.
    <div id="paper_flow"> 
126.
   	  <!-- Content, weiss, Text --> 
127.
      <div id="content"> 
128.
   	    <p>Content</p> 
129.
   	    <p>&nbsp;</p> 
130.
   	    <p>&nbsp;</p> 
131.
   	    <p>&nbsp;</p> 
132.
   	    <p>&nbsp;</p> 
133.
   	    <p>&nbsp;</p> 
134.
   	    <p>&nbsp;</p> 
135.
   	    </div> 
136.
    </div> 
137.
    <!-- unterer Teil des alten Papiers --> 
138.
    <div id="paper_bottom"></div> 
139.
     
140.
</div> 
141.
</body> 
142.
</html>
Bitte warten ..
Mitglied: TheMarcoS
22.08.2011 um 21:59 Uhr
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

01.
<html> 
02.
<head> 
03.
<style> 
04.
	body {background:#000000;} 
05.
	 
06.
	div { position:relative;} 
07.
		 
08.
	div#main { 
09.
		background:000; 
10.
		width:880px; 
11.
		margin:auto; 
12.
		margin-top:40px; 
13.
14.
		 
15.
	div#paper_top, div#paper_bottom { 
16.
		background:#FF9900; 
17.
		width:800px; 
18.
		height:25px; 
19.
		margin-left:40px;		 
20.
		margin-top:0px; 
21.
		margin-bottom:0px; 
22.
		z-index:1; 
23.
24.
		 
25.
	div#paper_top { margin-top: 30px; }	 
26.
	 
27.
	div#paper_flow { 
28.
		background:#FF9900; 
29.
		width:800px; 
30.
		height:auto; 
31.
		margin-left:40px;		 
32.
		margin-top:0px; 
33.
		margin-bottom:0px; 
34.
		z-index:3;	 
35.
36.
		 
37.
	div#content { 
38.
		background:#FFFFFF;	 
39.
		width:790px;	 
40.
		margin-left:40px; 
41.
		margin-top:0px; 
42.
		margin-bottom:0px; 
43.
		padding:5px; 
44.
		z-index:4; 
45.
46.
 
47.
/* ---- Big glues ---- */ 
48.
	div#frame_bigglues { 
49.
		width:880px; 
50.
		height:auto; 
51.
		position:absolute; 
52.
		z-index:2; 
53.
54.
			 
55.
	div#bigglue1 { 
56.
		background:#00FF00; 
57.
		width:150px; 
58.
		height:150px; 
59.
		display:block; 
60.
		float:left; 
61.
62.
		 
63.
	div#bigglue2 { 
64.
		background:#00FF00; 
65.
		width:150px; 
66.
		height:150px; 
67.
		float:left; 
68.
		display:block; 
69.
		margin-left:580px; 
70.
		}		 
71.
/* ----------------------- */ 
72.
 
73.
/* ---- Small glues ---- */		 
74.
 
75.
	div#frame_glues { 
76.
		width:800px; 
77.
		height:auto; 
78.
		margin-left:40px; 
79.
		position:absolute; 
80.
		z-index:5; 
81.
	 
82.
83.
 
84.
	div#glue1 { 
85.
		background:#FF0000; 
86.
		width:20px; 
87.
		height:20px; 
88.
		float:left; 
89.
		margin-left:6px; 
90.
		margin-bottom:4px; 
91.
92.
			 
93.
		 
94.
	div#glue2 { 
95.
		background:#FF0000;	 
96.
		width:20px; 
97.
		height:20px; 
98.
		float:left; 
99.
		margin-left:748px; 
100.
101.
/* ----------------------- */		 
102.
	</style> 
103.
 
104.
</head> 
105.
 
106.
<body> 
107.
 
108.
 
109.
<div id="main"> 
110.
 
111.
 
112.
     
113.
    <!-- grosse Klebstreifen --> 
114.
    <div id="frame_bigglues"> 
115.
        <div id="bigglue1"></div> 
116.
        <div id="bigglue2"></div> 
117.
    </div> 
118.
 
119.
	<!-- oberer Teil des alten Papiers --> 
120.
    <div id="paper_top"></div> 
121.
 
122.
     
123.
    <!-- kleine Klebstreifen --> 
124.
    <div id="frame_glues"> 
125.
        <div id="glue1"></div> 
126.
        <div id="glue2"></div> 
127.
     </div> 
128.
     
129.
  	<!-- Hintergrund, altes Papier --> 
130.
    <div id="paper_flow"></div> 
131.
     
132.
    <!-- Content, weiss, Text --> 
133.
      <div id="content"> 
134.
   	    <p>Content</p> 
135.
   	    <p>&nbsp;</p> 
136.
   	    <p>&nbsp;</p> 
137.
   	    <p>&nbsp;</p> 
138.
   	    <p>&nbsp;</p> 
139.
   	    <p>&nbsp;</p> 
140.
   	    <p>&nbsp;</p> 
141.
   	  </div> 
142.
     
143.
     
144.
    <!-- unterer Teil des alten Papiers --> 
145.
    <div id="paper_bottom"></div> 
146.
     
147.
</div> 
148.
 
149.
 
150.
 
151.
</body> 
152.
</html>
Bitte warten ..
Mitglied: Florian.Sauber
18.10.2011 um 21:46 Uhr
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
16ec89bee41b26d69263908a3af28004 - Klicke auf das Bild, um es zu vergrößern

Für den weiteren Verlauf des Papiers ein weiteres:
UNTEN.JPG
89c0dccc0f196d98177842b208c00646 - Klicke auf das Bild, um es zu vergrößern

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.

01.
<html> 
02.
<head> 
03.
<style type="text/css"> 
04.
<!-- 
05.
body {background:#333333;} 
06.
#container {width:400px; background-image:url(unten.jpg);} 
07.
#inhalt {margin: -130px 80px 0px 85px;} 
08.
--> 
09.
</style> 
10.
</head> 
11.
<body> 
12.
 <div id="container"><img src="oben.jpg"> 
13.
  <div id="inhalt"> 
14.
   <h1>Die Wortberge</h1> 
15.
   <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> 
16.
  </div> 
17.
 </div> 
18.
</body> 
19.
</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..
5de8e8a00655b17b5e812e6ca3ca7e19 - Klicke auf das Bild, um es zu vergrößern

LG Florian
Bitte warten ..
Neuester Wissensbeitrag
Humor (lol)

Linkliste für Adventskalender

(3)

Information von nikoatit zum Thema Humor (lol) ...

Ähnliche Inhalte
Windows Server
Windows Server 2008 R2 Aero-Design auf Remote Desktop geht nicht (3)

Frage von Motherboard33 zum Thema Windows Server ...

Notebook & Zubehör
Laptop schreibt groß weiter, obwohl Shift losgelassen wurde (6)

Frage von Yauhun zum Thema Notebook & Zubehör ...

Windows 7
Windows 7 Home Anytime Upgrade wurde nicht ausgeführt (18)

Frage von tsunami zum Thema Windows 7 ...

Heiß diskutierte Inhalte
Windows Server
DHCP Server switchen (25)

Frage von M.Marz zum Thema Windows Server ...

SAN, NAS, DAS
gelöst HP-Proliant Microserver Betriebssystem (14)

Frage von Yannosch zum Thema SAN, NAS, DAS ...

Grafikkarten & Monitore
Win 10 Grafikkarte Crash von Software? (13)

Frage von Marabunta zum Thema Grafikkarten & Monitore ...

Windows 7
Verteillösung für IT-Raum benötigt (12)

Frage von TheM-Man zum Thema Windows 7 ...