Top-Themen

Aktuelle Themen (A bis Z)

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?

Mitglied: TheMarcoS

TheMarcoS (Level 1) - Jetzt verbinden

15.08.2011 um 21:55 Uhr, 3694 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 ..
Ähnliche Inhalte
Grafik
Software zum designen
Frage von icegetGrafik3 Kommentare

Hallo liebe Community, ich bin auf der Suche nach einer Software mit der ich z.B. eine vorhanden Terrasse oder ...

Netzwerke
Netzwerk Design
gelöst Frage von Herbi1984Netzwerke9 Kommentare

Hi :) Unser neues Netzwerk soll redundant ausgelegt sein. Wir planen entsprechend 2 Cores (stacked - Brocade ICX 7250). ...

Windows Server
ADFS Design
gelöst Frage von pppp666Windows Server2 Kommentare

Hallo zusammen, ich hoffe jemand von euch kann mir meine Frage beantworten. Unsere ADFS Seite sieht so aus Wir ...

Router & Routing

Wie realisiert man ein Unifi-WLAN mit 3x WAN (vDSL)

Frage von StefanKittelRouter & Routing3 Kommentare

Hallo, für ein Projekt benötige ich zwei WLAN (2 SSIDs) mit mehreren APs. Geplant ist Unifi mit CloudKey und ...

Neue Wissensbeiträge
Sonstige Systeme
Es war einmal ein BeOS - Wer erinnert sich noch?
Information von BassFishFox vor 1 TagSonstige Systeme5 Kommentare

Hallo, Bin gerade ueber Haiku gestolpert, von dessen Existenz als "Nachfolger des BeOS" ich wusste nur mich nie wirklich ...

Datenschutz

Microsoft und DSGVO - ob das wohl jemals klappt (Probleme beim Datenabfluss für Office Pro Plus)?

Tipp von VGem-e vor 1 TagDatenschutz3 Kommentare

Servus Kollegen, siehe Aber wer setzt schon MS Office Pro Plus ein? Wie dann der Stand beim "normalen" MS ...

Windows 10

Macht Windows 10.1809 Probleme mit gemappten Netzlaufwerken (betrifft wohl insbes. AMD-Hardware und Trend Micro AV-Produkte)?

Tipp von VGem-e vor 2 TagenWindows 103 Kommentare

Moin Kollegen, grad dazu gefunden und Hatten wir dies nicht bei früheren W10-Upgrades ebenfalls? Da bleibt nur, das Upgrade ...

Humor (lol)

Das neue Miniatur Wunderland OFFICIAL VIDEO - worlds largest model railway - railroad

Information von StefanKittel vor 2 TagenHumor (lol)2 Kommentare

Hallo, wer noch nie im Miniatur Wunderland war, sollte es dringend mal nachholen. Es gibt eine neues Video. Viele ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
Gäste-WLAN durch DD-WRT AP nach einem MikroTik Routerboard
Frage von NukolarLAN, WAN, Wireless16 Kommentare

Hallo, wie der Titel schon sagt möchte ich gerne ein Gäste-WLAN innerhalb eines bestehenden LANs einrichten. Dass die Gäste ...

DSL, VDSL
DSL Monitoring Tool - Quick and dirty?
Frage von george44DSL, VDSL15 Kommentare

Liebe Gemeinde, ich suche ein einfaches und vor allem schnell zu installierendes Monitoring-Tool zur kontinuierlichen Dokumentation (nur) der Internetanbindung. ...

Exchange Server
Outlook findet Postfach nicht
Frage von MaximaxExchange Server11 Kommentare

Hallo, und zwar haben wir auf der Arbeit ein kleines (großes) Exchange 2016 Problem. Exchange meldete gestern, dass die ...

Informationsdienste
Probleme auf dem Server
Frage von LangeLangeInformationsdienste9 Kommentare

Hallo zusammen, ich betreibe die Seite Keine Werbelinks. In der Analyse stellen wir fest, dass die Ladezeit in der ...