HpBk-TemplateWorld

Design Team

Design-Übersicht

» Dieses Design darfst du kostenlos für deine Homepage verwenden. Unter "Und so geht´s" (weiter unten auf dieser Seite) findest du eine kurze Anleitung, wie du dieses Design im Homepage-Baukasten einfügst. Mit einem Klick auf das Bild des Designs vergrößert du die Vorschau.

» Bitte beachte:
Die Copyright Informationen im Footer des Designs dürfen auf keinen Fall entfernt oder geändert werden, da du sonst gegen die Lizenz- und Nutzungsrechte des Designs verstößt. Der Link zu HpBk-TemplateWorld darf ebenfalls nicht verändert werden. Dieses Design ist ein kostenloses Design von www.templatemo.com.

Design Team

» Ganz schön speziell
Das Template "Design Team" ist ein echter Hingucker. Das relativ dunkel gehaltene Design überzeugt durch eine klare Struktur und einem bunten Header mit knalligen Farben. Es gibt viel Platz im Content, auch ein Footer ist vorhanden. Einen Infotext kann man übrigens auch noch neben dem Menü mit einem Bild platzieren.

» Bewertung:

Design-Code

» Text über dem Design | Code in einem separaten Fenster öffnen.

<div id="templatemo_wrapper"> <div id="templatemo_container"> <div id="templatemo_header_panel"> <div id="logo"> </div> </div> <div id="templatemo_top_panel"> <div id="templatemo_latest_project"> <div class="image_frame_01"> </div> <div id="latest_project_content"> <div class="header_01">Free CSS Template</div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat mi lacus, sed accumsan neque. Donec condimentum molestie laoreet.<br>  </p> <div class="rc_btn_01"><a href="#" _fcksavedurl="#">Read more</a></div> </div> <div class="cleaner"> </div> </div> <div id="templatemo_menu"> <ul>     <li><a href="#" _fcksavedurl="#" class="current">Home</a></li>     <li><a href="#" _fcksavedurl="#">Services</a></li>     <li><a href="#" _fcksavedurl="#">Portfolio</a></li>     <li><a href="http://www.templatemo.com/page/1" _fcksavedurl="http://www.templatemo.com/page/1" target="_parent">Templates</a></li>     <li><a href="#" _fcksavedurl="#">About Us</a></li>     <li><a href="#" _fcksavedurl="#">About Us</a></li>     <li><a href="#" _fcksavedurl="#">About Us</a></li>     <li><a href="#" _fcksavedurl="#">Contact Us</a></li> </ul> </div> </div> <div id="templatemo_content"> <div id="templatemo_content_left"> <div class="content_left_two_column margin_right_40"> </div> <div class="content_left_two_column"> </div> <div class="cleaner"> </div>

» Text unter dem Design | Code in einem separaten Fenster öffnen.

</div>  <div id="templatemo_content_right"> <div class="content_right_section"> <div class="header_02" style="margin-left: 80px;">News</div> <div class="news_section"> <div class="news_image"><a href="#" _fcksavedurl="#"><br> </a></div> <div class="news_content"> <div class="news_title">onec adipiscing luctus</div> <p>Maecenas vel libero quis diam sollicitudin euismod ac eget quam. Quisque hendrerit.                      <br>  </p> </div> </div> <div class="margin_bottom_20"> </div> <div class="news_section"> <div class="news_image"><a href="http://www.templatemo.com" _fcksavedurl="http://www.templatemo.com" target="_parent"><br> </a></div> <div class="news_content"> <div class="news_title">Quisque interdum urna a</div> <p>In suscipit, odio in egestas hendrerit, lorem purus tristique elit, at mattis urna diam sit amet.                 <br>  </p> </div> </div> <div class="margin_bottom_20"> </div> <div class="news_section"> <div class="news_image"><a href="#" _fcksavedurl="#"><br> </a></div> <div class="news_content"> <div class="news_title">Praesent non dui</div> <p>Vestibulum eget libero ante, vel hendrerit velit. Pellentesque habitant morbi tristique senectus et.                     <br>  </p> </div> </div> <div class="margin_bottom_20"> </div> <a href="http://validator.w3.org/check?uri=referer" _fcksavedurl="http://validator.w3.org/check?uri=referer"><br> </a></div> </div>  <div class="cleaner"> </div> </div> <div id="templatemo_footer">Copyright © 2048 <a href="http://www.templatemo.com" _fcksavedurl="http://www.templatemo.com" target="_parent"><strong>Your Company Name</strong></a> | Designed by <a href="http://www.templatemo.com/page/1" _fcksavedurl="http://www.templatemo.com/page/1" target="_parent">Free CSS Templates</a> | Coding by <a href="http://hpbk-templateworld.de.tl" _fcksavedurl="http://hpbk-templateworld.de.tl">HpBk-TemplateWorld</a></div> </div> </div>

» CSS-Code ohne Style Tags | Code in einem separaten Fenster öffnen.

/* ---Dieses Design und noch viele weitere kostenlose Designs findest du auf HpBk-TemplateWorld.de.tl - der Community für Designs und Tutorials im HpBk.--- */

#extraDiv1 {
display:none;
}

#extraDiv2 {
display:none;
}

#extraDiv3 {
display:none;
}

#extraDiv4 {
display:none;
}

#extraDiv5 {
display:none;
}

#extraDiv6 {
display:none;
}

#pre_header {
display:none;
}

#post_header {
display:none;
}

#pre_content {
display:none;
}

#nav_heading {
display:none;
}

#nav {
display:none;
}

div.header {
display:none;
}

h1#title {
display:none;
}

h2#title span {
display:none;
}

td[height="102"] {
position:absolute;
left:50%;
margin-left:-384px;
}

body
{
	line-height:1.5em;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333333;
	background:#262626  none;
	margin:0;
	padding:0;
}

a:link,a:visited
{
	color:#e77e02;
	text-decoration:none;
	font-weight:bold;
}

a:active,a:hover
{
	color:#e77e02;
	text-decoration:underline;
}

p
{
	margin:0;
	padding:0;
}

img
{
	border:none;
	margin:0;
	padding:0;
}

.cleaner
{
	clear:both;
	width:100%;
	height:0;
	font-size:0;
}

.margin_bottom_10
{
	clear:both;
	width:100%;
	height:10px;
	font-size:1px;
}

.margin_bottom_20
{
	clear:both;
	width:100%;
	height:20px;
	font-size:1px;
}

.margin_bottom_30
{
	clear:both;
	width:100%;
	height:30px;
	font-size:1px;
}

.margin_bottom_40
{
	clear:both;
	width:100%;
	height:40px;
	font-size:1px;
}

.margin_bottom_50
{
	clear:both;
	width:100%;
	height:50px;
	font-size:1px;
}

.margin_bottom_60
{
	clear:both;
	width:100%;
	height:60px;
	font-size:1px;
}

.margin_right_40
{
	margin-right:40px;
}

.border_bottom
{
	border-bottom:1px solid #999;
}

.bi_para
{
	font-style:italic;
	color:#137dc0;
}

.rc_btn_01 a
{
	display:block;
	width:100px;
	font-size:13px;
	background: none left center no-repeat;
	color:#5fccff;
	font-weight:bold;
	text-decoration:none;
	padding:1px 0 1px 20px;
}

.rc_btn_02 a
{
	float:left;
	display:block;
	width:100px;
	font-size:12px;
	background: none left center no-repeat;
	color:#e77e02;
	font-weight:bold;
	text-decoration:none;
	padding:1px 0 1px 20px;
}

.header_01
{
	color:#5fccff;
	font-size:18px;
	font-weight:bold;
	margin:0 0 20px;
	padding:3px 0 10px;
}

.header_02
{
	color:#e20000;
	font-size:20px;
	font-weight:bold;
	margin:0 0 15px;
	padding:3px 0 5px;
}

#templatemo_wrapper
{
	width:100%;
	background:url(https://img.webme.com/pic/h/hpbk-templateworld/517300.jpg) repeat-x;
	margin:0 auto;
}

#templatemo_container
{
	width:980px;
	margin:0 auto;
}

#templatemo_header_panel
{
	width:980px;
	height:170px;
	background:url(https://img.webme.com/pic/h/hpbk-templateworld/517301.jpg) no-repeat;
}

#templatemo_header_panel #logo
{
	float:left;
	width:265px;
	height:60px;
	background:none bottom no-repeat;
	margin:90px 0 0 20px;
}

#templatemo_top_panel
{
	clear:both;
	width:880px;
	height:285px;
	background:url(https://img.webme.com/pic/h/hpbk-templateworld/517303.png) center top no-repeat;
	padding:0 50px;
}

#templatemo_latest_project
{
	float:left;
	width:575px;
	padding:70px 30px 0 0;
}

#templatemo_latest_project .image_frame_01
{
	float:left;
	position:relative;
	width:295px;
	height:174px;
	margin-right:30px;
}

.image_frame_01 span
{
	position:absolute;
	top:0;
	left:0;
	width:294px;
	height:174px;
	background:url(https://img.webme.com/pic/h/hpbk-templateworld/517304.png) no-repeat;
}

.image_frame_01 img
{
	width:270px;
	height:150px;
	margin:12px;
}

#templatemo_latest_project #latest_project_content
{
	float:left;
	width:250px;
	color:#ffffff;
}

#latest_project_content p
{
	font-size:13px;
	margin-bottom:30px;
}

#templatemo_menu
{
	float:right;
	width:220px;
	margin:20px 0 0;
}

#templatemo_menu ul
{
	list-style:none;
	margin:0;
	padding:0;
}

#templatemo_menu ul li
{
	background:url(https://img.webme.com/pic/h/hpbk-templateworld/517305.jpg) bottom left repeat-x;
	margin:0 0 10px;
	padding:0 0 5px;
}

#templatemo_menu ul li a
{
	font-size:14px;
	font-weight:bold;
	letter-spacing:2px;
	text-decoration:none;
	color:#CCC;
	outline:none;
	padding:0;
}

#templatemo_menu li a:hover,#templatemo_menu li .current
{
	color:#ffd200;
	background:none left center no-repeat;
}

#templatemo_content
{
	clear:both;
	width:940px;
	background:#ffffff;
	border:1px solid #000;
	margin:30px 19px 0;
}

#templatemo_content #templatemo_content_left
{
	float:left;
	width:580px;
	padding:30px;
}

#templatemo_content_left .image_frame_02
{
	float:left;
	border:9px solid #999;
	margin:3px 20px 0 0;
}

.image_frame_02 img
{
	width:200px;
	height:120px;
	border:1px solid #ffffff;
}

#templatemo_content_left p
{
	padding-bottom:10px;
	text-align:justify;
}

#templatemo_content_left .content_left_two_column
{
	float:left;
	width:270px;
}

.content_left_two_column ul
{
	margin:10px 0 10px 30px;
	padding:0;
}

.content_left_two_column ul li
{
	list-style:decimal-leading-zero;
	margin:0;
	padding:0 0 10px;
}

#templatemo_content #templatemo_content_right
{
	float:right;
	width:240px;
	padding:30px;
}

.news_section .news_image
{
	float:left;
	width:80px;
	margin:5px 0 0;
}

.news_section .news_image img
{
	width:80px;
	height:80px;
}

.news_section .news_content
{
	width:150px;
	float:right;
}

.news_section .news_title
{
	color:#137dc0;
	font-weight:bold;
}

#templatemo_footer
{
	clear:both;
	width:980px;
	text-align:center;
	color:#ffffff;
	padding:20px 0;
}

#templatemo_footer a
{
	color:#ffd200;
	font-weight:normal;
}

td[height=102]
{
	position:absolute;
	left:50%;
	margin-left:-384px;
}

.content_right_section,.news_section
{
	clear:both;
}

#counter{
display:none;}

Und so geht´s

» Zuerst musst du dich in den Homepage-Baukasten einloggen.
» Dann klickst du auf "Design einstellen" und wählst dort das "CSS-Design - Nur für Profis geeignet" aus.
» Danach klickst du auf "Erweiterte Einstellungen" und fügst die Codes, die hier auf der Seite stehen, in die verschiedenen Felder "Text über dem Design", "Text unter dem Design" und "CSS-Code ohne Style Tags" ein.
» Danach speicherst du das Ganze ab und darfst dein neues Design bestaunen.
» Beachte bitte, dass deine Menüpunkte nicht automatisch übernommen werden. Du musst deine Menüpunkte manuell einfügen. Dies geschieht meistens im Code von "Text über dem Design" oder "Text unter dem Design".

Download des Original-Designs

» Auf folgender Seite kannst du das Paket des Designs kostenlos von TemplateMo.com herunterladen. Darin enthalten sind die Bilder des Designs, der unbearbeitete CSS-Design-Code und eine Live-Vorschau des Designs. Zum Download.

Du hast Fragen oder Probleme?

» Klappt etwas bei dir nicht? Oder du hast eine bestimmte Frage? Dann melde dich bitte in der "TemplateWorld Community". Nur dort kann ich dir schnell helfen. Wenn du deine Frage hier als Kommentar hinterlässt, kann ich dir leider keinen Support geben, da ich nicht alle Design-Seiten durchsuchen kann, wo dein Kommentar geschrieben wurde. Deshalb bitte ich um dein Verständnis.

Kommentare zu dieser Seite:

Kommentar von:

28.11.2011 um 19:00 (UTC)

hpbk-templateworld-test
Offline

Meine Güte, nu meckert doch nich wieder rum. Ich habe eure Kommentare zu diesem Design nur im Baukasten unter "Extras" Kommentare gelesen. Und dann das Problem: Dass ich nicht weiß, bei welchem Design eure Kommentare stehen. Deshalb gebt bitte in euren Kommentaren den NAMEN DES DESIGNS an, damit ich sofort weiß, auf welcher Seite der Kommentar steht und nicht, dass ich wieder stundenlang suchen muss, wo meine Besucher vielleicht etwas geschrieben haben könnten. Bei Fragen und Problemen gibt es extra ein Community-Board, das übersichtlich ist und in dem ich euch schnell helfen kann. Bitte benutzt dieses beim nächsten Mal! Ein Bild kannst du mit dem HTML-Code für ein Bild einfügen. <img src="http://www.die-adresse-deines-bildes.png" alt="" />

Wenn du dies in die Copyright-Zeile einfügst, hast du dort ein Bild daneben. Ich empfehle dies aber nicht, da es sicherlich nicht ganz so schön aussehen wird, wenn es ein größeres Bild sein soll.

Des Weiteren habe ich den Code überprüft und es funktioniert einwandfrei. Wo gibt es Probleme? Was wird nicht dargestellt? Habt ihr ein Screenshot davon? Nur so kann ich euch helfen. Bei weiteren Fragen das Forum benutzen! Danke!

Kommentar von:	14.11.2011 um 19:58 (UTC)
d4y Offline	1 Problem, einen Frage: Wie bekomme ich ein Bild oder Text links neben ''Free CSS Template'', wo auch ''Our latest Projects steht'' hin ?? Wieso sind bei mir im Hintergrund nicht diese grauen Streifen??

Kommentar von:	03.07.2011 um 10:19 (UTC)
(gesperrter Nutzer)	Das funktioniert alles nicht im geringsten. Von daher ist das hier alles für mich nur n billiger Fake. Sonst nichts weiter!

Kommentar von:	03.05.2011 um 10:10 (UTC)
cjaydesign Offline	Wenn ich die Codes einfüge passiert rein gar nix. ausser das die ganze schrift auf die linke seite ist. kann mir jemand da bei helfen?