liebe beginner im homepage-baukasten,
ich hab mir mal die mühe gemacht, das originale iceblue design etwas ab zu ändern. es ist nun verbreitert, zentriert und wird in nahezu allen browsern korrekt angezeigt.
So sieht es auf einen Widescreenmonitor aus, mit 1280 Auflösung, wenn der alte, bekannte Code des Verbreiterns, genutzt wird.
Durch Nutzung des neuen Codes, sieht es dann aber wie folgt aus:
der navibutton hat einen kleinen hovereffekt (punkt verschwindet beim drüberfahren mit der maus).
der header (so ähnlich nach gebastelt) ist auf 2000 pixel verbreitert. bei grösseren auflösungen wiederholt er sich aber nicht. bei kleineren auflösungen schrumpft er, aber die lichtspielerei links, ist immer noch zu sehen.
der contenttop ist durchgehend. normalerweise war er bei verbreiterung gestückelt, wiederholte sich also. gleiches gilt für das feld unter dem content. dieses untere feld hab ich verkleinert, damit es nicht an den boxen anstösst.
das zweite feld unter dem content hab ich entfernt, weil es sonst doppelt gemoppelt wäre.
die shoutys haben nun keinen footer mehr und statt dessen einen leerraum.
der hintergrund des designs ist farblich nun einheitlich und nicht mehr gestückelt.
Bei größeren Auflösungen ist zwischen der Navigation und dem Content nun keine Lücke mehr.
Bei längeren Inhalten ist, im Content rechts, kein Scrollbalken zusätzlich zu sehen (IE 8 Problem).
Abstand links und rechts im Content entfernt denn es verlängert den Code nur unnütz..
Die Naviüberschrift liegt nun liniar über den Menüschriften.
wenn also jemand das iceblue verbreitern und zentrieren möchte, dann unten den code einfach bei "text über dem design" bei iceblue, reinsetzen.
eure jetzigen inhalte bleiben selbstverständlich erhalten.
Und so wird der Code eingefügt: http://6p-iceblue.de.tl/Design-einf.ue.gen.htm
Code: <style type="text/css">
<!--
table.edit_main_table{width: 100% !important;}
table.edit_main_table, table[height="102"]{margin: 0 auto;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;
background-position:center;background-repeat:no-repeat; }
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 5% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 5% !important;}
td.edit_rechts_cbg{width:100%;}
td.headline2{visibility:hidden;}
td.edit_main_tr{height: 0px !important;}
td.edit_rechts_cbg{height: 0px !important;}
td.edit_rechts_bottom{height: 0px !Important;}
td.edit_navi_headbg{height: 0px !important;}
td.edit_content{background-image:url(http://img.webme.com/pic/6/6p-bilder/orgicebluecontent.png);background-color:#c0c0c0;border: 5px solid #777777;}
td.nav:hover{background-image: url(http://img.webme.com/pic/6/6p-bilder/orgicebluebutt2.png);background-color:#XXXXXX;width:185px;height: 33px;border: 0px solid #2D3738;}
td.nav{background-image: url(http://img.webme.com/pic/6/6p-bilder/orgicebluebutt1.png);background-color:#XXXXXX;width: 185px;height: 33px;border: 0px solid #2D3738;}
td.edit_below_nav img{visibility: hidden;}
td.edit_below_nav{background-image: url(); background-position: center top;background-repeat: no-repeat;}
td.edit_rechts_cbg{background-image:url();background-color:#XXXXXX;border: 0px solid #ffffff;}
body{background-image:url(http://img.webme.com/pic/6/6p-bilder/orgicebluebody.png);background-color:#16242A;}
body {background-attachment:fixed;border: 0px solid #c0c0c0;}
td.edit_rechts_sbg{background-image:url();background-color:#XXXXXX;border: 0px solid #ffffff;}
td.edit_rechts_bottom{background-image:url();background-color:#XXXXXX;border: 0px solid #ffffff;}
td.shouty, td.shouty2, td.shouty3, td.shouty4, td.shouty5{background-image:url(http://img.webme.com/pic/6/6p-bilder/orgiceblueshouty.png);
background-repeat:repeat; background-color:#XXXXXX;font-family: arial;font-size: 12px; color:#000000;border: 0px solid #2D3738;}
td.edit_content_top,td.edit_content_top:hover{background-image:url(http://img.webme.com/pic/6/6p-bilder/orgicebluecontop.png);height: 30px;background-color:#XXXXXX;border: 0px solid #c0c0c0;}
td.edit_navi_headbg{background-image:url(URL);background-color:#XXXXXX;}
td.nav_heading{background-image:url(http://img.webme.com/pic/6/6p-bilder/orgicebluecontop.png);height: 30px;background-color:#XXXXXX;border: 0px solid #c0c0c0;}
td.sidebar_heading{background-image:url(http://img.webme.com/pic/6/6p-bilder/orgicebluecontop.png);height: 30px;background-color:#XXXXXX;border: 0px solid #c0c0c0;}
td.edit_rb_footer{background-image:url();height: 10px;background-color:#XXXXXX;border: 0px solid #c0c0c0;}
td.edit_content_bottom{display:none;}
td.edit_content_bottom2{background-image:url(http://img.webme.com/pic/6/6p-bilder/orgicebluecontop.png);height: 30px;background-color:#XXXXXX;border: 0px
solid #c0c0c0;background-position: center top;background-repeat: repeat;border-left: 5px solid #16242A;border-right: 5px solid #16242A;}
td.nav_heading{font-family: arial;font-size: 12px;color: #ffffff;padding-left:26px;text-align: left;}
td.nav a{font-family: arial;font-size: 12px;color: #000000;text-decoration: none}
td.sidebar_heading{font-family: arial;font-size: 12px;color: #ffffff; text-align: left;}
td.nav a:hover{font-family: arial;font-size: 12px;color: #800000;text-decoration: none}
tr.checked_menu td a{font-family: arial;font-size: 12px;color: #800000;text-decoration: none}
td.edit_content_main div{overflow: hidden!important;}
td.edit_header_full{background-image:url(http://img.webme.com/pic/6/6p-bilder/orgiceblueheader2000.png);background-color:#XXXXXX;width:
2000; height: 128px;background-repeat: no-repeat;border: 0px solid #2D3738;}
/* Linkfarben + Größen auf Seiten */
a:link {
color:#800000;
font-size:13px;
font-family:arial, Times New Roman, Helvetica, Verdana, Comic Sans MS
, Courier New, Tahoma;
text-decoration:none; }
/*Hover-Effekt bei Links*/
a:hover{
color:#800000;
font-size:13px;
font-family:arial, Times New Roman, Helvetica, Verdana, Comic Sans MS
, Courier New, Tahoma;
text-decoration:none;}
/* besuchte Links */
a:visited {
color:#800000;
font-size:13px;
font-family:arial, Times New Roman, Helvetica, Verdana, Comic Sans MS
, Courier New, Tahoma;
text-decoration:none;}
-->
</style>
Hier ein paar Tips zum ändern des Designs:
Designbreite ändern:
table.edit_main_table{width: 100% !important;} Ihr könnt statt dessen 80% oder 90% nehmen. Das schmälert das Design. Du findest das ganz oben im Code.
Haeder ändern (td.edit_header_full)
Ich habe hier im Code ein Headerbild in Grösse 2000 x 128 Pixel erstellt . Solltet ihr bedenken haben, weil es ja leute gibt, die 1920er auflösung haben, dann bastelt halt ein header mit 1920 breite. ihr müsst das unten im code des headers anpassen. Man kann im Header recht variabel sein und kann nicht für jeden eine perfekte Lösung anbieten. Am besten wäre es, wenn man sich einen Header bastelt, oder in diesen Maßen anfertigen lässt . Sollte die Höhe anders sein, dann die neue Höhe (width) im Code eingeben. Auf der sicheren Seite seit ihr wenn ihr ein Bild habt, dass nach links und rechts ruhig beschnitten sein darf. Am besten wäre hierbei, wenn der Schriftzug dann mittig ist und etwa 930 Pixel breite hat. Achtet darauf das der Schriftzug dann nicht zu breit wird, er würde sonst bei kleineren Auflösungen abgeschnitten sein.
Vorteil bei dem Header wäre dann, dass der Haeder ab einer Auflösung von 1024 px auch korrekt auf sämtlichen Monitoren und Auflösungen bis 1920 Breite angezeigt wird (der Abschluss links und rechts). Am Ende Des Header-codes befindet sich ein Border (Rahmen) dieser ist nicht zwingend erforderlich und ich hab ihn auf Null gesetzt.
Noch ein Tip hierzu: Wenn Ihr einen einfarbigen Haeder benutzt, dann kann der Header im Code auch kleiner gemacht werden. Ihr könnt ihn dann durch Ändern des Backgroundes automatisch verlängern. dazu müsst Ihr im Code das #XXXXXX mit der Hintergrundfarbe ersetzen. Dadurch wird der Haeder in jeder Breite automatisch verlängert und die Auflösung wäre dann egal.
Homepagename im Header
Um den eventuell störenden Homepagenamen, der an sich aus zu sehen ist, ab zu schalten, das in dem Code noch einfach dazwischen setzen:
Code: td.headline{visibility:hidden;}
Boxen verbreitern
table#sidebar_heading_1,table#sidebar_heading_2,table#sidebar_heading_3,table#sidebar_heading_4,table#sidebar_heading_5{width: 185px;}
Dort könnt ihr die rechten Boxen verbreitern. Allerdings muss auch hier wieder ein ansatzfreies Bild für das Feld über den Boxen genommen werden.
Content (Textfeld)
Der Content ist selbstverständlich auch zu ändern. Aber macht Euch die Mühe, statt mit einem Farbcode zu arbeiten, ein einfarbiges kleines Bild zu nehmen. eine Grösse von 32x32 reicht völlig aus, denn das Bild wiederholt sich automatisch. Sinn dabei ist, das manche Browser nicht mit den Farbcode klarkommen. Sicher, es sind nur wenige Browser, aber wenn man das vermeiden kann ist es doch super. Erstellt also dieses einfarbige Bild, ladet es bei eigene Bilder hoch und nutzt dann diese URL und ändert sie im Code.
Eigentlicher Button und Hoverbutton
Wir benötigen davon 2 Stück. Die Breite der Buttons sollte, um Wiederholungen zu vermeiden, 185 Pixel haben. Die Höhe ist variabel, muss dann im Code aber angepasst werden. Im Originalen ist die Höhe 33 Pixel. Um Besucher nicht all zu nervös zu machen, würde ich persönlich auf grosses Geblinke verzichten. Der erste Button der benötigt wird, ist ein normaler Button und der Zweite sollte ähnlich sein und löst den Hovereffekt aus. Diese Effekt ist dazu da, um beim rüberfahren mit dem Mauszeiger ein Wechsel des Buttons anzuzeigen. Wer keinen Hovereffekt möchte, der nimmt für den Hover einfach das gleiche Bild.
Body
Der Body ist der Hintergrund des Designs. Um den zu ändern, müsst Ihr auch hier nur die Url eines anderen Bildes einsetzen. Ihr könntet Euch zum Beispiel von http://www.grsites.com/archive/textures einen Hintergrund runter laden. Mit dem Klick auf das Vorschaubild könnt Ihr Euch ansehen, wie der jeweilige Hintergrund aussieht. Nimmt aber nicht von dort die URL des Bildes, sondern ladet es bei eigene Bilder hoch und nutzt diese URL.
Shoutys
Die Shoutys sind in dem Design die rechten Boxen, von denen es 5 Stück gibt. Diese werden nur aktiviert, wenn sich auch Inhalt darin befindet. Zum Inhalt gehört auch ein Leerzeichen. Sollte also die Box ohne Inhalt an sein, müsst Ihr prüfen ob sich ein Leerzeichen darin befindet. Löscht es raus und speichert. Dann sollte die Box wieder unsichtbar sein.
Auch hier solltet Ihr mit einem Bild arbeiten. selbst wenn es einfarbig ist, denn manche Browser erkennen hier wiederum einen Farbcode nicht.
Achtet darauf, dass das Bild, welches Ihr benutzt, keine sichtbare Trennungen enthält, denn das Bild wiederholt sich automatisch.
Im Shoutycode ist die Schriftfarbe der Boxen auf schwarz gestellt. Solltet Ihr eine andere Farbe wünschen, dann einfach aus #000000 (schwarz) eine andere Farbe machen. Die Nummer der Farbtöne könnt Ihr zum Beispiel hier finden: http://www.farb-tabelle.de/de/farbtabelle.htm
Entnehmt von dort den Hex-Code, aber achtet darauf, dass im Code das # nicht gelöscht wird.
Und hier der Code eines Design ohne rechte Boxen
es steht natürlich zur freien verfügung. die buttons im code haben eine grösse von 185 x 25. solltet ihr höhere buttons nehmen, dann ändert es auch im code.
und hier der gesamte code für das iceblue ohne rechte Boxen:
Code: <style type="text/css">
<!--
table.edit_main_table{width: 90% !important;}
table.edit_main_table, table[height="102"]{margin: 0 auto;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;}
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 5% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 5% !important;position: absolute;left: -300px;}
td.edit_rechts_cbg{width:100%;}
td.shouty{visibility: hidden;width: 0px;}
td.edit_rechts_sbg{visibility:hidden;}
td.sidebar_heading{visibility: hidden;}
td.nav_heading{display: none}
td.headline2{visibility:hidden;}
td.edit_main_tr{height: 0px !important;}
td.edit_rechts_cbg{height: 0px !important;}
td.edit_rechts_bottom{height: 0px !Important;}
td.edit_navi_headbg{height: 0px !important;}
td.nav:hover{background-image: url(http://img.webme.com/pic/6/6p-bilder/simpelgrau.png);background-color:#c0c0c0;width:185px;height:25px;border-bottom: 1px solid #5E100C; border-right: 1px solid #5E100C;}
td.nav{background-image: url();background-color:#cccccc;width:185px;height:25px;border-bottom: 1px solid #5E100C; border-right: 1px solid #5E100C;}
tr.checked_menu td{background-image: url(http://img.webme.com/pic/6/6p-bilder/simpelgrau.png);background-color:#c0c0c0;width:185px;height:25px;border-bottom: 1px solid #5E100C; border-right: 1px solid #5E100C;}
td.edit_below_nav img{visibility: hidden;}
td.edit_below_nav{background-image: url();
background-position: center top;background-repeat: no-repeat;}
td.edit_content{background-image:url();background-color:#FFDDAA;border: 3px solid #ffffff;}
td.edit_content_top{display: none}
td.edit_rechts_cbg{background-image: url();}
td.edit_navi_headbg{background-image:url();background-color:#XXXXXX;border: 0px solid #ffffff;}
td.edit_rechts_sbg{background-image:url();background-color:#XXXXXX;border: 0px solid #ffffff;}
td.edit_rechts_bottom{background-image:url();background-color:#XXXXXX;border: 0px solid #ffffff;}
body {background-image:url();background-color:#5E100C;}
body {background-attachment:fixed;border: 0px solid #5E100C;}
td.edit_rb_footer{background-image:url();height: 20px;background-color:#5E100C;border: 0px solid #5E100C;}
td.edit_content_bottom2{background-image:url(URL);background-color:#XXXXXX;border: 0px solid #ffffff;}
td.edit_content_bottom{display: none}
td.nav a{font-family: arial;font-size: 12px;color: #5E100C;text-decoration: none}
td.nav a:hover{font-family: arial;font-size: 12px;color: #5E100C;text-decoration: none}
tr.checked_menu td a{font-family: arial;font-size: 12px;color: #5E100C;text-decoration: none}
td.edit_content_main div{overflow: hidden!important;}
td.edit_header_full{background-image:url();background-color:#80c0c0;width:
930; height: 125px;background-position: center top;background-repeat: no-repeat;border-left: 1px solid #ffffff; border-rightt: 1px solid #ffffff;border-top: 1px solid #ffffff;}
/* Textgröße + Textfarben Seiteninhalte */
td, div {font-size: 13px;font-family: arial, Times New Roman, Helvetica, Verdana, Comic Sans MS
, Courier New, Tahoma ;color: #000000; }
/* Linkfarben + Größen auf Seiten */
a:link {
color:#800000;
font-size:13px;
font-family:arial, Times New Roman, Helvetica, Verdana, Comic Sans MS
, Courier New, Tahoma;
text-decoration:none; }
/*Hover-Effekt bei Links*/
a:hover{
color:#800000;
font-size:13px;
font-family:arial, Times New Roman, Helvetica, Verdana, Comic Sans MS
, Courier New, Tahoma;
text-decoration:none;}
/* besuchte Links */
a:visited {
color:#800000;
font-size:13px;
font-family:arial, Times New Roman, Helvetica, Verdana, Comic Sans MS
, Courier New, Tahoma;
text-decoration:none;}
--></style>
ihr könnt die breite des designs ganz leicht ändern, ihr müsst im code, oben, nur die eine sache ändern :
Code: table.edit_main_table{width: 90% !important;}
um es schmaler zu machen setzt es auf 80% und zum weiteren verbreitern auf 100%.
gruss gringo ______________ Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell
Zuletzt bearbeitet von 6p-iceblue am 28.01.2012, 20:15, insgesamt 63-mal bearbeitet
|
.
